Pagpapahayag ng IT

Isa pang mabilis na tut. Narito ang isang bagay na simple at gandang gamit ang kapangyarihan ng CSS ... ngunit noon ay mahirap-concieve (at tiyak na ito ay hindi ako) upang magsimula sa. Ng pagdaragdag Dropshadow, ay maaaring maging isang peice ng cake para sa marami sa atin, gamit ang ilang mga imahe sa pag-edit ng mga kasangkapan tulad ng Photoshop anf Paputok atbp
Ang dahilan kung bakit, sumali ako para sa drop anino paggamit ng CSS ay na, sa karaniwan habang ang paglikha ng isang pahina ng disenyo / html ng isang application, ang mga kinakailangan na panatilihin iterating. Ano ang ibig sabihin ko, Sa isang umiiral na web site na may maraming mga imahe, tulad ng mga pagpapakita ng mga freinds ng listahan o ng isang imahe gallery, ito ay mahirap sa reprocess ang buong load ng mga imahe na ay na na diskargado upang idagdag o alisin ang mga anino, para sa na bagay na ito.
Kaya Kung nagawa mo na ang isang maliit na pasulong na pag-iisip habang lumilikha ang mga HTMLS upang magdagdag ng mga karagdagang mga dibisyon o karaniwang sitwasyon ay na mayroon kang isang Umikot lohika sa pagbuo ng mga icon na ito / thumbnail sa XSL, PHP. Java o anumang iba pang mga programming / scripting wika, maaari mong idagdag ang mga ito anumang oras, pagkatapos ay ang bagay ng palabas at pagtatago ng mga anino ng paggamit ng CSS Ipakita ang ari-arian, tulad ng bawat ang mga kliyente na kailanman pagbabago ng mga pangangailangan ... havn't gawin ko ito uri ng pasulong iniisip bago ito ... ngunit ahev makapagsimula ngayon!

Sa halimbawa sa ibaba, ang orihinal na imahe ay ang anino libre at ang mga dropshadows ay inilapat bilang kinakailangan! DIN, ako ay nawala ng kaunti dagdag na, sa pamamagitan ng paggamit ng mga trick ng aking mas maaga Tut (Well! ang mga marahil ay pinakamaikling iba't-ibang ng Tutorial, kaya ito ay lamang justified pagtawag sa kanila "Tut" 's) tungkol sa paggamit ng CSS Clip Property para ipakita off lamang

Orihinal na Imahe

CSS DropShadow Resulta

Tingnan ang Demo | Download sourcefiles

-Ilagay Stylesheets sa tuktok

Kung nais mo ang isang pahina sa load progressively; na, gusto namin ang mga browser upang ipakita ang anumang nilalaman na ito ay sa lalong madaling panahon, ilagay ang CSS sa tuktok ng pahina sa loob ng HEAD dokumento. Ito ay gumagawa ng mga pahina ay lalabas sa paglo-load ng mas mabilis, bilang na ito facilitates umuunlad rendering ng pahina. Ito ay lalong mahalaga para sa mga pahina na may maraming mga nilalaman at para sa mga gumagamit sa mas mabagal na koneksyon sa Internet.

Ito ay isang dokumentado katotohanan na upang mapahusay ang pangkalahatang karanasan ng gumagamit, ito ay mahalaga upang magbigay ng mga tagapagpabatid ng pag-unlad at mga visual na feedbacks. Upang maiwasan ang pagkakaroon sa redraw mga elemento ng pahina, sa kaso kung ang kanilang mga estilo ng pagbabago, ang ilang mga browser, kabilang ang IE, mga bloke ng rendering ng pahina hanggang sa CSS ay ganap na-load. Dahil dito, ang gumagamit ay makakakuha ng upang makita ang ng blangkong puting pahina.

Ang W3 HTML Mismong 'din estado na ang CSS dapat ako isama sa HEAD seksyon ng HTML na pahina. at the bottom of the page, so it's best not to use it. Tandaan din na, Sa IE @import behaves ang parehong bilang ng paggamit ng <link> sa ibaba ng pahina, kaya ito ay pinakamahusay na hindi gamitin ito.

Iwasan ang paggamit ng Browser Tiyak na mga tampok

