Formen & Muster

Mit der Einführung von CSS3 ist es mittlerweile einfacher geworden, ansprechende Websites und HTML-Anwendungen nutzerfreundlich zu gestalten. Der Vorteil, auf Bilder in manchen Fällen verzichten zu können und die Ladezeiten der Site zu verringern, liegt auf der Hand. Welcher Browser HTML5 und CSS3 in welcher Ausprägung unterstützt, findet man hier. Um die unterschiedlichen Browser-Engines mit CSS3 anzusprechen, müssen die entsprechenden Browser-Präfixe (-moz für Mozilla, -ms für IE, -o für Opera, -webkit für Safari/Chrome) für ältere Browser verwendet werden.

Buttons und Icons

Buttons/Icons lassen sich mit den CSS3-Eigenschaften "border-radius", "text-shadow" und "box-shadow" interessant gestalten. Hier verwendete Sonderzeichen findet man auf Charmap.de.

 
                 Der CSS-Code für das Victory-Icon:

                  .victory   {
                              width: 50px;
                              height: 60px;
                              background:#698b69;
                              border-radius: 20px 20px 0 0;
                              font-size: 250%;
                              text-align: center;
                              color: #ffdead;
                              box-shadow: 2px 2px 1px 0px #000;
                             }


BORDER-RADIUS: Die Eigenschaft "border-radius" versieht Rahmen mit abgerundeten Ecken und wird auch auf Hintergründe und Schatten angewendet wenn das Element selbst keinen Rahmen hat. Border-radius wird hier als Kurzform für die für einzelnen Bezeichnungen border-top-left, border-top-right, border-bottom-right und border-bottom-left-radius verwendet.

Ein Wert: gilt für alle vier Ecken.
Zwei Werte: der erste Wert legt die Ecken oben links und unten rechts fest, der zweite Wert legt die Ecken oben rechts und unten links fest.
Drei Werte: der erste Wert gilt für die Ecke oben links, der zweite Wert bestimmt die Ecke für oben rechts und unten links zusammen und der dritte Wert steht für die Ecke unten rechts.
Vier Werte: die Abstände für die Ecken werden einzeln im Uhrzeigersinn festgelegt von oben links, oben rechts, unten rechts, unten links.

BOX-SHADOW UND TEXT-SHADOW:
Horizontaler Versatz - positive Zahlenwerte platzieren den Schatten rechts, negative links.
Vertikaler Versatz - positive Zahlenwerte platzieren den Schatten unterhalb, negative oberhalb.
Verlaufsradius - bei null ist der Schatten scharf, jeweils höhere Zahlenangaben steigern die Unschärfe.
Schattenabstand (optional) - positive Zahlenwerte vergrößern, negative verringern den Abstand. Standard ist null, der Schattenabstand ist gleich Verlaufsradius.
Farbe - Farbangaben sind namentlich, in Hex-Code, rgba oder auch hsla möglich. Angaben in rgba und hsla verwendet man für Farbtransparenzen, wobei ein Zahlenwert von 1 keine Transparenz bedeutet, der Zahlenwert 0 steht für volle Transparenz.

Beispiel Boxshadow

Einfache und komplexe Formen

Einfache Formen wie ein Dreieck sind mit der CSS-Eigenschaft "border" machbar. Für komplexere Formen arbeitet man mit den Pseudoelementen :before und :after. Ein Cheatsheet zum Erstellen der Formen gibt's unter: land-of-web.com/freebies/css3-simple-shapes-cheat-sheet. Manche Elemente erfordern ein Drehen der Form. Der Stern besteht eigentlich nur aus zwei übereinander absolut positionierten Quadraten, wobei eines um 45 Grad gedreht wird. Siehe hierzu auch den Abschnitt "Transitionen".
Wie für Vieles gilt auch hier: einfach mal ausprobieren !

MUSTER

