Heim > Artikel > Web-Frontend > Beschreiben Sie kurz, wie Webdesigner die CSS3-Technologie gut nutzen können

Beschreiben Sie kurz, wie Webdesigner die CSS3-Technologie gut nutzen können

Y2JOriginal: 2017-05-24 10:35:482072Durchsuche

In diesem Artikel werfen wir einen Blick auf die Vorteile von CSS3 und werfen einen Blick darauf, wie einige Webdesigner sie nutzen. Abschließend erfahren wir, was wir aus CSS3 herausholen können und wie wir seine neuen Funktionen in unseren Projekten nutzen können.

Vor ein paar Tagen habe ich im SmashingMagazine einen guten Artikel über die neue Technologie von CSS3 gesehen. Darin wurden die neuen Funktionen von CSS3 und deren Verwendung ausführlich vorgestellt, darunter: browserspezifische Attribute, Selektoren (Attribute Selector). , Bindestrich, Pseudoklasse, Pseudoelement), RGBA- und Transparenzattribute, mehrspaltiges Layout, mehrere Hintergrundbilder, Zeilenumbruch, Textschatten, abgerundete CSS-Ecken, Rahmenbild, Boxschatten, Boxgröße, Medienabfrage, Sprache, und Details, mit welchen Browsern jede neue Technologie derzeit kompatibel ist. Script House wollte diesen Artikel ursprünglich in eine chinesische Version übersetzen und mit allen teilen, stellte jedoch fest, dass ein Chinese die Übersetzung bereits abgeschlossen hatte, also war ich faul und habe die Übersetzung einer anderen Person erneut veröffentlicht. Ich möchte den Bloggern von Front End danken Anerkennung für ihre harte Arbeit bei der Übersetzung dieses Artikels für alle, die so wertvolle Lernmaterialien beigesteuert haben.

Wenn Sie Frontend-Entwicklung lieben und sich für CSS interessieren, dürfen Sie diesen Artikel nicht verpassen.

Cascading Style Sheets wurden vor 13 Jahren eingeführt und der weit verbreitete CSS 2.1-Standard wurde vor 11 Jahren erstellt. Wir sind also offensichtlich noch weit von dem entfernt, was wir damals waren. Es ist ziemlich bemerkenswert, wie weit die Website-Entwicklung in dieser Zeit fortgeschritten ist – wir hätten uns das eigentlich nicht vorstellen können.

Warum waren wir in der Vergangenheit so zurückhaltend und ängstlich, wenn es um CSS geht, es auszuprobieren? Warum verwenden wir immer noch fiese Hacks und Techniken, die auf JavaScript basieren, um Stile zu schreiben? Warum können wir nicht die umfangreichen CSS3-Funktionen und -Tools nutzen, die in modernen Browsern verfügbar sind und unsere Designqualität auf die nächste Stufe heben?

Es ist an der Zeit, CSS3-Funktionen ohne Angst vor Problemen in unsere Projekte einzuführen, während wir nach und nach CSS3-Funktionen und -Selektoren zu unseren Stylesheets hinzufügen. Wir können unsere Kunden auf die Vorteile von CSS3 aufmerksam machen (und dafür sorgen, dass alte Browser schneller verschwinden) – und das sollten wir auch tun, vor allem, weil dadurch Websites flexibler werden und weniger Entwicklungs- und Wartungskosten anfallen.

Browserspezifische Eigenschaften verwenden

Um die meisten CSS3-Funktionen nutzen zu können, müssen wir herstellerspezifische Erweiterungen zusammen mit den Originaleigenschaften verwenden. Der Grund dafür ist, dass die meisten Browser bisher nur einige CSS3-Eigenschaften unterstützen. Und leider werden einige Eigenschaften letztendlich möglicherweise nicht einmal vom W3C empfohlen. Daher ist es wichtig, sie von den Standardeigenschaften zu unterscheiden, indem Sie browserspezifische Eigenschaften angeben (und dann, falls sie redundant sind, Standards verwenden). kompatible Stile, um sie zu überschreiben).

Der Nachteil dieses Ansatzes besteht natürlich darin, dass er zu einem unordentlichen Stylesheet und einer inkonsistenten Leistung der Website zwischen den Browsern führt. Schließlich wollen wir nicht wieder die Notwendigkeit privater Browser-Hacks in unseren Stylesheets einführen. Die berüchtigten Marquee-, Blink- und anderen -Tags des Internet Explorers wurden in zahlreichen Stylesheets verwendet und wurden in den 1990er Jahren zur Legende. Sie führen immer noch dazu, dass sich viele bestehende Websites (in anderen Browsern) inkonsistent verhalten und sogar schwierig zu bedienen sind lesen. Und wir wollen uns jetzt doch nicht in die gleiche Situation begeben, oder?

Eine Website muss jedoch nicht in allen Browsern genau gleich aussehen. Manchmal ist es möglich, private Eigenschaften in einem Browser zu verwenden, um bestimmte Effekte zu erzielen.

Die häufigsten privaten Eigenschaften

gelten für Webkit-basierte Browser (z. B. Safari), die mit -webkit- beginnen, und Gecko-basierte Browser (z. B. Firefox), beginnend mit - moz-, Konqueror (-khtml-), Opera (-o-) und Internet Explorer (-ms-) haben alle ihre eigenen Attributerweiterungen (derzeit unterstützt nur IE8 das Präfix -ms-) Als professionelle Designer , müssen wir darauf achten:

Die Verwendung dieser privaten Eigenschaften führt dazu, dass unsere Stylesheets die Validierung nicht bestehen

. Daher ist es derzeit selten, sie in die endgültige Version des Stils zu integrieren. Aber in manchen Fällen, etwa beim Experimentieren oder Lernen, können wir zumindest in Erwägung ziehen, sie zusammen mit Standard-CSS-Eigenschaften in ein Stylesheet zu schreiben. Erweiterte Lektüre

Anbieterspezifische Erweiterungen und W3C
Anbieterspezifisch Erweiterungen zu CSS3
Herstellerspezifische Eigenschaften

