This page has been robot translated, sorry for typos if any. Original content here.

38 Artikel zum Erstellen von abgerundeten Ecken auf Websites mit CSS

38 Artikel zum Erstellen von abgerundeten Ecken auf Websites

Oft mit der Notwendigkeit konfrontiert, Blöcke mit runden Kanten zu erstellen. Als ich mich fragte, wie ich das Problem lösen könnte, habe ich eine Auswahl interessanter Artikel und Lektionen zu diesem Thema zusammengestellt.

Hier finden Sie eine Übersicht über 38 Artikel, die anhand von Implementierungsmethoden in 4 Kategorien unterteilt sind.


Ohne die Verwendung von leeren Tags

Einfacher, semantisch korrekter CSS-Block mit sauberem Code

Erstellt einen Block und fügt die Möglichkeit hinzu, einen Blockkopf zu erstellen. Dehnt sich in Breite und Höhe aus. Trotz des Schattens im Beispiel ist die Implementierung eines transluzenten Schattens nicht vorgesehen.
Einfacher, semantisch korrekter CSS-Block mit sauberem Code


Runde Ecken in CSS

Sehr schönes Aussehen, einfache Implementierung, eine kleine Menge von HTML-Elementen. Durch Nachteile kann vielleicht nur das Vorhandensein von 4 Bildern für jede der Ecken zugeordnet werden. Aber leider funktioniert im IE nicht.
Runde Ecken in CSS


CSS Teaserblock

Die Implementierung der Ein- und Zwei-Bild-Methode ist vorgesehen. Eine kleine Anzahl von HTML-Elementen. Sehr praktisch zum Erstellen von Teasern.
CSS Teaserblock


Links zu den neuesten Nachrichten

Sehr interessante Entscheidung basierend auf einer ungeordneten Liste. Ein Plus wäre eine einfache Implementierung und eine kleine Menge an HTML-Elementen. Schönes Design mit der Funktion, die Farbe zu ändern, wenn Sie die Maus bewegen (aber dieses Vergnügen funktioniert nicht im IE).
Links zu den neuesten Nachrichten


CSS und runde Ecken: Grenzen mit Bögen

Der unbestreitbare Nachteil ist die Anwesenheit von 8 Divs zum Verkauf. Auch im Artikel gibt es eine Beschreibung einer anderen Methode, bei der 2 mal weniger divs verwendet werden, aber der Block ist mit Farbe gefüllt.
CSS und runde Ecken: Grenzen mit Bögen


Die oberen Ecken

Implementiert basierend auf Definitionslisten. Ziemlich schönes Design, die Fähigkeit, einen Titel zu erstellen. Es gibt keine Unterstützung für die Änderung der Breite. Aber es gibt eine bequeme Möglichkeit, die Farbe der Header und des Blocks selbst schnell zu ändern.
Die oberen Ecken


Erstellen eines abgerundeten Blocks oder Designs mit CSS und XHTML

Wie bei der vorherigen Methode wird alles basierend auf der Liste der Definitionen implementiert. Der Artikel beschreibt zwei Möglichkeiten zur Implementierung. Auch gab es die Möglichkeit Dehnungsbreiten.
Erstellen eines abgerundeten Blocks oder Designs mit CSS und XHTML


Gummiblock mit leicht einstellbaren Ecken und Oberflächen

Der Nachteil dieser Methode ist auch die große Anzahl von divs (5) und 4 Bilddateien. Aber es gibt interessante Beispiele für die Implementierung.
Gummiblock mit leicht einstellbaren Ecken und Oberflächen


Border ist abgerundete Ecken

Nicht eine komplette Lektion, aber zeigt das Prinzip der Verwendung einer einzelnen Grenze und Bilder.
Border ist abgerundete Ecken


Runde Ecken in CSS

Genug nette Lektion. Sein Nachteil ist vielleicht eine relativ große Anzahl von HTML-Elementen und das Vorhandensein von 4 Bildern für jede der Ecken.
Runde Ecken in CSS


Erstellen von beliebigen Ecken und Kanten

Es werden 4 Dateien mit Bildern verwendet (die maximale Blockbreite hängt von der Breite des Bildes ab). Aber eine sehr detaillierte Lektion.
Erstellen von beliebigen Ecken und Kanten


"Kugelsichere" runde Ecken

Sehr detaillierter Artikel mit vielen Beispielen. Aber eine ziemlich komplizierte Implementierung. Außerdem werden 4 Bilder verwendet.
Kugelsichere runde Ecken


Schatten und Grenzen zeichnen

Artikel von Vladimir Tokmakov. Eine sehr komplizierte Implementierung, aber die Profis sind natürlich die Möglichkeit, durchscheinende Schatten zu erzeugen. Artikel auf Russisch.
Schatten und Grenzen zeichnen


Runde Ecken mit fester Breite

Ein interessantes Anwendungsbeispiel. Aber ein Minus in der festen Breite dieser Methode. Plus ist eine sehr einfache Implementierung.
Runde Ecken mit fester Breite


CSS-Streckblock mit 4 beliebigen Winkeln

Es ist eine gute Lektion. Fähigkeit, Schatten zu werfen. Plus - die Möglichkeit, Header zu erstellen.
CSS-Streckblock mit 4 beliebigen Winkeln


Machen Sie abgerundete Ecken mit Pseudoelementen: vorher und nachher

