CSS, tips og tricks
Brugervurdering: / 3
DårligBedst 
Lørdag, 19. september 2009 21:25

Det slog mig lige at en sådan artikle, kunne blive god som fremtidig opslagsværk. Et udpluk, af fantastiske CSS tips og tricks. Som tiden går vil jeg udvidde denne artikel, indtil vidre er det dog blevet til 5 lette men sindsygt gode CSS effekter og tips og tricks.

CSS, eller Cascade Style Sheet som det er en forkortelse for, fortæller din browser, hvordan den skal vise HTML. Langt det meste design af hjemmesider forgår i CSS. Fordelen modsat billeder, er at det loades lyn hurtigt. F.eks. Facebook, har kun et billed, nemlig deres logo, resten af sidens design er defineret i CSS.

Text Shadow

Lav skygge effekt på dine tekster, med CSS. Det ser rigtig godt ud, og så er det rigtig hurtigt at indlæse, din browser skal dog understøtte CSS3:

CSS Selector {text-shadow:0 1px 1px #000000;}

Transparent

Ved at tilføje følgende kode til din CSS, bliver dit element gennemsigtig! Alle 3 linier skal tilføjes og defineres, for at effekten virker i alle browsers:

CSS Selector {
background-color: #000; /*Baggrundsfarve*/
filter:alpha(opacity=50); /*Internet Explorer*/
-moz-opacity:0.5; /* Mozilla 1.6 and below */
opacity: 0.5; /* newer Mozilla and CSS-3*/
/*}

Fjern outline markering, fra links og knapper

Ved at indsætte denne kode fjerner du alle outlines, på dit site.

/*FireFox*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : 0px; }

/*IE8 */
input[type="submit"]:focus, input[type="button"]:focus { outline : none; }

/* Stjernen er en global selector dvs. den sætter outline til none på alle elementer*/
*{ outline: none; }

@Font-face (Brug *.otf og *.ttf skrifttyper på web)

Benyt din favorit skrifttype på din hjemmeside. For at benytte @font-face skal alle variationer af fonten erklæres, som i eksemplet herunder. Dette understøttes af IE8 og Safari 4.

@font-face { font-family: Helvetica;src: url('Helvetica-neue.otf'); }
@font-face { font-family: Helvetica;font-weight: bold;src: url('Helvetica-neue-bold.otf'); }
For at benytte fonten på et element, skrives så:
h1 { font-family: Helvetica, sans; }

Få fat i elementer uden ID og Class

Når du arbejder med at style CMS systemers output. Har du ikke altid kontrol over dette. Dette kan du opnå ved at definere dit element som f.eks.

* a[href=http://www.ditlink.dk]:hover {background: Black;} //alle a elementer, med værdien 'http://www.ditlink.dk' får her en sort baggrund.
 

Tilføj kommentar