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

Sie müssen oft Blöcke mit runden Kanten erstellen. Auf die Frage, wie man die Aufgabe überhaupt lösen könnte, habe ich eine Auswahl interessanter Artikel und Lektionen zu diesem Thema zusammengestellt.

Hier finden Sie einen Überblick über 38 Artikel, die nach Implementierungsmethoden in 4 Kategorien unterteilt sind.


Ohne Verwendung leerer Tags

Ein einfacher, semantisch korrekter CSS-Block mit reinem Code

Erstellt einen Block und fügt die Möglichkeit hinzu, einen Blockkopf zu erstellen. Es variiert in Breite und Höhe. Trotz des Schattens des Beispiels ist die Implementierung eines transluzenten Schattens nicht vorgesehen.
Ein einfacher, semantisch korrekter CSS-Block mit reinem Code


Runde Ecken in CSS

Sehr schönes Aussehen, einfache Implementierung, eine kleine Menge von HTML-Elementen. Durch die Nachteile können Sie vielleicht nur 4 Bilder für jede Ecke hinzufügen. Aber leider funktioniert im IE nicht.
Runde Ecken in CSS


CSS Teaserblock

Es gibt eine Implementierung der Ein- und Zwei-Bild-Methode. Eine kleine Anzahl von HTML-Elementen. Sehr praktisch zum Erstellen von Teasern.
CSS Teaserblock


Links zu den neuesten Nachrichten

Sehr interessante Lösung basierend auf einer ungeordneten Liste. Das Plus ist eine einfache Implementierung und eine kleine Anzahl von HTML-Elementen. Schönes Design mit der Farbwechselfunktion beim Schweben über der Maus (aber diese Annehmlichkeit funktioniert nicht im IE).
Links zu den neuesten Nachrichten


CSS und runde Ecken: Grenzen mit Bögen

Der unbestreitbare Nachteil ist das Vorhandensein von 8 Divs für die Implementierung. Auch in dem Artikel gibt es eine Beschreibung einer anderen Methode, die 2 mal weniger Divs verwendet, aber der Block ist mit Farbe gefüllt.
CSS und runde Ecken: Grenzen mit Bögen


Top-Winkel von oben

Implementiert auf der Grundlage von Definitionslisten. Genug schönes Design, die Möglichkeit, einen Header 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.
Top-Winkel von oben


Erstellen Sie einen abgerundeten Block oder ein Design mit CSS und XHTML

Wie bei der vorherigen Methode wird alles auf der Grundlage einer Liste von Definitionen implementiert. Zwei Methoden der Implementierung werden in dem Artikel berücksichtigt. Auch gab es eine Möglichkeit, Breite zu strecken.
Erstellen Sie einen abgerundeten Block oder ein Design mit CSS und XHTML


Gummiblock mit leicht variablen Winkeln und Oberfläche

Minus in dieser Methode ist auch eine große Anzahl von divs (5) und 4 Bilddateien. Aber es gibt interessante Beispiele für die Implementierung.
Gummiblock mit leicht variablen Winkeln und Oberfläche


Abgerundete Border-Winkel

Es ist keine vollständige Lektion, aber es zeigt das Prinzip der Verwendung eines einzigen Boarder und Bild.
Abgerundete Border-Winkel


Rund um die Ecken in CSS

Eine angenehme Lektion. Der Nachteil ist vielleicht die relativ große Anzahl von HTML-Elementen und das Vorhandensein von 4 Bildern für jede Ecke.
Rund um die Ecken in CSS


Erstellen von beliebigen Winkeln und Grenzen

Verwenden Sie 4 Dateien mit Bildern (die maximale Breite des Blocks hängt von der Breite des Bildes ab). Aber eine sehr detaillierte Lektion.
Erstellen von beliebigen Winkeln und Grenzen


Kugelsichere runde Ecken

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


Zeichnung von Schatten und Rahmen von Designelementen

Artikel von Vladimir Tokmakov. Eine sehr komplexe Implementierung, aber für die Pluspunkte gilt natürlich die Möglichkeit, halbtransparente Schatten zu erzeugen. Artikel auf Russisch.
Zeichnung von Schatten und Rahmen von Designelementen


Runde Ecken mit fester Breite

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


CSS-Streckblock mit 4 beliebigen Winkeln

