Abgerundete Ecken mit CSS und JavaScript

 

    & nbsp;   Inhalt geht hier   & nbsp;      

Vor ein paar Jahren wäre dies eine akzeptable Lösung gewesen. Heute ist es ein hässlicher Hack: Das ist eine Menge redundanter Aufschlag für eine relativ unwichtige visuelle Dekoration. Tatsächlich funktioniert der obige Code nicht einmal wie in Dokumenten beabsichtigte Dokumente, die unter Verwendung eines strengen DocType bedient werden. Unter den Eckbildern werden kleine Lücken erscheinen, die dadurch verursacht werden, dass Bilder inline -Elemente sind und daher Platz unter dem Bild für die „Schwänze“ auf Buchstaben wie „y“ und „j“ lassen. Die Lösung, wie Eric Meyer in Bildern, Tabellen und mysteriösen Lücken erklärt, besteht darin, Ihrem Stylesheet die folgende Regel hinzuzufügen:

td img { display: block; }

Dies erzeugt das gewünschte Ergebnis, wie hier gezeigt.

Aber jetzt verwenden wir CSS -Hacks, um hässliche Tischhacks zu beheben! Schauen wir uns nach Möglichkeiten, um den gleichen Effekt mit nur CSS zu implementieren.

In der Regel sollte ein dekoratives Bild als CSS -Hintergrundbild auf einem vorhandenen Seitenelement implementiert werden, anstatt auf die richtige Seite mit einem -Tag fallen zu lassen. Es ist leicht festzustellen, ob ein Bild dekorativ ist oder den tatsächlichen Inhalt enthält: Fragen Sie sich, ob das Fehlen des Bildes einen Einfluss auf den Gesamtinhalt der Seite hat. Bei abgerundeten Ecken ist die Antwort offensichtlich nicht.

CSS -Hintergrundbilder sind bemerkenswert mächtige Dinge. Sie müssen sich nur die vielen wunderbaren Designs im CSS Zen Garden ansehen, um dies zu beweisen. Mit CSS kann ein Hintergrundbild auf ein beliebiges Element auf einer Seite angewendet werden. Darüber hinaus kann es horizontal, vertikal oder gar nicht wiederholt werden; Es kann im Hintergrundbereich des Bildes unter Verwendung absoluter Messungen oder relativ zu einem der vier Ecken positioniert werden. Es kann sogar gemacht werden, um fest zu bleiben, wenn der Inhalt des Elements scrolls. Leider führt CSS 2 eine kleine, aber erhebliche Einschränkung auf: Sie können jedes Element auf der Seite nur ein einzelnes Hintergrundbild anwenden. Um abgerundete Ecken auf einem

ordnungsgemäß zu rendern, müssen wir vier Hintergrundbilder anwenden, eine in jeder Ecke.

Festbreite Felder

Wenn die Breite der Box, auf die wir dekorative Ecken anwenden, festgelegt ist, ist die Hälfte des Problems bereits gelöst. Wenn wir wissen, dass die Box immer 200 Pixel breit ist, anstatt vier Hintergrundbilder (eine für jede Ecke) zu erstellen, können wir zwei: eine für die Oberseite der Box und eine für den Boden erstellen. Die Herausforderung wird nun auf die Anwendung von zwei Hintergrundbildern auf unsere

reduziert. Es ist Zeit, unser Markup zu nutzen.

Eine Schachtel mit abgerundeten Ecken würde nicht viel Spaß machen, wenn sie keinen Inhalt enthält. Betrachten Sie Folgendes:

td img { display: block; }

ziemlich einfach, oder? Der Titel der Box lebt in einem

(ich gehe davon aus, dass

und

bereits weiter oben in der Hierarchie der Seite verwendet wurden) und der folgende Inhalt ist ein Absatz und eine nicht ordnungsgemäße Liste. Der Schlüssel zur Lösung unseres beiden Hintergrundproblems liegt in der

, die direkt am oberen Rand des Box steht. Alles, was wir tun müssen, ist, ein Hintergrundbild auf die Oberseite des

und einen weiteren am Ende des enthaltenden

