Menü

Cheat Sheet CSS3 - Quick Reference Guide

Mehrspaltige Layouts, Integration von eigenen Fonts und Farbverläufe sind nur einige Optionen, die mit CSS3 umgesetzt werden können. Unsere Übersicht soll Sie bei der täglichen Arbeit mit CSS3 unterstützen.

internet, webdesign, css3, cheat sheet, layouts, fonts © Internet Magazin
Unsere Übersicht hilft bei der täglichen Arbeit mit CSS3.

Wer sich bereits beruflich oder aus Interesse mit Cascading Style Sheets beschäftigt, sollte nun nicht länger damit zögern, sich ein Grundlagenwissen über die spannenden neuen Funktionen von CSS3 anzueignen. Auch wenn der zukünftige Standard sich noch in der Entwicklung befindet, so rüsten jetzt doch immer mehr Browser stets weitere CSS3-Features nach.

Zusätzlich zu den bewährten Eigenschaften von CSS 2.1 und den damit bereits verbundenen Gestaltungsmöglichkeiten kann man dafür Sorge tragen, dass die Anwender mit modernen Browsern in den Genuss der neuen Möglichkeiten kommen, die anderen aber trotzdem eine funktionale Website sehen, nur eben ohne CSS3-Effekte. Die Veränderungen sind den Aufwand wert: CSS3 ergänzt die Vorgängerversion um viele Funktionen.

Bildschirmfüllende Hintergrundbilder, mehrere Hintergründe in Kombination und beliebiger Anordnung, Farbverläufe, abgerundete Ecken und Schatten oder transparente Seitenbereiche und flexible Elemente, deren Größe der User per Drag-und-Drop selbst bestimmen kann: CSS3 kann mehrspaltigen Inhalt, flexible Layouts und Animationen. Es ist ganz sicher kein Zufall, dass abgerundete Ecken und Schlagschatten für Kästen und Texte zu den beliebtesten neuen Features gehören: Sie sind viele Jahre überfällig. Statt quälend aufwändiger Lösungen mit Hintergrundgrafiken und kunstvoll arrangierten DIVs einfach die CSS3-Angaben für "border radius" erzeugen und schon können Sie eine oder alle Ecken beliebig rund gestalten. Mit einer Box oder einem Button, die nur durch CSS3-Code erzeugt wurden, können Sie nun beispielsweise einen box shadow ergänzen und den runden Ecken auch noch einen Schatten verpassen. Schatten für Texte ersparen das Hantieren mit GIFs für Schriftzüge mit Drop-Shadow, die seit anderthalb Jahrzehnten nie völlig aus der Mode gekommen sind, so oft sie auch totgesagt wurden.

Mehr Funktionen

Noch eine spannende CSS3-Funktion sind Gradients, die ganz ohne die Hilfe eines Grafikprogramms beliebige Seitenbereiche, Content oder Buttons mit Farbverläufen ausstatten. Das bedeutet nicht nur weniger Aufwand sowie schlankeren und eleganteren Quellcode, sondern verringert auch die Ladezeiten entscheidend, da keine Hintergrundgrafiken mitgeladen werden müssen (Gradient Generator).

CSS3 für Farbverläufe schnell und einfach mit dem CSS Gradient Background Maker erstellen: ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html © Internet Magazin
CSS3 für Farbverläufe schnell und einfach mit dem CSS Gradient Background Maker erstellen: ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

Der beliebte Magazin-Look im Stil einer mehrspaltigen Publikation mit typischen Fonts lässt sich durch die "Multiple Columns" und den "Font-Face"-Befehl realisieren. Mehrspaltige Erscheinungsbilder für Texte wirken aufwändig, bringen Abwechslung und lassen sich mit CSS3 endlich komfortabel und schnell umsetzen.

Live-Test

Einfach ausprobieren können Sie viele der neuen CSS3-Effekte unter css3please.com an einer lebenden Site: Der Cross-Browser CSS3 Rule Generator ist so aufgebaut, dass Sie die Werte im angezeigten CSS-File editieren können, wobei die entsprechenden anderen Werte dann automatisch passend ergänzt werden. Die fertigen Experimente lassen sich übrigens problemlos kopieren und in eigene Stylesheets einfügen.