1. Selektoren

CSS-Selektoren sind unglaublich leistungsstarke Werkzeuge: Sie ermöglichen es uns, spezifische HTML-Elemente ohne redundante Klassen, IDs oder JavaScripts verwenden zu müssen. Und die meisten von ihnen sind nicht neu zu CSS3 hinzugefügt, wurden aber nicht so weit verbreitet, wie sie sein sollten. Erweiterte Selektoren sind sehr nützlich, wenn Sie ein sauberes, schlankes Tag und eine bessere Trennung von Struktur und Leistung erreichen möchten. Sie können die Anzahl der Klassen und IDs in Tags reduzieren und Designern die Pflege von Stylesheets erleichtern.

Attributselektoren

Drei neue Attributselektoren wurden zu CSS3 hinzugefügt:

[att^="value"]
entspricht den Elementen
[att$="value" <code class="codecolorer css mac-classic">[att$="value"]]
Entspricht Elementen
[<code class="codecolorer css mac-classic">[att*="value"]att*=
"value"]

Elemente

Beschreiben Sie kurz, wie Webdesigner die CSS3-Technologie gut nutzen können , die das Attribut

mit einem bestimmten Wert Element

1
2
3
4
5
6
7
8
9

a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}

tweetCC Verwenden Sie einen Attributselektor, um Links anzugeben, die ein Titelattribut haben und mit den Zeichen „tweetCC“ enden:

123456789

a[title $="tweetCC" ] {position: absolut;top : 0;rechts : 0; Anzeige: block;width: 140px; height: 140px ;text-indent: -9999px;} td>

Browserunterstützung: Nur IE6 unterstützt keine CSS-Attributselektoren. Unterstützt werden die Browser IE7 und IE8, Opera, Webkit Core und Gecko Core. Daher ist es sicher, Attributselektoren in Ihren Stilen zu verwenden.

Bindestriche

Der einzige neu eingeführte Bindestrich in CSS3 ist der universelle Geschwisterselektor (sibling). Es zielt auf alle Geschwisterelemente eines Elements ab, die denselben übergeordneten Knoten haben.

Um beispielsweise einem Bild einen grauen Rand auf derselben Ebene eines bestimmten p hinzuzufügen (p und das Bild sollten denselben übergeordneten Knoten haben), reicht es aus, den folgenden Stil im Stylesheet zu definieren :

1
2
3

p~img {
border: 1px solid #ccc;
}

p~img { border

:

1px

solid

#ccc

;} td>

Browserunterstützung:

:nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...个元素*/

Alle gängigen Browser unterstützen diesen universellen Geschwisterselektor außer unserem Favoriten

IE6

Pseudoklassen

Die vielleicht größte Ergänzung zu CSS3 sind die neuen Pseudoklassen. Hier sind einige der interessantesten und nützlichsten:

p p:nth-last-child(-n+2)

:nth-child(n)

ermöglicht Ihnen die Angabe eines Elements basierend auf seiner Position in der Liste der untergeordneten Elemente des übergeordneten Knotens. Sie können Zahlen, numerische
Ausdrücke

oder die ungeraden und geraden Schlüsselwörter verwenden (ideal für Listen im Zebra-Stil). Wenn Sie also eine

Gruppe

von 3 Elementen nach dem vierten Element zuordnen möchten, können Sie einfach Folgendes verwenden:

:nth -last-child(n)

Die Idee ist die gleiche wie beim vorherigen Selektor, aber er gleicht Elemente von hinten ab (in umgekehrter Reihenfolge). Um beispielsweise die letzten beiden Absätze in einem p anzugeben, können wir Folgendes verwenden Selektor:

:last-child entspricht dem letzten untergeordneten Element unter einem übergeordneten Knoten, was äquivalent zu:nth-last-child ist (1)p:not([class*="lead"]) { color: black; }
:checked entspricht ausgewählten Elementen, z. B. checkbox

:empty Entspricht leeren Elementen (keine untergeordneten Elemente).

:not(s)

Entspricht allen Elementen, die nicht mit der/den angegebenen Aussage(n) übereinstimmen. Wenn Sie beispielsweise möchten, dass alle Absätze, die nicht die Klasse „lead“ verwenden, in Schwarz angezeigt werden, können Sie Folgendes schreiben: Beschreiben Sie kurz, wie Webdesigner die CSS3-Technologie gut nutzen können

1
2
3

#primary .text p:last-child {
margin: 0;
}

. Andrea Gandino verwendet auf seiner Website :last-child, um den letzten Absatz jedes Beitrags für den Selektor anzugeben und ihn mit einem Abstand (margin) ist auf 0 gesetzt:123

#primary .Text p:last-child { margin: 0; }

Browser-Unterstützung: Webkit-Kern- und Opera-Browser unterstützen alle neuen CSS3-Pseudoklassen, Firefox 2 und 3 (Gecko-Kern) unterstützen nur :not(s), :last-child, :o nly- child, :root, :empty, :target, :checked, :enabled und :disabled, aber Firefox 3.5 wird CSS3-Selektoren umfassender unterstützen. Der Trident-Kernbrowser (Internet Explorer) unterstützt diese Pseudo-Selektoren tatsächlich nicht.

Pseudo-Element

Das einzige in CSS3 eingeführte Pseudo-Element ist ::selection. Es ermöglicht Ihnen, die Elemente anzugeben, die vom Benutzer hervorgehoben (ausgewählt) werden.

Browserunterstützung: Derzeit unterstützt kein Internet Explorer- oder Firefox-Browser das Pseudoelement ::selection. Safari, Opera und Chrome werden alle unterstützt.

Erweiterte Lektüre

Selektoren Level 3: W3C Working Draft
CSS3: Attributselektoren: CSS3.info
Kompatibilitätstabelle: CSS3-Selektoren
CSS-Selektoren und Browserkompatibilität mit Pseudoselektoren
CSS3-Attributselektoren
::selection
Allgemeine Geschwisterauswahl
CSS3-Pseudoklassen

2. RGBA und Transparenz