anzuwenden, und der Effekt ist abgeschlossen:

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

Klicken Sie hier, um die Ergebnisse anzuzeigen.

gut strukturierte Dokumente sind in der Regel voller Haken wie dieser, die sorgfältig ausgenutzt werden können, um mehrere Hintergründe anzuwenden und spezifische visuelle Effekte zu erzielen. Das Erlernen der Identifizierung ist ein wichtiger Teil der Arbeit mit CSS.

verschachtelte Elemente

vier Hintergründe auf eine einzelne DIV angewendet ist immer noch außerhalb unserer Reichweite. Aber was ist, wenn wir vier Divs verschachteln, einen für jeden Hintergrund? Dies löst unser Problem, geht aber auf Kosten eines zusätzlichen Markups ohne strukturellen Wert:

div.rounded { 
  width: 200px; 
  background: #1b5151 url(200pxbottom.gif) no-repeat bottom center; 
  padding-bottom: 15px; 
} 
div.rounded h3 { 
  padding-top: 15px; 
  background: transparent url(200pxtop.gif) no-repeat top center; 
}

und in der CSS:

<div ><div><div><div> 
Content goes here 
</div></div></div></div>

Der Code wird wie hier gezeigt angezeigt.

Es sollte klar sein, was hier vor sich geht. Jedem der vier Divs wird ein abgerundetes Hintergrundbild der Ecke zugewiesen, das sich in der oberen rechten, oberen linken, unteren rechten und unteren linken Seite positioniert. Während die Breite des enthaltenden DIV auf 200px eingestellt ist, könnte sie genauso leicht auf etwas flexibel für die Verwendung mit flüssigen Konstruktionen eingestellt werden - die Ecken würden immer noch funktionieren, egal wie groß oder klein der enthaltende Div war.

Wir haben jetzt eine Lösung für das Problem, die weitaus weniger Markup verwendet als das Beispiel für die ursprünglichen Tabellen. Es ist jedoch immer noch nicht perfekt: Es verwendet drei zusätzliche Divs, die der Gesamtdokumentstruktur nichts Wertes verleihen. Können wir es besser machen? Es ist Zeit, nach JavaScript zu suchen.

Verwenden der DOM

Verwenden von JavaScript und dem DOM ist es möglich, die Struktur eines Dokuments zu manipulieren, nachdem es vom Browser geladen wurde. Abgerundete Ecken sind ein Präsentationseffekt, der nicht JavaScript-Benutzeragenten versteckt werden kann, ohne dass ihre Gesamterfahrung der Website signifikant verringert wird. Daher gibt es keine ethischen Probleme bei der Verwendung von JavaScript für diese Art der Transformation. Unsere endgültige Lösung erfordert im Quelldokument nur eine einzelne

. Wir werden JavaScript verwenden, um die drei für den abgerundeten Eckeffekt erforderlichen Fremddiven dynamisch anzuhängen.

Hier ist das Markup:

td img { display: block; }

Ich denke, Sie werden zustimmen, dass wir nicht viel tun können, um es einfacher zu machen, außer vielleicht den

gegen einen

auszutauschen, wenn der Inhalt strukturell besser als Absatz definiert ist. Wenn Sie diesen Schalter erstellen, wird für den Leser übrig geblieben.

Hier ist das JavaScript:

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

Das Skript ist in zwei logische Abschnitte unterteilt. Der erste Abschnitt iteriert alle

-Anemente im Dokument und erstellt ein Array derjenigen, die in ihrem Klassenattribut "abgerundet" enthalten (denken Sie daran, Elemente können mehrere Klassen durch Räume getrennt haben). Der zweite Teil des Skripts durchläuft jedes dieser Elemente nacheinander, wodurch drei zusätzliche Divs erstellt und sie um das Original umwickelt werden. Schauen wir uns den Code ausführlicher an:

div.rounded { 
  width: 200px; 
  background: #1b5151 url(200pxbottom.gif) no-repeat bottom center; 
  padding-bottom: 15px; 
} 
div.rounded h3 { 
  padding-top: 15px; 
  background: transparent url(200pxtop.gif) no-repeat top center; 
}

