Box Shadow

Heute geht es um das Thema Schatten. Schatten können vielseitig eingesetzt werden, z.B. in Verbindung mit einem einer Box oder einem Bild. Anhand dieser Beispiele werde ich erklären wie man Schatten erstellt und entsprechend einstellt. Weiterlesen

Advertisements

Transition Slide

Transition ist ein beliebtes Styleelement unter HTML5 und CSS3. Älter Browser unterstützen die Funktion leider nicht mehr. Dort wird dann ein einfach hover-Effekt angezeigt, statt der Transition-Animation.

Transitions können vielseitig eingesetzt werden, beispielsweise um Objekt zu vergrößern oder zu sliden. In diesem Beispiel geht es um das Sliden von Objekten von Rechts nach Links:

Der „width“ und „height“ Wert kann nach belieben angepasst werden, um die Boxgröße mit den darin angezeigten Objekten einzustellen. Das Objekt wird durch den left-wert „-200px“ von Rechts nach Links bewegt. Ändern wir den Wert auf „200px„, so bewegt sich das Objekt von Links nach Rechts

Beispiel (einfach kopieren und in eure Seite einfügen):

CSS3 Code (transition für alle Browservarianten enthalten)


.slide{
 position: absolute;
 background-color:#FFFF00;
 cursor:pointer;
 width:270px;
 height:228px;
 margin:0 0 0 207px;
 border-left:5px solid #ececec;
 transition: all 0.9s linear;
 -webkit-transition: all 0.9s linear;
 -moz-transition: all 0.9s linear;
 -o-transition: all 0.9s linear;
 -ms-transition: all 0.9s linear;
}

.linksslide:hover{
 left:-200px;
}

HTML5 Code


<div class="slide linksslide">Eure Objekte, Texte oder Bilder</div>

Beispiel online