Ziemlich gute Lektion. Die Fähigkeit, Schatten zu löschen. Plus - die Möglichkeit, Header zu erstellen.
CSS-Streckblock mit 4 beliebigen Winkeln


Machen Sie die abgerundeten Ecken mit den Pseudo-Elementen: before und: after

Der Artikel wurde bereits bei Habré beschrieben. Eine sehr einfache Implementierung, aber nicht alle Beispiele in dem Artikel, ich arbeite in IE. Benutzte 4 Dateien mit Bildern für die Implementierung. Artikel auf Russisch.
Machen Sie die abgerundeten Ecken mit den Pseudo-Elementen: before und: after


Erstellen von beliebigen Winkeln und Grenzen. Teil II

Es wird eine Methode beschrieben, bei der der Hintergrund nicht kontinuierlich, sondern gradient ist. 4 Bilder werden verwendet.
Erstellen von beliebigen Winkeln und Grenzen. Teil II


Runde Ecken in divs

Drei Methoden der Implementierung werden beschrieben. Tische, Divas und Diven ohne Bilder. Die letztere Option ist nicht sehr gut, da viele leere Tags verwendet werden.
Runde Ecken in divs


Runde Ecken und Blöcke mit einem Schatten

Vielleicht kein guter Weg, da 5 Bilder verwendet werden. Aber es scheint möglich zu sein, einen Schatten zu erzeugen. Plus - verwenden Sie nur zwei HTML-Elemente.
Runde Ecken und Blöcke mit einem Schatten


Interessantes Layout

Ein Artikel über Habré, in dem die Täter versuchen, ihre Lösungen anzubieten. Artikel auf Russisch.
Interessantes 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

Verwendet zwei leere Tags oben und unten am Block. Es gibt 6 Bilder zur Umsetzung.
CSS-Gummi runde Ecken


CSS: Intelligente Winkel

Verwendet einen Rohling für den oberen und zwei für den unteren Rand. Ziemlich angenehme Umsetzung.
CSS: Intelligente Winkel


Wie man divergierende Divisionen mit runden Kanten macht

Es scheint zu sein und mit PNG, aber wieder in IE funktioniert nicht. Außerdem können Sie eine Lektion zum Zeichnen von runden Kanten aufrufen :)
Wie man divergierende Divisionen mit runden Kanten macht


Abgerundete Ecken

Ein toller detaillierter Artikel mit vielen Bildern. Aber an jeder Ecke des Wunders, plus ein Div für den Inhalt.
Abgerundete Ecken


Ecken runden ohne Bilder zu verwenden

Die Methode der nicht-kardinalen Erstellung von abgerundeten Ecken. Aber es gibt viele leere <B> -Elemente (ähnlich wie GMail-Blöcke).
Ecken runden ohne Bilder zu verwenden


Verwenden von JavaScript

Einführung von DomCorners

Es gibt verschiedene Variationen bezüglich der Anzahl der verwendeten Bilder in dem Artikel. Minus die Verwendung von leeren Tags.
Einführung von DomCorners


Transparente willkürliche Winkel und Grenzen. Version 2

Ein schönes Anwendungsbeispiel. Schöne Dekoration. Halbtransparente Schatten entfernen, aber die Schatten funktionieren nicht im IE.
Transparente willkürliche Winkel und Grenzen. Version 2


Nice Winkeln mit Anti-Aliasing

Eine Art Ergänzung zum Skript ist Nifty Corners. Verwendet keine Bilder. Sie können den Radius der Rundung sowohl auf der X-Achse als auch auf Y ändern.
Geschickte Winkel ohne Glättung


Runde Ecken

Sehr einfache Implementierung, nur ein div-Element. Auch in den Kommentaren viele Ergänzungen.
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

Genug viele Möglichkeiten. Es basiert auch 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 aus allen möglichen Winkeln. Eine kleine Anzahl von zu implementierenden HTML-Elementen.
jQuery-Rundung


Generatoren von runden Kanten

AbgerundeteCornr

Viele 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


Spiffy Ecken

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


Spanky Corners 1.1

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


Spiffy Box

Erzeugt ein PNG-Bild mit den angegebenen Parametern. Die Pluspunkte können einfachem HTML-Code zugeordnet werden . Auch im Artikel gibt es einen Link zu der Lektion, zu der der generierte Code generiert wurde.
Spiffy Box