Ilmaista sitä

Toinen nopea TTY. Tässä on jotain yksinkertaista ja mukava käyttää POWER CSS ... mutta oli vaikea concieve (ja se varmasti ollut minä), aluksi. Lisääminen Dropshadow, saattaa olla peice kakkua monille meistä, käyttäen joitakin kuvankäsittelyn työkalut, kuten Photoshop ANF Ilotulitus jne.
Syy miksi olen valinnut varjon CSS on, että yleensä luotaessa sivujen suunnittelu / html hakemuksen, vaatimukset pitää iteroimalla. Tällä tarkoitan sitä, In olemassa sivusto, jossa paljon kuvia, kuten ne näyttävät freinds luetteloa tai kuvagalleria, on vaikea käsitellä uudelleen koko kuorma kuvia, jotka oli jo purettu lisätä tai poistaa varjoja, sillä asia.
Joten jos olet tehnyt hieman eteenpäin ajattelua luotaessa HTMLS lisätä nämä ylimääräiset osastojen tai yleensä tilanne on se, että sinulla on Loop Logic tuottaa näitä kuvakkeita / miniatyyrit XSL, PHP. JAVA tai muu ohjelmointi / skriptikieli, voit lisätä sen milloin tahansa, niin on vain kysymys näyttää ja piilottaa nämä varjot käyttämällä CSS-ominaisuutta display, kohti asiakkaiden alati muuttuviin tarpeisiin ... En havn't tehnyt tällaista eteenpäin ajattelu ennen tätä ... mutta ahev jo nyt!

Alla olevassa esimerkissä, alkuperäinen kuva on varjo vapaa ja dropshadows sovelletaan tarpeen mukaan! Lisäksi olen mennyt vähän ylimääräistä, käyttämällä temppuja minun aiemmin Tut (Well! nämä luultavasti on lyhin erilaisia ​​Tutorials, joten se on perusteltua vain kutsuen heitä "Tut": n) noin CSS Clip Property for leveillä vain

Alkuperäinen kuva

CSS DropShadow Tulokset

Katso esittely | Lataa sourcefiles

Laita Tyylitaulukkoja huipulla

Jos haluat sivu latautuu asteittain, eli haluamme selain näyttää mitä sisältöä siinä on mahdollisimman pian, laita CSS yläreunassa sivun sisältä dokumentin HEAD. Tämä tekee sivut näyttää olevan lastaus nopeammin, koska tämä helpottaa progressiivinen lajia sivun. Tämä on erityisen tärkeää sivua paljon sisältöä ja käyttäjille hitaammilla internet-yhteydet.

Se on dokumentoitu se, että se lisäisi käyttökokemusta, on tärkeää tarjota edistymistä mittaavat indikaattorit ja visuaalisia palautteita. Jottei tarvitsisi piirtää elementtejä sivulla, jos niiden tyyliä muutosta, jotkut selaimet, kuten IE, estää renderöinti sivun kunnes CSS on kokonaan latautunut. Tämän vuoksi, käyttäjä ei saa nähdä tyhjä valkoinen sivu.

W3 HTML Tekniset "todetaan myös, että CSS on minulle kuuluu HEAD-osioon HTML-sivun. at the bottom of the page, so it's best not to use it. Huomaa myös, että IE @import toimii samoin kuin käyttämällä <link> alareunassa sivun, joten se on parasta olla käyttämättä sitä.

Vältä selaimen erityispiirteet

Suodattimet: Käytä suodattimen lisää muistin kulutusta ja sitä sovelletaan kohti elementti, ei kuvaa kohti, joten ongelma kerrotaan. Myös suodattimet ovat IE suojattuja, joten ei toimi tarkoitetulla muissa selaimissa. Jos haluat läpinäkyvä tai liukuväri tausta, käytä 1Pixel kuviin.
Expressions: CSS ilmaisut ovat mukava ominaisuus on CSS, mutta silti on IE erityispiirre. Lisäksi on huomattava, että Nämä ilmaisut arvioidaan, kun sivu muodostetaan ja kokoa, selata ja silloinkin, kun käyttäjä siirtää hiirtä sivun. Tarpeetonta sanoa tämä saattaisi vaikuttaa suorituskykyyn oman sivun. Näin yksinkertaisin sanoin, Vältä CSS ilmaisuja, ellet tunne sen eduista "painaa enemmän kuin huonoja"

Ulkoistaa te CSS

Ulkoisen CSS mahdollistaa nopeammat kuormitus sivut, koska JavaScript-ja CSS-tiedostot välimuistiin selaimen. Inline CSS HTML-asiakirjoissa saa ladata aina HTML asiakirja on pyydetty. Tämä voi todella vähentää määrää HTTP-pyyntöjen mutta sen jälkeen koko kasvaa HTML asiakirjan. Ulkoinen CSS välimuistiin selaimen, koko HTML asiakirjan pienenee lisäämättä määrää HTTP-pyyntöjä.

Huomaa, että jos käyttäjät sivustossasi on useita sivun näyttökertaa istunto ja monet sivut uudelleen käyttää samaa skriptit ja stylesheets, on paremmat mahdollisuudet hyötyä välimuistiin ulkopuolisista tiedostoista.

Pakkaa CSS-tiedosto

Pakkaus tai murskaukseen CSS on käytäntö poistaa tarpeettomat merkit koodia sen pienentämiseksi ja siten parantaa latausaikoja.

CSS voi minua crunched poistamalla kaikki kommentit epätoivotut merkkejä kuten välilyöntejä, rivinvaihtoja yms.

CSS Reset on / ovat CSS määrittää useita elementin tyylejä perusindikaattorit joka luo yhdenmukaisempia eri selaimissa.

Olemme kaikki olleet kautta painajaiset kirjoittamisen rajat selaimen CSS-luvulla. Joten kun alamme kirjoittaa myös CSS, se on käytäntö palauttaa se ensin poistaa / nollata cross selain epäjohdonmukaisuuksia. CSS Nollaa, ovat yksinkertaisia ​​muutaman rivin CSS aloitat CSS kanssa, antaa sinulle puhdas pohja alkaa rakentaa heti.

CSS nollaa, että olen yleensä käyttävät yleensä näyttää tältä

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

Palauta selaimen fonttikokoa
Huomaa myös reset joka on otettu käyttöön selaimen fontin koko seuraava rivi ...

html {font-size: 76%;}

Edellä CSS nollaa selaimen fonttikoko on 10 pikseliä, mikä mahdollistaa työskennellä suhteellisen fonttikoot (mikä on aina tärkeää WAI noudattamisesta prespective)
Esim. seuraavassa määritelmässä, font-size in span on asetettu 10 pikseliä ja että paragarph on asetettu 14 pikseliä ...

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

Esim..
Määrittäminen CSS-ominaisuus näin,

margin: 5px 0;

oikeastaan ​​tarkoittaa,

margin: 5px 0px 5px 0px;

Tämä ensimmäinen margin ominaisuus tarkoittaa:

ylhäällä ja alhaalla marginaali = 5px | | vasemman ja oikean marginaalin = 0px

niin "enää shorthand" olisi

marginaali: 5px 0px 5px 0px; (t, R, B-L)

voit myös käyttää 3 arvoa

margin: 5px 0 5px;

mikä tarkoittaa,

top = 5px | | oikea ja vasen = 0px | | pohjassa = 5px

Internet Explorer lisää automaattisesti padding painikkeita HTML-muodoissa.
Tämä tila ulottuu mukaan pituuden painikkeen n tekstissä.

Ratkaisu on lisätä ylivuoto sen tyyliin .... eli

. Painike {
overflow: näkyvissä;
padding-left: 10px! tärkeää;
padding-right: 10px! tärkeää;
... Jokin muu tyyli tätä nappia ...
}

TAI

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