38 Artikel über die Errichtung der abgerundeten Ecken auf den Seiten mit CSS
Oft mit der Notwendigkeit konfrontiert, eine Runde kantige Blöcke zu erstellen. Stellen Sie eine Frage Wie kann man das Problem zu lösen, machte ich eine Auswahl interessanter Artikel und Lektionen zum Thema.
Hier ist eine Übersicht von 38 Artikeln, aufgeteilt in 4 Kategorien nach den Methoden der Umsetzung.
Ohne die Verwendung von leeren Tags
Einfach, semantisch korrekte CSS - Block mit sauberen Code
Es schafft einen Block und fügt die Fähigkeit, einen Block-Header zu erstellen. Es erstreckt sich über die Breite und Höhe. Obwohl das Beispiel eines Schattens, ist eine transluzente Schatten Implementierung nicht zur Verfügung gestellt.
Abgerundete Ecken mit CSS
Sehr schönes Aussehen, einfache Implementierung, eine kleine Menge von HTML-Elementen. Auf der anderen Seite kann vielleicht nur für jede der Ecken der Anwesenheit von 4 Bildern zugeschrieben werden. Aber leider funktioniert nicht im Internet Explorer.
CSS Teaser Block
Es bietet für die Umsetzung von sowohl Ein- und Zwei kartinochnogo Verfahren. Eine kleine Menge von HTML-Elemente. Sehr nützlich Teasern für die Erstellung.
Links zu den neuesten Nachrichten
Sehr interessante Lösung auf ungeordnete Liste basiert. Der Vorteil ist eine einfache Implementierung und eine kleine Menge von HTML-Elemente. Pleasant-Design mit der Funktion der Farbe ändert, wenn Sie die Maus bewegen (aber das Vergnügen in IE nicht funktioniert).
CSS und abgerundete Ecken: Borders mit Bögen
Der unbestreitbare Nachteil ist das Vorhandensein von 8 divs zu implementieren. Auch in dem Artikel ist eine Beschreibung einer weiteren Methode, die eine 2-mal kleiner Divs verwendet, aber der Block ist mit Farbe gefüllt.
Berechtigt oberen Ecken
Es implementiert, die auf der Grundlage von Listen von Definitionen. Genug schönes Design, die Möglichkeit, einen Titel zu erstellen. Keine Unterstützung für die Breite ändert. Aber es ist eine praktische Möglichkeit, schnell die Farbe des Headers ändern und den Block selbst.
Abgerundete oder Block - Design mit CSS und XHTML
Wie in allen vorherigen Verfahren nach Definitionsliste implementiert. Der Artikel betrachtet zwei Möglichkeiten der Umsetzung. Gerade die Möglichkeit, die Breite zu dehnen.
Gummi - Einheit mit leicht austauschbaren Winkel und der Oberfläche
Nachteilig bei diesem Verfahren ist auch die große Anzahl von Divs (5) 4 und Bilddateien. Aber es gibt interessante Beispiele für die Umsetzung.
Die abgerundeten Ecken eines Grenz
Es braucht nicht eine Lektion abgeschlossen haben, aber es zeigt das Prinzip eines einzelnen Bildes und eine gemeinsame Grenze mit.
Um die Ecke in CSS
Genug Spaß Lektion. Sein Nachteil ist vielleicht die relativ große Menge von HTML-Elemente, und die Anwesenheit von 4 Bildern für jede der Ecken.
Erstellen von benutzerdefinierten Ecken und Ränder
Gebraucht 4-Dateien mit Bildern (maximale Breite des Blocks auf die Breite des Bildes hängt). Allerdings sehr detailliert Lektion.
"Bulletproof" runden Ecken
Sehr ausführliche Artikel mit vielen Beispielen. Aber ziemlich komplexe Implementierung. Neben vier Bildern mit.
Malerei Schatten und Rahmen - Design - Elemente
Artikel von Vladimir Tokmakova. Eine sehr komplexe Umsetzung, aber ein Vorteil ist natürlich die Möglichkeit transluzenten Schatten entsteht. Artikel in russischer Sprache.
Rund um die Ecken mit einer festen Breite
Ein interessantes Beispiel für die Verwendung. Aber minus die feste Breite des Prozesses. Plus - sehr einfache Implementierung.
CSS Hinter Einheit mit 4 beliebigen Winkeln
Es ist eine gute Lektion. Die Fähigkeit, Schatten zu werfen. Plus - die Fähigkeit, Schlagzeilen zu erstellen.
Machen Sie abgerundete Ecken mit Hilfe von: before und: after
Der Artikel wurde bereits Habré beschrieben worden. Sehr einfache Implementierung, aber nicht in IE alle Beispiele in diesem Artikel zu arbeiten. 4 Verwenden Sie die Datei mit Bildern zum Verkauf. Artikel in russischer Sprache.
Erstellen von benutzerdefinierten Ecken und Ränder. Teil II
Wir beschreiben ein Verfahren, bei dem der Hintergrund nicht fest und Gradient ist. Gebraucht 4 Bilder.
Runde Ecken in DIVah
Wir beschreiben 3 Wege zu implementieren. Blätter, Diven und Diven ohne Bilder. Die letzte Option ist nicht sehr gut, weil es eine Menge von leeren Tags verwendet.
Abgerundete Ecken und Blöcke mit Schatten
Vielleicht nicht ein sehr guter Weg, denn es verwendet ein 5 Bildern. Aber wie können Sie Schatten erstellen. Plus - die ausschließliche Verwendung der beiden HTML-Element.
Interessante Layout
Artikel Habré, in dem ihre Lösungen anbieten zu können habrazhiteli versuchen. Artikel in russischer Sprache.
Verwenden Sie ein leeres Tag
Noch mehr runden Ecken mit CSS
Angenehm an der Außen Ausrüstung, aber es ist schade, dass es keine Implementierung von PNG unter IE ist.
CSS Gummi runden Ecken
Es verwendet zwei leeren Tag auf der Ober- und Unterseite des Gerätes. Auf der anderen Seite für die Umsetzung von 6 Bildern.
CSS: Clever Winkel
Es verwendet ein Rohling für die obere und zwei für den Boden. Es ist eine schöne Erkenntnis.
Wie Stretching für divy Breite mit runden Kanten
Es scheint ein PNG zu sein, aber wieder in IE funktioniert nicht. Wie die Profis können eine Lektion auf die Zeichnung runden Kanten genannt werden
Stretched runden Ecken
Die meisten ausführlichen Artikel mit vielen Bildern. Aber jeder Winkel diva, divas Plus für den Inhalt.
Abgerundet Ecken ohne Bilder mit
Bezkartinochnogo Verfahren abgerundeten Ecken zu schaffen. Aber eine Menge leerer Elemente
<B>(ein ähnliches Verfahren wie GMail - Blöcke).
verwendet JavaScript
Präsentation DomCorners
In dem Artikel gibt es einige Variationen von der Anzahl der Bilder verwendet. Weniger Verwendung von leeren Tags.
Transparente beliebigen Winkeln und Grenzen. Version 2
Ein schönes Beispiel für die Verwendung. Schönes Design. Dropping scheinenden Schatten, aber Schatten im IE funktionieren nicht.
Nifty Ecken mit Anti-Aliasing
In gewisser Weise ist es das Skript Nifty Corners hinzuzufügen. Sie keine Bilder verwenden. Sie können den Krümmungsradius als der X-Achse zu ändern und auf dem Y.
Runde Ecken
Sehr einfache Implementierung, nur ein Element div. Auch in den Kommentaren vielen Extras.
http://www.curvycorners.net
Eine separate Website, die sich um die Ecken zu runden. Schöne Anwendungsbeispiele. Eine sehr einfache Implementierung und viele Anpassungsmöglichkeiten.
Nifty Corners Cube
Sehr beliebt Skript, das Sie runde Ecken ohne Bilder erstellen können. So viele Ausführungsformen.
RUZEE.Borders - abgerundete Ecken mit Javascript
Eine ganze Reihe von Möglichkeiten. Nur auf der Grundlage der Nifty. Die Fähigkeit, einen Schatten zu erstellen, aber es funktioniert in IE nicht funktionieren.
jQuery Rundung
Vielleicht die größte Auswahl an allen möglichen Winkeln. Die geringe Menge an HTML-Elementen zu implementieren.
Generatoren runden Kanten
RoundedCornr
Eine große Anzahl von Möglichkeiten. 4 erzeugt, welche Arten von Blöcken mit einer Taste. Der einzige negative Punkt in Gegenwart von leeren Tags in den generierten Code.
Spiffy Corners
Sehr einfache Generator. Aber erzeugt eine sehr große Anzahl von Elementen
<B>.
Spanky Corners 1.1
Einfache Generator mit guten
HTML-Code sowie erzeugt eine separateCSS-Datei für den Internet Explorer.
Spiffy Box
Es erzeugt eine
PNG-Bild mit den angegebenen Parametern. Die Vorteile sind die einfacheHTML-Codes. Auch in dem Artikel gibt es einen Link auf die Lektion, in dem der erzeugte Code wird erstellt.
Kommentare
im Auge kommentierte halten , dass der Inhalt und der Ton Ihrer Nachrichten , die Gefühle von echten Menschen verletzen können, Respekt und Toleranz gegenüber seinen Gesprächspartnern, auch wenn Sie Ihr Verhalten in Bezug auf die Meinungsfreiheit und die Anonymität des Internets, ändert ihre Meinung nicht teilen, nicht nur virtuell, sondern realen Welt. Alle Kommentare werden aus dem Index, Spam - Kontrolle versteckt.