Artikel wurde bereits auf Habré beschrieben. Eine sehr einfache Implementierung, aber nicht alle Beispiele in diesem Artikel funktionieren im IE. Benutzte 4 Dateien mit Bildern für die Implementierung. Artikel auf Russisch.
Machen Sie abgerundete Ecken mit Pseudoelementen: vorher und nachher


Erstelle beliebige Ecken und Kanten. Teil II

Es wird eine Methode beschrieben, bei der der Hintergrund nicht fest, sondern gradient ist. 4 Bilder werden verwendet.
Erstelle beliebige Ecken und Kanten. Teil II


Runde Ecken in DIVs

Beschrieb 3 Möglichkeiten zur Implementierung. Tische, Divas und Diven ohne Bilder. Die letzte Option ist nicht sehr gut, da viele leere Tags verwendet werden.
Runde Ecken in DIVs


Runde Ecken und Blöcke mit Schatten

Vielleicht kein sehr guter Weg, weil es 5 Bilder verwendet. Aber es scheint, dass die Möglichkeit geschaffen wird, einen Schatten zu schaffen. Plus - verwenden Sie nur zwei HTML-Elemente.
Runde Ecken und Blöcke mit Schatten


Unterhaltsames Layout

Ein Artikel über Habré, in dem Habrazhiteli versuchen, ihre Lösungen anzubieten. Artikel auf Russisch.
Unterhaltsames Layout


Leere Tags verwenden

Mehr runde Ecken mit CSS

Angenehm auf das Aussehen der Technik, aber es ist schade, dass es keine Implementierung von PNG unter IE gibt.
Mehr runde Ecken mit CSS


CSS-Gummi runde Ecken

Benutzt zwei leere Tags am oberen und unteren Ende des Blocks. Durch die Nachteile bezieht sich auf 6 Bilder für die Umsetzung.
CSS-Gummi runde Ecken


CSS: Intelligente Ecken

Verwendet einen leeren für den oberen und zwei für den unteren. Es ist eine nette Implementierung.
CSS: Intelligente Ecken


Wie man dehnbare breite Diven mit runden Kanten macht

Es scheint mit PNG zu sein, aber wieder in IE funktioniert nicht. Als ein Plus können Sie eine Lektion zum Zeichnen von runden Kanten aufrufen. :)
Wie man dehnbare breite Diven mit runden Kanten macht


Gestreckte Ecken

Großer ausführlicher Artikel mit vielen Bildern. Aber an jeder Ecke der Diva, plus div für den Inhalt.
Gestreckte Ecken


Ecken runden ohne Bilder zu verwenden

Eine Möglichkeit, nicht abgerundete Ecken zu erstellen. Aber es gibt eine Menge leerer <B> -Elemente (eine Methode, die GMail-Blöcken ähnlich ist).
Ecken runden ohne Bilder zu verwenden


Verwenden von Javascript

DomCorners Blick

Der Artikel hat verschiedene Variationen zum Thema der Anzahl der verwendeten Bilder. Negative Verwendung von leeren Tags.
DomCorners Blick


Transparente willkürliche Winkel und Grenzen. Version 2

Ein schönes Anwendungsbeispiel. Schönes Design. Transparente Schatten lassen sich entfernen, aber Schatten funktionieren im IE nicht.
Transparente willkürliche Winkel und Grenzen. Version 2


Nette Glättungswinkel

Auf seine Art ist die Ergänzung zu dem Skript Nifty Corners. Verwendet keine Bilder. Sie können den Rundungsradius sowohl auf der X-Achse als auch auf dem Y ändern.
Geschickte Winkel ohne Glättung


Runde Ecken

Sehr einfache Implementierung, nur ein div. Auch in den Kommentaren eine Menge Add-ons.
Runde Ecken


http://www.curvycorners.net

Eine separate Seite für runde Ecken. Schöne Anwendungsbeispiele. Sehr einfache Implementierung und viele Anpassungsoptionen.
www.curvycorners.net


Geschickte Ecken Würfel

Ein sehr beliebtes Skript, mit dem Sie runde Ecken ohne Bilder erstellen können. Viele Optionen für die Implementierung.
Geschickte Ecken Würfel


RUZEE.Borders - runde Ecken mit Javascript

Ziemlich viele Möglichkeiten. Auch basierend auf Nifty. Die Fähigkeit, einen Schatten zu erstellen, funktioniert aber nicht in IE.
RUZEE.Borders - runde Ecken mit Javascript


jQuery-Rundung

Vielleicht die größte Auswahl an verschiedenen Winkeln. Eine kleine Anzahl von zu implementierenden HTML-Elementen.
jQuery-Rundung


Runde Kantengeneratoren

AbgerundeteCornr

Eine große Anzahl von Möglichkeiten. Erzeugt 4 Arten von Blöcken, einschließlich Schaltflächen. Der einzige Nachteil ist das Vorhandensein von leeren Tags im generierten Code.
AbgerundeteCornr


Spitzige Ecken

Sehr einfacher Generator. Aber es erzeugt eine sehr große Anzahl von <B> -Elementen.
Spitzige Ecken


Spanky Corners 1.1

Ein einfacher Generator mit guten HTML-Codes , plus generiert eine separate CSS-Datei für IE.
Spanky Corners 1.1


Spiffy Box

Erzeugt ein PNG-Bild mit den angegebenen Parametern. Die Vorteile umfassen einfachen HTML-Code . Auch im Artikel gibt es einen Link zu der Lektion, die den generierten Code generiert hat.
Spiffy Box