Ein einfacher CSS-Drop-Cap

Sie können den Drop-Cap-Effekt, den wir im neuen Blogs-Design verwenden, sowie das obere Erst-Line-Upper, das die meisten Browser anzeigen, nicht nicht bemerkt haben (außer Safari, aus Gründen, die ich in einem Moment erklären werde).

Es gibt einige hackige Methoden, um diesen Effekt zu implementieren, aber das sauberste und am meisten wartbare CSS ist mit den: Erstgeschichte und: Erstline-Pseudoklasse.

Dieser Ansatz bedeutet kein zusätzliches Markup, keine Bilder und keine Notwendigkeit, über den Inhalt zu wissen - unabhängig von dem ersten Buchstaben und der ersten Zeile wird der Effekt angewendet.

Hier ist das CSS , das es geschehen lässt:

#post-content > p:first-child:first-line, 
#post-content > .ad:first-child + p:first-line
{
    text-transform:uppercase;
    position:relative;
    font-size:0.95em;
    letter-spacing:1px;
}

#post-content > p:first-child:first-letter, 
#post-content > .ad:first-child + p:first-letter
{
    letter-spacing:0;
    text-transform:uppercase;
    color:#628fbe;
    font-family:times,serif;
    font-size:3.5em;
    float:left;
    margin:0.13em 0.2em 0 0;
    line-height:0.7;
}

Sie werden feststellen, wie zwei verschiedene Selektoren versuchen, den Effekt auf den ersten Absatz im Inhaltsbereich anzuwenden. Es musste flexibel genug sein, um das Vorhandensein oder das Fehlen eines Ad unmittelbar vor dem Absatz, der als

gekennzeichnet war, zu ermöglichen. Im Idealfall hätte ich verwendet: erstes Typ, das das erste Element eines angegebenen Typs innerhalb seines übergeordneten Kontextes auswählt:

#post-content > p:first-of-type:first-line
{
}

#post-content > p:first-of-type:first-letter
{
}

Das ist jedoch nicht so weitgehend unterstützt. Die Selektoren, die wir verwenden, bedeuten, dass wir Unterstützung für IE8 erhalten, die wir sonst nicht tun würden.

Für die Erstlinien-Oberzahlen erhalten wir leider keine Unterstützung für Safari. Es liegt nicht an den Selektoren-es unterstützt alle hier angegebenen Beispiele und wendet andere Eigenschaften innerhalb dieser Regeln an-, wendet die Texttransformierung einfach nicht an. Dies ist etwas, was mir in verschiedenen Situationen aufgefallen ist, in denen Safari die Transformation nicht ohne leicht zu Apparat anwendet. Ich habe gesehen, dass es nicht für ein -Element gilt, in dem es für eine entsprechende funktioniert hat, und hier sehen wir, dass es nicht für die erste Zeile des Absatzes gelten, obwohl es funktionieren würde, wenn es auf den gesamten Absatz angewendet würde! Gehen Sie Figur.

Für den Drop-Cap selbst können Sie sehen, dass es ziemlich einfach zu implementieren ist. Das bemerkenswerte Ding in dieser Regel ist die Kombination aus Rand und Linienhöhe, die den Buchstaben in Position bringt. Wenn wir diese beiden Eigenschaften weglassen, bekommen wir Folgendes:

Die Drop-Cap vor der Leitungshöhe wird angewendet.

Was Sie dort von links nach rechts sehen, ist Firefox, Opera und Safari. Und in der Tat ist es Firefox, das fälschlicherweise macht, während Opera und Safari es richtig machen-Firefox wendet immer noch die Zeilenhöhe des übergeordneten Absatzes auf den ersten Buchstaben an und ignoriert die schwere Schriftgröße, während die anderen Browser eine Linienhöhe anwenden, die der Schriftgröße des Briefes entspricht.

Wir können also den Unterschied zur Ausdehnung des Ergebniss zwischen Browsern nutzen-die Leitungshöhe progressiv reduzieren, was für Firefox keinen Unterschied macht, bis wir ein ähnliches Ergebnis in Opera und Safari (und IE8 ) erzielen:

Die Drop-Cap nach der Leitungshöhe wird angewendet.

Dann geht es einfach um das Hinzufügen von Margen, bis die vertikale Position richtig aussieht.

Es ist nicht das erste Mal, dass ich dieses Rendering -Verhalten in Firefox gesehen habe. Und da wir keine CSS -Hacks haben, die nur für Firefox gelten können, sind Unterschiede wie diese wirklich die einzige Möglichkeit, Browser -Optimierungen anzuwenden. Und wenn Browser-Optimierungen gehen, ist dieser völlig zukunftssicher-wenn Firefox jemals seine Implementierung festlegt und die richtige Linienhöhe anwendet, wird es wie die anderen in erster Linie ausgehen.

Es ist wirklich ironisch, dass wir jeden Browser außer Firefox reparieren sollten, wenn Firefox der einzige Browser ist, der es falsch macht! Aber so funktioniert unsere Branche - Firefox ist wie Ihr Missus "immer richtig".

Vorschaubild Kredit: Thoth

häufig gestellte Fragen (FAQs) zu CSS Drop Cap

Was ist eine CSS -Drop -Kappe und warum wird sie verwendet? Es wird verwendet, um auf den Beginn eines Stücks aufmerksam zu machen, was es visuell ansprechender und leichter zu lesen hat. Dieser Stil wird oft in Büchern, Zeitschriften und Websites gesehen, um die Benutzererfahrung und das Engagement zu verbessern.

Wie kann ich eine CSS-Drop-Kappe erstellen? Dieses Pseudo-Element zielt auf den ersten Buchstaben eines Elements auf Blockebene ab. Sie können dann Stile wie Schriftgröße, Linienhöhe und Schwimmer anwenden, um den Drop-Cap-Effekt zu erstellen. Sie können die Schriftart, Farbe, Größe und sogar einen Hintergrund oder Rand hinzufügen. Auf diese Weise können Sie ein einzigartiges und visuell ansprechendes Design erstellen, das dem Stil und Branding Ihrer Website entspricht. Es kann jedoch einige Inkonsistenzen in der Art und Weise geben, wie unterschiedliche Browser die Drop -Kappe rendern, insbesondere wenn es um vertikale Ausrichtung und Polsterung geht. Es ist immer eine gute Idee, Ihr Design in mehreren Browsern zu testen, um sicherzustellen, dass es wie beabsichtigt aussieht. Es funktioniert jedoch möglicherweise nicht wie erwartet mit Inline -Elementen oder Elementen mit einem Anzeigewert von Inline.

Warum funktioniert meine CSS -Drop -Kappe nicht? Die häufigsten Probleme sind eine falsche CSS -Syntax, wobei der Stil auf ein Inline -Element oder eine Browser -Kompatibilitätsprobleme angewendet wird. Stellen Sie sicher, dass Ihr CSS korrekt ist, das Element ein Element auf Blockebene ist und Ihr Browser die :: Pseudo-Elemente der ersten Buchstaben unterstützt. Dies stellt sicher, dass Ihre Drop Cap auf allen Geräten gut aussieht, von Desktops bis hin zu Mobiltelefonen. Sie können Effekte wie Fade-In, Sprung- oder Drehen erstellen, um Ihre Tropfenkappe dynamischer und ansprechender zu gestalten. Sie können eine Farbe, ein Bild oder einen Gradienten als Hintergrund angeben. Sie können auch die Größe und Position des Hintergrunds an Ihr Design einstellen. Sie können die Schriftfamilie in Ihrem CSS angeben, um eine benutzerdefinierte Schriftart für Ihre Tropfenkappe zu verwenden. Auf diese Weise können Sie ein einzigartiges und personalisiertes Design erstellen, das dem Stil und Branding Ihrer Website entspricht.

Das obige ist der detaillierte Inhalt vonEin einfacher CSS-Drop-Cap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!