Išreikšdami IT

Kitas greitas tut. Čia yra kažkas, paprastas ir malonus naudojant CSS POWER ... bet buvo sunku concieve (ir jis tikrai buvo ne man) prasideda. Įrašyta Dropshadow, gali būti torto peice, daugelis iš mūsų, naudojant tam tikrą vaizdo redagavimo įrankiai kaip Photoshop Vidzemes Fejerverkai kt.
Priežastis, kodėl aš pasirinko lašo šešėliu naudojant CSS, kad, paprastai kuriant puslapio dizainas / html paraiškos, reikalavimai nuolat Iteracja. Ką reiškia egzistuojančią svetainę su daugeliu vaizdų, kaip tie, vaizduojančių freinds sąrašą arba vaizdų galeriją, ji bus sunku pakartotiniai perdirbti visas apkrovos vaizdų, kurie jau buvo iškrautos pridėti ar pašalinti šešėlius, kad klausimas.
Taigi, jei jūs turite padaryti šiek tiek į priekį mąstymą kuriant, HTMLS pridėti šiuos papildomus padalinius ar paprastai situacija yra, kad jūs turite Loop Logic, gaminantis šiuos piktogramas arba miniatiūros XSL, PHP,. Java arba bet kuri kita programavimo / skriptų kalba, galite pridėti jį bet kuriuo metu, tada yra tik šou ir, slepiasi šiuos šešėliai, naudojant CSS Ekranas turtą, kaip už klientų nuolat kintančių reikalavimų ... aš havn't, padaryti šį perspektyvi rūšiuoti prieš tai ... bet ahev, pradėjo dabar!

Toliau pateiktame pavyzdyje, originalus paveikslėlis šešėlis nemokamai, ir dropshadows taikoma, kaip reikalaujama! Be to, aš jau šiek tiek daugiau, mano ankstesnio TUT triukus [Well! tai tikriausiai yra trumpiausias įvairovė Mokymas, todėl ji yra pateisinama tik tada, vadindamas juos "Tut" ai) apie Naudojant CSS Clip Nekilnojamas parodyti tik

Originalaus vaizdo

CSS DropShadow rezultatus

Peržiūrėti Demo | Parsisiųsti sourcefiles

Įdėkite Stylesheets viršų

Jei norite puslapį įkelti palaipsniui, tai yra, mes norime naršyklę rodyti, bet turinys turi kuo greičiau, CSS dokumento HEAD viduje puslapio viršuje. Tai daro, puslapiai atrodo pakrovimo greičiau, nes tai palengvina palaipsniui suteikimo puslapio. Tai ypač svarbu, puslapių su daug turinio ir vartotojų wolniejszych interneto ryšio.

Tai yra dokumentuotas faktas, kad siekiant padidinti bendrą vartotojų patirtį, svarbu pateikti pažangos rodiklius ir vaizdo Atsiliepimai. Siekiant išvengti perbraižyti puslapio elementus, jei jų stilių kaita, kai kurios naršyklės, įskaitant IE, blokai utilizavimo puslapio, kol CSS pilnai pakrautas. Dėl to, vartotojas gali matyti tuščias baltas puslapis.

W3 HTML Specifikacijoje taip pat teigiama, kad CPT turi mane įtraukti į HTML puslapį HEAD skyriuje. at the bottom of the page, so it's best not to use it. Taip pat atkreipkite dėmesį, kad IE @import elgiasi pats kaip naudojant <link> puslapio apačioje, todėl geriau jo nenaudoti.

Venkite naudojantis naršykle ypatumus

Filtrai: Naudokite skirtų filtrų padidina atminties vartojimą ir už kiekvieną elementą, o ne už įvaizdį, todėl problema yra dauginama. Be to, Filtrai IE Patentuotas, todėl bus neveikti taip, kaip numatyta kitų naršyklių. Jei norite skaidrius arba gradientas fonas, naudokite 1Pixel su nuotraukomis.
Išraiškos: CSS išsireiškimai yra gražus bruožas turėti CSS, bet vis dar yra IE ypatumas. Be to, svarbu pažymėti, kad šios išraiškos yra įvertinti puslapio vaizdas ir jo dydis, przewijany ir net kai vartotojas pajudina pelę puslapio. Nereikia nė sakyti, tai gali paveikti jūsų puslapio veikimą. Taigi Paprastais žodžiais tariant, Venkite CSS išraiškos, jeigu manote, kad, jo privalumai "sveria daugiau nei jos trūkumus"

