CSS3 handbok

september 24, 2010 § Lämna en kommentar

Här nedan presenterar jag några CSS3 nyheter.

För att snedställa ett element:
-webkit-transform: rotate(-11deg) scale(1.25);
-moz-transform: rotate(-11deg) scale(1.25);
(Om du inte skriver dit scale(1.25) så antas det att skalan är 1.00)

En snygg övergång:
-webkit-transition: all 0.5s ease-in-out;
Är samma som:
-webkit-transition-property:all;
-webkit-transition-duration: 1.5s, 1.5s;
-webkit-transition-timing-function: linear, ease-in-out;

Välj din border bild:
-webkit-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;
-moz-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;

För att din bakgrund ska få rundade kanter:
-webkit-border-radius: 4px 3px 6px / 2px 4px;
-moz-border-radius: 4px 3px 6px / 2px 4px;
border-radius: 4px 3px 6px / 2px 4px;

Är samma sak som

-webkit-border-top-right-radius: 3px 4px;
-webkit-border-top-left-radius: 4px 2px;
-webkit-border-bottom-right-radius: 6px 2px;
-webkit-border-bottom-left-radius: 3px 4px;
-moz-border-radius-topleft: 4px 2px;
-moz-border-radius-topright: 3px 4px;
-moz-border-radius-bottomright: 6px 2px;
-moz-border-radius-bottomleft: 3px 4px;
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px:

För att få skugga på text:
text-shadow: 2px 2px 2px #000;

För att få skugga på ett CSS element:
-moz-box-shadow: 15px 15px 0px #999;
-webkit-box-shadow: 15px 15px 0px #999;
box-shadow: 15px 15px 0px #999;
padding: 5px 20px 5px 20px;

Börja med att testa alla dessa. Sedan vill jag att du ska tänka dig hur man använder dessa tillsammans. Med hjälp av pseudo classer såsom :hover och :focus så kan man åstadkomma många snygga fade effekter som tidigare gjordes med javascript.

Annonser

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s

Vad är detta?

Du läser för närvarande CSS3 handbokTobiasboman's Blog.

Meta

%d bloggare gillar detta: