Snabbguide till CSS3

Posted by Edvin Brobeck at 10:21

Vi  som jobbar med webb står inför en mycket spännande framtid. Utanför dörren står CSS3 och väntar på att släppas in i alla hem, och även om många redan välkomnat framtiden med öppna armar så är det en bit kvar

Vi tänkte här ta upp några av de största och med hjälpsamma funktionerna som CSS3 erbjuder.

• Gradienter
• Runda hörn
• Skugga

1. Gradienter

Iochmed den nya css-regeln gradient så kan man nu skapa gradienter utan att använda bilder, och enbart med ren kod.

-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(255,221,0)),
color-stop(1, rgb(251,126,0))
)
-moz-linear-gradient(
center bottom,
rgb(255,221,0) 0%,
rgb(251,126,0) 100%
)

2. Runda hörn

Alla som har jobbat med webbdesign har bråkat med rundade hörn åtmistoende hundra gånger. Den tiden är över – tack och lov.
Med CSS3 så är allt du behöver följande kod

-webkit-border-radius: 5px;
-moz-border-radius:5px 5px 5px 5px;

3. Skugga

Sist men definitivt inte minst så har vi egenskapen som heter box-shadow.

box-shadow: 10px 10px 5px #888;

Thats all!

Sammanfattning

Jag tror att vi utan att överdriva kan säga att CSS3 kommer att förändra vardagen för oss webbdesigners, och det är åt det bättre hållet.

Andra artiklar med liknande innehåll:

En ny jQuery-slider: Nivo

Äntligen – En riktig Slider Länge har vi  på Bombardier Studio har letat efter ett riktigt bra slider-plugin till jQuery, [...]

Fler domäner – en WP installation

För att förklara användningsområden av detta lilla enkla wordpress-hack så tänker vi oss att vi driver en verksamhet som säljer [...]

Egna typsnitt på webben.

Inledning. Om du jobbar med webdesign så har du antagligen redan märkt att man är begränsad till att använda de [...]