CSS3 Tutorials

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.

Smart Underlines

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

                @mixin smartUnderlines($color){
                    text-shadow: .03em 0 #{$color}, -.03em 0 #{$color}, 0 .03em #{$color}, 0 -.03em #{$color}, .06em 0 #{$color}, -.06em 0 #{$color}, .09em 0 #{$color}, -.09em 0 #{$color}, .12em 0 #{$color}, -.12em 0 #{$color}, .15em 0 #{$color}, -.15em 0 #{$color}
                }
                
                .smart-underline{
                    @include smartUnderlines($colorBackground);
                }
            

Flexbox - justify-content

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.
  • Menu
  • Menu
  • Menu
  • Menu
  • Menu
  • Menu

                <style type="text/css">
                    .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;
			        }
                </style>

                <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>

            

Flexbox - Flex

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.


1
2
1

                <style type="text/css">
                    .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;
                    }
                </style>

                 <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>

            

Horizontal und/oder vertikal zentrieren

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%).
                <div class="center-item">
                    <div class="center-image landscape"></div>
                </div>

                <style type="text/css">
                .portrait{
                    -moz-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
                    position: relative;
                    left: 50%;
                    width: 100px;
                    height: 200px;
                }

                .landscape{
                    -moz-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
                    position: relative;
                    top: 50%;
                    width: 200px;
                    height: 100px;
                }

                .bounding{
                    -moz-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                    -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                    position: relative;
                    top: 50%;
                    left: 50%;
                    width: 100px;
                    height: 100px;
                }
                </style>
            

Blend-mode

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.

Original

Blend-Mode multiply, Hintergrundfarbe Orange
        <div id="image-blendmode" class="image-blendmode"></div>

        <style type="text/css">
            .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;
            }
        </style>
            

nth-child Pseudo-Selektor

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(3) - wählt das dritte Element aus.

: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.
                 <div class="wrap">
                     <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>

                <style type="text/css">
                    .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;
                    }
                </style>
            

Underline alternative

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 #{$position}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.

            <style type="text/css">
            .style1{
                border-bottom: 1px solid;
                padding-bottom: 1px;
            }
            </style>


            //code for scss
            @mixin underline($color, $size, $position) {
                background-image: -moz-linear-gradient(top, $color #{$size}px,rgba(0, 0, 0, 0) #{$size}px);
                background-image: -webkit-linear-gradient(top, $color #{$size}px,rgba(0, 0, 0, 0) #{$size}px);
                background-image: -o-linear-gradient(top, $color #{$size}px,rgba(0, 0, 0, 0) #{$size}px);
                background-image: -ms-linear-gradient(top, $color #{$size}px,rgba(0, 0, 0, 0) #{$size}px);
                background-image: linear-gradient($color #{$size}px,rgba(0, 0, 0, 0) #{$size}px);

                background-size: 1px #{$size}px;
                background-repeat: repeat-x;
                background-position: 0 percentage($position);
            }
            @include underline(#000000, 2, 1);
            //code for scss end


            <style type="text/css">
            .link{
                position: relative;
            }

            .link:after{
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                border-bottom: 1px solid;
            }
            </style>
            

virtuelle pixel (vh, vw)

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.
            div{
                height: 100vh;
                width: 100vw;
            }

            div{
                height: calc(100vh - 40px);
            }
            

Transition

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.

Browser Kompatibilität: IE: ab 10 ,Firefox: ab 16, Chrome: ab 26 , Safari: ab 6.1, Opera: ab 12.1

            <style type="text/css">

             .elemant_1{
                transition: all 2s linear;
             }

             .element_2{
                transition-property: width;
                transition-duration: 1s;
                transition-timing-function: linear;
                transition-delay: 2s;
             }

            </style>
            

Transform 3D

Transform 3D ist ähnlich wie Transform 2D aufgebaut, nur das am Ende der Function ein X oder ein Y angehängt wird. X steht dabei für die Horinzontale und Y für die Vertikale Achse. Um mehrere Eigenschaften zu ändern, müsst Ihr diese an die Funktion anhängen, wie im Beispiel ".div_1" zu sehen.

Hier einige Beispiele

Div 1

Hier noch ein kleines Tutorial zu diesem Thema - CSS3 Cube

Browser Kompatibilität: IE: ab 10 ,Firefox: ab 16, Chrome: ab 36 , Safari: ab 4, Opera: ab 23

            <style type="text/css">

            .div_1{
                transform: rotateX(15deg) rotateY(-55deg);
            }

            </style>
            

Transform 2D

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).

Hier einige Beispiele

Div 1
Div 2

Browser Kompatibilität: IE: ab 10 ,Firefox: ab 16, Chrome: ab 36 , Safari: ab 3.2, Opera: ab 23

            <style type="text/css">

            .div_1{
                transform: rotate(10deg);
            }

            .div_2{
                transform: rotate(6deg) scale(0.6) skew(45deg) translate(-15px);   
            }

            </style>
            

Text Shadow

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.

Browser Kompatibilität: IE: ab 9 ,Firefox: ab 3.1, Chrome: ab 2 , Safari: ab 4, Opera: ab 9.5

            <style type="text/css">

            .text {
                color: #fff;
                text-shadow: 2px 2px #000;
            }

            .text_2 {
                color: #fff;
                text-shadow: 2px 2px 5px #000;
            }

            </style>
            

Box Shadow

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.

Hier ein paar Beispiele:

Div 1
Div 2
Div 3

Browser Kompatibilität: IE: ab 9 ,Firefox: ab 4, Chrome: ab 10 , Safari: ab 5.1, Opera: ab 10.5

            <style type="text/css">

            .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);
            }

            .div_4 {
                -moz-box-shadow: 10px 10px 5px #333;
                -webkit-box-shadow: 10px 10px 5px #333;
                box-shadow: 10px 10px 5px #333;
            }

            </style>
            

Border Radius

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.

Browser Kompatibilität: IE: ab 9 ,Firefox: ab 4, Chrome: ab 5 , Safari: ab 5, Opera: ab 10.5

            <style type="text/css">

            .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;
            }

            </style>
            

Verläufe

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.

Hier einige Beispiele:

Beispiel: linear-gradient(90deg, #fff 0%, #000 100%);
Beispiel: linear-gradient(to top, #000 0%, #fff 100%);
Beispiel: linear-gradient(90deg, rgba(133, 0, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 100%);
Browser Kompatibilität: IE: ab 10 ,Firefox: ab 3.6, Chrome: ab 10 , Safari: ab 5.1, Opera: ab 10
                <style type="text/css">

                .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%);
                }
                </style>
            

Farben

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


            <style type="text/css">

            body {color: rgb (255, 230, 0);}
            #id_1 {color: rgba (255, 230, 0, 0.5);}
            #id_2 {color: hsla (54, 100%, 100%, 1.0);}

            </style>

            

Präfix

Da der Prefix 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.

Präfix
Browser
-moz-
Firefox
-ms-, mso-
Internet Explorer
-o-
Opera
-webkit-
Chrome, Safari