CSS3.SE

Test för CSS3-kompabilitet

Johannes — Fri, 17 Feb 2012 15:22:53 +0000

Ett test för att testa webläsarens CSS3-funktioner har kommit ut i dagarna. Själv fick jag 60% i Google Chrome.

Klicka er vidare till css3test.com och testa!

Internet Exlorer placerar sig föga förvånande sist.

Spamfilter inlagt

Johannes — Fri, 27 Jan 2012 10:50:07 +0000

Nu har jag äntligen lagt in ett spamfilter så det blir ordning och reda i kommentarerna.

Spamfiltret jag lagt in heter Akismet.

En animerad bubbelmeny

Johannes — Mon, 24 Oct 2011 00:12:02 +0000

I ett exempel så visas det hur man med hjälp av CSS kan skapa olika sorters ”pratbubblor” eller tips som kommer fram när man hovrar över ett element. Detta exempel har jag utökat och kombinerat med en annan tutorial om hur man kan använda pseudoelementen :before och :after för att presentera innehåll.

Animationerna skapas enkelt genom att använda en övergång när man hovrar över ett element.

    #bubblemenu li > blockquote {
                word-wrap: normal;
		width: 150px;
                min-height: 120px;
	       position: absolute;
                display: inline;
                margin-left: -120px;
                padding: 15px;
		visibility:hidden;
                opacity: 0;
                margin-top: -125px;
                background: #ffffff;
		font-size:1em;
                box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */	
		-moz-transition: all 0.5s ease-in-out; /* Firefox */
                -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
                -o-transition: all 0.5s ease-in-out; /* Opera */
                transition: all 0.5s ease-in-out; /* Browsers that Support it */
            }
 
            #bubblemenu li:hover >; blockquote {
              visibility:visible;
                opacity: 1;
                margin-top: -250px;
 
               /* Setting the transition property for all Browsers */
		-moz-transition: all 0.5s ease-in-out; /* Firefox */
                -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
                -o-transition: all 0.5s ease-in-out;  /* Opera */
                transition: all 0.5s ease-in-out; /* Browsers that Support it */
	    }

Efter detta skapar vi själva bubblorna, helt enkelt genom att använda border-radius.

 
.oval-thought-border {
	position:absolute;
	padding:70px 10px;
	margin:1em auto 80px;
	border:10px solid #c81e2b;
	text-align:center;
	color:#333;
	background:#fff;
 
	/* css3 */
	/*
	NOTES:
	-webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
	-webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
	Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
	*/
	-webkit-border-top-left-radius:240px 140px;
	-webkit-border-top-right-radius:240px 140px;
	-webkit-border-bottom-right-radius:240px 140px;
	-webkit-border-bottom-left-radius:240px 140px;
	-moz-border-radius:240px / 140px;
	border-radius:240px / 140px;
}
 
/* creates the larger circle */
.oval-thought-border:before {
	content:"\00a0";
	-webkit-transition: 2s;
	position:absolute;
	z-index:10;
	bottom:-40px;
	right:100px;
	width:50px;
	height:50px;
	border:10px solid #c81e2b;
	background:#fff;
 
	/* css3 */
	-moz-border-radius:50px;
	-webkit-border-radius:50px;
	border-radius:50px;
}
 
/* creates the smaller circle */
.oval-thought-border:after {
	content:"\00a0";
	position:absolute;
	z-index:10;
	bottom:-60px;
	right:50px;
	width:25px;
	height:25px;
	border:5px solid #c81e2b;
	background:#fff;
 
	/* css3 */
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	border-radius:25px;
}
.oval-thought-border:after {
	content:"\00a0";
	position:absolute;
	bottom:-70px;
	right:100px;
	width:25px;
	height:25px;
	border:5px solid #c81e2b;
	background:#fff;
 
	/* css3 */
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	border-radius:25px;
}

Slutligen så positionerar vi delarna av de olika bubblorna genom att skapaett antal klasser med olika positionering på :after och before:. Detta gör att man kan välja positionen på de olika delarna i bubblorna så att det hela får ett mer dynamiskt utseende.

.ob2 { left:400px}
.ob2:after { right:50px}
.ob3:after { right:50px}
.ob3:before { left:110px}
.ob4:before { left:120px; top:120px}
.ob4:after { left:90px}

Till sist kommer det se ut som i demot.

Texteffekter, del 2

Johannes — Sun, 23 Oct 2011 22:50:30 +0000

I det något ouppdaterade serien texteffekter kommer här del två. I del 1 gick vi igenom reflektioner, men CSS3 har en hel del mer att erbjuda som tidigare inte varit möjligt.

En sak som ofta används i logos och headers på diverse hemsidor är olika typer av bakgrundsfärg eller simulerat ljus. Detta görs enkelt i CSS3 genom att kombinera olika positioner och färger på skuggor.