Quick Reference Guide

Unser Cheat Sheet ist als Arbeitshilfe gedacht. Mit einer Übersicht neuer Befehle und typischer CSS3-Funktionen soll es Ihnen die anspruchsvolle Einarbeitung in die CSS3-Funktionen erleichtern. Wir freuen uns über Feedback, damit die nächsten Arbeitsblätter noch nützlicher werden.

Workarounds einsetzen – ja oder nein?

Das Developer-Herz lacht, wenn die populärsten Browser einen Entwicklungsstand erreicht haben, der aufwändige Zusätze für einzelne CSS3-Befehle überflüssig macht. Doch sollte man diese Erweiterungen nicht einfach weglassen, nur weil sie von aktuellen Browser-Versionen nicht mehr benötigt werden.

Erstens verrät nur ein regelmäßiger prüfender Blick in die Site-Statistik, ob die eigene Zielgruppe überhaupt mit der jeweils neuesten Version surft, und zweitens gibt es immer wieder User, die gar keinen Einfluss darauf haben, wann ihr Browser aktualisiert wird, zum Beispiel die typischen Bürosurfer.

Ein schöner beziehungsweise valider Code ist also nicht alles: In erster Linie sollten immer alle Anwender komfortabel an alle Inhalte können.

Cheat Sheet

background
background-attachment scroll | fixed | local
background-clip border-box | padding-box | content-box
background-color color | transparent
background-image url | none
background-origin border-box | padding-box | content-box
background-position x-% y-%
x-pos y-pos
top left | top center | top right |center left | center center | center right | bottom left | bottom center | bottom right
background-repeat repeat | repeat-x | repeat-y | no-repeat | space | round
background-size auto |cover | contain
length |%
border
border border-width | border-style | border-color
border-collapse collapse | separate | inherit
border-bottom border-bottom-width | border-bottom-style | border-bottom-color
border-bottom-width thin | medium | thick
length
border-left border-left-width | border-left-style | border-left-color
border-right border-right-width | border-right-style | border-right-color
border-top border-top-width | border-top-style | border-top-color
border-right-width
border-left-width
border-top-width
thin | medium | thick
length
border-radius border-top-right-radius | border-bottom-rightradius | border-bottom-left-radius | border-topleft-radius
length
border-style none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
text
text-align start | end | left | right | center
string
justify | match-parent | start end
text-align-last
(letzte Zeile bei Blocksatz)
auto | start | end | left | right | center | justify
Textdarstellung, Richtung ltr | rtl | inherit
text-decoration none | underline | overline | line-through | blink
text-decoration-style solid | double | dotted | dashed | wavy
text-shadow none | color
length
text-transform none | capitalize | uppercase | lowercase | full-width
text-emphasis none | filled | open | dot | circle| double-circle | triangle | sesame
text-indent length | %
word-wrap | overflow-wrap normal | break-word
text-justify auto | none | inter-word | inter-ideograph | inter-cluster | distribute | kashida
line-break auto | loose | normal | strict
word-break normal | keep-all | break-all
white-space normal | pre | nowrap | pre-wrap | pre-line
white-space-collapse preserve | collapse | preserve-breaks | discard
tab-size integer | length
hyphens none | manual | auto
box model
clear none | left | right | both
display inline | block | inline-block | list-item | run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | template | none
wenn display gleich none, werden float und position nicht eingesetzt
float left | right | none | page-float
height auto | length | %
max-height none | length | %
min-height inherit | length | %
width auto | length | %
max-width none | length | %
min-width inherit | length | %
margin auto | length | %
margin-bottom | margin-top auto | length | %
margin-right | margin-left auto | length | %
padding padding-top | padding-right | padding-bottom | padding-left
padding-bottom | padding-top length | %
padding-right | padding-left length | %
marquee-style scroll | slide | alternate
marquee-direction forward | reverse
marquee-loop infinite | non-negative-integer
marquee-play-count infinite | integer
marquee-speed slow | normal | fast
marquee-style scroll | slide | alternate
overflow | overflow-x | overflow-y visible | hidden | scroll | auto | no-display | no-content
overflow-style auto | marquee-line | marquee-block
overflow-x | overflow-y auto | visible | hidden | scroll | no-display | no-content
visibility visible | hidden | collapse
ganze Tabelle anzeigen

