Frames mit CSS erstellen. Rahmen und Rahmen Kommentarrahmen mit CSS-Ecke

Um ihn herum verschiedene schöne Dinge zu schaffen, und das erste so schöne Ding wird der Rahmen sein.

Schauen wir uns zunächst die einfachsten Frameworks an. Um sie zu erstellen, wird CSS verwendet Grenzgrundstück, der auf folgende Werte eingestellt werden kann:

solide – stabiler Rahmen;

gestrichelt – gepunkteter Rahmen;

gepunktet – gepunkteter Rahmen;

doppelt – Doppellinienrahmen;

Rille – Rahmen mit Schatten;

Grat - mit Relief;

Zwei weitere Eigenschaften, die zum Erstellen einfacher Frames benötigt werden, sind:

Breite – Rahmenstärke;

Farbe – Rahmenfarbe;

Gemäß der Abkürzungstechnik werden Werte in einer Zeile geschrieben, getrennt durch Leerzeichen.

P(
Rand: 2px fest #ffff00;
}

Polsterung – intern (Rahmeneinzug vom Inhalt);

Rand – extern (Rand des Rahmens von externen Objekten);

Für Einrückungen werden auch Richtungen angegeben (von welcher Seite und wie weit zurückgezogen werden soll). Diese Eigenschaften werden verwendet, wenn Inhalte außerhalb der Mitte des Rahmens platziert werden müssen oder der Rahmen selbst in irgendeiner Weise versetzt ist.

oben – oberer Einzug;

rechts – rechter Einzug;

unten – unterer Einzug;

left – linker Einzug

Die Werte dieser Eigenschaften werden in abgekürzter Form nacheinander geschrieben (Padding: 10px 30px 15px 20px), wobei zuerst der oberste Wert und dann der Rest im Uhrzeigersinn festgelegt wird.

Wenn Sie nur einen Wert festlegen, bedeutet dies, dass die Einrückung auf allen Seiten gleich ist.

P(
Rand: 2px fest #ffff00;

Rand: 20px;
}

Wenn Sie Text oder ein Bild in der Mitte des Rahmens platzieren müssen, können Sie es zum „p“-Selektor hinzufügen text-align-Eigenschaft: Center ;

Schauen wir uns als nächstes an, wie die Höhe und Rahmenbreite. Die Höhe des Rahmens wird vom Browser automatisch eingestellt und so gewählt, dass der Inhalt unter Berücksichtigung der vorgegebenen Einzüge hineinpasst. Die Breite legen wir aber selbst fest.

Sie wird durch die Eigenschaft width festgelegt und ihr Wert gibt die gewünschte Größe in Pixel oder andere im Web akzeptierte Längenmaße an.

P(
Rand: 2px fest #ffff00;
Polsterung: 10px 20px 10px 20px;
Rand: 20px;
Breite: 400px;
}

Denken Sie übrigens daran, dass der Browser beim Festlegen der Breite diesen Wert nur als die Breite des Inhalts versteht. Anschließend werden die angegebene Polsterung und Randstärke zu diesem Wert hinzugefügt und die endgültige Größe auf der Seite angezeigt.

Als letztes müssen Sie den Rahmen auf der Seite positionieren. Dies erfolgt über die bereits vorhandene Margin-Eigenschaft.

Und wenn Sie den Rahmenblock nur in der Mitte der Seite positionieren müssen, wird der Wert auto zur Eigenschaft margin hinzugefügt.

P(
Rand: 2px fest #ffff00;
Polsterung: 10px 20px 10px 20px;
Rand: 20px automatisch;
Breite: 400px;
}

Lassen Sie uns das erste Beispiel erstellen HTML-Dokument und erstellen Sie feste Rahmen für den Hauptblock (den Hauptteil des Dokuments) und einen Absatz.

In den folgenden Beispielen ändert sich nur das CSS (was im Style-Tag eingeschlossen ist).

Hallo liebe zukünftige Webmaster!
Ich bin 55 Jahre alt und freue mich, Sie auf meiner Website begrüßen zu dürfen.

Ergebnis:

Der nächste Frame ist gestrichelt.

P(
Texteinzug: 30px;
Rand: 2px gestrichelt #ff4f00;
Polsterung: 10px 20px 10px 20px;
Rand: 20px automatisch;
Breite: 400px;
}

Ergebnis:

Rahmen gepunktet:

P(
Texteinzug: 30px;
Rand: 3 Pixel gepunktet #ff4f00;
Polsterung: 10px 20px 10px 20px;
Rand: 20px automatisch;
Breite: 400px;
}

Rahmen doppelt:

P(
Texteinzug: 30px;
Rand: 5px double #ff4f00;
Polsterung: 10px 20px 10px 20px;
Rand: 20px automatisch;
Breite: 400px;
}

Rahmennut:

P(
Texteinzug: 30px;
Rand: 7px Groove #ff4f00;
Polsterung: 10px 20px 10px 20px;
Rand: 20px automatisch;
Breite: 400px;
}

Rahmengrat:

P(
Texteinzug: 30px;
Rand: 10px Grat #ff4f00;
Polsterung: 10px 20px 10px 20px;
Rand: 20px automatisch;
Breite: 400px;
}

Entfernen Sie dazu den Rahmen und fügen Sie border-radius und box-shadow hinzu.

P(
Randradius: 10px;
Kastenschatten: 0 0 0 3px #ff4f00;
Texteinzug: 30px;
Polsterung: 10px 20px 10px 20px;
Rand: 20px automatisch;
Breite: 400px;
}

Lassen Sie uns den äußeren Rand des Rahmens verwischen. Erhöhen Sie dazu in der Box-Shadow-Eigenschaft die dritte Ziffer.

P(
Randradius: 10px;
Kastenschatten: 0 0 7px 3px #ff4f00;
Texteinzug: 30px;
Polsterung: 10px 20px 10px 20px;
Rand: 20px automatisch;
Breite: 400px;
}

Lassen Sie uns einen mehrfarbigen Rahmen erstellen. Fügen Sie dazu der Box-Shadow-Eigenschaft mehrere weitere Wertesätze mit unterschiedlichen Farben hinzu, getrennt durch Kommas.

P(
Randradius: 10px;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
Texteinzug: 30px;
Polsterung: 10px 20px 10px 20px;
Rand: 20px automatisch;
Breite: 400px;
}

Sie können einen Kreis in einem Rahmen erstellen. Stellen Sie dazu für den Absatz die gleiche Höhe und Breite ein, erstellen Sie also ein Quadrat und ändern Sie den Wert von border-radius

P(
Randradius: 50 %/50 %;
Kastenschatten: 0 0 0 3px #ff4f00,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
Polsterung: 40px;
Rand: 20px automatisch;
Breite: 130px;
Höhe: 130px;
Textausrichtung: Mitte;
}

Wenn Sie mit dem gebrochenen Randradiuswert spielen, können Sie jede Art von Ellipse erstellen.

Die erste Zahl im Bruch ist die Krümmung der vertikalen Winkelkomponente, die zweite die horizontale.

Und das Letzte, was wir heute machen, ist ein Rahmen mit wechselnder Farbe. Es ändert sich, wenn Sie mit dem Cursor darüber fahren.

Diese Option wird mithilfe der Pseudoklasse :hover implementiert.

P(
Randradius: 10px;
Kastenschatten: 0 0 0 4px #ff4f00;
Texteinzug: 30px;
Polsterung: 10px 20px 10px 20px;
Rand: 20px automatisch;
Breite: 400px;
}
p:hover (
Randradius: 10px;
Kastenschatten: 0 0 0 4px #00ff62;
Texteinzug: 30px;
Polsterung: 10px 20px 10px 20px;
Rand: 20px automatisch;
Breite: 400px;
}

In einem ruhigen Zustand:

Beim Schweben:

Die gleiche Methode kann auf einen mehrfarbigen Rahmen angewendet werden und eine Farbe ändern, wenn Sie mit dem Cursor darüber fahren.

Ich wünsche Ihnen kreativen Erfolg.

Drehen

Zwei Iren kämpfen auf den Straßen von Dublin. Ein anderer kommt auf sie zu, nimmt seinen Hut ab und fragt:
- Entschuldigung, ist das ein privater Streit oder kann jemand eingreifen?

1. , , - CSS-Eigenschaften
2. (Transparent) – CSS-Eigenschaft. Verantwortlich für die Erstellung eines diagonalen Rahmens
3. „px“ – Wert in Pixel

In diesem Artikel sprechen wir über die Erstellung von Rahmen, jedoch nicht von gewöhnlichen quadratischen, sondern von abgerundeten Rahmen. Sie haben mehr schöne Aussicht als gewöhnliche quadratische Rahmen ohne Rundung.

Eigentum Den Raum für kreative Ideen erweitern und die Zahl erhöhen mögliche Elemente Design. Und in Kombination mit der Änderung des Rahmenstils mithilfe von Eigenschaftswerten können Sie einen besonderen Rahmen erstellen, den Sie sonst nirgendwo finden.

In diesem Artikel werfen wir einen genaueren Blick auf die Erstellung runder Rahmen und mehr. In CSS gibt es so etwas wie dreieckige Rahmen, aber mehr dazu weiter unten.

Rahmen abrunden mit

Mit dieser CSS-Eigenschaft können Sie die Ränder eines Elements runden. Einige Entwickler verwenden es, ohne sichtbare Ränder zu erstellen, um Layouts auf einem abgerundeten „Körper“-Container zu erstellen.

Mithilfe von Standardradien können Sie abgerundete Formen erstellen, beispielsweise einen Kreis oder ein Oval.

Um den Betrieb dieser Eigenschaft zu verfolgen, reicht es aus, die Eigenschaft festzulegen . Obwohl der Name das Wort „Grenze“ enthält, bezieht er sich nicht direkt auf die Erstellung von Rahmen. Es rundet die Ränder des Webelements und nicht seinen Rand ab.

Die Immobilie selbst ist eine Abkürzung für vier Eigenschaften: , , Und . Jeder von ihnen gibt den Krümmungsradius für jede der vier Ecken an.

Einfaches Anwesen kann entweder einen oder vier Werte verwenden. Funktioniert genauso wie mit der Immobilie oder .

Rundungen können auf alle HTML-Elemente angewendet werden, jedoch nicht in allen Fällen. Einige Browser akzeptieren dies nicht, wenn sie Frames laden, die über diese Eigenschaft verfügen , mit dem Wert „collapse“.

Zur Bestimmung des Krümmungsradius können Sie unterschiedliche Werte verwenden, meist wird der Wert jedoch in Pixeln angegeben. Dies liegt daran, dass sie sich am besten für die Detaillierung kleiner Objekte eignen.

Zusätzlich zur üblichen Rundung können Sie einen zusätzlichen Radius verwenden, um beispielsweise eine Ellipse zu erstellen.

Dazu müssen Sie die Werte durch einen Bruch dividieren.

Eigentum - Beispiele:

Jetzt zeigen wir einige Beispiele für die Erstellung eines abgerundeten Randes. Um sie genauer zu studieren, laden Sie unsere Quellen herunter.

Dreiecke erstellen mit

Um Dreiecke zu erstellen, müssen Sie die Eigenschaft verwenden . Hier unterscheidet sich die Verwendung jedoch geringfügig von der Erstellung normaler Rahmen.

Stellen Sie zunächst die Breite und Höhe des Dreieckselements auf Null ein.

