Wie Style Text mit CSS 3
Wenn Sie CSS 3 für ein iPhone oder iPad Website zu erstellen, erhalten Sie nicht nur die Vorteile von benutzerdefinierten Schriftarten genießen und Schatten fallen, sondern gewinnen auch die Herausforderung, Text Schlichte auf Bildschirmen mit unterschiedlichen Abmessungen. Keine Sorgen mehr machen: herauszufinden, wie man am besten die Dimensionierung von Text zu verwalten und zu entdecken dann die Freuden des Styling Text von CSS 3 verwendet wird.
Einstellen Textgröße
Um es einfacher Text auf dem iPhone zu lesen, das Setzen der Standard für die text-size-adjust Regel ist Auto: Der Text wird auf dem Bildschirm automatisch skaliert.
Auf dem iPad ist die Standardeinstellung keiner weil der größere Bildschirm nicht automatisch Text erfordert der Größe verändert werden. Auf vielen Websites, macht diese Einstellung die Seite leichter zu lesen, aber wenn Sie sorgfältig Ihre Seiten entworfen haben und gezielt Ihre Stile speziell auf das iPhone oder iPad, können Sie die automatische Größenänderung verhindern wollen.
Hier sind drei Beispiele dafür, wie Sie diese Option verwenden können:
-Webkit-text-size-adjust: auto - Webkit-text-size-adjust: none; -webkit-text-size-adjust: 80% -
Hier ist der Code Beispiel mit dem Zusatz von der Webkit-text-size-adjust Regel auf keiner- im Stil dieses Stück Code, einschließlich für alle diese Tags auf einmal macht kein Text in die Tags automatisch die Größe:
/ * Dieser Stil hilft älteren Browsern HTML5 verstehen und gemeinsame Tags 0 * / Artikel setzt, beiseite, Footer, Header, Menü, nav, Abschnitt, Details, Körper, h1, h2, h3, p, ul, li, {border: 0-Marge: 0-padding: 0-Display: Block - / * stoppt WebKit Ändern der Größe Text * / - Webkit-text-size-adjust: none;}Hinzufügen von Text Schatten
Mit CSS 3, können Sie Drop Schatten hinzufügen, um Text und einem Block-Element, wie ein Tag.
Ein hilfreicher Weg, um den Kontrast zwischen Text und Hintergrund zu erhöhen, ist ein Text Schatten hinzuzufügen. Text Schatten nicht nur Ihre Seite Designs interessanter zu machen, sondern auch Text viel besser lesbar zu machen, vor allem, wenn Ihr Entwurf hat einen komplexen Hintergrund oder die Vorder- und Hintergrundfarben haben nicht viel Kontrast.
Hier ist die Syntax für Textschatten für WebKit-Browser:
text-shadow: horizontal vertikal Verwischradius farb-
Hier ist, wie in diese Platzhalter füllt den Text Schatten beeinflusst:
horizontale und vertikale - Die ersten beiden Werte, die die horizontalen und vertikalen Offsets spezifizieren, erforderlich. Sie geben den Abstand der Schlagschatten unten und nach rechts des Textes erstreckt.
Verwischradius - Die dritte Einstellung, welche die Menge an Unschärfe im Schatten angibt, ist optional. Wenn Sie keinen Verwischradius umfassen, ist der Standardwert 0, der die angegebene Farbe als feste Farbe erscheinen lässt.
Farbe - Geben Sie eine Farbe seiner hexadezimalen Farbcode (die traditionellen 6-Zeichen-Farbcodes) oder dessen RGBA-Farbcode, die Sie unter den roten, grünen und blauen sowie Opazität angeben können. (Mehr über RGBa in einem Augenblick.)
Die folgende Codezeile fügt einen Textschatten mit dem Tag. Die Zahlen geben an, dass der Text Schatten zwei Pixel nach rechts und unterhalb des Textes mit einem 3-Pixel-Unschärfe erstreckt. In diesem Beispiel wird eine graue Farbe mit der # 999 Code Farbe hexadezimal angegeben.
h1 {text-shadow: 2px 2px 3px # 999-}Wenn Sie die Farbe als RGBA-Farb angeben, können Sie eine teilweise transparente Farbe definieren. RGBa Farben werden durch eine Reihe von Zahlen definiert, die angeben, wie viel rot, blau oder grün Sie wollen. Der Zahlenbereich ist 0 bis 255.
Die vierte Zahl definiert die Menge an Opazität oder Transparenz. (Der Bereich ist 1 für volle Opazität auf 0 für volle Transparenz.) Zum Beispiel die .6 im folgenden Beispiel zeigt eine Opazität von 60 Prozent- 40 Prozent der zugrunde liegenden Farbe durchscheint.
Der Stil für das vorangegangene Tag definiert gilt für jeden Text mit der Überschrift 1 Tag formatiert. Der Stil ist eine Klasse-Stil (durch den Punkt vor dem Namen angezeigt). Klassenstile sind vielseitiger und kann an jeden Text auf einer Seite aufgebracht werden.
.Schatten {text-shadow: .2em .2em .3em rgba (153.153.153, 0,6) -}In CSS kann Größen in vielen verschiedenen Messungen festgelegt werden, einschließlich der Pixel, Prozentsätze und die em Option in dem vorhergehenden Beispiel verwendet.