Mit RGBA können Sie nicht nur die Farbe, sondern auch die Transparenz des -Elements festlegen. Einige Browser unterstützen dies noch nicht. Daher ist es am besten, vor RGBa ein nicht transparentes Farbattribut festzulegen, das von anderen Browsern unterstützt wird.

Beschreiben Sie kurz, wie Webdesigner die CSS3-Technologie gut nutzen können
Tim Van Damme verwendet RGBA für den Hover-Effekt des Links. RGBa wird beispielsweise auf dem Netzwerklink auf seiner Homepage verwendet:

2
3

1
2
3
4

#networks li a:hover,
#networks li a:focus {
background: rgba(164, 173, 183, .15);
}

#networks

li a:hover

#networks

1
2
3

p {
opacity: 0.8;
}

li a :focus { Hintergrund: rgba(164, 173, 183 , .15 ); } Beim Festlegen einer RGBA-Farbe müssen wir die Rot-, Blau- und Grünwerte nacheinander festlegen, was möglich ist 0-255 oder Prozentsatz. Der Transparenzwert sollte zwischen 0,0 und 1,0 liegen, beispielsweise steht 0,5 für 50 % Transparenz. Der Unterschied zwischen RGBA und Deckkraft besteht darin, dass Ersteres nur auf das angegebene Element angewendet wird, während Letzteres sich auf das von uns angegebene Element und seine Unterelemente auswirkt. Hier ist ein Beispiel, das zeigt, wie wir einem p 80 % Transparenz hinzufügen:

123	p {Deckkraft: 0,8; }

Browserunterstützung: RGBA wird von Webkit-Kernelbrowsern unterstützt. Wird nicht von allen IE-Versionen unterstützt. Firefox 2 unterstützt es ebenfalls nicht, aber Firefox 3 und Opera 9.5 unterstützen es beide. Opacity wird von den Browsern Opera, Webkit Core und Gecko Core unterstützt. Alle IE-Versionen werden ebenfalls nicht unterstützt. IE unterstützt nur seinen eigenen verdammten Filter

Erweiterte Lektüre:

CSS Color Modul Level 3: W3C Working Draft
RGBA-Farben: CSS3.info
RGBA-Farbraum
Ist CSS3 RGBa bereit zu rocken?
Super-Tolle Schaltflächen mit CSS3 und RGBA

3. Mehrspaltiges Layout

Dies ist ein neuer CSS3-Selektor, der es Ihnen ermöglicht, mehrere Spalten zu implementieren, ohne das Layout mehrerer p-Tags zu verwenden. Der Browser interpretiert dieses Attribut und generiert mehrere Spalten, wodurch der Text eine mehrspaltige Struktur erhält, die einer Zeitung nachempfunden ist.

Beschreiben Sie kurz, wie Webdesigner die CSS3-Technologie gut nutzen können
tweetCC verwendet den mehrspaltigen CSS3-Selektor auf seiner Homepage

tweetCC wird die Textanzeige auf seiner Homepage einführen. Für vier Spalten. Diese vier Spalten sind nicht schwebend p; stattdessen verwendet der Designer das folgende mehrspaltige CSS3-Layout:

1
2
3
4
5
6

.index #content p {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
}

.index

1
2
3

p {
column-rule: 1px solid #00000;
}

#content p { -webkit-column-count : 4; -webkit-column-gap : 20px; -moz-column-count : 4; -moz-column- Lücke : 20px; }

Mit diesem Selektor können wir drei Dinge definieren: Anzahl der Spalten (column-coun), Spaltenbreite (column-width, im Beispiel nicht verwendet) und Abstand/Lücke zwischen Spalten (column-gap). Wenn die Spaltenanzahl nicht festgelegt ist, passt der Browser auf so viele Spalten, wie die Breite zulässt. Um in jeder Spalte eine numerische Trennung hinzuzufügen, können wir das Column-Rule-Attribut verwenden, dessen Funktion dem Border-Attribut ähnelt:

123	p { columns-rule: 1px solid #00000; }

Das obige Attribut hat im Browser keine Auswirkung, da es keine Spalten hat. Es kann mit dem obigen Beispiel verwendet werden.

Verwandte Eigenschaften: Column-break-after, Column-break-before, Column-span, Column-fill.

Browserunterstützung: Das mehrspaltige Layout wird derzeit von Safari 3+, Chrome und Firefox 1.5+ unterstützt.

Erweiterte Lektüre:

CSS3-Modul: Mehrspaltiges Layout: W3C Working Draft
Spalten
CSS3 – Demonstration des mehrspaltigen Layouts
CSS3-Spalten
TweetCC entwerfen
Einführung in CSS3 – Teil 5: Mehrere Spalten

4. Mehrere Hintergrundbilder

CSS3 ermöglicht die Verwendung mehrerer Attribute wie Hintergrundbild, Hintergrundwiederholung , background-size, background-position, background-originund background-clip usw. fügen mehrere Ebenen von Hintergrundbildern hinzu ein Element.

Der einfachste Weg, einem Element mehrere Hintergründe hinzuzufügen, ist die Verwendung von Kurzcode. Sie können alle oben genannten Attribute in einer Anweisung angeben, aber die am häufigsten verwendeten sind Bild, Position und Wiederholung:

1
2
3
4
5

p {
background: url(example.jpg) top left no-repeat,
url(example2.jpg) bottom left no-repeat,
url(example3.jpg) center center repeat-y;
}

123 45

p { Hintergrund: url( example.jpg ) oben links keine Wiederholung, URL(example2.jpg) unten links keine Wiederholung, url(example3.jpg) Mitte Mitte repeat-y; }

Das erste Bild ist dasjenige, das dem Benutzer „am nächsten“ ist.

Eine komplexere Version dieses Attributs könnte so aussehen:

1
2
3
4
5

p {
background: url(example.jpg) top left (100% 2em) no-repeat,
url(example2.jpg) bottom left (100% 2em) no-repeat,
url(example3.jpg) center center (10em 10em) repeat-y;
}

p {

background

url

(example.jpg

)

oben links

(

100

% 2em

)

keine Wiederholung

url (example2.jpg)

unten

links
(100%

2em

) No-Repeat,

URL

(

1
2
3

.widefat * {
word-wrap: break-word;
}

example3.jpg) center center (10em 10em) repeat-y; }

Hier ist (100 % 2em) der Wert der Hintergrundgröße; das erste Hintergrundbild erscheint in der oberen linken Ecke und wird gestreckt auf 100 % der Breite des p und 2em Höhe. Da es nur von wenigen Browsern unterstützt wird und die fehlende Anzeige des Hintergrunds auf der Website die visuelle Wirkung der Website beeinträchtigt, ist dies kein weit verbreitetes Attribut. Dennoch ist klar, dass es den Arbeitsablauf eines Designers erheblich verbessern und die Anzahl der Tags erheblich reduzieren kann – im Vergleich zu anderen Möglichkeiten, den gleichen Effekt zu erzielen. Browserunterstützung: Derzeit sind mehrere Hintergrundbilder nur in Safari/Chrome und Konqueror verfügbar Erweiterte Lektüre: Mehrere Hintergrundbilder überlagernMehrere Hintergründe mit CSS3 und CSS3.infoEinführung in CSS3, Teil 6: Hintergründe5. Das Attribut „Zeilenumbruch“Wortumbruch wird verwendet, um dies zu verhindern ist zu lang. Die Zeichenfolge läuft über. Es stehen zwei Attributwerte zur Verfügung: normal und break-word. Der Normalwert (Standard) schneidet Text nur an zulässigen Haltepunkten, wie z. B. Bindestrichen, ab. Wenn Break-Word verwendet wird, kann der Text bei Bedarf gekürzt werden, um ihn an den zugewiesenen Platz anzupassen und ein Überlaufen zu verhindern. Das WordPress-Backend verwendet Zeilenumbruch in der Datentabelle. in WordPress Im Kontrollfeld wird das Zeilenumbruch-Attribut für Elemente in Tabellen verwendet, zum Beispiel in Listen von Beiträgen und Seiten:

123	.widefat * {word-wrap: break-word; }

Browserunterstützung: Zeilenumbruch wird von Internet Explorer und Safari/Chrome unterstützt. Firefox wird es in Version 3.5 unterstützen.

Erweiterte Lektüre:

Umbruch erzwingen: die Eigenschaft „Wortumbruch“ – CSS Text Level 3: W3C Arbeitsentwurf
Wortumbruch: CSS3.info
CSS-Zeilenumbruch
Zeilenumbruch: Mozilla Developer Center

6. Text-Shadow

Obwohl es bereits in CSS2 existiert, ist Text-Shadow keine häufig verwendete CSS-Eigenschaft. Aber es wird in CSS3 weit verbreitet sein. Diese Eigenschaft gibt Designern ein neues browserübergreifendes Tool an die Hand, mit dem sie Designs eine Dimension verleihen können, um Text hervorzuheben.

Trotzdem müssen Sie sicherstellen, dass der Text in Ihrem Design lesbar ist, falls der Browser des Benutzers die erweiterten CSS3-Eigenschaften nicht unterstützt. Geben Sie dem Text und der Hintergrundfarbe genügend Kontrast, um zu verhindern, dass das text-shadow-Attribut vom Browser richtig gerendert oder verstanden wird.

Beakapp verwendet das text-shadow-Attribut in seiner Website: Inhaltsbereich .

BeakApp .com verwendet das text-shadow-Attribut für den Inhaltsbereich, um dem Text Tiefe und Dimension zu verleihen und ihn hervorzuheben – anstatt eine Art Bildersetzungstechnik zu verwenden. Diese Eigenschaft ist derzeit nur in Safari und Chrome verfügbar.

Das Hauptmenü dieser Website verwendet das folgende CSS:

1
2
3

.signup_area p {
text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

.signup_area

p {

1
2
3
4
5

p {
text-shadow: red 4px 4px 2px,
yellow -4px -4px 2px,
green -4px 4px 2px;
}

text-shadow: rgba(0 ,0,0,.8) 0 1px 0;}

Hier verwenden wir Schattenfarbe (verwendet RGBA, zuvor beschrieben), dann Versatz nach rechts (x-Koordinate) und unten (y-Koordinate) und schließlich Unschärferadius Wenn Sie mehrere Schatten für einen Text verwenden möchten, können Sie diese durch Kommas trennen . Zum Beispiel:

12 3 45

p { text-shadow: rot 4px 4px 2px , gelb -4px -4px 2px, grün -4px 4px 2px; }

Browserunterstützung: Webkit-Kernbrowser und Opera 9.5 unterstützen Textschatten. Internet Explorer unterstützt es nicht, Firefox wird es in der kommenden Version 3.5 unterstützen.

Erweiterte Lektüre:

Textschatten: die Eigenschaft „text-shadow“ – W3C-Arbeitsentwurf
Textschatten: Web Style Sheets CSS-Tipps und Tricks
Textschatten, Photoshop ähnliche Effekte mit CSS – CSS3.info
Erstellen Sie coole und clevere Texteffekte mit CSS Text-Shadow
Safari's Text-Shadow Anti-Aliasing CSS Hack
text-shadow
text-shadow: Mozilla Developer Center

7. @font-face-Attribut

Obwohl es das meiste ist @font-face ist eine CSS3-Funktion (obwohl sie in CSS2 eingeführt wurde) und wird auf Websites immer noch nicht so weit verbreitet wie andere CSS3-Eigenschaften. Dies ist hauptsächlich auf Probleme mit der Schriftartenlizenzierung und dem Urheberrecht zurückzuführen: Eingebettete Schriftarten können leicht von Websites entfernt werden Das Hoch- und Herunterladen stellt für Schriftartenhersteller ein großes Problem dar.

Trotzdem scheint es, dass das Problem allmählich gelöst wird. TypeKit verspricht, eine Lösung zu entwickeln, die es Designern und Schriftartenanbietern erleichtert, Lizenzprobleme zu vereinheitlichen, was die Typografie im Website-Design erheblich bereichern und das @font-face-Attribut in der realen Arbeit nutzbar machen wird.

Die Mozilla Labs JetPack-Website verwendet die Font-Face-Regel, um die DroidSans-Schriftart zu verwenden.

Eine der wenigen Websites, die dieses Attribut verwenden, ist das neu gestartete JetPack MozillaLabs.

1
2
3
4

@font-face{
font-family: 'DroidSans';
src: url('../fonts/DroidSans.ttf') format('truetype');
}

234

@font-face{

Schriftfamilie

'DroidSans'

;

1
2
3

p {
font-family: "DroidSans";
}

src: url('../fonts/DroidSans.ttf')format('truetype'); }

Um eingebettete Schriftarten in Ihrer Website zu verwenden, müssen Sie jeden Stil individuell gestalten ( zum Beispiel normal, fett und kursiv). Stellen Sie sicher, dass Sie nur Schriftarten verwenden, die für die Verwendung auf der Website lizenziert sind, und geben Sie dem Schriftdesigner bei Bedarf eine gewisse Anerkennung. Nachdem Sie die @font-face-Regel definiert haben, können Sie das gewöhnliche Attribut „font-family“ verwenden, um auf die Schriftart zu verweisen:

123	p { font -family: "DroidSans"; }

Wenn ein Browser @font-face nicht unterstützt, verwendet er die nächste Schriftart, die in der Eigenschaft „font-family“ (CSS-Schriftbibliothek) angegeben ist. Bei unterstützten Browsern ist dies für einige Websites möglicherweise machbar, wenn es sich bei der Schriftart @font-face um einen Luxusartikel handelt (der nur von wenigen Elementen verwendet wird). Funktionen möchten Sie möglicherweise andere Lösungen verwenden, z. B. sIFR oder Cufón. Bedenken Sie jedoch, dass diese Tools besser für Überschriften oder kürzere Texte geeignet sind, da das Kopieren und Einfügen solcher Inhalte schwierig und nicht benutzerfreundlich ist.

Wäre es nicht großartig, diese Art von Schriftart auf Ihrer Website zu verwenden? Dave Sheas Experiment mit Cufón und Museo Sans. sehr schön!

Browserunterstützung: @font-face wird von Safari 3.1+ und Chrome unterstützt. Internet Explorer unterstützt die Schriftart . Opera 10 und Firefox 3.5 werden es unterstützen. Schriftart. Opera 10 und Firefox 3.5 werden es unterstützen.

Erweiterte Lektüre:

Schriftbeschreibungen und @font-face – W3C-Arbeitsentwurf
Web-Schriftarten mit @font-face
@font-face – Sitepoint
Schriftarten für @font-face-Einbettung verfügbar
@font-face
wunderschöne Schriftarten mit @font-face
Wir stellen vor: Typekit

8. Abgerundete Ecken (Randradius)

Randradius kann abgerundete Ecken zu HTML-Elementen ohne Hintergrundbild hinzufügen. Heutzutage ist es wahrscheinlich die am häufigsten verwendete CSS3-Eigenschaft, einfach weil die Verwendung abgerundeter Ecken besser ist und weder dem Design noch der Benutzerfreundlichkeit widerspricht.

Anstatt Javascript oder weitere HTML-Tags hinzuzufügen, fügen Sie einfach einige CSS-Eigenschaften hinzu und denken Sie positiv darüber nach. Diese Lösung ist übersichtlich und relativ effizient und erspart Ihnen die stundenlange Suche nach cleveren Browserlösungen und Javascript-basierten Eckenrundungen.

Sam Browns Blog verwendet den Randradius.

Sam Brown verwendet den Rand- Radius wird ausführlich in den Titeln, Kategorien, Links und PS seines Blogs verwendet. Die Verwendung von Bildern zur Erzielung dieses Effekts wird zeitaufwändiger sein, was einer der Gründe ist, warum die Verwendung von CSS3-Eigenschaften in Projekten ein wichtiger Schritt zur Verbesserung der Entwicklungseffizienz ist

Um abgerundete Ecken zu Kategorielinks hinzuzufügen, verwendete Sam die Folgender CSS-Ausschnitt:

1
2
3
4
5
6

h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}

12 3456

h2 span { Farbe: #1a1a1a; padding: . 5em ; -webkit-border-radius: 6px; -moz-border-radius: 6px; }

Wir können noch einen Schritt weiter gehen und rohe CSS3-Eigenschaften und Konqueror-Eigenschaftserweiterungen wie folgt hinzufügen:

1
2
3
4
5
6
7
8

h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}

4
5

1
2
3
4
5
6
7
8
9
10
11
12
13
14

p {
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}

h2 span { Farbe: # 1a1a1a; Auffüllung: .5em; -webkit-border-radius: 6px ; -moz-border-radius: 6px; -khtml-border-radius: 6px; Grenzradius: 6px; }

Wenn wir wollen Wenn wir dieses Attribut auf eine bestimmte Ecke eines Elements anwenden, können wir jede Ecke einzeln angeben: 1234567891011121314

p { -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomright: 6px ; -moz-border-radius-bottomleft: 6px span>; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius : 6px; -webkit-border-bottom-right-radius: 6px ; -webkit-border-bottom-left-radius: 6px; border-top-right-radius: 6px; span> border-top-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px;

Browserunterstützung: Border-Radius wird nur von allen Versionen von IE-Browser und Opera unterstützt, wird jedoch von Webkit- und Gecko-Kernbrowsern unterstützt.

Erweiterte Lektüre:

border-radius: W3C Working Draft
Randradius: Erstellen Sie abgerundete Ecken mit CSS! — CSS3.info
Einführung in CSS3, Teil 2: Ränder
Eine Ode an den Randradius
CSS3-Randradius und abgerundete Ecken

9. Randbild

Mit dem Attribut „border-image“ können Sie ein Bild am Rand des Elements festlegen, sodass Sie aus dem Üblichen auswählen können einfarbig, gepunktet und andere frei von Randstilen. Dieses Attribut bietet Designern ein besseres Werkzeug zum einfachen Definieren des Rahmenstils von Designelementen als das Attribut „Hintergrundbild“ (für fortgeschrittene Designs) oder der langweilige Standardrahmenstil. Wir können auch explizit definieren, wie ein Rand skaliert oder gekachelt werden kann.

Der SpoonGraphics-Blog verwendet das border-image-Attribut für seine Bildränder.

Im SpoonGraphis-Blog wird border-image wie folgt für den Bildrand verwendet:

1
2
3
4
5
6

#content .post img {
border: 6px solid #f2e6d1;
-webkit-border-image: url(main-border.png) 6 repeat;
-moz-border-image: url(main-border.png) 6 repeat;
border-image: url(main-border.png) 6 repeat;
}

123456

#content .post img { Rahmen: 6px solid #f2e6d1; -webkit-border-image: URL(main-border.png) 6 wiederholen; -moz-border-image: url(main-border.png ) 6 wiederholen ; border-image: url(main-border.png) 6 wiederholen; }

Um das Randbild zu definieren, müssen wir die Bildadresse angeben, welcher Teil des Bildes abgeschnitten und auf jeder Seite des Elements verwendet wird und ob das Bild skaliert oder gekachelt wird.

Um ein p zu erstellen, das das Bild unten als Rahmen verwendet, sollten wir den folgenden Code verwenden (wir werden für dieses Beispiel Opera- und Konqueror-Unterstützung hinzufügen):

1
2
3
4
5
6
7
8

p {
border-width: 18px 25px 25px 18px;
-webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
-moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
-o-border-image: url(example.png) 18 25 25 18 stretch stretch;
-khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
border-image: url(example.png) 18 25 25 18 stretch stretch;
}

23 4

6
7

1
2
3
4

p {
(...)
border-image: url(example.png) 18 25 25 18 stretch repeat;
}

p { border-width: 18px 25px 25px 18px; -webkit-border-image: URL(example.png) 18 25 25 18 stretch stretch; -moz-border-image: URL(example.png) 18 25 25 18 stretch stretch; -o-border-image: span> URL(example.png) 18 25 25 18 stretch stretch; -khtml-border-image: URL(example.png ) 18 25 25 18 stretch stretch; border-image : URL( example.png) 18 25 25 18 dehnbar dehnbar; }

Der letzte Wert dieses Attributs kann „stretch“ (Standard), „round“ (nur ein durch Ganzzahl-mal gekacheltes Bild wird an der zulässigen Stelle ausgefüllt) oder „repeat“ sein. In unserem Beispiel werden der obere, untere, linke und rechte Rand des Bildes gestreckt. Wenn nur die oberen und unteren Ränder gestreckt werden sollen, können wir das folgende CSS verwenden:

1234	p { (...) border-image: url(example.png) 18 25 25 18 dehnen wiederholen ; }

Wir können jede Ecke einzeln angeben, wenn wir für jede Ecke ein anderes Bild verwenden möchten:

tr>

1
2
3
4
5
6
7
8
9
10

p {
border-top-image: url(example.png) 5 5 stretch;
border-right-image: url(example.png) 5 5 stretch;
border-bottom-image: url(example.png) 5 5 stretch;
border-left-image: url(example.png) 5 5 stretch;
border-top-left-image: url(example.png) 5 5 stretch;
border-top-right-image: url(example.png) 5 5 stretch;
border-bottom-left-image: url(example.png) 5 5 stretch;
border-bottom-right-image: url(example.png) 5 5 stretch;
}

123456789 10

p { border -top- Bild: URL (example.png ) 5 5 stretch; border-right-image: URL(example.png) 5 5 stretch; span>border-bottom-image: URL(example.png) 5 5 stretch; border-left-image: URL( example.png) 5 5 stretch ;border-top-left-image: URL span>(example.png em>) 5 5 stretch; border-top-right-image: URL( span>example.png) span> 5 5 stretch; border-bottom-left-image: URL(example.png) 5 5 stretch; border- Bild unten rechts: URL(example.png) 5 5 stretch; }

Wenn der Browser das Attribut „border-image“ nicht unterstützt, ignoriert er diese Attribute und wendet nur andere definierte Randattribute an, wie z. B. „border-width“ und „border-color“.

Browser-Unterstützung durchsuchen: border-image wird derzeit nur von Webkit-Kernbrowsern unterstützt. Ich bin mir nicht sicher, ob die nächste Version von Firefox dies unterstützen wird.

Erweiterte Lektüre:

Die Eigenschaft „border-image“: W3C Working Draft
Randbild: Bilder für Ihren Rand verwenden – CSS3.info
Randbild in Firefox
Demonstrationsseite für Randbilder
Replikation von iPhone-Tasten auf die „Webkit“-Art!

10. Box-shadow

Das box-shadow-Attribut kann Schatten zu HTML-Elementen hinzufügen, ohne zusätzliche Tags oder Hintergrundbilder. Wie die Text-Shadow-Eigenschaft verbessert sie die Details des Designs und da sie die Lesbarkeit des Inhalts nicht beeinträchtigt, kann sie eine großartige Möglichkeit sein, diesen zusätzlichen Eindruck/Effekt hinzuzufügen.

Beschreiben Sie kurz, wie Webdesigner die CSS3-Technologie gut nutzen können
10to1 verwendet das Box-Shadow-Attribut .10to1 fügt einen einfachen Schatten zu seinem Navigationsbereich hinzu und wendet diesen an Attribut für den Hover-Effekt des Navigationslinks:

3
4

1
2
3
4
5
6
7
8
9

#navigation {
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
}
#navigation li a:hover,
#navigation li a:focus {
-webkit-box-shadow: 0 0 5px #111;
-moz-box-shadow: 0 0 5px #111;
}