Notieren Sie sich anschließend einige Eigenschaften. Das erste ist die Hauptsache, die Eigenschaft des Rahmens. Es ist fast wie gewohnt erstellt. Legen Sie die Breite und den Linientyp fest und geben Sie den Wert „transparent“ ein. Es ist für die Bildung eines Dreiecks verantwortlich.

Um eine gerade Seite des Dreiecks zu erstellen, müssen Sie für diese Seite eine separate Rahmenlinie erstellen.

Abschluss

Jetzt wissen Sie alles über die Immobilie , mit dem Sie einzigartige Designelemente erstellen können. Darüber hinaus sind die mit „border“ erstellten Dreiecke tolle Dekorationsstücke, die auf jeder Webseite platziert werden können.

Es mag zunächst sehr schwierig erscheinen, aber wenn Sie üben, wird es einfacher sein, als Sie denken. Laden Sie unsere Quellen herunter und studieren Sie deren Code, um besser zu verstehen, wie die Eigenschaft funktioniert. Wir wünschen Ihnen viel Erfolg im Studium!

Die CSS-Eigenschaft border wird verwendet, um den Rand eines Objekts zu erstellen, nämlich die Dicke des Randes, seine Farbe und seinen Stil. Diese Eigenschaft wird häufig in HTML verwendet. Sie können verschiedene Effekte erstellen, um den Inhalt der Seite besser wahrzunehmen. Entwerfen Sie beispielsweise eine Seitenleiste, einen Website-Header, ein Menü usw.

1. CSS-Randsyntax

Grenze : Randbreite Randstil Randfarbe | erben;

• border-width – Randstärke. Sie können es in Pixeln (px) einstellen oder die Standardwerte dünn, mittel, dick verwenden (sie unterscheiden sich nur in der Breite in Pixeln).
• border-style – Stil des angezeigten Rahmens. Kann die folgenden Werte annehmen
  • keine oder ausgeblendet – hebt den Rand auf
  • gepunktet - gepunkteter Rahmen
  • gestrichelt - Rahmen aus Strichen
  • durchgezogen – einfache Linie (am häufigsten verwendet)
  • doppelt - Doppelrahmen
  • Groove - gerillter 3D-Rand
  • Grat, Einschub, Anfang – verschiedene 3D-Rahmeneffekte
  • erben – der Wert wird übernommen übergeordnetes Element
• Randfarbe – Randfarbe. Kann mit eingestellt werden spezifischer Name Farben oder im RGB-Format (siehe Namen der HTML-Farben für die Site)

Die Werte in der CSS-Eigenschaft border können in beliebiger Reihenfolge festgelegt werden. Die am häufigsten verwendete Sequenz ist „Dickenstilfarbe“.

2. Beispiele mit unterschiedlichen CSS-Rändern

2.1. Beispiel. Verschiedene Randgestaltungsstile im Randstil

Randstil: gestrichelt

Randstil: gestrichelt

Randstil: solide

Randstil: doppelt

Randstil: Groove

Randstil: Grat

Randstil: eingefügt

border-style:outset

Vier verschiedene Rahmen

Randstil: gepunktet

Randstil: gestrichelt

Randstil: solide

Randstil: doppelt

Randstil: Groove

Randstil: Grat

Randstil: eingefügt

border-style:outset

Vier verschiedene Rahmen

2.2. Beispiel. Ändern Sie die Rahmenfarbe, wenn Sie mit der Maus darüber fahren

Dieses Beispiel ist sehr einfach, aber interessant. Es zeigt, wie die :hover-Pseudoklasse und der CSS-Rahmen verwendet werden können, um einfache Effekte (z. B. Menüs) zu erstellen.

Wenn Sie mit der Maus über einen Block fahren, ändert sich die Rahmenfarbe

So sieht es auf der Seite aus:

2.3. Beispiel. So erstellen Sie einen transparenten Rahmen