CSS3-Muster basieren auf linearen und radialen Farbangaben/Farbverläufen. Das eine oder andere Hintergrundbild lässt sich so gelegentlich einsparen. Die Farbangaben sind namentlich, im Hex-Code, in rgb(a) oder hsl(a) möglich. Am besten schaut man sich hierzu einmal die Seite von Lea Verou an: CSS-Patterns-Gallery.
Hier ein paar eigene Kreationen:


Die Syntax für lineare Farbverläufe mit entsprechenden Notationen, hier von links nach rechts von gelb nach weiß mit Mozilla-Präfix:


 background: -moz-linear-gradient (Richtung oder Winkel, Colorstop, Colorstop)
             Standard ist von oben nach unten = "to bottom" = 180°

 Bei mehreren Farben muss man die Colorstops in % von 0% bis 100% angeben.
 Scharfe Übergänge entstehen durch Zusammenlegen zweier Farben am selben Colorstop.
 

 background: -moz-linear-gradient(45deg, #ffff00, #ffffff);
             [Statt des Winkels kann man auch "to right" schreiben] 
 background: -moz-linear-gradient(to right,rgb(255,255,0),rgb(255,255,255));
 background: -moz-linear-gradient(45deg,rgba(255,255,0,1),rgba(255,255,255,1));
 background: -moz-linear-gradient(to right,hsl(60,100%,50%),hsl(0,0%,100%));
 background: -moz-linear-gradient(to right,hsla(60,100%,50%,1),hsla(0,0%,100%,1));
 
 * bei den rgba und hsla Angaben ist der 4. Wert in der Klammer die Transparenz.
   1 steht für keine Transparenz, 0 für Transparenz. Wert 0.5 = halbtransparent.  

Der gleiche Farbverlauf, diesmal radial von weiß innen nach gelb außen.


 Als Zentrum des Farbverlaufs ist die Mitte x/y = 0/0 Standard.

 background: -moz-radial-gradient(#ffffff, ffff00);
 background: -moz-radial-gradient(rgb(255,255,255),rgb(255,255,0));
 background: -moz-radial-gradient(rgba(255,255,255,1),rgba(255,255,0,1)); 
 background: -moz-radial-gradient(hsl(0,0%,100%),hsl(60,100%,50%));
 background: -moz-radial-gradient(hsla(0,0%,100%,1),hsla(60,100%,50%,1));


Transitionen

Mit der CSS3-Eigenschaft "transform" werden Elemente linear verändert. Sie lassen sich verschieben, neigen, rotieren oder skalieren. Eine Kombination der Transformationen sowie negative Zahlenwerte sind ebenfalls möglich. Browserpräfixe nicht vergessen !

BEISPIELE UND SYNTAX

 
  {transform: translate(Verschiebewert, Verschiebewert);} 
  oder:
  {transform: translateX(Verschiebewert);}
  {transform: translateY(Verschiebewert);}              
                                   
  {transform: skewX(Winkel);}
  {transform: skewY(Winkel);}
            
  {transform: rotate(Winkel);} 
                  
  {transform: scale(Zahlangabe, Zahlangabe);} oder:  
  {transform: scaleX(Zahlangabe);}
  {transform: scaleY(Zahlangabe);}

  Mehrere Transforms wie im Bildbeispiel mit der Katze:
 
  {transform: rotate(-45deg) translate(17px, 13px);}
 

transform: translate(30px, -20px) verschiebt das Element 30px nach rechts, 20px nach oben.


transform: skewX(30deg) neigt das Element um 30°.


transform: rotate(45deg) dreht das Element um 45°.


transform: scale(2,2) vergrößert das Element um das Doppelte.


kistendeckel
puzzleteilzwei
halbe erdbeere halbe beere rechts

Hovereffekte finden sprunghaft statt. Mit der Eigenschaft "transition" werden die Effekte zeitlich steuerbar und können so weicher und fließender gestaltet werden. Welche Eigenschaften mit "transition" angesprochen werden können, findet man bei w3c.org.


 Transitionen erfordern die Browserpräfixe.  

     (Eigenschaft)
 transition-property: all     ("all" steht für alle
                              möglichen Eigenschaften)
        (Dauer)
 transition-duration: 2.5s    (Angabe hier: 2,5 Sek.)

 (Animationskurve) [optional]  
 transition-timing-function: linear      (gleichmäßig schnell)                  
                             ease-in     (Start langsam, Ende schnell)    
                             ease-out    (Start schnell, Ende langsam)       
                             ease-in-out (langsam - schnell - langsam)
                             ease  (schnellerer Start als ease-in-out) 

 (Zeitverzögerung) [optional]
 transition-timing-delay      3s         (verzögert Start um 3 Sek.)    
                      
  
 KURZFORM DER SYNTAX 

 {-moz-transition: opacity 1s linear;}     Transparenz innerhalb  
 {-ms-transition: opacity 1s linear;}      1 Sek. gleichmäßig schnell,                                    
 {-webkit-transition: opacity 1s linear;}  ohne Verzögerung.

Checkboxen


Gut erklärte Tutorials zum Erstellen von Checkboxen fand ich bei Paul Underwood.
Ob optisch aufgemotzt oder "flat" ist eher Geschmackssache. Checkboxen kann man auch mal anders nutzen, wie die letzten drei Beispiele zeigen, die"just for fun" entstanden.

Bilder und Bildergalerien

Ohne Bilder kommt man im World Wide Web nicht aus. Es gibt unzählige Bildergalerien, von denen viele jedoch JavaScript einbinden. Es folgt eine kleine Auswahl an unkomplizierten Möglichkeiten der Bildpräsentation, die ausschließlich mit CSS3 gestaltet und recht funktionell als auch optisch attraktiv sind.
Hat man nur wenige Bilder, kann man auch einmal ein "flipping image" verwenden. Die Rückseite kann beispielsweise zusätzliche Informationen zum Bild liefern.

monarchfalter
text fuer falter
blaeuling
text fuer blaeuling
tagpfauenauge
text fuer tagpfauenauge

Die "flipping images" bedienen sich der CSS-Eigenschaften "transform" und "transition" für Perspektive und Rotieren. Hovereffekt und Sichtbar- bzw. Unsichtbarmachen einer Bildseite sorgen dann für den Gesamteffekt. Vorder- und Rückseite des Bildes müssen absolut positioniert übereinander gelegt werden, die Rückseite wird zunächst ausgeblendet. Das Bild wird bei Überfahren mit der Maus ("hover") 180°um die y-Achse gedreht. Für eine genauere Beschreibung, weitere Beispiele nebst Code verweise ich auf die Seite von D. Desandro bei Github, die allerdings in englischer Sprache ist.

IE 10 und 11 untersützt 3d-Transformation nicht. Ohne zusätzliches Programm, das dieses Problem umgeht, dreht sich das Bild zwar und wird seitenverkehrt dargestellt, zeigt aber nicht die Rückseite.

BILDER ALS THUMBNAILS

Für die Präsentation mehrerer weniger Bilder kann man sich den "hover"-Effekt zunutze machen, indem man die Bilder zunächst als Thumbnail verkleinert anzeigt und das Bild beim Überfahren in Originalgröße rückskaliert.

  • teezeit
  • treppauf
  • gedenken
  • schwarm

BILDBESCHRIFTUNGEN

Manchmal möchte man ein Bild mit Zusatzinformationen versehen, einer Bildunterschrift oder sogar nötigen Zusatzinformationen zum Bild. Um Bilder mit Bildunterschriften, sogenannten "captions" auszustatten, bietet CSS3 ebenfalls elegante Lösungen. Oft findet man diese "captions" in Bildergalerien, die beim Überfahren des Bildes mit der Maus eingeblendet werden.

Treppe im Nebel

Weg ins Ungewisse

Umfangreichere Bildersammlungen zeigt man besser in einer Bildergalerie, die man mit CSS3 problemlos auch ohne Script anlegen kann. Ob nun mit Bildunterschriften, extra Thumbnails... wie auch immer, ist eher Frage dessen, was man möchte und was man braucht.

open
strauss
schwan
ente
moewe
rote blueten
blaue blumen
zweig mit blueten
lotosbluete
vogelschwarm
HOVERGALERIE
beispielgrafik galerie

Bei der Hovergalerie verfährt man zunächst genau wie bei der Galerie der Thumbnails. Unterschied hier ist, dass die Bilder im Hauptcontainer absolut positioniert und mit verschieden hohem z-index genau übereinander gelegt werden. Mittels Transform und Translate werden dann die einzelnen Bilder bei "hover" an ihre Position im Container versetzt. Eine Transition bringt weiche Übergänge und zum Aufhübschen kann man Schatten oder Ränder hinzufügen.

GALERIE MIT RADIOBUTTONS

 Wen es interessiert, der kann hier nachsehen wie die Galerie gemacht wird: beispiel buttongalerie

Die in den Bildergalerien und einzelnen Beispielen verwendeten lizenzfreien Fotos und Grafiken findet man bei Public Domain Pictures und Unsplash.com als auch Gratisography.com.


Animiertes mit Keyframes

hummel

Animierte Inhalte werden mit "@keyframes" erstellt. Also lassen wir das Insekt im linken Bild doch einmal zum Leben erwachen. Was dazu nötig ist und welche Möglichkeiten der Animation CSS3 bietet, soll an dieser Stelle in Beispielen deutlich werden. Zunächst muss man jedoch erst einmal die graue Suppe der Theorie löffeln, damit nachher alles funktioniert.

linker fluegel rechter fluegel hummelbein koerper der hummel

Was kann man animieren ?
Eine Übersicht aller animierbaren Eigenschaften liefert diese Liste von MDN (Mozilla Developer Network).

Welche Angaben sind nötig ?
Eine Animation benötigt einen Selektor, einen Namen und als Mindestangabe die Animationsdauer.
Die @keyframes definieren den Anfangs- und Endzustand der Animation.

beispiel

Manch einem mag es ein wenig zu viel an Bewegtem an dieser Stelle werden, deshalb habe ich für manche Animationen eine "Klappe" eingebaut, mit der man die Animation ein- und ausblenden kann.

Gleichzeitig sei an dieser Stelle gesagt, dass Animationen ein echter Hingucker sein können, wenn sie gezielt und in Maßen eingesetzt werden. Dies gilt auch für Inhalte innerhalb der Animation. Manche Werbebanner sind gespickt mit eingeblendeten Texten, blinkenden Elementen u.v.m., was dann einfach nur noch nervig wirkt.

Übersicht und Bildbeispiele



 @keyframes 	            Bezeichnet Anfangs- und Endzustand der Animation 	
 animation 	            Kurzschreibweise für die Animationseigenschaften,
                            außer für "animation-play-state" und  "animation-fill-mode" 
 animation-delay 	    Bezeichner für Zeitverzögerung für den Animationsstart	
 animation-direction 	    Bezeichner für die Laufrichtung der Animation                alternate, normal = Vorgabe, reverse	
 animation-duration 	    Gibt Zeitspanne der Animation an                	         Angabe in Sek. (s) oder (ms)
 animation-fill-mode 	    Definiert den Zustand der Animaton am Ende,                  forwards, backwards, both, 
                            bei Zeitverzögerung, oder wenn angehalten                    none = Vorgabe 
 animation-iteration-count  Gibt die Wiederholungen der Animation an                     infinite = Vorgabe, oder Zahlenwert    	
 animation-name 	    Definiert den Animationsnamen für die Schlüsselbilder
 animation-play-state 	    Gibt an, ob die Animation läuft oder pausiert wurde          running = Vorgabe, paused  	
 animation-timing-function  Definiert die Animationsgeschwindigkeit			 ease = Vorgabe, ease-in, ease-out, 
                                                                                         ease-in-out, linear, cubic-bezier,
                                                                                         steps(Zahlenwert)

 Schreibweise für @keyframes:  Bei nur einem Anfangs- und Endpunkt:  @keyframes Animatonsname  { from {Angabe;} 
                                                                                                 to   {Angabe;} }

                               Bei mehreren Einzelschritten: @keyframes { 0%{Angabe;} x%{Angabe;} x%{Angabe;} 100%{Angabe;} }

 Kurzschreibweise:             animation: Animationsname 3s infinite ease-in-out;     Zeitverzögerung muss direkt hinter 
 An Browserpräfixe denken !                   (Name)   (Zeit) (Dauer) (Geschw.)       Dauer stehen.
                                                                           
windmuehlenrad
gelbe blase rote blase gruene blase
dosendeckel beschriftung dose
dosenboden

Bei drehenden Objekten wie dem Windmühlenrad muss man beachten, dass als Vorgabe der Drehpunkt immer bei x/y = 0/0 liegt. Sofern der Drehpunkt nicht in der Bildmitte liegt, so wie dies bei den Flügeln der Hummel im Bild am Seitenanfang der Fall ist, muss man den Drehpunkt mittels "transform-origin" genau angeben. Dies ist in Prozent oder Pixeln möglich.

Die Dose dreht sich eigentlich gar nicht, auch wenn es auf den ersten Blick so aussieht. Hier läuft ein Bild zwischen zwei PNGs durch, die den oberen und unteren Dosenrand abbilden.

pendel

Praxis Dr. Gschwind

  - Hypnotherapeut -

Endlich Schluss mit:
Tussialarm - Zickenterror - Aggro-Style
Komasaufen - Terrorkids - Dauerchillen ...

Nie mehr allein...

Wir finden den perfekten Partner.

Info
hier

blauer Kaefer herzchen

Die Pendelanimation ergibt sich einem positiven und einem negativen Rotationswert. Das Pendel schlägt hier einmal 25° nach rechts und -25° nach links, verteilt auf 11 Schritte von 0% bis 100%.

Das Beispiel der Anzeige "Matchup" zeigt Veränderung der Transparenz von Objekten. Natürlich gibt es noch unendlich mehr Möglichkeiten, doch denke ich die Beispiele zeigen hinreichend, was CSS3 bietet und dass es nicht immer Flash sein muss, worüber die meisten animierten Inhalte immer noch laufen.


css-made

huehner auf stange fallende eier spiegelei eimatsch

Impressum

Für diese Seite verantwortlich i.S.d.§5 TMG:


Karin Scheerer
Im Wiesental 69
57078 Siegen


E-mail: ka-scheerer@t-online.de

Für hier gezeigte Beispiele, Bildergalerien und Animationen wurde neben eigenen Bildern Bildmaterial folgender Quellen genutzt:

Das Copyright für alle Teile dieser Seite verbleibt, sofern nicht anders angegeben, beim Inhaber dieser Seite.

Sollte ggf. Inhalt auf dieser Seite enthalten sein, der die Rechte anderer verletzt, so wird dieser unverzüglich nach Inkenntnissetzung des Seiteninhabers entfernt.

Von dieser Seite ausgehende verlinkte Seiten wurden zum Zeitpunkt der Verlinkung überprüft und waren zum Zeitpunkt der Linksetzung nach Kenntnisstand frei von bedenklichen oder strafbaren Inhalten. Für den Inhalt sowie die Einhaltung der Rechte sind allein und ausschließlich die Inhaber der verlinkten Seiten zuständig. Auf die aktuelle und zukünftige Gestaltung, die Inhalte oder die Urheberschaft der verlinkten Seiten habe ich keinen Einfluss. Deshalb distanziere ich mich hiermit ausdrücklich von den Inhalten aller verlinkten Seiten, die nach der Linksetzung geändert oder verändert wurden.

Siegen, den 20.12.2014