6 789

#navigation { -webkit-box-shadow: 0 0 10px #000; - moz-box-shadow: 0 0 10px #000; } #navigation li a :hover, #navigation li a:focus { -webkit-box-shadow : 0 0 5px #111; -moz-box-shadow: 0 0 5px #111; }

Das Box-Shadow-Attribut kann mehrere Werte annehmen: horizontaler Versatz, vertikaler Versatz, Unschärferadius, Streckungsradius und Schattenfarbe. Am häufigsten werden horizontale und vertikale Versätze sowie Schattenfarben verwendet.

Um einen roten Schatten auf ein P mit einem Versatz von rechts und unten um 4 Pixel ohne Unschärfe anzuwenden, können wir den folgenden Code verwenden:

1
2
3
4
5

p {
-moz-box-shadow: 4px 4px 0 #f00;
-webkit-box-shadow: 4px 4px 0 #f00;
box-shadow: 4px 4px 0 #f00;
}

45

p {

-moz-box-shadow:
4px 4px 0 #f00

;

-webkit- box-shadow: 4px 4px 0 #f00

;

box-shadow:

4px 4px 0 #f00

;

}

Browser-Unterstützung: Box-Shadow wird derzeit nur von Webkit-Kernbrowsern unterstützt, aber auch der kommende Firefox 3.5 wird eine gute Unterstützung bieten. Erweiterte Lektüre:

Die Eigenschaft „box-shadow“ – W3C Working Draft

Box-Shadow, eine der besten neuen Funktionen von CSS3 – CSS3.info

1
2
3
4
5
6
7

input[type="text"],
textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

Apples Navigationsleiste verwendet nur CSSBox Shadow – Surfin' Safari-Blog11. BoxgrößeGemäß der CSS 2.1-Spezifikation wird bei der Berechnung der Gesamtgröße der Box die Der Rand des Elements und die Polsterung sollten zur Breite und Höhe hinzugefügt werden. Es ist jedoch bekannt, dass ältere Browser ihre eigenen, sehr „kreativen“ Möglichkeiten haben, diese Spezifikation zu interpretieren. Mit dem Box-Sizing-Attribut können Sie angeben, wie der Browser die Breite und Höhe eines Elements berechnet. WordPress verwendet das border-box-Attribut für alle Eingabefeldelemente im Bedienfeld. WordPress Der Backend-Bereich verwendet dieses Attribut für alle seine Texttyp-Eingabe-Tags und Textbereichs-Tags:

Das dritte Attribut (-ms-box-sizing) ist nur unter Internet Explorer 8 gültig. Über andere Selektoren fügt das WordPress-Stylesheet auch das Konqueror-Attribut hinzu: -khtml-box-sizing.