Der Rahmen kann transparent gemacht werden. Dieser Effekt ist selten, kann aber für Webdesigner manchmal sehr nützlich sein. Um die Transparenz festzulegen, müssen Sie den Farbsatz in der Form RGBA (R, G, B, P) verwenden, wobei der letzte Parameter die Transparenz festlegt ( reelle Zahl von 0,0 bis 1,0)

So sieht es auf der Seite aus:

3. Randstärke: Eigenschaft der Randbreite

Legt die Linienstärke fest. Zuvor haben wir es in einer einzigen Beschreibung von border angegeben.

CSS-Syntax Rahmenbreite

Rahmenbreite: dünn | mittel | dick | Bedeutung;

• dünn – dünne Linienstärke
• mittel – durchschnittliche Linienstärke
• dick – dicke Linienstärke

Nachfolgend finden Sie einige Beispiele. Das Ungewöhnlichste wird die unterschiedliche Dicke des Randes auf jeder Seite sein.

Randbreite: dünn

Randbreite: mittel

Randbreite: dick

Unterschiedliche Dicke an den Rändern

So sieht es auf der Seite aus:

Randbreite: dünn

Randbreite: mittel

Randbreite: dick

Unterschiedliche Dicke an den Rändern

4. So erstellen Sie einen Randrahmen nur an einer Kante (Rand)

Die CSS-Eigenschaft „border“ verfügt über abgeleitete Eigenschaften zum Festlegen einseitiger Ränder für ein Element:

• border-top – um den Rand oben festzulegen (oberer Rand)
• border-bottom – um unten einen Rand zu setzen (bottom border)
• border-right – um den Rand nach rechts zu setzen (rechter Rand)
• border-left – um den Rand links festzulegen (linker Rand)

Diese Grenzen können kombiniert werden, d.h. Schreiben Sie für jede Richtung Ihren eigenen Rahmen. Die Syntax ist genau die gleiche wie bei border.

Es gibt auch Eigenschaften

• border-top-color – legt die Farbe des oberen Randes fest
• border-top-style – legt den Stil des oberen Randes fest
• border-top-width – legt die Dicke des oberen Rands fest
• usw. für jede Richtung

Meiner Meinung nach ist es einfacher, alles in einer Zeile zu schreiben, als zusätzlichen Text in Stilen zu erstellen. Beispielsweise sind die folgenden Eigenschaften gleich

/* Beschreibung zweier identischer Stile: */

4.1. Beispiel. Schöner Rahmen zum Hervorheben von Zitaten

Beispiel für einen Angebotsrahmen

So sieht es auf der Seite aus:

Beispiel für einen Angebotsrahmen

Notiz
Sie können für jede Seite einen separaten Rand festlegen.

5. So fügen Sie einem HTML-Element mehrere Rahmen hinzu

Manchmal müssen Sie mehrere Ränder erstellen. Geben wir ein Beispiel

5.1. Erste Option mit mehreren Rändern

So sieht es auf der Seite aus:

Es gibt einen zweiten Weg durch Abschattung.

5.2. Überlagern Sie Schatten, um mehrere Ränder zu erstellen

So sieht es auf der Seite aus:

6. Ecken an Rändern abrunden (Randradius)

Zum Gestalten schöne Rahmen verwenden CSS-Eigenschaft border-radius (nur in CSS3 verfügbar). Damit lassen sich abgerundete Ecken erzeugen, was für eine ganz andere Optik sorgt. Zum Beispiel

7. CSS-eingerückte Zeile

Vertiefte Linien können vor einem dunklen Hintergrund beeindruckend aussehen, was nicht für jeden Standort geeignet ist.

So sieht es auf der Seite aus:

Um über JavaScript auf den Rand zuzugreifen, müssen Sie die folgende Konstruktion schreiben:

document.getElementById("elementID").style.border="WERT"

Als Beispiel können Sie eine Variante nehmen, bei der der Block gebogene Ecken hat und völlig anders aussieht als die Standardvariante. Einige bieten die Möglichkeit, verschiedene Bänder zu platzieren oder ein Bild zu installieren, das im Block installiert wird.

