Den svenska CSS3-resursen!

En animerad bubbelmeny

Posted on oktober 24th, 2011

I ett exempel så visas det hur man med hjälp av CSS kan skapa olika sorters ”pratbubblor” eller tips som kommer fram när man hovrar över ett element. Detta exempel har jag utökat och kombinerat med en annan tutorial om hur man kan använda pseudoelementen :before och :after för att presentera innehåll.

Animationerna skapas enkelt [...]

Texteffekter, del 2

Posted on oktober 24th, 2011

I det något ouppdaterade serien texteffekter kommer här del två. I del 1 gick vi igenom reflektioner, men CSS3 har en hel del mer att erbjuda som tidigare inte varit möjligt.
En sak som ofta används i logos och headers på diverse hemsidor är olika typer av bakgrundsfärg eller simulerat ljus. Detta görs enkelt i [...]

Texteffekter, del 1 – reflektioner

Posted on juni 10th, 2010

I en liten följetång på css3.se kommer vi gå igenom olika texteffekter man enkelt kan åstadkomma med hjälp av de nya funktionerna i CSS3.

Först ut är reflektioner som är en vanlig effekt att använda i alla typer av logos, bilder med mera där text förekommer. Genom att använda egenskapen box-reflect kan man välja var [...]

Fonthantering med CSS3

Posted on juni 6th, 2010

I CSS3 är det lätt att använda customfonter för att presentera sitt innehåll. Till skillnad från tidigare kan man med regeln @font-face.
Genom att placera fontfilen på servern så kan alla användare vars webläsare har stöd för CSS3 och @font-face ladda ner dessa och visa dem direkt på hemsidan.
Här är ett exempel på hur man specificerar [...]

Zebramönster med CSS3

Posted on maj 27th, 2010

Ett populärt sätt för att få tabeller att se mer estetiskt tilltalande ut och mer lätta att ta till sig är att skapa ett zebraliknande mönster där varannan rad är i en annorlunda färg än de angränsande raderna. Tidigare har man använt två olika klasser på varannan tabellrad för att åstadkomma denna effekt, men med [...]

Flera bakgrunder

Posted on maj 17th, 2010

I css3 kan du lägga in flera bakgrunder i samma element, du behöver bara kommaseparera dem. Det är lite tufft.
Exempel:

.multiple-backgrounds {
background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg) top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;
}