.colorshadow {
 
.colorshadow {
      font-size:46px;
      text-shadow: 0 0 10px #fff,
                   0 0 20px #ff00df,
                   0 0 30px #fff,
                   0 0 40px red,
                   0 0 70px #ff00de,
                   0 0 100px lime }

Rolig text

Kodgenerering av stilmallar

Johannes — Sun, 23 Jan 2011 23:12:15 +0000

Det finns en uppsjö av olika kodgeneratorer för tröttsamma CSS-rader när man vill åstadkomma något enkelt. I detta inlägg tipsar vi om tre av dem, CSS3 Generator, Box Shadows och CSS3 Please. Den största fördelen med den CSS3 Generator och CSS3 Please är möjligheten att skapa webläsarspecifik kod för flera olika webläsare samtidigt. Detta kan behövas eftersom CSS3-standarden ännu är ett förslag och de olika webläsarna valt att implementera den på olika sätt och i vissa fall inte ens stödja viss funktionalitet.

CSS3 Generator

Här kan man generera en stor mängd olika kodavsnitt och samtidigt förhandsgranska det hela i realtid.

Box Shadows

En enkel men kraftfull sida för skapa skuggor till de olika elementen på en sida. En stor fördel är att de har sliders man kan dra i för att snabbt överblicka de olika resultaten. Dessvärre skapas inte specifik kod för de olika webläsarna utan detta måste man lägga till själv. Den händige kanske forkar projektet och lägger till det ?

CSS3 Please

En annan typ av sida där man kan editera rakt i den färdiggenererade koden. Antagligen en god idé för den som vill få bättre förståelse för vad man gör. En ytterliggare finess är att alla numeriska värden inom samma regel ändras samtidigt så det räcker med att editera på ett ställe för att få genererad kod för samtliga webläsare.

3D-animering med CSS3

Johannes — Thu, 13 Jan 2011 00:24:05 +0000

På den engelska sidan http://www.marcofolio.net/ har de ett exempel på hur man kan göra en 3D-animation i form av en spiral av en bild med hjälp av CSS3.

Dock så fungerar exemplet ännu bara i Safari vilket gör publiken något begränsad. Dessbättre finns det en inspelad film av animationen så icke-Safarianvändare kan se det hela ändå. Längst ned finns det också Javakod som man med enkelhet kan modifiera för att generera önskad CSS-kod.

Vi får hoppas att Chrome och de andra webläsarna snart kommer lägga till denna funktionalitet!

Spamskydd inlagt

Johannes — Tue, 02 Nov 2010 21:49:36 +0000

Har nu lagt in spamskydd mot de odrägliga botar som försökt dränka siten i kommentarer.

Jag har också insett hur fult det nuvarande temat är, som mest är ett koncepttema i HTML5. Någon som vet ett bra Wordpress-tema som kan passa?

Kolumner i CSS3

Johannes — Tue, 19 Oct 2010 22:45:47 +0000

Kolumner och formatering av stora textmassor har länge varit ett eftersatt moment när det gäller elektroniska dokument i allmänhet och HTML-dokument i synnerhet. Lyckligtvis finns ett antal egenskaper för att hantera kolumner i CSS3-specifikationen.
De nya kolumn-egenskaper som finns är som följer:

column-count
column-width
column-min-width
column-width-policy
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width

I detta exempel kommer vi först skapa en sida innehållande tre kolumner och sedan modifiera dessa. Vi börjar med att skapa den textmassa och div vi behöver som sedan skall delas upp i kolumner:

 
text

Sedan formaterar vi innehållet i de tre div-elementen på lämpligt sätt och för att testa olika effekter:

 
.kolumn {
-webkit-column-count: 4;
-webkit-column-width: 120px;
-moz-column-count: 4;
-moz-column-width: 120px;
column-count: 4;
column-width: 120px;
font-family:Georgia;
}
 
 
.kolumn2 {
-webkit-column-count: 4;
-webkit-column-gap: 40px;
-webkit-column-width: 120px;
 
-moz-column-count: 4;
-moz-column-width: 120px;
-moz-column-gap: 40px;
 
column-count: 4;
column-width: 120px;
column-gap: 40px;
 
font-family:Georgia;
}
 
.kolumn3 {
 
-webkit-column-count: 4;
-webkit-column-width: 120px;
-webkit-column-rule-style:dashed;
 
-moz-column-count: 4;
-moz-column-width: 120px;
-moz-column-rule-style:dashed;
 
column-count: 4;
column-width: 120px;
column-rule-style:dashed;
 
font-family:Georgia;
}

Se exempel här!

Nu har vi skapat tre olika typer av kolumnstilar som enkelt kan implementeras på alla typer av hemsidor för att strukturera upp innehåll och öka läsbarheten. Gällande kolumner i CSS3 finns mer att lära sig, och bloggen kommer återkomma till mer avancerade saker i framtiden!

Gästbloggning – HTML5

Henrik — Thu, 05 Aug 2010 14:37:58 +0000

Nu ska jag gästblogga om nästan helt irrelevanta saker om HTML5 på en CSS3 BLOGG!
I’m crazy in the coconut!

Den stora nyheten är den coola uppdateringen av DOCTYPE:n i HTML5.

För er som inte redan visste… är DOCTYPE ett standard element som enligt standard ska stå överst i varje HTML fil. DOCTYPE:n talar om för webbläsaren vilken version av HTML/XHTML filen är skriven i så att webbläsaren kan tolka och visa det rätt.

Exempel på en XHTML DOCTYPE:

Och nu det magiska som gör att man älskar HTML5 redan innan man ens hunnit skriva html elementet i en ny fil. HTML5 DOCTYPE:

CSS3 Stjärnor

Johannes — Tue, 13 Jul 2010 00:00:49 +0000

I CSS3 finns det goda möjligheter att göra former av olika slag som inte består av bildfiler. Här är ett exempel på populära stjärnor/klistermärken och liknande som är vanligt på sidor med ”web 2.0″-stil.

Exempel på css3-stjärna