Das gesamte präsentierte Material liegt in adaptiver Form für unterschiedliche Auflösungen vor, sei es für einen großen Monitor oder den kleinsten Bildschirm. Nach der Installation kommt es zu einer Veränderung des Ortes, an dem sie hauptsächlich platziert werden, um Aufmerksamkeit zu erregen, denn zunächst gibt es nur eine Struktur, die den Hauptstil ergänzen kann.

Erste Wahl:

Ugoinsa_utomatio_npones (
Anzeige: Inline-Block;
Breite: 295px;
Position: relativ;
Rand: 1,5 Pixel einfarbig #1b629e;
Übergang: alle .3s Leichtigkeit;
Rand: 5px;
Cursor:Zeiger;
}
.ugoinsa_utomatio_npones:before, .ugoinsa_utomatio_npones:after (
Inhalt: "";
Z-Index: -1;
Bildschirmsperre;
Position: absolut;
Hintergrund: #FFF;
oben: 50 %;
links: 50 %;
transform: Translate(-50%, -50%);
Anzahl der Animationsiterationen: 1;
Transformationsursprung: 50 % 50 %;
}
.ugoinsa_utomatio_npones:before (
Breite: calc(100% + 4px);
Höhe: 75 %;
Z-Index: 1;
Übergang: Höhe 0,6s;
}
.ugoinsa_utomatio_npones:after (
Höhe: calc(100% + 4px);
Breite: 85 %;
Z-Index: 1;
Übergang: Breite 0,7s;
}
.ugoinsa_utomatio_npones:hover:before, .ugoinsa_utomatio_npones:focus:before (
Höhe: 50 %;
}
.ugoinsa_utomatio_npones:hover:after, .ugoinsa_utomatio_npones:focus:after (
Breite: 74 %;
}
.sequpok_egulaned_demob (
Polsterung: 29px;
Z-Index: 2;
Position: relativ;
Textausrichtung: Mitte;
}

Zweite Option:

Pvobamoco-mpagensive (
Position: relativ;
Anzeige: Inline-Block;
Breite: 283px;
Rand: 7px 0 37px 0;
Polsterung: 28px;
Farbe: #f3eaea;
Textausrichtung: Mitte;
Hintergrund: #2b22a0;
Hintergrund: linearer Farbverlauf (nach links unten, transparent 50 %, rgba (16, 16, 16, 0,4) 0) keine Wiederholung 100 % 0 / 30 Pixel 30 Pixel, linearer Farbverlauf (-135 Grad, RGBA (0, 0, 0). , 0) 20px, #334ab9 0);
Filter: Schlagschatten(18px 28px rgba(14, 14, 14, 0.1));
}
.pvobamoco-mpagensive::before (
Inhalt: " ";
Position: absolut;
oben: 30px;
rechts: 0;
Hintergrund: linear-gradient(nach links unten, rgba(0, 0, 0, 0) 50 %, rgba(14, 14, 14, 0.1) 0) 100 % 0 keine Wiederholung;
Breite: 28px;
Höhe: 28px;
transformieren: drehen (180 Grad);
}

Dritte Option:

Keculosubes_aspectsiveb (
Position: relativ;
Anzeige: Inline-Block;
Breite: 295px;
Polsterung: 30px;
Rand: 9px;
Mindesthöhe: 91 Pixel;
Rand: 2 Pixel fest #BFE2FF;
Textausrichtung: Mitte;
}
.malugeke_deculos (
Breite: 148px;
Höhe: 148px;
Überlauf versteckt;
Position: absolut;
}
.malugeke_deculos::before, .malugeke_deculos::after (
Position: absolut;
Z-Index: -1;
Inhalt: "";
Bildschirmsperre;
Rand: 5 Pixel einfarbig #2980b9;
}
.malugeke_deculos span (
Position: absolut;
Bildschirmsperre;
Breite: 223px;
Polsterung: 15px 0;
Hintergrundfarbe: #337AB7;
Box-Shadow: 0 5px 10px rgba(12, 12, 12, 0,1);
Farbe: #f3f0f0;
Schriftart: 700 18px/1 „Lato“, serifenlos;
Textschatten: 0 1px 1px rgba(8, 8, 8, 0.1);
Texttransformation: Großbuchstaben;
Textausrichtung: Mitte;
}
.malugeke_deculos-top-left (
oben: -10px;
links: -10px;
}
.malugeke_deculos-top-left::before, .malugeke_deculos-top-left::after (
Rand-Links-Farbe: transparent;
}
.malugeke_deculos-top-left::before (
oben: 0;
rechts: 0;
}
.malugeke_deculos-top-left::after (
links: 0;
unten: 0;
}
.malugeke_deculos-top-left span (
rechts: -25px;
oben: 30px;
transformieren: drehen (-45 Grad);
}
.malugeke_deculos-top-right (
oben: -10px;
rechts: -10px;
}
.malugeke_deculos-top-right::before, .malugeke_deculos-top-right::after (
Rand-Top-Farbe: transparent;
Rand-Rechts-Farbe: transparent;
}
.malugeke_deculos-top-right::before (
oben: 0;
links: 0;
}
.malugeke_deculos-top-right::after (
rechts: 0;
unten: 0;
}
.malugeke_deculos-top-right span (
links: -25px;
oben: 30px;
transformieren: drehen (45 Grad);
}

Hier kann ein Webentwickler es wunderbar gestalten, denn dafür gibt es bereits einen kompletten Rahmen, manche Leute setzen Schatten, alles hängt von der Farbpalette der Internetressource ab und im Allgemeinen davon, wo Sie sich befinden und zu welchem ​​Zweck Sie diese platzieren ein Originalrahmen.

In diesem Tutorial erstellen wir den Effekt geschwungener Ecken, ohne Bilder oder zusätzliche Markierungen zu verwenden. Es funktioniert hervorragend in allen modernen Browsern und eignet sich gut für Website-Designs mit einfachen Farbschemata.

Dieser Effekt wurde in der Demo für die Lektion „Mehrere Hintergründe und Striche mit CSS2“ verwendet. Darüber hinaus ist am Beispiel von Yiibu die Verwendung von geschwungenen Ecken bei der Gestaltung einer echten Website zu sehen. Aber die Yiibu-Site verwendet Bilder und wir verwenden Pseudoelemente und CSS.

Start

Nichts Kompliziertes. Jedes Element reicht aus und es ist keine zusätzliche Markierung erforderlich. Alles beginnt mit einem einfachen bemalten Rechteck. Browser, die keine Pseudoelemente unterstützen (IE6 und IE7), geben es ebenfalls aus.

Das Hinzufügen der Eigenschaft position:relative ermöglicht die absolute Positionierung von Pseudoelementen.

