Uttrykke IT

En annen rask Tut. Her er noe enkelt og fint ved hjelp av kraften CSS ... men var vanskelig concieve (og det sikkert ikke var meg) til å begynne med. Legge Dropshadow, kan være en peice kake for mange av oss, ved hjelp av noen bilderedigeringsprogram verktøy som Photoshop ANF Fyrverkeri etc.
Grunnen, valgte jeg for slagskygge ved bruk av CSS er at vanligvis mens du oppretter en side design / html av en søknad, krav holde gjentar. Hva jeg mener er, i en eksisterende nettside med mange bilder, som de viser freinds liste eller en bildegalleri, vil det være vanskelig å reprosessere hele belastningen av bilder som hadde blitt alt losset å legge til eller fjerne skyggene, for at saken.
Så hvis du har gjort litt fremover tenkning, mens skape HTMLS å legge disse ekstra divisjoner eller vanligvis situasjonen er at du har en Loop Logic genererer disse ikonene / miniatyrer i XSL, PHP. JAVA eller andre programmeringsspråk / skriptspråk, kan du legge det når som helst, da er bare spørsmål om showet og skjule disse skygger ved hjelp av CSS display eiendommen, i henhold til de klientene stadig skiftende krav ... jeg havn't gjort slike fremtidsrettede før dette ... men ahev gang nå!

I eksempelet nedenfor er det opprinnelige bildet skygge gratis og dropshadows brukes som kreves! Også har jeg gått litt ekstra, ved hjelp av triksene av mine tidligere Tut (Well! disse antagelig er kortest rekke veiledninger, så det er bare rettferdiggjøres å kalle dem "Tut" 's) om hjelp CSS Clip Eiendom for briljere bare

Original bilde

CSS DropShadow Resultater

Se demo | Last ned sourcefiles

Sett Stilark på Top

Hvis du ønsker en side å laste progressivt, det vil si vi vil at leseren skal vise hva innhold den har så snart som mulig, sette CSS øverst på siden inne i dokumentet HEAD. Dette gjør sidene synes å være lasting raskere, da dette letter progressive gjengivelse av siden. Dette er spesielt viktig for sider med mye innhold og for brukere på tregere Internett-tilkoblinger.

Det er et dokumentert faktum at for å forbedre generelle brukeropplevelsen, er det viktig å gi framdrift indikatorer og visuelle tilbakemeldinger. For å slippe å tegne deler av siden, i tilfelle hvis deres stiler endring, noen nettlesere, inkludert Internet Explorer, blokker gjengivelse av siden til CSS er fullastet. På grunn av dette, brukeren er får å se en blank hvit side.

De W3 HTML Spesifikasjoner 'sier også at CSS skal meg inkludere i HEAD-delen av HTML-siden. at the bottom of the page, so it's best not to use it. Merk også at, I IE @import oppfører den samme som ved hjelp <link> nederst på siden, så det er best å ikke bruke det.

Unngå å bruke nettleser Spesifikke funksjoner

Filter: Bruk av filter øker minneforbruket og brukes per element, ikke per bilde, så problemet er multiplisert. Også Filtre er IE Proprietary, vil derfor ikke fungere som tiltenkt i andre nettlesere. Hvis du ønsker gjennomsiktige eller gradient bakgrunn, bruk 1Pixel med bilder.
Uttrykk: CSS uttrykk er en fin funksjon å ha i CSS, men likevel er IE spesifikk funksjon. Dessuten er det viktig å merke seg at disse uttrykkene er evaluert når siden gjengis og endres, rullet og selv når brukeren beveger musen over siden. Unødvendig å si dette kan påvirke ytelsen til siden din. Derav i enkle ord, unngå å bruke CSS uttrykk, med mindre du føler deg sine argumenter 'veier mer enn sine cons'

Externalise du CSS

Bruke ekstern CSS vil resultere i raskere lasting av sider fordi JavaScript og CSS-filer er hurtigbufret av nettleseren. Inline CSS i HTML-dokumenter blir lastet ned hver gang HTML-dokument blir forespurt. Dette kan faktisk redusere antallet HTTP-forespørsler gjort, men det senere øker størrelsen på HTML-dokumentet. Ekstern CSS bufres av nettleseren, størrelsen på HTML-dokumentet er redusert uten å øke antallet HTTP-forespørsler.

Vær oppmerksom på at dersom brukerne på nettstedet ditt har flere sidevisninger per sesjon og mange av sidene bruke de samme skript og stilark, er det en større potensiell nytte bufrede eksterne filer.

Pakk Din CSS fil

Pakking eller knaser din CSS er praksisen med å fjerne unødvendige tegn fra kode for å redusere størrelsen og dermed forbedre lastetider.

CSS kan jeg knaste ved å fjerne alle kommentarer og eventuelle uønskede tegn som mellomrom, linjeskift etc.

En CSS Reset er / er CSS til å sette en rekke element stiler til en bestemt baseline som skaper konsistens på tvers av ulike nettlesere.

Vi har alle vært gjennom mareritt å skrive cross-browser CSS-tallet. Så når vi begynner å skrive vår CSS, er det en praksis for å tilbakestille den første til å fjerne / tilbakestille noen kryss nettleser inkonsekvenser. CSS Tilbakestiller, er enkle få linjer med CSS som du begynner din CSS med, og gir deg en ren base for å begynne å bygge din på.

CSS tilbakestilles at jeg vanligvis pleier å bruke ser slik ut

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;
}

Tilbakestill nettleseren skriftstørrelse
Legg også merke til reset som har blitt brukt til nettleseren skriftstørrelsen i følgende linje ...

html {font-size: 76%;}

Ovennevnte CSS nullstiller leseren skriftstørrelsen til 10 piksler, og dette gjør det mulig å arbeide med relative fontstørrelser (som er alle viktige fra en WAI samsvar prespective)
For eksempel i følgende definisjon, er font-size i en span satt til 10 piksler og at det i paragarph er satt til 14 piksler ...

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

F.eks.
Spesifisere en CSS eiendom som dette,

margin: 5px 0;

egentlig betyr,

margin: 0px 5px 5px 0px;

Det første margin eiendom betyr:

topp og bunn margin = 5px | | venstre og høyre marg = 0px

så den "lenger stenografi" vil være

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

du kan også bruke 3 verdier

margin: 5px 0 5px;

som betyr

top = 5px | | høyre og venstre = 0px | | under = 5px

Internet Explorer legger automatisk padding til knapper i HTML-skjemaer.
Denne plassen strekker henhold til lengden på knappen tekst.

Løsningen er å legge til overløp til sin stil .... dvs.

. Knapp {
overflow: visible;
padding-left:! 10px viktig;
padding-høyre: 10px viktig;
... Noen annen stil for denne knappen ...
}

ELLER

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