Die Box-Sizing-Eigenschaft kann einen von zwei Werten annehmen: border-box und content-box. Content-Box rendert die Breite wie in CSS 2.1 definiert. Border-Box subtrahiert Abstand und Ränder von der eingestellten Breite und Höhe (wie in älteren Browsern).

Browserunterstützung: Box-Sizing wird von den Browsern IE8, Opera, Gecko Core und Webkit Core unterstützt.

Erweiterte Lektüre:

'box-sizing'-Eigenschaft: W3C Candidate Empfehlung
Box-Sizing, Box-ModellKorrekturen für die einfachen Leute: CSS3.info
CSS3-Boxgrößenattribut

12

Mit Medienabfragen können Sie unterschiedliche Stile für verschiedene Geräte basierend auf deren Fähigkeiten definieren. Wenn beispielsweise der sichtbare Bereich weniger als 480 Pixel beträgt, möchten Sie möglicherweise, dass die Seitenleiste der Website unterhalb des Hauptinhalts angezeigt wird, sodass sie nicht auf der rechten Seite schwebt und angezeigt wird:

1234567

input[type="text"] , textarea { -moz-box-sizing: border -box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing : border-box; }

1
2
3
4
5
6
7
8
9
10
11

#sidebar {
float: right;
display: inline; /* IE Double-Margin Bugfix */
}

@media all and (max-width:480px) {
#sidebar {
float: none;
clear: both;
}
}

234

6
7

1
2
3
4
5
6
7
8
9

a {
color: grey;
}

@media screen and (color) {
a {
color: red;
}
}

91011

#sidebar { float: rechts; display: inline; /* IE Double-Margin Bugfix */ }@media alle und (max-width:480px) { #sidebar { float: keine; clear: beide; class="br0">} td>

Sie können auch das Gerät angeben, das den Farbfilter verwendet:

123 456789

