Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

10 CSS3-Eigenschaften, mit denen Sie vertraut sein müssen

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called CSS3 Mastery.
The 30 CSS Selectors You Must Memorize

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Wir haben bereits die 30 CSS-Selektoren behandelt, die wir alle auswendig lernen sollten. Aber was ist mit den neuen CSS3-Eigenschaften? Obwohl die meisten von ihnen noch ein herstellerspezifisches Präfix benötigen, können Sie sie heute noch in Ihren Projekten verwenden. In der Tat ist es ermutigt!

Der Schlüssel ist, zuerst zu bestimmen, ob Sie mit einer etwas anderen Darstellung von Browser zu Browser in Ordnung sind. Sind Sie damit einverstanden, dass der IE beispielsweise 90-Grad-Ecken anzeigt, anstatt glatte, abgerundete? Die Entscheidung liegt bei Ihnen. Denken Sie jedoch immer daran, dass Websites nicht in jedem Browser identisch aussehen müssen. Am Ende dieses Artikels arbeiten wir an einem unterhaltsamen Abschlussprojekt.

1. border-radius

Border-radius

Demo anzeigen

Einfach die beliebteste CSS3-Eigenschaft in der Reihe, border-radius, war eine Flaggschiff-Art der CSS3-Eigenschaft. Während viele Designer immer noch Angst hatten, dass ein Layout von Browser zu Browser unterschiedlich dargestellt werden könnte, war ein kleiner Schritt wie abgerundete Ecken eine einfache Möglichkeit, sie anzulocken!

Die Ironie ist, dass wir alle mit der Idee, ein alternatives Seherlebnis für mobile Browser bereitzustellen, vollkommen einverstanden sind. Seltsamerweise fühlen sich manche beim Desktop-Browsing jedoch nicht so.

Bitte beachten Sie, dass sowohl Safari 5 als auch IE9 die offizielle "border-radius"-Syntax verwenden.

Kreise

Einige Leser wissen möglicherweise nicht, dass wir mit dieser Eigenschaft auch Kreise erstellen können.

Circles

Demo anzeigen...