Išorę jums CSS

Naudojant išorinį CSS bus greičiau pakrovimo puslapius, nes JavaScript ir CSS failų talpyklos naršyklės. Inline CSS HTML dokumentų siųstis HTML dokumentas yra prašoma kiekvieną kartą. Tai iš tiesų gali sumažinti skaičių HTTP prašymus, tačiau vėliau padidėja HTML dokumento dydį. Išorės CSS talpyklos naršyklės HTML dokumento dydis sumažinamas nedidinant HTTP užklausas.

Atkreipkite dėmesį, kad, jei jūsų svetainės vartotojai turi keletą puslapių peržiūrų per sesiją, ir daugelis iš jūsų puslapiuose vėl naudoti tie patys scenarijai ir stilių, yra didesnė nauda iš talpyklos išorinius failus.

Pakuotės savo CSS failą

Pakavimo ir crunching savo CSS pašalinti nereikalingus simbolius iš kodą sumažinti jos dydį ir taip pagerinti apkrovos metu praktika.

CSS gali mane krizės paliestose pašalinant visus komentarus ir nereikalingus simbolius, pavyzdžiui, baltųjų erdvių, naujas eilutes ir tt

CSS Atstatyti yra / CSS elementų stilių pradinio lygio, kad sukuria nuoseklumą įvairiose naršyklėse.

Mes visi buvo per rašymo Cross-naršyklė CSS košmarų. Taigi, kai mes pradėti rašyti savo CSS, Tai praktika naujo pirmas pašalinti / atkurti jokių kryžminių naršyklės neatitikimų. CSS Atstato, paprasti keletas eilučių iš CSS, kad jūs pradėsite savo CSS, suteikiant Jums švarią bazę, pradėti kurti savo nuo.

CSS naujo, kad aš paprastai linkę naudoti atrodo taip

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

olis, ul {
list-style: none;
}

H1, H2, H3, H4, h5, h6 {
font-size: 100%;
font-weight: normalus;
}

Atstatyti naršyklės šrifto dydį
Taip pat atkreipkite dėmesį, kad buvo taikytos naršyklės šriftą žemiau pateiktoje eilutėje iš naujo ...

html {font-size: 76%;}

Aukščiau CSS naujo naršyklės šrifto dydį iki 10 taškų, o tai leidžia dirbti su santykinis šrifto dydžio, kuris yra kiekvienas iš WAI laikymosi svarbu prespective)
, Pavyzdžiui, į šį apibrėžimą, į tarpą font-size 10 taškų ir į paragarph 14 taškų ...

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

Pvz.
Nurodžius CSS turtą, kaip šis,

margin: 5px 0;

iš tikrųjų reiškia,

skirtumas: 5px 0px 5px 0px;

Šis pirmasis skirtumas nuosavybė reiškia:

viršuje ir apačioje pelno marža = 5px | | kairėn ir dešinėn skirtumas = 0px

kad "ilgesnis sutrumpinimas" būtų

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

galite naudoti net 3 vertybes

margin: 5px 0 5px;

o tai reiškia,

top = 5px | | dešinysis ir kairysis = 0px | | bottom = 5px

Internet Explorer automatiškai prideda padding mygtukų HTML formas.
Ši erdvė driekiasi pagal mygtuko teksto ilgio.

Sprendimas yra pridėti perpildymo savo stiliaus .... ty

. Mygtuką {
perpildymas: matoma;
padding-left: 10px svarbus;
padding-right:! 10px svarbus;
Šį mygtuką ... bet koks kitas stilius ...
}

ARBA

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