CAHIER http://www.cahier.se På denna sida samsas information om teknik, med aktuella länkar till nyheter inom IT-världen och intressanta frameworks. Inslängt hamnar även en del designtips. Tanken är att hitta ett sätt att samla information, för min egen skull och också för din. Håll till godo. Tue, 24 May 2011 20:05:14 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 CSS3 – Eller hur jag slutade oroas och lärde mig att älska stripes http://www.cahier.se/2011/05/hello-world/?utm_source=rss&utm_medium=rss&utm_campaign=hello-world http://www.cahier.se/2011/05/hello-world/#comments Mon, 16 May 2011 16:40:35 +0000 admin http://www.cahier.se/?p=1 Continue reading →]]> CSS3. Sällan har ett litet ord smakat så lovande. Stöd för alla funktioner saknas fortfarande i somliga browsers, vilket Lea Verou förklarade ack så pedagogiskt på senaste Geekmeet (ironisk publikfråga: ”Funkar det för IE6?” – hela salen skrattar i samförstånd och ingen bemöder sig att svara). Det här gäller förstås inte endast IE6 utan även 7/8 har problem att med CSS3. Håll alla tummar och tår för att IE10 blir Microsoft superhjälte som gör att vi slipper upprepa meningen ”självklart måste vi göra en speciallösning för IE” för 40 000 miljonte gången.

Så. För att till exempel skapa en randig bakgrundsbild som är läsbar för Mozilla Firefox kan du lägga följande kodrader i din body-, html- eller annan lämplig tag.

background-image:
-moz-linear-gradient(0deg, transparent 50%, white 50%),
-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);

Deg står förstås för lutningen på gradienten och rgba(255, 255, 255, 0.3) betyder vit färg med 30% opacitet. Då färgstoppen går in i varandra bildas skarpa gränser istället för de luddiga färgtonerna som vi vanligtvis tänker på när vi hör gradienter nämnas.

För att göra det hela lite besvärligare har Safari/Chrome en egen standard som visserligen är enklare för mindre komplicerade gradienter men som snabbt ökar i komplexitet:

background-image:
-webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.5, transparent), color-stop(.5, white)),
-webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, rgba(255, 255, 255, .3)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .3)),
color-stop(.75, rgba(255, 255, 255, .3)), color-stop(.75, transparent),
to(transparent));

Här betyder 0 100%, 100% 0 att gradienten ska börja i bottom left och gå till top right, det vill säga origo i koordinatsystemet är högst upp till vänster.

På sista frågan under Geekmeet, ”var har du lärt dig allt detta”, svarade Lea att hon har läst specifikationerna. För att vara lika elit kan man kila in på WC3:s sida och totalt grotta ned sig.

]]> http://www.cahier.se/2011/05/hello-world/feed/ 1