Väljendades IT

Teine kiire TTÜ. Siin on midagi lihtsat ja kena kasutades võimu CSS ... aga oli raske concieve (ja see kindlasti ei olnud mina) alustada. Lisades Dropshadow, võib olla tükk kooki paljud meist, kasutades mõnd pilditöötlus vahendeid, nagu Photoshop ANF Ilutulestik jne
Põhjus, miks olen valinud varju kasutades CSS on see, et tavaliselt luues lehe disaini / html taotluse, nõuded hoida iterating. Mida ma mõtlen on olemasoleva veebilehe palju pilte, nagu need väljapanek freinds nimekirja või pildigaleriid, siis on raske ümber töödelda kogu koormus pilte, mis oli juba maha lisada või eemaldada varjud, sellel asi.
Nii et kui sa oled teinud natuke edasi mõelda luues HTMLS lisada need extra jaotumise või tavaliselt olukord, et sul on Loop Logic tekitavad need ikoonid / pisipildi XSL, PHP. JAVA või muu programmeerimine / skript keel, siis saad lisada selle igal ajal, siis on lihtsalt küsimus näidata ja peita need varjud kasutades CSS Display vara, kui ühe kliendi pidevalt muutuvaid nõudeid ... ma havn't teinud omamoodi edasi mõelda enne seda ... aga ahev hakkas nüüd!

Allpool toodud näites, originaal pilt on vari tasuta ja dropshadows on rakendatud kui vaja! Samuti olen läinud veidi ekstra, kasutades trikke minu varasem Tut (Well! need ilmselt on lühim erinevaid Tutorials, nii et see on õigustatud ainult kutsudes neid "TTÜ" 's), umbes Kasutades CSS Clip Property jaoks uhkeldama ainult

Original Image

CSS DropShadow Results

Vaata Demo | Lae sourcefiles

Pane Stylesheets at the Top

Kui soovite lehe laadimine järk-järgult, see on, me tahame, et brauser näitaks mis iganes sisu tal nii kiiresti kui võimalik, pane CSS ülaosas lehe sees dokumendi PEA. See muudab leheküljed näivad laadimine kiiremini, kui see hõlbustab progressiivne renderdamine lehel. See on eriti oluline leheküljed, kus on palju sisu ja kasutajate aeglasema internetiühenduse.

See on dokumenteeritud, et suurendada üldise kasutajakogemuse, on oluline tagada edu näitajad ning visuaalse tagasiside. Et vältida kuvamine elemendid lehel, juhul kui nende stiilid muutuvad mõned brauserid, sealhulgas IE blokeerib lehe renderdamine kuni CSS on täielikult laetud. Sellepärast kasutaja saab näha tühi valge leht.

W3 HTML spetsifikatsioonid "ka, et CSS peab mind lisada HEAD sektsiooni HTML lehel. at the bottom of the page, so it's best not to use it. Pane tähele ka seda, et IE @import käitub sama, kui kasutada <link> allosas lehekülge, mistõttu on parem mitte seda kasutada.

Vältige Browser erisused

Filtrid: kasutamine filter suurendab mälumahtu ja rakendatakse iga element, mitte ühe pildi, nii et probleem on mitmekordistunud. Samuti filtrid on IE Varalised, seega ei tööta ettenähtud viisil teiste brauseritega. Kui soovite läbipaistvaid või gradient tausta, kasutage 1Pixel koos piltidega.
Expressions: CSS väljendid on tore omadus, et nad peavad CSS, kuid siiski on IE eripära. Samuti on oluline märkida, et need väljendid on hinnata, kui leht on sulatatud ja suurust, kerida ja isegi siis, kui kasutaja liigutab kursorit leheküljel. On ütlematagi selge, see võib mõjutada tulemuslikkust lehele. Seega lihtsaid sõnu, Vältige CSS väljendeid, kui te ei tunne oma plusse "kaalub rohkem kui oma miinused"

Hajutavad te CSS

Välise CSS toob kaasa kiirema laadimise lehti, sest JavaScript ja CSS failid on puhverdatud by brauseris. Inline CSS HTML-dokumentide saad laadida iga kord HTML dokumenti taotletakse. See võib tegelikult vähendada HTTP taotlusi, kuid seejärel suurendab suurus HTML dokument. Välise CSS on puhverdatud by brauser; suurus HTML dokument on vähendada ilma suurema hulga HTTP taotlusi.

Pange tähele, et kui kasutajad saidil on mitu kuvamiskorra per sessioon ja paljud lehed uuesti kasutada sama skriptid ja laaditabelite on suurem potentsiaalne kasu puhverdatud välistele failidele.

Paki oma CSS faili

Pakke-või krigistamine oma CSS on tavaks kõrvaldades tarbetud tegelased kood vähendada oma suurust parandades seeläbi koormust korda.

CSS võib mind purustada kaotades kõik kommentaarid ja soovimatuid tegelasi nagu tühikuid, reavahetusi jms

CSS Reset on / on CSS seada mitu element stiile konkreetse ravi, mis loob järjepidevust erinevate brauseritega.

Meil kõigil on olnud läbi õudusunenäod kirjalikult piiriülese brauser CSS s. Nii et kui me hakake meie CSS, see on tava, et taastada kõigepealt eemaldada / reset tahes piiriülese brauseri vastuolud. CSS Taastab, on lihtsalt paar rida CSS, et te alustate oma CSS koos, andes sulle puhtale aluspinnale, et alustada hoone teie peale.

CSS taastab et ma tavaliselt kalduvad kasutama näeb välja selline

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

Reset brauseri font size
Samuti pange tähele, reset, et on kohaldatud brauser font suurus järgmine rida ...

html {font-size: 76%;}

Eespool CSS taastab brauser font suurus 10 pikslit, ja see võimaldab töötada suhteline font (mis on iga oluline WAI täitmise prespective)
Sest näiteks järgmistes määratlus, font-size in span seatud 10 pikslit ja et jao punkt on seatud 14 pikslit ...

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

Nt.
Täpsustades CSS vara niimoodi,

margin: 5px 0;

tegelikult tähendab,

margin: 5px 0px 5px 0px;

Et 1. varu omand tähendab:

ülemine ja alumine marginaal = 5px | | vasakule ja paremale margin = 0px

nii "enam stenografisti" oleks

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

siis võiks isegi kasutada 3 väärtused

margin: 5px 0 5px;

mis tähendab

top = 5px | | paremale ja vasakule = 0px | | põhjas = 5px

Internet Explorer automaatselt lisab padding et nupud HTML vorme.
See ala ulatub vastavalt pikkusele nupu teksti.

Lahendus on lisada ülevoolu oma stiili .... st

. Nuppu {
overflow: nähtav;
padding-left: 10px! oluline;
padding-right: 10px! oluline;
... Muu stiil seda nuppu ...
}

Või

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