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.

Däremot så har vi av rent praktiska skäl enbart en webbutik där vi säljer bägge två av produkterna. Då vill ju självklart att man skall komma till samma sida oavsett vilken av adresserna man skriver in.

Hacket är inte speciellt avancerat utan är några enkla rader som kopieras in på översta raden i din wp-config.php fil som du hittar i mappen för din wordpress installation!

Då kör vi!

Öppna wp-config.php

Kopiera in följande kod på översta raden under ”< ?php”

//flera domäner
define( 'WP_SITEURL','http://'.$_SERVER['SERVER_NAME'].'/bombardierstudio' );
define( 'WP_HOME','http://'.$_SERVER['SERVER_NAME'].'/bombardierstudio' );
//slut flera domäner

Nu bör det se ut ungefär som i bilden nedan.

Om din webbplats ligger i en undermapp (http://www.dinadress.se/butik/)

Se då till att ändra i bägge raderna enl. bilden nedan, fast byt ut ”Bombardierstudio” till namnet på din mapp.

Om du jobbar med webdesign så har du antagligen redan märkt att man är begränsad till att använda de standardtypsnitt som är webbsäkra. Till de mest använda hör: Arial, Verdana, Trebuchet MS, Times New Roman.

Bakgrunden till detta är helt enkelt att man vill att en webbsida inte skall vara beroende på vilka typsnitt besökaren har installerade på sin egen dator.

Detta hade väl varit ett okej argument för några år sedan, när varje kilobyte fortfarande var viktig för att man inte skulle behöva vänta för länge medans sidan laddade. Idag ser dock verkligheten lite annorlunda ut. Med snabbare internetuppkopplingar, och nyare webbläsare kommer nyare lösningar på problemet.

Metoder

Flera metoder och alternativ finns tillgängliga redan idag, varav vissa är mer lättimplenterade än andra och andra bättre bakåtkompatibla.

Några av de alternativ som finns är Cufon, SIFR, FLIR, typeface.js, CSS3.

Cufon – vårt val.

Idag kommer vi att gå igenom Cufon, vilket är vårat favoritalternativ av alla de olika som vi har testat.
Vi kommer att gå igenom hur man konverterar ett typsnitt, samt hur du implementerar det på din egen sida!

Lets get to it!

Steg 1.  Konvertera ditt typsnitt.

Vi börjar med att välja ut vilket typsnitt vi vill använda. Därefter så går vi till

http://cufon.shoqolate.com/

Om du vill ha svenska tecken så är det bra om du fyller i dessa här, observera att typsnittet måste innehålla dessa tecken för att det skall funka (såklart!)

Implementering

Nu har vi en .js fil som innehåller vårat typsnitt. Då är det dags att lägga till denna på din websida och lägga till den kod som behövs för att sidan skall fungera.

1. Ladda även ner cufon-yui.js ifrån cufons hemsida.
2. Ladda upp filerna till servern och lägg dem i en mapp som heter ”js”

Öppna den fil som innehåller sidhuvudet för din webbsida (i wordpress så är detta header.php).
Tänk på att du måste inkludera dessa filer på alla sidor där du vill använa ditt egna typsnitt!

Kopiera följande två rader och lägg dem någonstans imellan < HEAD > taggarna

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/helvetica-neue_500.js" type="text/javascript"></script>

När detta är gjort så är det dags att välja vilka element vi vill skall bytas ut till ditt typsnitt.

Detta görs med följande kodsnutt – Den byter ut alla Rubriker till ditt typsnitt

<script type="text/javascript">
Cufon.replace('h1,h2,h3,h4', { fontFamily: 'ditt-typsnitts-namn' });
</script>

Nu är det hela klart! OM du har lyckats med alla steg så bör du ha något som ser ut som bilden nedan