Hier entfernen wir die Klasse "abgerundet" vollständig aus unserem ursprünglichen

. Der Grund dafür wird im CSS klar; Im Wesentlichen möchten wir nicht, dass die Originalstile angewendet werden, um dieses Element mehr zu beeinflussen.

<div ><div><div><div> 
Content goes here 
</div></div></div></div>

Wir haben das äußere

erstellt, mit dem das obere rechte Hintergrundbild sowie die Gesamtbreite der Box angewendet werden. Beachten Sie, dass wir die Klasse auf 'gerundet2' gesetzt haben; Dies wird in unserem CSS definiert, mit subtilen Unterschieden von der "abgerundeten" Klasse, die nicht JavaScript-fähigen Clients bereitgestellt werden.

div.rounded { 
  width: 200px; 
  background: #1b5151 url(tr.gif) no-repeat top right; 
} 
div.rounded div { 
  background: transparent url(tl.gif) no-repeat top left; 
} 
div.rounded div div { 
  background: transparent url(br.gif) no-repeat bottom right; 
} 
div.rounded div div div { 
  background: transparent url(bl.gif) no-repeat bottom left; 
  padding: 15px; 
}

Das W3C -DOM liefert keine direkte Methode, um einen Knoten in einem Dokument durch einen anderen Knoten zu ersetzen. Stattdessen müssen Sie die Methode von Ospendechild () eines Knotens verwenden, um eines seiner Kinder durch einen anderen Knoten zu ersetzen. Ein nützlicher Trick, um den Knoten zu ersetzen, den Sie suchen, ist der Zugriff auf seinen eigenen Elternteil mithilfe der ParentNode -Eigenschaft und dann verwenden Sie /#c#.replacechild, um ihn gegen etwas anderes auszutauschen. Wenn das für Sie keinen Sinn ergibt, mach dir keine Sorgen - denken Sie nur an die obige Zeile als Ersatz für unseren ursprünglichen Knoten durch den neuen TR -Knoten, den wir gerade erstellt haben.

<div > 
Content goes here. 
</div>

Wir haben jetzt drei neue

-Elemente erstellt und sie in das Dokument eingefügt. Alles, was übrig bleibt, ist, unseren ursprünglichen Knoten mit seinem Inhalt neu zu investieren:

td img { display: block; }

Zu diesem Zeitpunkt ist unser tatsächlicher Dokumentbaum nahezu identisch mit dem in den vier verschachtelten

-Albile oben. Der einzige Unterschied besteht darin, dass das äußere Element eine Klasse von 'gerundet2' anstelle von 'abgerundet' hat. Hier ist das CSS:

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

Hier ist das Ergebnis.

Der erste Satz von Regeln für Div.Round wird nur in Browsern verwendet, die das JavaScript nicht ausführen. Beachten Sie, dass die Breite 170px und die Polsterung 15px beträgt, was eine Gesamtbreite von 200px (die Breite plus die linke und rechte Polsterung) ergibt. Wenn Sie dies benötigen, um in IE 5/Windows zu arbeiten, wodurch die Padding -Werte unterschiedlich interpretiert werden, müssen Sie den berüchtigten Box -Modell -Hack anwenden. Sie haben bereits im vorherigen Beispiel den zweiten Regelnsatz gesehen.

nach vorne

Die obige Technik wird in allen modernen Browsern und allen zukünftigen Browsern funktionieren, die die CSS2- und DOM -2 -Standards unterstützen. CSS 3 führt eine Reihe neuer Wege ein, um diesen Effekt zu erzielen, was die oben genannten Techniken veraltet macht. CSS bietet CSS sowie die leistungsstarke Pseudo-Elemente, die es ermöglicht, zusätzliche stilbare Elemente auf ähnliche Weise wie das in diesem Artikel gezeigte Beispiel für das JavaScript-Beispiel zu finden. Wenn das nicht ausreicht, ermöglichen Grenzbilder so ziemlich jede Grenzdekoration, die Sie sich vorstellen können.