CSS3 – QUICK REFERENCE GUIDE
Multiple Columns: Spalten
-webkit-columns: width | count
column-width: Breite
column-count: Anzahl
column-gap: Spaltenzwischenraum
column-rule: Trennstrich zwischen Spalten
(Style wie bei "Border")
.multiple-columns {
-webkit-column-count: 2;
-webkit-column-width: 105px;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #000;
-moz-column-count: 2;
-moz-column-width: 105px;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #000;
column-count: 2;
column-width: 105px;
column-gap: 20px;
column-rule: 1px solid #000;
}
Box Sizing
border-box oder Standard "content-box"? Bei border-box werden "padding" und "border" innerhalb der Box gerendert. .box-sizing {
width: 300px;
padding: 0 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Border Radius: Runde Ecken
-webkit-border-radius: 5px;
Auch möglich: Ecken einzeln formatieren.
-webkit-border-top-left-radius: 5px
-webkit-border-top-right-radius: 5px
-webkit-border-bottom-left-radius: 5px
-webkit-border-bottom-right-radius: 5px
.border-radius {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.border-radius2 {
-webkit-border-radius: 11px 12px 13px 14px;
-moz-border-radius: 11px 12px 13px 14px;
border-radius: 11px 12px 13px 14px;
}
Schlagschatten: Text Shadow / Box Shadow
x-offset, y-offset, blur, color text-shadow und box-shadow verwenden die gleiche Syntax. .textshadow {
text-shadow: 4px 4px 4px #000;
}
.boxshadow {
box-shadow: 0 1px 5px rgba (0, 0, 0, 2);
box-shadow: 0 1px 5px rgba (0, 0, 0, 2);
}
Farben: RGBA
Red, Green, Blue, Alpha
color: rgba (255, 255, 255, 0.8); entspricht weiß mit 80% Deckkraft background-color: rgba (R,G,B,A) color:rgba(R,G,B,A)
.rgba-colors {
Background-color: rgba(215, 41, 0, .5);
}
.rgba-color2 {
color: rgba(0, 0, 255, 0.5);
}
Multiple Backgrounds: Hintergründe
Kombination verschiedener Hintergrund-Layer. Die zuerst angegebene Grafik liegt vorne, die zweite dahinter, die dritte wieder dahinter usw. .multiple-backgrounds {
background: url(images/logo.png) center center no-repeat, url(images/tapetenmuster.png) top left repeat;
}
.multiple-backgrounds2 {
background-image: url(1.png), url(2.png), url(3.png);
background-position: center center, 10% 90%, top left;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;
}
Farben: HSL / HSLA
Farbdefinitionen mit HSL (Hue, Saturation, Lightness) oder im HSLA format (Hue, Saturation, Lightness, Alpha). .hsl-colors {
background: hsl(207, 38%, 47%);
}
.hsla-colors {
background: hsla(12, 42%, 50%, 0.2);
}
Background Size: Hintergrundgröße
Längenangaben in Pixel, Prozente, automatisch (auto) .background-size {
background: url(images/beispiel.png) center center no-repeat;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
}
Rotate Transform: Element drehen
rotate(90deg)
Drehung um 90 Grad im Uhrzeigersinn.
.rotate-transform {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
@font-face: Webfonts integrieren
Einbetten beliebiger lizenzierter Fonts. @font-face {
font-family: Font-Name;
src: url('../fonts/fontname.eot');
src: url('../fonts/fontname.woff') format('woff'), url('../fonts/fontname.ttf') format ('truetype');
font-weight: normal;
font-style: normal;
}
ganze Tabelle anzeigen

 
Anzeige
Anzeige
x