Hinweis ( Position: relativ; Breite: 30 %; Polsterung: 1em 1,5em; Rand: 2em automatisch; Farbe: #fff; Hintergrund: #97C02F; )

Eine gefaltete Ecke wird mithilfe eines darin positionierten Pseudoelements erstellt obere Ecke Rechteck. Das Pseudoelement hat keine Breite oder Höhe, aber einen dicken Strich. Durch Ändern der Strichstärke ändern wir die Größe der gefalteten Ecke.

In diesem Beispiel haben der obere und rechte Teil des Strichs Farben, die mit der Hintergrundfarbe des übergeordneten Rechtecks ​​übereinstimmen. Der linke und der untere Teil des Strichs haben eine dunklere oder hellere Farbe als die Hintergrundfarbe des Rechtecks.

Hinweis:before ( content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#658E15 #fff; )

Das ist alles, was Sie brauchen, um einen einfachen Eselsohr-Effekt zu erzeugen, ähnlich dem, der auf der Yiibu-Site verwendet wird.

Firefox 3.0 erlaubt keine Positionierung von Pseudoelementen. Sie können in diesem Browser einige Eigenschaften verwenden, um dieses Problem zu beheben.

Hinweis:before ( ... display:block; width:0; )

Einen hellen Schatten hinzufügen

Das Erscheinungsbild der Ecke kann leicht verbessert werden, indem dem Pseudoelement eine Box-Shadow-Eigenschaft hinzugefügt wird (für Browser, die dies unterstützen). Durch Festlegen der Eigenschaft „overflow:hidden“ für die Elementklasse wird ein Teil des Schattens ausgeblendet, wodurch der Curl-Effekt unterbrochen wird.

Hinweis:before ( ... -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); )

Abgerundete Ecken

Auch in Verbindung mit abgerundeten Ecken lässt sich diese Technik relativ einfach anwenden. Leider weist jeder moderne Browser einen Fehler im Zusammenhang mit der Eigenschaft border-radius auf (einschließlich derjenigen, die die Eigenschaft ohne Präfix verwenden). Diese Situation erfordert zusätzliche Arbeit.

Das können nur Webkit-Browser abgerundete Ecken für Pseudoelemente, wenn sie nur 2 Strichteile haben. Opera 11 und Firefox 3.6 sorgen für ein atemberaubendes Durcheinander. Darüber hinaus weist Opera 11 bei diesem Vorgang den größten Fehler auf.

Die Verwendung aller vier Seiten beseitigt Probleme in Opera 11 und Firefox 3.6. Aber diese Methode Lösung führt zu einem Fehler in Safari 5, der zu einer gezackten diagonalen Linie führt. Bypass dieses Problem Sie können die Farbe für mindestens einen Teil des Strichs auf transparent einstellen.

Die Hintergrundfarbe ist durch den transparenten Umriss sichtbar. Im Idealfall erzeugt dieser Ansatz einen Effekt und enthält ein Minimum an Code. Aber Opera 11 zeigt Hintergrundfarbe durch einen transparenten Strich nur, wenn die Eigenschaft border-radius festgelegt ist.

Note-rounded:before ( content:""; position:absolute; top:0; right:0; border-width:8px; border-color:#fff #fff transparent transparent; background:#658E15; -webkit-border- Bottom-Left-Radius:5px; -moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px; display:block; width:0; )

Die CSS-Datei für die Demoseite enthält Kommentare, die für die Arbeit nützlich sind. Jeder Browser hat seine eigenen Besonderheiten, wenn er die Eigenschaft „border-radius“ oder angrenzende Elemente ohne Breite oder Höhe verwendet.

Endgültiger Code

Nachfolgend finden Sie den gesamten CSS-Code, der zum Erstellen eines geschwungenen Eckeneffekts mit subtilen Schatten mit nur einem HTML-Element erforderlich ist.

Position:relativ; Breite: 30 %; Polsterung: 1em 1,5em; margin:2em auto; Farbe:#fff; Hintergrund:#97C02F; Überlauf versteckt; ) .note:before ( content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15 ; Hintergrund:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Überwindung der Einschränkungen von Firefox 3.0 */ ) .note.rounded ( -webkit-border-radius:5px; -moz-border-radius:5px ; border-radius:5px; ) .note.rounded:before ( border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border- Radius:0 0 0 5px; Randradius:0 0 0 5px; )

Abschluss

Die Demoseite enthält Beispiele mit verschiedenen Farben, um sicherzustellen, dass der Effekt einfach anzuwenden ist.

Bedenken Sie, dass diese Technik weniger gut funktioniert, wenn Sie ein Bild als Hintergrund für ein Element verwenden, als wenn Sie eine einfache Farbe verwenden. Aber auch andere Methoden zur Organisation gebogener Ecken weisen solche Einschränkungen auf.