a { Farbe:grau;}@media Bildschirm und (Farbe) { a { Farbe: rot; >>

Das Potenzial ist unbegrenzt. Dieses Attribut ist nützlich, da Sie keine separaten Stylesheets mehr für verschiedene Geräte schreiben müssen und nicht JS verwenden müssen, um die Eigenschaften und Funktionen des Browsers jedes Benutzers zu bestimmen. Eine der beliebtesten JavaScript-basierten Lösungen zur Implementierung eines flexiblen Layouts ist die Verwendung von Smart Fluid Layout, um das Layout flexibler an die Browserauflösung des Benutzers anzupassen.

Browserunterstützung: Medienabfragen werden von Browsern unterstützt, die auf dem Webkit-Kern und Opera basieren. Firefox wird es in Version 3.5 unterstützen. Der IE unterstützt diese Eigenschaften derzeit nicht und es gibt keine Pläne, sie in zukünftigen Versionen zu unterstützen.

Erweiterte Lektüre:

Medienanfrage: W3C-Kandidatenempfehlung
Erweitert auf CSS 3-Medienabfragen
Medienabfragen: CSS3.info
Der neueste Stand des Webs: Medienabfragen
Sichere Medienabfragen
Medientypen

13. Sprache

Mit dem Sprachmodul CSS3 können Sie Sprachstile für Bildschirmleseprogramme festlegen. Sie können verschiedene Einstellungen für die Stimme steuern, wie zum Beispiel:

Sprachlautstärke
mit einer Zahl von 0 bis 100 (0 ist stumm), einem Prozentsatz oder einem Schlüsselwort (stumm). ,x-leise, leise, mittel, laut und x-laut usw.), um die Lautstärke einzustellen.
Voice-Balance
steuert, welcher Kanal kommt (sofern das Lautsprechersystem des Benutzers Stereo unterstützt).
Sprechen
weist den Bildschirmleser an, relevanten Text, Zahlen oder Satzzeichen vorzulesen. Verfügbare Schlüsselwörter sind „none“, „normal“, „buchstabieren“, „digits, „literal-punctuation“, „no-punctuation“ und „inherit“.
Pausen und Pausen
Eingestellt eine Pause oder ein Stopp vor oder nach dem Lesen eines Elements. Sie können Zeiteinheiten (z. B. „2s“ für 2 Sekunden) oder Schlüsselwörter (keine, x-schwach, schwach, mittel, stark und x-stark) verwenden.
Hinweise
Verwenden Sie den Ton, um bestimmte Elemente und die Lautstärke des Controllers zu begrenzen.
Voice-Family
Stellen Sie einen bestimmten Sprachtyp und eine bestimmte Sprachsynthese ein (genau wie bei Font-Family).
Sprachrate
Kontrollieren Sie die Lesegeschwindigkeit. Kann als Prozentsatz oder Schlüsselwörter eingestellt werden: x-langsam, langsam, mittel, schnell und x-schnell
Voice-Stress
gibt jede Belastung an, die verwendet werden sollte verschiedene Schlüsselwörter: keine, moderat, stark und reduziert.

Sagen Sie dem Screenreader beispielsweise, dass er alle H2-Tags mit männlicher Stimme lesen soll, verwenden Sie den linken Lautsprecher und verwenden Sie eine Soft-Taste Ton Entsprechend dem angegebenen Ton kann der Stil wie folgt angegeben werden:

1
2
3
4
5
6

h2 {
voice-family: female;
voice-balance: left;
voice-volume: soft;
cue-after: url(sound.au);
}

123456

h2 { voice-family : weiblich; Stimmbalance: left; voice-Lautstärke: weich ; Cue-After: url(sound.au); }

Leider wird diese Eigenschaft derzeit nur sehr wenig unterstützt, aber es lohnt sich auf jeden Fall, ihr Aufmerksamkeit zu schenken, da wir die Benutzerfreundlichkeit unserer Websites in Zukunft verbessern können.

Browserunterstützung: Derzeit unterstützt nur der Opera-Browser (Windows XP und 2000) einige Eigenschaften des Sprachmoduls. Um sie zu verwenden, verwenden Sie das Präfix -xv-, zum Beispiel -xv-voice-balance: right.

Erweiterte Lektüre:

CSS3-Sprachmodul – W3C-Arbeitsentwurf
CSS3 Speech – CSS3.info
Audio-CSS: Unterstützt CSS 2 Auditory Stylesheet/CSS 3 Speech-Modul

Ende

CSS3-Eigenschaften können Ihren Arbeitsablauf erheblich verbessern und einige der zeitaufwändigsten CSS-Aufgaben kostengünstig machen. Es dauert eine geringer Aufwand und ermöglicht bessere, sauberere und leichtere Code-Tags. Einige Eigenschaften werden noch nicht einmal von den neuesten Browsern umfassend unterstützt, aber das bedeutet nicht, dass wir nicht damit experimentieren oder Benutzern, die fortgeschrittene Browser verwenden, erweiterte Funktionen und CSS-Stile bieten können.

Denken Sie an dieser Stelle daran, dass die Pflege unserer Benutzer auch nützlich und notwendig ist: Eine Website muss nicht in jedem Browser gleich aussehen, und wenn ein Unterschied nicht der Fall ist ( Da sie sich negativ auf die Ästhetik und Benutzerfreundlichkeit der Website auswirken, sollte dies berücksichtigt werden. Wenn wir weiterhin jede Menge Zeit und Geld damit verschwenden, jedes Detail absolut konsistent zu machen (anstatt einen flexibleren und zukunftsorientierten Ansatz zu verfolgen), werden Benutzer keinen Bedarf/Anreiz haben, ihre Browser zu aktualisieren. Auf diese Weise müssen wir lange warten, bis alte Browser zu antiken Browsern werden und leistungsstarke moderne Browser zum Standard werden.

Je früher wir experimentieren und neue CSS3-Eigenschaften verwenden, desto eher werden sie verfügbar sein. Je früher wir populäre Browser unterstützen sie, desto früher können wir sie umfassend nutzen.

Empfohlene Lektüre und Ressourcen:

CSS3 VorherigeAnsichten: CSS3.info
CSS 3: Spannende Funktionen und Features: 30 nützliche Tutorials
5 CSS3-Techniken für gängige Browser, die die Leistung von jQuery nutzen
Einführung in CSS3 – Teil 1: Was ist das?
Vergleich von Layout-Engines (Cascading Style Sheets) und Wikipedia
Progressive Verbesserung
Fünf Browserunterschiede im CSS-Design I kann damit leben
Progressive Enhancement with CSS
CSS-Unterstützung in Opera 9.5

Über den ursprünglichen Autor

Inayaili de León ist ein portugiesischer Webdesigner. Sie interessiert sich sehr für Webdesign und Frontend-Codierung und liebt schöne und saubere Websites. Sie lebt in London. Sie können weitere ihrer Artikel auf Web Designer Notebook sehen und ihr auf Twitter folgen.

【Verwandte Empfehlungen】

1. CSS3 kostenloses Video-Tutorial

2.Erklären Sie, was CSS3 ist?

3. Detaillierte Erläuterung von Beispielen für Selektoren in CSS3

4. Detaillierte Erläuterung von Beispielen für Inhaltsattribute in CSS3

5. Ausführliche Erklärung der 10 Top-Befehle in CSS3

Das obige ist der detaillierte Inhalt vonBeschreiben Sie kurz, wie Webdesigner die CSS3-Technologie gut nutzen können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erklärung der 10 wichtigsten Befehle in CSS3Nächster Artikel：Ausführliche Erklärung der 10 wichtigsten Befehle in CSS3

In Verbindung stehende Artikel

Mehr sehen