CSS3.SE

Har ni märkt att webbläsarna har egna prefix för något som borde vara standard? Ta

border-radius

som exempel. Det borde se ut såhär:

.box {
border-radius:10px;
}

Men som ni som har provat i fler webbläsare har antagligen märkt att det ser snarare ut såhär:

.box {
border-radius:10px;
-webkit-border-radius:10px;
[...]

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 [...]

Med CSS3 är det enkelt att rotera element på olika sätt utan att behöva använda javascript eller liknande språk. Genom att använda transition och rotate kan man både animera och rotera samtidigt.

 
 
.rotera {
color:red;
-webkit-transform: rotate(40deg);
position:absolute;
-moz-transform: rotate(-90deg);
top:140px;
}
.rotera:hover,active {
-webkit-transform: rotate(20deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}

CSS3-rotation exempel!

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 [...]

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 [...]

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;
}

Nu har jag lagt upp ett nytt tema gjort i HTML5. Design är inte min starka sida så jag valde ett som såg lite lustigt ut!

Välkommen till WordPress. Det här är ditt första inlägg. Redigera det eller radera det. Sedan kan du börja blogga!