...Und wenn wir Spaß haben wollen, können wir auch das Flexible Box-Modell (detailliert in #8) nutzen, um den Text innerhalb des Kreises vertikal und horizontal zu zentrieren. Es erfordert etwas Code, aber nur, weil verschiedene Anbieter kompensiert werden müssen.

2. box-shadow

Box-ShadowBox-ShadowBox-Shadow

Demo anzeigen

Als Nächstes haben wir den allgegenwärtigen box-shadow, mit dem Sie den Elementen sofort Tiefe verleihen können. Seien Sie einfach nicht zu häßlich mit den von Ihnen eingestellten Werten!

box-shadow akzeptiert vier Parameter:

  • x-offset
  • y-offset
  • blur
  • Farbe des Schattens

Nun wissen viele nicht, dass Sie mehrere box-shadows gleichzeitig anwenden können. Das kann zu einigen wirklich interessanten Effekten führen. Im folgenden Screenshot verwende ich einen blauen und einen grünen Schatten, um jeden Schatten zu vergrößern.

Multiple box shadowsMultiple box shadowsMultiple box shadows

Demo anzeigen

Clevere Schatten

Durch das Anwenden von Schatten auf die Pseudo-Klassen ::before und ::after können wir einige wirklich interessante Perspektiven erstellen. Hier ist eine, um Ihnen den Einstieg zu erleichtern:

Das HTML

Das CSS

Cool ShadowsCool ShadowsCool Shadows

Demo anzeigen

Wollen Sie mehr coole Effekte? Sehen Sie dieses Tutorial auf Nettuts+.

3. text-shadow

Text-shadowText-shadowText-shadow

Demo anzeigen

text-shadow ist eine der wenigen CSS-Eigenschaften, auf die wir die Verwendung von Herstellerpräfixen verzichten können. Ähnlich wie box-shadow muss er auf Text angewendet werden und erhält die gleichen vier Parameter:

  • x-offset
  • y-offset
  • blur
  • Farbe des Schattens

Text-Gliederung

Ähnlich wie bei ihrem Bruder, dem box-shadow, können wir mehrere Schatten anwenden, indem Sie ein Komma als Trennzeichen verwenden. Angenommen, wir möchten einen Gliederungseffekt für den Text erstellen. Während webkit einen stroke-Effekt bietet, können wir mit der folgenden Methode mehr Browser erreichen (allerdings nicht ganz so hübsch):

Text OutlineText OutlineText Outline
Demo anzeigen

4. Text-Strich

Text-StrokeText-StrokeText-Stroke

Demo anzeigen

Seien Sie vorsichtig mit dieser Methode. Nur webkit unterstützt es in den letzten Jahren (Safari, Chrome, iPhone). Obwohl ich falsch liegen könnte, ist "text-stroke" noch nicht Teil der CSS3-Spezifikation. In diesem Fall zeigt Firefox mit weißem Text eine scheinbar leere Seite an. Sie können entweder die JavaScript-Feature-Erkennung verwenden, um dieses Problem zu umgehen, oder sicherstellen, dass Ihre Basistextfarbe nicht mit dem Hintergrund des Körpers übereinstimmt.

Feature-Erkennung

Wie können wir beispielsweise einen Styling-Satz für Firefox und einen anderen für Safari oder Chrome bereitstellen? Eine Lösung ist die Featureerkennung.

Mit der Feature-Erkennung können wir mithilfe von JavaScript testen, ob eine bestimmte Eigenschaft verfügbar ist. Wenn nicht, bereiten wir einen Fallback vor.

Lassen Sie uns auf das Problem mit text-stroke zurückkommen. Setzen wir eine black Farbe für Browser, die diese Eigenschaft nicht unterstützen (alle außer webkit).

Zuerst erstellen wir ein Dummy-Element h1. Anschließend führen Sie eine vollständige Hohlraumsuche aus, um über das style-Attribut zu bestimmen, ob die -webkit-text-stroke-Eigenschaft für dieses Element verfügbar ist. Ist das nicht der Fall, greifen wir die Überschrift Hello Readers an und setzen die Farbe von white auf black.

Bitte beachten Sie, dass wir hier generisch sind. Wenn Sie mehrere h1-Tags auf der Seite ersetzen müssen, müssen Sie eine while-Anweisung verwenden, um die einzelnen Überschriften zu filtern und den Stil- oder Klassennamen entsprechend zu aktualisieren.

Wir testen auch nur für webkit, wenn es möglich ist, dass andere Browser möglicherweise auch die text-stroke-Eigenschaft unterstützen. Merken Sie das.

Wenn Sie eine umfassendere Lösung zur Funktionserkennung wünschen, wenden Sie sich an Modernizr.

5. Mehrere Hintergründe

Multiple Background ImagesMultiple Background ImagesMultiple Background Images

Demo anzeigen

Die background-Eigenschaft wurde überarbeitet, um mehrere Hintergründe in CSS3 zu ermöglichen.

Lassen Sie uns ein dummes Beispiel erstellen, einfach als Konzeptnachweis. Aus Mangel an geeigneten Bildern in der Nähe verwende ich zwei Übungsbilder als Hintergrund. Natürlich können Sie in einer realen Anwendung eine Textur und möglicherweise einen Verlauf für Ihre Hintergründe verwenden.

Wenn Sie oben ein Komma als Trennzeichen verwenden, referenzieren wir zwei separate Hintergrundbilder. Beachten Sie, wie im ersten Fall die Position oben links (0 0) und im zweiten Fall die Position oben rechts (100% 0) platziert wird.

Stellen Sie sicher, dass Sie einen Fallback für die Browser bereitstellen, die keine Unterstützung für mehrere Hintergründe bieten. Sie überspringen die Eigenschaft vollständig und lassen Ihren Hintergrund leer.

Kompensation für ältere Browser

Um ein einzelnes Hintergrundbild für ältere Browser (z. B. IE7) hinzuzufügen, müssen Sie die background-Eigenschaft zweimal deklarieren: erstens für alte Browser und zweitens als Überschreibung. Alternativ können Sie auch Modernizr verwenden.

6. background-size

Bis vor kurzem waren wir gezwungen, hinterlistige Techniken einzusetzen, um die Größe der Hintergrundbilder zu ändern.

Der obige Code weist das Hintergrundbild an, den gesamten verfügbaren Speicherplatz zu belegen. Was wäre beispielsweise, wenn wir wollten, dass ein bestimmtes Bild den gesamten Hintergrund des body-Elements unabhängig von der Breite des Browserfensters einnimmt?

Das ist alles dazu. Die background-size-Eigenschaft akzeptiert zwei Parameter: die x- und y-Breite.

Während die neuesten Versionen von Chrome und Safari background-size nativ unterstützen, müssen für ältere Browser immer noch Herstellerpräfixe verwendet werden.

Demo anzeigen

7. text-overflow

Ursprünglich von Internet Explorer entwickelt, kann die text-overflow-Eigenschaft zwei Werte annehmen:

  • Clip
  • Ellipsis

Diese Eigenschaft kann verwendet werden, um Text abzutrennen, der den Container überschreitet, und gleichzeitig für den Benutzer ein wenig Feedback wie eine Ellipse zu liefern.

Text-OverflowText-OverflowText-Overflow

Demo anzeigen

Wussten Sie? Internet Explorer unterstützt diese Eigenschaft seit IE6? Sie haben es geschaffen!

An diesem Punkt möchten Sie möglicherweise den gesamten Text anzeigen, wenn ein Benutzer über dem Feld steht.

Ein wenig seltsam (es sei denn, ich täusche mich), scheint es keine Möglichkeit zu geben, die text-overflow-Eigenschaft zurückzusetzen oder "auszuschalten". Um diese "Aus"-Funktionalität zu simulieren, können Sie mit :hover die white-space-Eigenschaft auf normal zurücksetzen. Das funktioniert, weil text-overflow davon abhängt, dass er korrekt funktioniert.

Wussten Sie? Sie können auch eine eigene Zeichenfolge angeben, die anstelle der Auslassungszeichen verwendet werden soll. Dadurch wird die Zeichenfolge gerendert, um den abgeschnittenen Text darzustellen.

8. Flexibles Box Modell

Das Flexible Box-Modell wird uns endlich erlauben, von diesen räudigen floats wegzukommen. Obwohl es ein bisschen Arbeit kostet, den Kopf um die neuen Eigenschaften zu wickeln, sollte das alles einen Sinn ergeben.

Lassen Sie uns eine kurze Demo erstellen und ein einfaches zweispaltiges Layout erstellen.

Nun zu CSS: Wir müssen zuerst container anweisen, als box behandelt zu werden. Ich werde auch eine generische Breite und Höhe anwenden, da wir keinen tatsächlichen Inhalt im Spiel haben.

Als Nächstes wenden wir für die Demo eindeutige Hintergrundfarben für das #main div und aside an.

An diesem Punkt gibt es nicht viel zu sehen.

Flexible Box ModelFlexible Box ModelFlexible Box Model

Eine erwähnenswerte Sache ist jedoch, dass die untergeordneten Elemente bei der Einstellung: display: box-Modus den gesamten vertikalen Raum einnehmen. Das ist der box-align-Standardwert: stretch.

Sehen Sie sich an, was passiert, wenn wir explizit eine Breite im Inhaltsbereich von #main angeben.

Flexbox Example 2Flexbox Example 2Flexbox Example 2

Nun, das ist ein bisschen besser, aber wir haben immer noch dieses Problem, aside nicht den gesamten verbleibenden Platz beansprucht. Wir können das mithilfe der neuen box-flex-Eigenschaft beheben.

box-flex weist das Element an, den gesamten verfügbaren Platz einzunehmen.

Mit dieser Eigenschaft, unabhängig von der Breite des #main-Inhaltsbereichs, verbraucht die aside-Komponente jede Spezifikation des verfügbaren Speicherplatzes. Noch besser, Sie müssen sich keine Sorgen um diese lästigen float-Probleme machen, wie Elemente, die unter den Hauptinhaltsbereich fallen.

Example 3 of Flexible Box ModelExample 3 of Flexible Box ModelExample 3 of Flexible Box Model

Demo anzeigen

Wir haben hier nur die Oberfläche zerkratzt. Weitere Informationen finden Sie im ausgezeichneten Artikel von Paul Irish. Seien Sie vorsichtig, wenn Sie diese Methode verwenden, da sie in älteren Browsern natürlich nicht vollständig unterstützt wird. In diesen Fällen können Sie die Funktionserkennung oder Modernizr verwenden, um die Unterstützung zu erkennen und die erforderlichen Fallbacks bereitzustellen.

9. Größe ändern

Nur verfügbar, ab Firefox 4 und Safari 3, können Sie mit der resize-Eigenschaft - Teil des CSS3-UI-Moduls - festlegen, wie die Größe textarea geändert werden soll.

Beachten Sie, dass webkit-Browser und Firefox 4 standardmäßig die Möglichkeit haben, textareassowohl vertikal als auch horizontal zu ändern.

Mögliche Wertebeide:

  • both: Ändern Sie die Größe vertikal und horizontal
  • horizontal: Begrenzen Sie die Größenänderung auf horizontal
  • vertikal: Begrenzen Sie die Größenänderung auf vertikal
  • none: Größenänderung deaktivieren
ResizeResizeResize

Demo anzeigen

10. Übergang

Die aufregendste Ergänzung zu CSS3 ist möglicherweise die Möglichkeit, Animationen ohne Verwendung von JavaScript auf Elemente anzuwenden.

Obwohl es so aussieht, als würde der dang IE9 immer noch keine CSS-Übergänge unterstützen, bedeutet das auf keinen Fall, dass Sie diese nicht verwenden sollten. Der Schlüssel ist zu verbessern.

Lassen Sie uns den allgemeinen Effekt nachahmen. Wenn Sie einen Link in einer Seitenleiste bewegen, wird der Text immer nach rechts verschoben.

Das HTML

Das CSS

transition akzeptiert drei Parameter:

  • Die Eigenschaft zum Übergang. (Setzen Sie diesen Wert bei Bedarf auf all)
  • Die Dauer
  • Die Lockerungstyp

Der Grund, warum wir transition nicht direkt auf den hover-Status des Ankertags anwenden, besteht darin, dass die Animation nur beim Mouseover wirksam wird. Bei Mouseout kehrt das Element sofort in den Anfangszustand zurück.

Demo anzeigen

Da wir nur den Effekt verbessert haben, haben wir älteren Browsern keinerlei Schaden zugefügt.

Abschlussprojekt

Lassen Sie uns den Großteil der Techniken, die wir in diesem Artikel gelernt haben, kombinieren und einen ordentlichen Effekt erzielen. Überprüfen Sie zuerst den endgültigen Effekt (am besten in Webkit-Browsern sichtbar).

Schritt 1. Das Markup

Wir werden es einfach halten. In unserem .box-Container fügen wir zwei divs hinzu: eines für die vordere Größe und das andere für die Rückseite.

Schritt 2. Horizontal und vertikal zentriert

Als nächstes möchte ich, dass unsere Karte perfekt auf dem Bildschirm zentriert ist. Dafür nutzen wir das Flexible Box-Modell. Stellen Sie sicher, dass Sie später Modernizr verwenden, um einen Fallback für IE bereitzustellen.

Da unsere Seite nur diese Karte enthält, können wir das body-Element effektiv als Wrapper verwenden.

centered

Schritt 3. Die Box gestalten

Wir gestalten jetzt unsere "Karte".

Beachten Sie, dass wir dieses Element auch angewiesen haben, auf Änderungen des Status des Elements zu achten. Wenn sie auftreten, werden die Änderungen (wenn möglich) im Verlauf einer Sekunde (transition: all 1s) übernommen.

styling the boxstyling the boxstyling the box

Schritt 4. Ein effektiver Schatten

Wie wir in diesem Artikel bereits erfahren haben, wenden wir als Nächstes einen coolen Schatten mithilfe der Pseudo-Klasse ::after an.

effective shadowseffective shadowseffective shadows

Schritt 5. Styling der Kinder-Divs

Im Moment sind die Kinder-divs immer noch übereinander. Lassen Sie position sie absolut und weisen Sie sie an, den gesamten verfügbaren Platz einzunehmen.

styling the children divsstyling the children divsstyling the children divs

Schritt 6. "Front" befestigen

Sehen Sie obiges Bild. Beachten Sie, wie die Rückseite unserer Karte standardmäßig angezeigt wird? Das liegt daran, dass das Element aufgrund der Tatsache, dass das Element niedriger im Markup auftritt, einen höheren z-index erhält. Lassen Sie uns das reparieren.

fixing the front-sidefixing the front-sidefixing the front-side

Schritt 7. Karte drehen

Nun zum Spaß; wenn wir über der Karte schweben, sollte sie umgedreht werden und die "Rückseite" der Karte anzeigen (zumindest die Illusion der "Rückseite"). Um diesen Effekt zu erreichen, verwenden wir Transformationen und die rotateY-Funktion.

rotating the cardrotating the cardrotating the card

Schritt 8. Gespiegelter Text

Sieht das nicht toll aus? Jetzt scheint der Text gespiegelt zu sein. Das liegt natürlich daran, dass wir den Container verändert haben. Versetzen wir das, indem wir das untergeordnete div um 180 Grad drehen.

Und mit dem letzten Code haben wir unseren tollen Effekt erzielt!

Final productFinal productFinal product

Überprüfen Sie den endgültigen Effekt (am besten in Webkit-Browsern sichtbar).

Schlussfolgerung

Vielen Dank fürs Lesen und ich hoffe, Sie haben ein bisschen gelernt!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.