Leider wird es Jahre dauern, bis CSS 3 Unterstützung weit verbreitet ist. Bis dahin ist JavaScript mehr als in der Lage, einen Teil der Lücke aufzunehmen.

häufig gestellte Fragen (FAQs) zu CSS und JavaScript abgerundeten Ecken

Wie kann ich abgerundete Ecken mit CSS erstellen? Sie können das Eigentum "Grenzradius" verwenden, um dies zu erreichen. Das Eigentum "Grenzradius" kann ein, zwei, drei oder vier Werte haben. Ein einzelner Wert wendet den gleichen Radius auf alle vier Ecken an. Zwei Werte tragen den ersten Radius auf die oberen linken und unteren Rechten und den zweiten Radius in die oberen rechten und unteren linken Ecken an. Drei Werte wenden den ersten Radius auf den oberen linken, den zweiten auf die obere rechte und untere linke und die dritte zum unteren rechten. Vier Werte wenden einen anderen Radius für jede Ecke in der Reihenfolge oben links, oben rechts, unten rechts, unterer Links.

Kann ich abgerundete Ecken mit JavaScript erstellen? Wenn Sie abgerundete Ecken dynamisch auf der Grundlage von Benutzereingaben oder anderen Faktoren erstellen müssen, ist JavaScript möglicherweise die bessere Wahl. Sie können die Methode "CanvasrenderingContext2D.RoundRect ()" verwenden, um ein Rechteck mit abgerundeten Ecken auf einer Leinwand zu zeichnen. Diese Methode erfordert fünf Parameter: die X- und Y-Koordinaten der oberen linken Ecke des Rechtecks, die Breite und Höhe des Rechtecks ​​und der Radius der Ecken. Wenn Sie das Grundstück "Grenzradius" auf 50%setzen, werden die Ecken genug abgerundet, um einen Kreis zu bilden. Das Element muss auch eine gleiche Breite und Höhe haben. Zum Beispiel:

div {

Breite: 100px;

Höhe: 100px;

Border-Radius: 50%; Element durch Angabe verschiedener Werte für die Eigenschaft "Grenzradius". Um beispielsweise nur die oberen linken und oberen rechten Ecken eines DIV zu runden, würden Sie:

div {
Border-Radius: 10px 10px 0 0; Ecken.

Wie kann ich einen Rand mit abgerundeten Ecken schaffen? Sie wenden einfach das Grundstück „Grenze-Radius“ auf das Element mit der Grenze an. Zum Beispiel:

div {
Grenze: 1px solid schwarz;
Border-Radius: 10px; Ecken mit unterschiedlichen Radien auf demselben Element, indem verschiedene Werte für die Eigenschaft „Grenz-Radius“ angegeben werden. Um beispielsweise einen DIV mit einem 10px-Radius an der oberen linken Ecke, einem 20px-Radius in der oberen rechten und unteren linken Ecken und einem 30px-Radius an der unteren rechten Ecke zu erstellen, verwenden Sie:

div {

Border-Radius: 10px 20px 20px 30px 30px; CSS? Der erste Wert ist der horizontale Radius, und der zweite Wert ist der vertikale Radius. Zum Beispiel:

div {
Border-Radius: 10px 20px;

Kann ich das Eigentum "Grenzradius" animieren? Um zum Beispiel den Grenzradius von 0 bis 50% über einen Zeitraum von 2 Sekunden allmählich zu ändern, konnten Sie:

div {
Border-Radius: 0;
Übergang: Border-Radius 2S; Wenn Sie darüber schweben, wird die Änderung allmählich über 2 Sekunden lang abgerundet. Der Prozentsatz ist relativ zur entsprechenden Dimension des Elements. Wenn Sie beispielsweise "Border-Radius" auf 50%festlegen, werden die Ecken genug abgerundet, um einen Kreis zu bilden (oder eine Ellipse, wenn die Breite und Höhe des Elements nicht gleich sind). Dies kann ein guter Effekt für Miniaturansichten oder Profilbilder sein. Zum Beispiel:

img {
Border-Radius: 10px;