Mit Hilfe von CSS3-Formatierungen lassen sich ohne großen Aufwand geniale Effekt auf Deiner Webseite realisieren!
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; }
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>
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