CSS 3 + HTML 5 sind die Zukunft des Webs. Sie sind noch nicht offiziell angekommen, obwohl viele Browser damit begonnen haben, sie teilweise zu unterstützen. In diesem Artikel werden fünf CSS3-Techniken vorgestellt, die Ihnen dabei helfen können, die Zukunft des Webs zu gestalten. Derzeit sollten diese Techniken nicht für formelle Kundenprojekte verwendet werden; sie eignen sich eher für Ihre persönliche Blog-Site, die Webdesign-Community oder Situationen, in denen sich Kunden nicht bei Ihnen beschweren.
1. Effekt abgerundeter Ecken
Eine der am häufigsten verwendeten neuen Funktionen von CSS3 ist der abgerundete Eckeneffekt. Das standardmäßige HTML-Quadratobjekt verfügt über quadratische 90-Grad-Ecken, mit denen Sie abgerundete Ecken erzielen können.
-moz-border-radius: 20px;
-webkit-border-radius
: 20px;
Sogar eine einzelne Ecke kann abgerundet werden, aber die Syntax von Mozilla und Webkit ist etwas anders.
-moz-border-radius-topleft: 20px;
-moz-border-
radius-bottomleft
: 10px;
-moz-border-radius-bottomleft: 10px;
-rightright-radius: 20px;
-webkit-border
-bottom-left-radius: 10px
; -webkit-border-bottom-right-radius: 10px
; Firefox, Safari, Chrome
2. Grafische Ränder
Wie der Name schon sagt, ist der grafische Rand der Rahmen, der die Verwendung von Bildern als Objekten ermöglicht. Die Syntax lautet wie folgt:
border: 5px solid #cccccc
-webkit-border-image: url(/images/border-image.png ) 5 Wiederholung;
-moz-border- Bild: url(/images/border-image.png
) 5 Wiederholung;
Grenze: 5px setzt die Breite des Rahmens und dann jeweils Die Rahmenbilddefinition teilt dem Browser mit, wie viel vom Bild als Rahmen verwendet werden soll. Das Randbild kann auch für jede Kante einzeln eingestellt werden:
border-bottom-rightright-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border- top -rightright-image
border-right-image
Unterstützte Browser: Firefox 3.1, Safari, Chrome
3. Blockieren Sie Schatten und Textschatten
Schatteneffekte waren einst etwas, das Webdesigner sowohl liebten als auch hassten. Jetzt, mit CSS3, brauchen Sie Photoshop nicht mehr. Es gibt bereits Websites, die diese Funktion verwenden, wie zum Beispiel 24 Ways website:
10px 10px 25px #ccc
.-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
Die ersten beiden Eigenschaften legen die X/Y-Verschiebung des Schattens fest, hier sind sie 10px, und die dritte Eigenschaft definiert die Unschärfe von der Schattengrad, der letzte legt die Farbe des Schattens fest. Textschatten kann auch so eingestellt werden:
Textschatten: 2px 2px 5px #ccc;
Unterstützte Browser: Firefox 3.1, Safari, Chrome (unterstützt nur Box Shadow), Opera (unterstützt nur Textschatten). Grün Der letzte Wert der drei blauen Farben stellt Transparenz dar. Darüber hinaus können wir auch Opazität verwenden, um Transparenz zu erzielen (derzeit wird diese Technik hauptsächlich für Light-Box-Effekte verwendet – Übersetzer).
4. Verwenden Sie RGBA, um Transparenzeffekte zu erzielen
Derzeit wird der Transparenzeffekt im Webdesign hauptsächlich durch PNG-Bilder erreicht (er wird jedoch im IE-Browser-Übersetzer nicht gut unterstützt). In CSS3 kann der Transparenzeffekt direkt erreicht werden.
rgba(200, 54, 54, 0,5);
Hintergrund: rgba(
200, 54, 0,5);
Farbe: #000
;
Unterstützte Browser: , Safari, Chrome, Opera (Deckkraft) und IE7 (Deckkraft, mit Korrekturen).
Verwenden Sie @Font-Face, um benutzerdefinierte Schriftarten zu implementieren
Es gibt mehrere Schriftarten, die im Webdesign relativ sicher sind, wie z. B. Arial, Helvetica, Verdana, Georgia und Comic Sans (im Allgemeinen ist Song Dynasty die einzige sichere Schriftart, die jetzt @font-face von CSS3 verwendet). Kann ich die Schriftarten selbst angeben, aber aufgrund von Urheberrechtsproblemen sind die tatsächlich verwendbaren Schriftarten begrenzt (außerdem sind die riesigen chinesischen Schriftarten auch ein schwer zu lösendes Problem – Übersetzer).
Die Syntax lautet wie folgt:
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
Unterstützte
Browser: Firefox 3.1, Safari, Opera 10 und IE7 (es erfordert einige Probleme. Wenn Sie keine Angst vor Problemen haben, können Sie diese Funktion im IE implementieren. Weitere Informationen finden Sie unter: Schriftart im IE zum Laufen bringen.)
Obwohl sich CSS3 noch in der Entwicklung befindet, sind die oben genannten Funktionen bereits verfügbar in einigen Browsern verwendet, insbesondere Safari. Leider ist Safari kein Mainstream-Browser.
Firefox verfügt derzeit über eine große Benutzerbasis. Darüber hinaus unterstützt der kommende Firefox 3.1 viele CSS3-Effekte. Da Firefox-Benutzer sehr motiviert sind, ein Upgrade durchzuführen, können viele Benutzer die neuen Funktionen von CSS3 kennenlernen.
Google Chrome wurde erst dieses Jahr veröffentlicht und basiert auf der Webkit-Engine. Da Safari hauptsächlich auf dem Mac-Markt eingesetzt wird, kann Chrome die Lücke auf dem Windows-Markt schließen.
Laut Statistik nutzten im November 2008 44,2 % der Nutzer Firefox, 3,1 % nutzten Chrome und 2,7 % nutzten Safari, was bedeutet, dass einige Funktionen von CSS3 bereits fast die Hälfte der Internetnutzer im Webdesign-Kreis unterstützen können Anteil kann höher sein, etwa 73,6 % (Daten bereitgestellt von Blog.SpoonGraphics)
6. Negative Faktoren
Die oben beschriebenen CSS3-Funktionen bringen hervorragende Ergebnisse auf Ihre Website, es müssen jedoch noch einige negative Faktoren berücksichtigt werden:
Internet Explorer: 46 % von Das Internet kann diese Effekte nicht erkennen, also verwenden Sie diese Dinge nicht für wichtige Designs. Stellen Sie außerdem sicher, dass alternative Designs verfügbar sind, wenn diese Effekte nicht funktionieren.
CSS-Validierungsprobleme: Diese CSS3-Funktionen sind nicht die endgültige Version. Derzeit verwenden verschiedene Browser unterschiedliche Tags, um diese Funktionen zu implementieren, was zu Validierungsproblemen für Ihr Style Sheet führen kann.
Aufgeblähter Code: Da verschiedene Browser unterschiedliche Definitionssyntax verwenden, wird Ihr CSS-Code mit der Zeit sehr aufgebläht.
Unsachgemäße Verwendung: Die unsachgemäße Verwendung dieser Effekte kann nachteilige Folgen haben, insbesondere bei Schatteneffekten.
Internationale Quelle dieses Artikels: http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
Chinesische Übersetzungsquelle: Offizielle Website von COMSHARP CMS (35 km). Übersetzung)