CSS3 Formatierungen

Mit Hilfe von CSS3-Formatierungen lassen sich ohne großen Aufwand geniale Effekt auf Deiner Webseite realisieren!

 

 

CSS3-Boxen

Beispiel: Box mit abgerundeten Ecken und Schatten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut erat, sed diam voluptua.

 

CSS3-Style-Anweisung:

/* CSS3 Rounded Corners Box mit Schatten
========================================*/
#mainNav1, #jimdobox, #css3box, .css3box {
border: 1px solid  #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 3px 3px 11px #ccc; /* webkit browser*/ -moz-box-shadow: 3px 3px 6px #ccc; /* firefox */ box-shadow: 3px 3px 6px #ccc;
padding:5px;
}

 

Rounded Corners for IE6+7

Quelle: http://www.dillerdesign.com/experiment/DD_roundies

 

CSS3-Boxen auch für ältere Browser realisieren (JavaScript-Lösung)

Download
dd_roundies_0.0.2a.js
js File 16.5 KB


<script src="http://redesign-berlin.jimdo.com/app/download/5751762864/51867544%2F53150f37fabccc2afc64d01efdeb592aace14acc%2F

dd_roundies_0.0.2a.js?t=1360933046"></script>

<script>
DD_roundies.addRule('#header, #emotion-header-img, #wrapper, #mainNav1, #jimdobox, .css3box, h1', '10px 10px', true);

DD_roundies.addRule('a.download, #morph', '10px', true);

DD_roundies.addRule('a.big_link', '20px', true);
DD_roundies.addRule('#totally_round', '10000px', true);
DD_roundies.addRule('#multiple_borderwidth_and_radii', '20px 100px 15px 50px', true);
</script>

Fade-In für ganze Webseite

Netter Effekt, um die Übergänge von Seitenwechseln etc. weich und entspannt zu gestalten oder um Ladezeiten abzumildern!

 

CSS3-Code im Head-Bereich einfügen:

 

#content_area {

animation:fadein 0.5s;

-moz-animation:fadein 1.0s;

-webkit-animation:fadein 0.5s;

}

 

@keyframes fadein{from{opacity:0;}to{opacity:1;}}

@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}

@-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}

@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}

 

Kommentar schreiben

Kommentare: 0