CSS3
In diesen Tutorials erfahrt ihr alles Wissenswerte zu CSS3. Neben Code Snippet zeige ich euch auch einige Beispiele und auf welchen Systemen sie verfügbar sind. Leider ist es so, das nicht alle Effekte auf jedem Browser laufen. Vor allem bei älteren Browsern solltet ihr dies beachten.
Auf caniuse.com könnt ihr prüfen auf welchen Browsern es Probleme mit CSS3 geben könnte.
.image-contain{
width: 100%;
height: 100%;
object-fit: contain;
}
.image-cover{
width: 100%;
height: 100%;
object-fit: cover;
}Mit object-fit können Bilder automatisch und unter Berücksichtigung des Seitenverhältnisses in ein Element eingepasst werden.
Damit das Einpassen funktioniert muss das Bild in der Breite und Höhe auf 100% gesetzt werden. Mit object-fit: contain wird das Bild so eingepasst, das es immer komplett sichtbar ist. Mit object-fit: cover wird es überskaliert, so das es das Elmement komplett ausfüllt. Als Optionen stehen noch fill und scale-down zur verfügung, die ähnlich funktioneren wie contain bzw. cover.
<div class="tutorial-counter">
<ul>
<li>Kapitel</li>
<li>Kapitel
<ul>
<li>Unterkapitel</li>
<li>Unterkapitel</li>
</ul>
</li>
<li>Kapitel</li>
<li>Kapitel</li>
</ul>
</div>.tutorial-counter ul{
counter-reset: section;
list-style-type: none;
}
.tutorial-counter ul ul{
margin-left: 20px;
}
.tutorial-counter li:before{
counter-increment: section;
content: counters(section, ".") ". ";
}Mit CSS3 könnt ihr einfach Elemente auflisten. counter-reset: variable; gibt an wo der Zähler zurückgesetzt wird. Mit counter-increment: variable; bestimmt ihr an welcher Stelle die Zählung um 1 erhöt werden soll und mit content: counters(variable, ".") ". "; gibt ihr das ganze aus.
Mit diesem Beispiel ist auch eine Verschachtelung der Aufzählung möglich.
- Kapitel
- Kapitel
- Unterkapitel
- Unterkapitel
- Kapitel
- Kapitel
<div class="gridtemplate2">
<div class="gridtemplate2-item"></div>
<div class="gridtemplate2-item"></div>
<div class="gridtemplate2-item"></div>
<div class="gridtemplate2-item"></div>
<div class="gridtemplate2-item"></div>
<div class="gridtemplate2-item"></div>
<div class="gridtemplate2-item"></div>
<div class="gridtemplate2-item"></div>
<div class="gridtemplate2-item"></div>
</div>.gridtemplate-row{
display: grid;
-webkit-grid-column-gap: 15px;
grid-column-gap: 15px;
//only for four columns
-ms-grid-template-columns: 115px 80px 1fr 100px;
grid-template-columns: 115px 80px 1fr 100px;
}
.gridtemplate2{
display: grid;
-webkit-grid-column-gap: 15px;
grid-column-gap: 15px;
//unlimit columns
-ms-grid-template-columns: repeat(6, 1fr);
grid-template-columns: repeat(6, 1fr);
}Hiermit könnt ihr sehr einfach ein Grid Template realisieren. Mit grid-column-gap gebt ihr die Breite es Gutters an, dieser Wert kann in px, rem, em oder % angegeben werden. grid-template-columns ist etwas komplexer, in dem Beispiel könnt ihr die Breite jeder einzelnen Spalte definieren. Auch hier könnt ihr em, px, % oder rem benutzen, zudem gibt es auch noch fr. Mit fr werden die Spalten automatisch verteilt, hierbei entspricht 2fr der doppelten Berite von 1fr.
Wollt ihr jeder Spalte die gleiche Breite geben, könnt ihr das hiermit tun - repeat(6, 1fr). Hierbei werden die Zellen auf 6 Spalten verteilt, unabhängig der Zellenanzahl.
Demo 2
<div class="flexbox-grid">
<div class="flexbox-item flexbox-size-1"></div>
<div class="flexbox-item flexbox-size-2"></div>
<div class="flexbox-item flexbox-size-2"></div>
<div class="flexbox-item flexbox-size-1"></div>
<div class="flexbox-item flexbox-size-1"></div>
<div class="flexbox-item flexbox-size-1"></div>
<div class="flexbox-item flexbox-size-2"></div>
<div class="flexbox-item flexbox-size-1"></div>
<div class="flexbox-item flexbox-size-1"></div>
</div>.flexbox-grid{
display: flex;
flex-wrap: wrap;
margin-left: -10px;
}
.flexbox-item{
margin-left: 10px;
margin-bottom: 20px;
}
.flexbox-item:after{
content: "";
padding-bottom: 100%;
display: block;
background-color: green;
}
.flexbox-size-1{
width: calc(12.5% - 10px);
}
.flexbox-size-2{
width: calc(25% - 10px);
}Mit diesem Trick kann man Elemente in einem Grid/Raster anzeigen unabhängig von der Große und Sichtbarkeit der Elemente. Ich habe das sonst immer mit Float und Clear gelöst, leider sind dieser Technik aber schnell grenzen gesetzt. Diese Lösung ist meiner Meinung nach am elegantesten.
Damit euer Grid eingehalten wird, müsst ihr den Wapper .flexbox-grid rausziehen margin-left: -10px, dieser Wert entspricht dem Gutter eurer Elemente .flexbox-item{margin-left: 10px;}. Die Größe der einzelnen Elemente wird folgendermaßen bestimmt: Die Breite des Elements width: 12.5% - die Breite des Gutters 10px. Das ganze wird dann folgendermaßen geschrieben width: calc(12.5% - 10px);.
@mixin smartUnderlines($color, $size){
text-shadow: $size $size $color, $size -#{$size} $color, -#{$size} $size $color, -#{$size} -#{$size} $color;
}
@include smartUnderlines(#000, 1px);Mit diesem Trick kann man die Unterstreichung unterbrechen, wenn es Buchstaben mit Unterlänge gibt - wie z.b. bei "j" oder "y". Dies funktioniert nicht mit der normalen Unterstreichung, also text-decoration: underline, sondern nur mit den Unterstreichungen via :after oder linear-gradient.
So sieht es aus ohne Smart Underlines:
good morning everybody
Und so mit Smart Underlines:
good morning everybody
<ul class="fl-menu flexbox-menu">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
<ul class="fl-menu flexbox-menu-2">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>.fl-menu{
border: 1px solid #ccc;
margin-top: 30px;
list-style: none;
display: -webkit-flex;
display: flex;
}
.flexbox-menu{
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.flexbox-menu-2{
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
}
.flexbox-menu li + li{
margin-left: 30px;
}Eine einfache Methode um Elemente zu zentreiren. Mit justify-content kann man festlegen wie sich die inneren Elemente verhalten sollen - links angeschlagen, rechts angeschlagen, aufgeteilt usw. align-items ist mit justify-content zu vergleichen nur in Vertikaler Ausrichtung.
<div class="block-flexbox">
<div class="block-flexbox-item block-flexbox-item-1">1</div>
<div class="block-flexbox-item block-flexbox-item-2">2</div>
<div class="block-flexbox-item block-flexbox-item-1">1</div>
</div>.block-flexbox{
display: -webkit-flex;
display: flex;
flex-direction: row
}
.block-flexbox-item{
text-align: center;
background: #ccc;
height: 40px;
margin-right: 10px;
}
.block-flexbox-item-1{
flex: 1;
}
.block-flexbox-item-2{
flex: 2;
}CSS3 Flexbox bietet sehr umfangreiche optionen um elemente zu manipulieren. Im ersten Beispiel ist gezeigt wie man ein Grid erstellt. Dabei gibt der Flex Wert an, wie groß wieder Bereich sein soll, in dem Fall ist der Wert in der Mitte zwei, also ist dieses Div doppelt so groß wie die anderen beiden.
.portrait{
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: relative;
left: 50%;
width: 100px;
height: 200px;
}
.landscape{
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
top: 50%;
width: 200px;
height: 100px;
}
.bounding{
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: relative;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
}Mit Hilfe von transform: translate können Elemente horizontal und/oder vertikal zentriert werden. Dabei positioniert ihr das Element relative und verschiebt es mit top und/oder left um 50%. Durch den negativen Wert beim Transform wird es zentriert. Je nachdem wie Ihr das Element zentrieren wollt müsst ihr translateX, zum horizontalen zentrierung oder für eine vertikale Zentrierung translateY benutzen. Wenn ihr beide Werte zentrieren wollt schreibt ihr translate(-50%, -50%).
.image-blendmode{
width: 250px;
height:161.5px;
background-image:url('image-blendmode.jpg');
background-size: cover;
background-repeat: no-repeat;
}
#image-blendmode{
background-color: orange;
-webkit-background-blend-mode :multiply;
background-blend-mode: multiply;
}Mit dem Blend-mode ist es nun auch möglich Hintergrundfraben/Bilder zu überlagern. Dabei werden die Farben die sich überlagern vermischt, ähnlich dem Mischmodus in Photoshop. Es sind folgende Modi möglich: multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, und luminosity.
Blend-Mode multiply, Hintergrundfarbe Orange
<div class="wrap wrap1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>.wrap{
margin: 5px 0 15px 0;
}
.item{
width: 25px;
height: 25px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin-right: 5px;
}
.wrap1 .item:nth-child(3){
background-color: #000;
}
.wrap2 .item:nth-child(2n){
background-color: #000;
}
.wrap3 .item:nth-child(2n+1){
background-color: #000;
}
.wrap4 .item:nth-child(n+4){
background-color: #000;
}
.wrap5 .item:nth-child(-n+2){
background-color: #000;
}Mit Hilfe des Pseudo-Selektor kann man auf ausgewählte Elemente zugreifen und sie individuell stylen. Damit der Selektor auch richtig funktioniert, müssen sich die Elemente auf einer Ebene befinden, wie im Beispiel gezeigt.
:nth-child(2n) - wählt jedes zweite Element aus.
:nth-child(2n+1) - wählt jedes nach dem zweiten Element aus.
:nth-child(n+4) - wählt jedes nach dem vierten Element aus.
:nth-child(-n+2) - wählt jedes vor dem zweiten Element aus.
@mixin underline($color, $size, $position) {
background-image: -moz-linear-gradient(top, $color $size,rgba(0, 0, 0, 0) $size);
background-image: -webkit-linear-gradient(top, $color $size,rgba(0, 0, 0, 0) $size);
background-image: -o-linear-gradient(top, $color $size,rgba(0, 0, 0, 0) $size);
background-image: -ms-linear-gradient(top, $color $size,rgba(0, 0, 0, 0) $size);
background-image: linear-gradient(to bottom, $color $size, rgba(0, 0, 0, 0) $size);
background-size: 1px $size;
background-repeat: repeat-x;
background-position: 0 percentage($position);
}
@include underline(#ffffff, 2px, 1);.style1{
border-bottom: 1px solid;
padding-bottom: 1px;
}
.link{
position: relative;
}
.link:after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 1px solid;
}Mit text-decoration: underline kann man in css text unterstreichen. Es ist es aber nicht möglich die Linie zu verschieben oder vergrößern. Ich stelle euch nur ein paar Techniken vor wie man die "underline" stylen kann.
Der einfachste und älteste Weg ist es dem Text einen border-bottom zu geben. Möchte man die linie weiter weg vom Text haben, setzt man einfach einen padding-bottom. Mit dieser Methode ist es aber nicht möglich die Linie näher an den Text zu setzen.
Möchte man die Linie näher an den Text setzen, muss man ein background benutzen. Leider ist diese Methode eher etwas für SCSS da dass zuweisen der Werte doch etwas umständlicher ist. Passend dazu habe ich ein mixin geschrieben was das verwenden einfacher macht. Beim Include setzt man nur die Farbe der Border, die Größe und den Abstand. Der Abstand richtet sich hierbei nach der Größe der Schrift. Es ist auch möglich den Abstand prozentual anzugeben, hierzu muss bei der background-position: der Wert von #px auf percentage($position) geändert werden. Der Prozentuale Wertbereich liegt bei 1 - 0. Möchte man die Linie 90% von unten Positionieren muss man dies mit 0.9 angeben.
Mit diesem mixin ist es auch möglich mehrzeilige Texte zu unterstreichen. Damit das ganze auch funktioniert, muss der Text ein inline Ellement sein.
Hierbei wird die pseudoklasse :after verwendet. Mit dem bottom Wert kann man die Linie näher oder weiter weg vom Text setzen, ohne Begrenzung wie bei den ersten beiden Techniken. Der Nachteil hier ist aber, das der Linie nur über eine Zeile laufen kann.
div{
height: 100vh;
width: 100vw;
}
div{
height: calc(100vh - 40px);
}Dies ist eine weitere Maßeinheit in css. 100vh entspricht 100% der Bildschirmhöhe oder am besten ausgedrückt $(window).height(). Das gleiche gilt bei 100vw, nur das hier von der Breite des Bildschirms ausgegangen wird. Es ist eigentlich eine Jquery Vereinfachung, da man sich hier den window.height und window.width Code sparen kann. In Kombination mit calc ist dabei einiges möglich.
.elemant_1{
transition: all 2s linear;
}
.element_2{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}Hiermit könnt Ihr Elemente animieren. Mit dem ersten Wert (all), gibt Ihr an welche Eigenschaft animiert werden soll. Hier könnt ihr z.b. auch opacity eintragen, wenn ihr wollt das nur die Transparenz animiert werden soll. Der zweite Wert steht für die Dauer der Animation und mit dem dritten gibt ihr die Art (linear) der Animation an.
In ".element_2" ist mal die ganze Syntax dargestellt. Hier wird nur width Animiert. Die Dauer der animation beträgt 1s ist linear und wird mit einer Verzögerung (detay) von 2s gestartet.
Am besten funktioniert das ganze mit JQuery und einer Klassen Umschaltung.
Näheres erfahrt Ihr in in diesem Extra Tutorial.
.div_1{
-webkit-transform: perspective(500px) translate3d(0px, 0px, 20px);
transform: perspective(500px) translate3d(0px, 0px, 20px);
}Transform3D ist funktioniert änlich wie Transform. Mit den Werten kann ein Element in X, Y und Z Richtung verschoben werden. Um ein Element in Z Richtung zu verschieben, muss noch eine Perspektive angegeben werden.
.div_1{
transform: rotate(10deg);
}
.div_2{
transform: rotate(6deg) scale(0.6) skew(45deg) translate(-15px);
}Mit dieser Eigenschaft könnt Ihr Elemente beliebig transformieren. Es ist möglich Elemente zu drehen, verzerren oder skalieren. Im ersten Beispiel wird das .div_1 um 10 Grad im Uhrzeigersinn gedreht.
Das Beispiel ".div_1" ist etwas komplexer. Hierbei wird ein Element um 6 Grad gedreht (rotate), um 0.6 skalliert (scale), um 45 Grad verzerrt (skew) und um -15px nach rechts versetzt (translate).
.text {
color: #fff;
text-shadow: 2px 2px #000;
}
.text_2 {
color: #fff;
text-shadow: 2px 2px 5px #000;
}Mit text-shadow könnt ihr eurem Text einen Schlagschatten geben. Wie beim Box-Shadow gibt der erste Wert die Left Right und der zweite die Top Bottom Position an. Auch hier gibt es einen dritten Wert für die Härte des Schattens.
.div_1 {
box-shadow: 10px 10px 5px #333;
}
.div_2 {
box-shadow: 0px 0px 10px 6px rgba(0,0,0, 0.8);
}
.div_3 {
box-shadow: inset 0px 0px 20px rgba(0,0,0, 0.9);
}Mit CSS3 ist es ganz einfach einen Schlagschatten zu erzeugen. Im Beispiel ".div_1" steht der erste Wert (10px) für den Versatz nach rechts. Mit einem Wert von -10px könnt ihr den Schatten nach links verschieben. Der zweite Parameter steht für den Versatz nach unten, auch hier könnt ihr mit einem Negativen Wert den Versatz nach oben steuern. Die dritte Angabe steht für die Härte des Schattens. Mit dem letzten Wert definiert ihr die Farbe des Schattens.
Im Beispiel ".div_2" ist ein vierter Angabe (6px) dazugekommen. Dieser steuert die Ausbreitung bzw. Überfüllung des Verlaufes, in der Regel kann man auf diesen Wert verzichten. Auch hier ist es möglich RBG bzw. RGBA Farben zu verwenden.
Wie Im Beispiel ".div_3" könnt Ihr mit dem Hinzufügen von inset den Verlauf nach innen legen.
.element {
border: 1px solid;
border-radius: 5px;
}
.element_2 {
border: 1px solid;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.element_3 {
border: 1px solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}Mit dem Border Radus könnt Ihr euren Elementen abgerundete Ecken verpassen. Um den Radius auch sehen zu können, solltet ihr eurem Element eine Border oder eine Hintergrundfarbe geben. Es ist auch möglich jeder Ecke einen anderen Wert zuzuweisen, dies seht Ihr im Beispiel ".element_2". Achtet auch hierbei wieder darauf, ob es jeder Browser unterstützt.
.verlauf{
background: linear-gradient(to top, #fff, #000);
}
.verlauf_2{
background: linear-gradient(90deg, #fff 0%, #000 100%);
}
.verlauf_3{
background: -moz-linear-gradient(90deg, #fff 0%, #000 100%);
background: -ms-linear-gradient(90deg, #fff 0%, #000 100%);
background: -o-linear-gradient(90deg, #fff 0%, #000 100%);
background: -webkit-linear-gradient(90deg, #fff 0%, #000 100%);
background: linear-gradient(90deg, #fff 0%, #000 100%);
}Im Style ".verlauf" wird das einfachste Beispiel gezeigt. Hierbei wird ein Schwarz Weiß Verlauf von unten nach oben erzeugt. Die Ausrichtung wird mit to top definiert. Möglich sind noch folgende Werte: to left, to right, to bottom sowie eine grad Angabe von 0deg - 360deg. Im Style ".verlauf_2" wird die Gradangabe verwendet, wie auch eine weiterer Wert für den Beginn und Ende der Farbe in %. Mit diesem Wert könnt ihr den Verlauf weicher oder härter machen.
body {
color: rgb (255, 230, 0);
}
#id_1 {
color: rgba (255, 230, 0, 0.5);
}
#id_2 {
color: hsla (54, 100%, 100%, 1.0);
}In CSS3 ist es möglich auch RGB, RGBA HSL und HSLA Farben zu verwenden. Das A steht hierbei für die Transparenz der Farbe, die von 1.0 (100%) - 0.0 (0%) geht. Im Beispiel seht Ihr wie man eine RGB bzw. eine RGBA Farbe anwendet.
Um RBG bzw. HSL Farben zu definieren, solltet ihr am besten ein Grafikprogramm zu Hilfe nehemen. Alternativ gibt es auch diverse Webseiten die einen Color Picker anbieten. Anbei ein Link zu einer dieser Webseiten - workwithcolor.com
//Firefox
-moz-
//Internet Explorer
-ms-, mso-
Opera
-o-
//Chrome, Safari
-webkit-Da der Präfix doch sehr wichtig ist, möchte ich dies als erstes Thema behandeln. Der Präfix ist nichts weiter als ein Zusatz der dem Browser erlaubt noch nicht finale Funktionen zu nutzen. Ich empfehle euch immer alle Prefix Werte zu verwenden, achtet drauf das ihr auch eine CSS Style ohne Prefix Wert anlegt. Diese sollte immer als letztes in eurem Klassenstyle stehen.
Wie Ihr die Prefixe zuweist seht ihr in den weiteren Themen.
Anbei habe ich mal eine Liste der Prefix Werte für euch zusammen gestellt.