Wie Verwenden von CSS3 zu fallen Caps anlegen
Einführung
Ich verstehe, dass der: first-letter-Selektor ist seit einigen Jahren schon, aber ich muss zugeben, dass ich es nie benutzt habe. Ich habe kürzlich entdeckt einen Code jedoch, dass zeigt, wie die Anwendung: first-letter Wähler zusammen mit der ersten Kind und einige Effekte CSS3 Schatten einen Tropfen Kappe Effekt zu erzeugen. diese Kombination von Code ermöglicht es Ihnen, einen stilvollen Tropfen Kappe Effekt zu haben, ohne ständig zu speziellen Tags hinzufügen, um Funktion zu machen.
Der Code in diesem Artikel vorgestellten wurde ursprünglich von Chris Spooner geschrieben, und Sie können die Demo hier ansehen.
Zeigen Sie uns den Code!
Hier ist die HTML, die verwendet wird, und es macht Gebrauch von einigen der Funktionen von HTML5 machen:
Sie können entweder ein Held sterben oder leben Sie lang genug, um zu sehen, sich der Bösewicht geworden.
Typing dass zusätzliche Codezeile wurde ziemlich schnell alt, aber das Ergebnis sieht immer noch schön. Das ist, warum ich dieses CSS3 Drop Cap-Effekt eine gewisse Aufmerksamkeit zu geben. Jetzt für den CSS-Code.
p font-size: 50px; line-height: 80px;
text-transform: Groß;
text-shadow: 10px 10px 0 rgba (255,255,255,0.07);
>
Der obige Code zeigt, wie Chris seine Absätze gestylt. Beachten Sie, dass er den gesamten Text umgewandelt in Großbuchstaben geschrieben werden. Das ist ein ordentliches Stück Code zu wissen, aber ich bin nicht sicher, wie oft Sie es im täglichen Text verwenden mögen. Vielleicht möchten Sie es für Callouts verwenden, in diesem Fall würde der Schatten-Effekt auch schön aussehen.
Das nächste Stück Code ist von entscheidender Bedeutung für die Tropfenkappe erfolgreich zu arbeiten. Neben der Verwendung von zuerst: Schreiben, müssen Sie auch erstes Kind verwenden. Dadurch wird der Tropfen Kappe Effekt geschieht für jeden Absatz verhindern. Das erste untergeordnete Element hält die Drop Kappe nur auf den ersten Buchstaben des ersten Absatzes auf jeder Seite. Du möchtest benutzen die Tropfenkappe Effekt und nicht zu Ende benutze es.
Die 160px Größe könnte riesig klingen im Vergleich zum Absatz Größe von 50px, aber man muss sich vor Augen halten, dass Sie die Drop-Kappe ein paar Zeilen zu überbrücken wollen. Andernfalls wäre es nicht eine sehr effektive Tropfen Kappe sein, wäre es?
Die meisten Tropfenkappen machen einen Hauch von spezieller Formatierung haben es vom Rest des Textes zu kompensieren. In dieser Demo hinzugefügt Chris einen Schatten auf die Drop-Kappe für den besonderen Touch.