Ki ga izraža

Še en hiter tut. Tukaj je nekaj, kar preprosto in lepo, z uporabo moči CSS ... vendar je bilo težko concieve (in to prav gotovo nisem bil jaz), za začetek. Dodajanje Dropshadow lahko bilo peice pogače za mnoge od nas, z nekaj orodja, kot so urejanje slik Photoshop ANF ognjemet itd
Razlog, zakaj sem se odločil za senco padec z uporabo CSS je, da je običajno med ustvarjanjem strani oblikovanje / html vloge, zahteve vodijo iterating. Mislim, je v obstoječe spletne strani z veliko slikami, kot so tisti, ki prikazujejo freinds seznam ali slike galerijo, bo težko predelala celotna obremenitev slik, ki so bile že razložijo dodati ali odstraniti sence, za to zadeva.
Torej, če ste naredili malo naprej razmišljanja in ustvarili HTMLS da te dodatne delitve ali običajno stanje je, da imate Loop Logic, ki proizvaja te ikone oziroma sličice v XSL, PHP. JAVA ali kateri koli drugi programski / skriptni jezik, ga lahko dodate kadar koli, potem je samo stvar kažejo in se skrivajo te sence, ki uporabljajo nepremičnine Display CSS, kot na stranke, vedno spreminjajočih se zahtev ... sem havn't naredil te vrste naprej razmišljati pred tem ... ampak ahev začel zdaj!

V spodnjem primeru prvotna podoba je senca brezplačno in dropshadows se uporabljajo kot obvezna! TUDI, sem šel malo več, z uporabo trikov mojega prejšnjega Tut (Well! ti verjetno so najkrajša različnih vaj, zato je upravičena le, kliče jih "Tut" "-ov) o uporabi CSS Clip lastnino za pokazati samo

Original slike

CSS DropShadow Rezultati

Poglej Demo plinov v sourcefiles Download

Postavite slogovne na vrh

Če želite stran, da se postopoma naložiti, da želimo, da brskalnik za prikaz ne glede na vsebino ima čim prej, dal CSS na vrhu strani v dokumentu glavo. To pomeni, strani se zdi, da nakladanje hitreje, kot to omogoča postopno vračanje strani. To je še posebej pomembno za strani z veliko vsebine in za uporabnike na počasnejših internetnih povezavah.

To je dokumentirano dejstvo, da bi povečali splošno uporabniško izkušnjo, je pomembno, da se kazalniki napredka in vizualne odzive. Da ne bi bilo, da izvlečete elemente strani, v primeru, če je njihova stili spremembe, nekateri brskalniki, vključno z IE, bloki upodabljanja strani, dokler se CSS polni obremenitvi. Zaradi tega, uporabnik dobi videti prazno belo stran.

V W3 HTML specifikacije "tudi določa, da mora CSS me vključujejo v glavi delu strani HTML. at the bottom of the page, so it's best not to use it. Upoštevajte tudi, da je v IE @import obnaša enako kot z <link> na dnu strani, zato je najbolje, da ga ne uporabljajo.

Izogibajte se uporabi brskalnika posebnosti

Filtri: Uporaba filtra poveča porabo pomnilnika in se uporablja na element, ki niso na sliki, tako da je problem se množi. Prav tako so Filtri IE lastniška, zato ne bo delovala kot je bilo predvideno v drugih brskalnikih. Če želite pregledne ali gradient ozadja, uporabite 1Pixel s slikami.
Izrazi: CSS izrazi so lepo lastnost, da imajo v CSS, še vedno pa je IE posebnost. Prav tako je pomembno opozoriti, da so ti izrazi so oceniti, če je stran postali in spreminjati, zvitek in tudi, ko uporabnik premakne miško preko strani. Ni treba posebej poudarjati to lahko vpliva na delovanje vaše strani. Zato v preprostih besedah, ne uporabljajte CSS izrazov, če menite, da njegove prednosti "tehta več kot njegovi cons"

Zunanje strukture vam CSS

Uporaba zunanjega CSS bo imelo za posledico hitrejše nalaganje Strani saj JavaScript in CSS datoteke shranjene s strani brskalnika. Inline CSS v dokumentih HTML dobili prenesli vsakič, ko je dokument HTML je zahteval. To bi dejansko zmanjšalo število zahtev HTTP, nato se poveča velikost HTML dokumenta. Zunanji CSS so cached s strani brskalnika, velikost dokumenta HTML se zmanjša, ne da bi povečanje števila zahtev HTTP.

Prosimo, upoštevajte, da se, če uporabniki na vašo spletno stran, imajo več pogledov strani na seji in veliko vaših straneh, ponovno uporabljajo enake skripte in slogi, obstaja večja možnost koristi od zunanjih predpomnilniku datotek.

Pack vaše CSS datoteke

Pakiranje ali škrtanje svoj CSS je praksa odpravo nepotrebnih znakov s kodo zmanjšati njegovo velikost s čimer se izboljša obremenitve krat.

CSS mi lahko crunched z odstranitvijo vse komentarje in vse neželene znake, kot belih lis, novih vrstic itd

Reset CSS je / so CSS, da se določi število elementov stilov na določeno izhodišče, ki ustvarja doslednost v različnih brskalnikih.

Vsi smo bili skozi nočne more pisanja navzkrižno brskalnik CSS-jev. Torej, ko smo začeli pisati svoj CSS, je praksa, da ponastavite najprej odstraniti / reset navzkrižno nedoslednosti brskalnika. Ponastavi CSS, so preproste nekaj vrstic CSS, da začnete s CSS, ki vam čisto osnovo za začetek gradnjo vaše podlagi.

Resetira CSS, da sem ponavadi nagnjeni k uporabi izgleda takole

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
Seznam-style: none;
}

H1, H2, H3, H4, H5, H6 {
font-size: 100%;
font-weight: normalno;
}

Ponastavi velikost pisave brskalnika
Upoštevajte tudi, ponastavitev, ki je bil uporabljen brskalnik velikosti pisave v naslednji vrstici ...

html {font-size: 76%;}

Zgoraj ponastavi CSS brskalnik velikost črk na 10 pik, kar omogoča delo z sorazmerne velikosti pisave (ki je vsako pomembno z vidika skladnosti WAI vlačilce)
Za primer, v naslednji definiciji je font-size v razponu nastavljena na 10 pik in da v paragarph je nastavljena na 14 pik ...

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

Npr.
Navedbo nepremičnine CSS, kot je ta,

margin: 5px 0;

dejansko pomeni,

margin: 5px 0px 0px 5px;

Ta prvi margin nepremičnine pomeni:

Zgornji in spodnji rob = 5px | | levi in desni rob = 0px

tako da bi "več okrajšava" je

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

Lahko bi celo uporaba 3 vrednosti

margin: 5px 0 5px;

kar pomeni,

top = 5px | | desnega in levega = 0px | | dna = 5px

Internet Explorer samodejno doda oblazinjenje z gumbi v HTML obliki.
Ta prostor se razteza glede na dolžino besedila gumba.

Rešitev je dodati overflow svoje stilu .... tj

. Gumb {
overflow: vidna;
padding-left:! 10px pomembno;
padding-right:! 10px pomembno;
Kateri koli drug stil ... za ta gumb ...
}

ALI

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