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