Nyttige og kule CSS3 koder som gir ditt design litt edge

CSS3 er noen fantastisk kule koder som kan gi ditt design en kul edge uten at du behøver noen grafiske triks eller tunge koder. Mange sier at dette fortsatt er nytt og at noen nettlesere enda ikke støtter alt, men «whatta hekk»… det fungerer godt i de fleste nettlesere så hvor for ikke.

Det utvalget av koder du ser nedenfor er bare en liten del av hva CSS3 har å by på. Dette er noen av de enkleste, mest brukte og kanskje nyttige av de.

Border-radius… avrundede kanter

Å lage avrundede kanter kunne man før gjøre ved å bruke javascript, photoshop eller andre tunge metoder. Med CSS3 er det så sykt enkelt! Bare se nedenfor

border-radius:5px;

Dette er altså koden for å lage avrundede kanter. «5px» definerer graden av avrundingen og koden kan brukes på alt fra bilder, tekstfelter og vanlige div’er. Helt fantastisk enkel og fin funksjon spør du meg.

Demo:

Innvendig og utvendig skygge

box-shadow stilen lar deg legge en tilpasset skygge på det meste av html-koder f.eks. en div, et bilde, en knapp eller lignende. Nedenfor ser du stilen du bruker for å legge på skygge:

box-shadow:1px 1px 5px #ccc;

De 2 første tallene er dybde i bunn og til høyre og det tredje tallet (5px) er mjukheten på selve skyggen. Til slutt kan du sette fargen på selve skyggen. Har du en rosa bakgrunn er fungerer det bedre å velge en mørkerosa skygge enn å bruke svart.

Demo:

Ønsker du innvendig skygge kan du bruke inset, slik du ser jeg har gjort nedenfor.

box-shadow: inset 5px 5px 5px #CCC;

Demo:

Skygge på tekst

Med text-shadow kan du legge skygge på tekst. Det er ikke stort mere å forklare på denne enn av man kan justere dybde , mjukhet og farge på skygge. Eksemplet nedenfor gir en grå skygge på teksten. De beste tilfellene å bruke skygge på er en lys skygge på mørk bakgrunn eller omvendt.

text-shadow:0px 1px 0px #CCC;

Demo:

Fargegradering

Eksemplet du ser nedenfor er en gradering fra en farge til en annen. Dette kan brukes i bakgrunn eller f.eks. på knapper. Det krever en del tilpasninger så jeg vil anbefale at du bruker en generator i dette tilfellet. Denne generatoren er meget bra til dette formålet og lar deg enkelt prøve deg frem til riktig farge.

background-image: linear-gradient(bottom, #B77BE4 15%, #DCA0FF 58%, #FFC0FF 79%);
background-image: -o-linear-gradient(bottom, #B77BE4 15%, #DCA0FF 58%, #FFC0FF 79%);
background-image: -moz-linear-gradient(bottom, #B77BE4 15%, #DCA0FF 58%, #FFC0FF 79%);
background-image: -webkit-linear-gradient(bottom, #B77BE4 15%, #DCA0FF 58%, #FFC0FF 79%);
background-image: -ms-linear-gradient(bottom, #B77BE4 15%, #DCA0FF 58%, #FFC0FF 79%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.15, #B77BE4),
	color-stop(0.58, #DCA0FF),
	color-stop(0.79, #FFC0FF)
);

Transition – Farge-fading

Her er et eksempel på en enkel fading/hover effekt fra en farge til en annen med en fading. Boksen som er lager i eksemplet nedenfor har en enkel fading fra oransje til grønn.

#boks2 {
width: 580px;
padding: 9px 15px;
background-color: #ED8029;
color: white;
border-radius: 5px;
-webkit-transition: background-color 5s;
-moz-transition: background-color 5s;
-o-transition: background-color 5s;
-ms-transition: background-color 5s;
transition: background-color 5s;
}
#boks2:hover {
background-color: #A7B526;
}

Gjennomsiktighet

Med opacity kan du definere gjennomsiktighet på et element, f.eks. en div eller et bilde. Om du har svart bakgrunn på en div vil linjen nedenfor gi den en 80% gjennomsiktighet.

background: #000 ; opacity: 0.2;

Opacity regelen kan brukes i mange tilfeller, men Internet Explorer støtter ikke gjennomsiktighet. Det finnes forøvrig løsninger for IE ved å bruke filter, slik du ser i eksemplet nedenfor, som gir en gjennomsiktighet på 50%.

.change_opacity {
  opacity: 0.5;
  filter: alpha(opacity = 50);
}

Gjennomsiktigheten kan justeres fra 0.1 til 1.0. Du kan også bruke 2 desimaler som f.eks. 0.85. Nedenfor ser du demo av div’er som har forskjellig gjennomsiktighet med svart bakgrunn.

Demo: