Udtrykke det

En anden hurtig Tut. Her er noget enkelt og rart at bruge magt CSS ... men det var vanskeligt concieve (og det sikkert var ikke mig), til at begynde med. Tilføjelse Dropshadow, kan være en peice kage for mange af os, at bruge nogle billedredigeringsprogram værktøjer som Photoshop ANF Fireworks mv
Grunden til, jeg valgte drop shadow med CSS er, at normalt samtidig skabe en side, design / html af en ansøgning, de krav, der holder iteration. Hvad jeg mener er, I et eksisterende web site med mange billeder, som dem, viser freinds liste eller et billede galleri, vil det være vanskeligt at oparbejde den samlede belastning af billeder, der allerede var losset for at tilføje eller fjerne skygger, for at stof.
Så hvis du har gjort lidt fremadrettet, samtidig med at skabe de HTMLS at tilføje disse ekstra divisioner eller normalt er situationen, at du har en løkke Logic generere disse ikoner / thumbnails i XSL, PHP. JAVA eller anden programmering / scripting sprog, kan du tilføje den når som helst, så er bare spørgsmålet om showet og skjule disse skygger ved hjælp af CSS Display ejendom, som pr kunder stadigt skiftende krav ... Jeg havn't gjort denne form for fremadrettet tænkning før dette ... men ahev i gang nu!

I eksemplet nedenfor, er det originale billede skygge fri og dropshadows anvendes efter behov! Desuden har jeg gået lidt ekstra, ved at bruge de tricks af min tidligere Tut (Well! disse formentlig er kortest række Tutorials, så det er kun berettiget at kalde dem "Tut" 's) om hjælp CSS Clip Ejendom for vise kun

Original billede

CSS DropShadow Resultater

Se demo | Hent sourcefiles

Sæt Stylesheets på toppen

Hvis du ønsker en side til at indlæse gradvis, at der er, vi ønsker browseren til at vise det indhold, det er så hurtigt som muligt, sætte CSS øverst på siden inde i dokumentet HEAD. Dette gør sider synes at være lastning hurtigere, da dette letter progressiv destruktion af siden. Dette er især vigtigt for sider med masser af indhold og for brugere på langsomme internetforbindelser.

Det er et dokumenteret faktum, at for at forbedre den overordnede brugeroplevelse, er det vigtigt at give fremskridtsindikatorer og visuelle feedbacks. For at undgå at skulle tegne elementer på siden, i tilfælde, hvis deres stilarter forandring, nogle browsere, herunder IE, blokerer udgave af siden, indtil CSS er fuldt lastet. På grund af dette, bliver brugeren at se en tom hvid side.

W3 HTML Specifikationer 'også, at CSS skal jeg medtage i HEAD del af HTML-side. at the bottom of the page, so it's best not to use it. Bemærk også, at I IE @import opfører sig på samme som at bruge <link> nederst på siden, så det er bedst ikke at bruge det.

Undgå at bruge Browser Specifikke træk

Filtre: Brug af filter øger hukommelsen forbrug og anvendes pr element, ikke pr billede, så problemet er mangedoblet. Også Filtre er IE Proprietary, vil derfor ikke virke efter hensigten i andre browsere. Hvis du vil have gennemsigtige eller gradient baggrunde, skal du bruge 1Pixel med billeder.
Udtryk: CSS udtryk er en god egenskab at have i CSS, men stadig er IE bestemt funktion. Det er også vigtigt at bemærke, at disse udtryk er evalueret, når siden gengives, og størrelse, rullet og selv når brugeren bevæger musen hen over siden. Det er overflødigt at sige det kan påvirke ydeevnen af ​​din side. Derfor har man i enkle ord, Undgå at bruge CSS udtryk, medmindre du føler sine fordele "vejer mere end sine ulemper"

Eksternalisere du CSS

Brug af ekstern CSS vil resultere i hurtigere indlæsning af sider, fordi JavaScript-og CSS-filer er cached af browseren. Inline CSS i HTML-dokumenter bliver hentet hver gang HTML dokument der anmodes om. Dette kan faktisk reducere antallet af HTTP-forespørgsler der foretages, men det efterfølgende øger størrelsen på HTML-dokumentet. Ekstern CSS er cached af browseren, størrelsen af ​​HTML-dokumentet er reduceret uden at øge antallet af HTTP-anmodninger.

Bemærk venligst, at hvis brugerne på dit websted har flere sidevisninger per besøg, og mange af dine sider genbruge de samme scripts og stylesheets, er der et større potentiale gavn af cachede eksterne filer.

Pak din CSS fil

Pakning eller crunching din CSS er den praksis at fjerne unødvendige tegn fra kode for at reducere dens størrelse og dermed forbedre load tider.

CSS kan jeg kværnet ved at fjerne alle de kommentarer og eventuelle uønskede tegn som hvide rum, flere linjer osv.

En CSS Reset / er CSS at sætte en række element stilarter til en bestemt baseline, der skaber sammenhæng på tværs af forskellige browsere.

Vi har alle været gennem mareridt for at skrive cross-browser CSS har. Så når vi begynde at skrive vores CSS, Det er en praksis for at nulstille det først at fjerne / nulstille alle cross browser uoverensstemmelser. CSS Nulstiller, er enkle par linjer af CSS, som du begynder din CSS med, giver dig en ren base for at begynde at bygge din på.

CSS nulstiller, at jeg normalt har en tendens til at bruge ser sådan ud

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style: none;
}

h1, h2, h3, h4, H5, H6 {
font-size: 100%;
font-weight: normal;
}

Nulstil browseren skriftstørrelse
Bemærk også den nulstilling, der er blevet anvendt til browser skriftstørrelse i den følgende linje ...

html {font-size: 76%;}

Ovenstående CSS nulstiller browseren skriftstørrelsen til 10 pixel, og det gør det muligt at arbejde med relative skriftstørrelser (som er alle vigtige ud fra et WAI overholdelse prespective)
For eksempel, i det følgende definition font-size i en span sat til 10 pixels, og at i paragarph er sat til 14 pixels ...

span {font-size: 1em;}
p {font-size: 1.4em;}

F.eks.
Angivelse af en CSS ejendom som denne,

margin: 5px 0;

egentlig betyder,

margin: 5px 0px 5px 0px;

Denne første margin ejendom betyder:

top og bund margin = 5px | | venstre og højre margen = 0px

så 'længere forkortelse' ville være

margin: 5px 0px 5px 0px; (T, R, B, L)

du kan endda bruge 3 værdier

margin: 5px 0 5px;

hvilket betyder

top = 5px | | højre og venstre = 0px | | nederst = 5px

Internet Explorer automatisk tilføjer polstring til knapper i HTML formularer.
Dette rum strækker ifølge længden af ​​knappen tekst.

Løsningen er at tilføje overløb til sin stil .... dvs

. Knap {
overflow: synligt;
padding-venstre: 10px vigtigt;
padding-højre! 10px vigtigt;
... En anden stil for denne knap ...
}

ELLER

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible; padding-left:10px !important; padding-right:10px !important;" >;