Mitmachen auf CSS3.de

Du hast eine Webseite zum Thema CSS3 oder schreibst auf deinem Blog/deiner Webseite über CSS3 und/oder HTML? Du willst über deine Erfahrungen/Experimente berichten und mich/uns teilhaben lassen? Du hast tolle Webseiten zu unserem gemeinsamen Thema gefunden, die Du unbedingt weitergeben musst?

Mitmachen auf CSS3.de

Ich habe ein Formular zur Übermittlung Eurer Beiträge/Ideen und Vorschläge erstellt. Ich würde mich freuen, wenn ihr regen Gebrauch davon macht.

Kleine Animation mit CSS und einem spritesheet

Ein Spritesheed ist eine einzelne Grafikdatei, die aber mehrere kleinere Bildchen, Icons, Symbole oder Abwandlungen davon enthält. Mit CSS kann man dann prächtig die Positonen der gewünschten “Bildchen” ansteuern. Es müssen hier jeweils aber nicht mehrere Grafiken geladen werden, sonder nur eine. Das spart Ladezeit und http-Anforderungen. In der Vergangenheit habe ich sprites z. B. für unterschiedliche Linkzustände hover, active etc. benutzt.

Prinzip: unterschiedliche Zustände (hover, active), unterschiedliche Positionen der Hintergrundgrafik.

Hover und Klick drauf!

<a id="css3sprite"></a>

#css3sprite {
width: 160px;
height: 160px;
display: block;
background: url(http://www.css3.de/upload/Peileppe_footman.png);
background-position: 0;
}
#css3sprite:hover {
background-position: -320px;
}
#css3sprite:active {
background-position: -480px;
}

Mit CSS3 und den @keyframes animationen kann man das Spritesheet auch als “Filmstreifen” verwenden, der dann, Sequenz für Sequenz (unterschiedliche Positionen in dem Spritesheet), abläuft.

Hier das Spritesheet als Beispiel (verkleinert auf 600px width):
Peileppe_footman

{
..
animation: spritesanim 1s steps(5) infinite;
..
}
@keyframes spritesanim {
to {
background-position: -800px;}
}

Hier die Animation:

spritesheet: Quelle (openclipart.org, Footman von user: Peileppe)

neue cursor-styles in CSS3

Mir war das ehrlich gesagt noch gar nicht so bewusst aufgefallen, muss ich eingestehen. Meine Schwerpunkte beim Betrachten einer Seite liegen doch meist woanders.

CSS3 bringt uns gegenüber CSS2 eine Reihe von neuen Cursor-Styles mit. Diese sollten mit allen neueren Browsern (IE > 8) funktionieren. Falls nicht, steht es hinter dem jeweiligen Cursor-Style in Klammern dabei. Beim Überfahren mit der Maus (:hover) sind die verschiedenen Cursor-Styles zu sehen.

cursor: copy; (funktioniert nicht mit Safari)
cursor: no-drop;
cursor: not-allowed;
cursor: ew-resize;
cursor: ns-resize;
cursor: nesw-resize;
cursor: nwse-resize;
cursor: col-resize;
cursor: row-resize;
cursor: all-scroll
cursor: none; (funktioniert nicht mit IE, Safari und Opera)
cursor: context-menu; (funktioniert nicht mit Firefox und Chrome)
cursor: cell; (funktioniert nicht mit Safari)
cursor: vertical-text;
cursor: alias; (funktioniert nicht mit Safari)

 

  • Veröffentlicht in: CSS3

BonBon Buttons – schicke CCS3 Buttons

Um mal zu schauen, was heute alles so mit CSS3 geht oder gemacht werden kann, hat Simurai einige tolle Buttons mit CSS3 erstellt bzw. gestaltet. Schaut dort mal rein, wenn ihr das noch nicht kennt!

BonBon Buttons - Sweet Css3 buttons

This is just a demo and not meant to be used on your next project that targets the average internet user. Not all browser are supported. I just wanted to show a couple techniques how to use some of the new CSS3/HTML5 features.

Cool, oder?