Filter: Paggamit ng filter nagpapataas ng memory consumption at inilapat sa bawat elemento, hindi sa bawat imahe, kaya ang problema ay multiplied. Gayundin, ang mga Filter IE pagmamay-ari, samakatuwid ay hindi gumagana bilang inilaan sa iba pang mga browser. Kung nais mong transparent o greydyent background, gamitin 1Pixel na may mga imahe.
Expression: CSS expression ay isang magandang tampok na mayroon sa CSS, ngunit pa rin ay IE partikular na tampok. Gayundin, ito ay mahalaga na tandaan na, ang mga expression na ito ay sinusuri kapag ang pahina ay nai-render at sukat, scrolled at kahit na kapag ang gumagamit ay gumagalaw ang mouse sa ibabaw ng pahina. Hindi na kailangang sabihin na ito ay maaaring makaapekto sa pagganap ng iyong pahina. Samakatuwid sa simpleng salita, Iwasan ang paggamit ng mga expression CSS, maliban kung sa tingin mo ang pros 'weighs ng higit sa kanyang cons'

Externalise ka CSS

Paggamit ng panlabas na CSS ay magreresulta sa mas mabilis loading ng mga pahina dahil ang JavaScript at CSS file ay naka-cache ng browser. Inline CSS sa HTML dokumento makapag-download sa bawat oras na ang dokumentong HTML ay hiniling. Ito ay maaaring aktwal na bawasan ang bilang ng mga HTTP kahilingan ginawa ngunit pagkatapos ito ay nagdaragdag ang laki ng dokumentong HTML. Panlabas na CSS ay naka-cache ng browser; ang laki ng dokumentong HTML ay nabawasan nang walang pagtaas ng bilang ng mga HTTP kahilingan.

Mangyaring tandaan na, kung ang mga gumagamit sa iyong site ay may maramihang mga page view bawat session at marami sa iyong mga pahina ng muling gamitin ang parehong mga script at stylesheets, mayroong isang mas mataas na potensyal na benepisyo mula sa naka-cache na mga panlabas na file.

Pack ang iyong CSS File

Basta o crunching ng iyong CSS ay ang pagsasanay ng pag-alis ng hindi kinakailangang mga character mula sa code upang mabawasan ang laki ng sa gayon ang pagpapabuti ng oras ng pagkarga.

Ang CSS ay maaaring crunched sa akin sa pamamagitan ng pag-alis ng lahat ang mga komento at anumang hindi kanais-nais na mga character tulad ng mga puting espasyo, newlines atbp.

I-reset ang ay isang CSS / CSS upang magtakda ng isang bilang ng mga estilo ng elemento sa isang tiyak na baseline na lumilikha ng pagbabago sa iba't-ibang mga browser.

Namin ang lahat ay sa pamamagitan ng nightmares ng pagsusulat cross-browser CSS. Kaya kapag namin simulan ang pagsusulat ng aming CSS, Ito ay isang pagsasanay upang i-reset muna ito upang tanggalin / i-reset ang anumang kalyeng inconsistencies browser. CSS Resets, simpleng ilang mga linya ng CSS na sinimulan mo ang iyong CSS, nagbibigay sa iyo ng isang malinis na batayan upang simulan ang pagbuo ng iyong oras.

Ang CSS resets na ako normal ay may posibilidad na gamitin ang ganito ang hitsura

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 {
listahan-estilo: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-timbang: normal;
}

I-reset ang laki ng font ng browser
Tandaan din ang pag-reset na ay na-apply sa laki ng font ng browser sa sumusunod na linya ...

html {font-size: 76%;}

Sa itaas CSS resets ang browser na laki ng font sa 10 pixels, at ito ay ginagawang posible na gumagana sa mga kamag-anak na mga laki ng font (na kung saan ay bawat mahalagang mula sa isang pagsunod Wai prespective)
Para sa halimbawa, sa mga sumusunod na kahulugan, font-size sa isang span ay nakatakda sa 10 pixels at na sa ang ang paragarph ay nakatakda sa 14 pixels ...

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

Hal.
Pagtukoy ng isang ari-arian ng CSS tulad nito,

margin: 5px 0;

talagang nangangahulugan,

margin: 5px 0px 5px 0px;

Na unang ari-arian ng margin ay nangangahulugan na:

itaas at ibaba margin ang = 5px | | kaliwa at kanang ang palugid = 0px

kaya ang 'na takigrapya' ay magiging

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

maaari mong kahit na gamitin ang 3 mga halaga

margin: 5px 0 5px;

na nangangahulugan na

tuktok = 5px | | kanan at kaliwa = 0px | | ibaba = 5px

Internet Explorer ay awtomatikong nagdadagdag ng padding sa mga pindutan sa HTML form.
Ang puwang na ito ay ay stretches ayon sa haba ng teksto ng pindutan.

Ang solusyon ay magdagdag ng overflow sa estilo .... ibig sabihin

. Pindutan {
overflow: makikita;
padding-kaliwa:! ng 10px mahalaga;
padding-kanan:! ng 10px mahalaga;
... Anumang iba pang mga estilo para sa button na ito ...
}

O

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