Izsakot IT

Vēl viens ātrs tut. Šeit ir kaut kas vienkāršs un jauks, izmantojot pilnvaras CSS ... bet bija grūti concieve (un tas noteikti nebija man), lai sāktu ar. Pievienojot Dropshadow, varētu būt peice kūka daudziem no mums, izmantojot kādu attēlu rediģēšanas rīkus, piemēram, Photoshop ANF uguņošana utt
Iemesls, kāpēc es izvēlējās Drop Shadow, izmantojot CSS ir tāda, ka, parasti vienlaikus radot lapas dizains / html pieteikumus, prasības turēt atkārtojot. Ko es domāju ir, Jo esošās tīmekļa vietnes ar daudziem attēliem, piemēram, uz tiem attēlot freinds sarakstu vai attēlu galeriju, būs grūti pārstrādāt visa slodze no attēliem, kas jau bija izkrauj, lai pievienotu vai noņemtu ēnas, par to jautājums.
Tādēļ, ja jums ir darīts mazliet uz priekšu domāšanu, bet radot HTMLS lai pievienotu šos papildu divīzijas vai parasti situācija ir tāda, ka Jums ir Loop Logic, radot šīs ikonas / sīktēlus XSL, PHP. JAVA vai jebkurš cits programmēšanas / skriptēšanas valodu, jūs varat pievienot jebkurā laikā, tad ir tikai jautājums par šovu un slēpjot šo ēnas, izmantojot CSS Display īpašumu, kā uz klientu arvien mainīgās prasības ... es havn't darīts šāda veida priekšu domāšana Pirms šī ... bet ahev jau tagad!

Turpmākajā piemērā, oriģinālais attēls ir ēna bezmaksas, un dropshadows piemēro pēc vajadzības! Arī man ir gājusi nedaudz extra, izmantojot triku no manu iepriekšējo Tut panta Well! tie droši vien ir īsākais dažādas konsultācijas, tā ir pamatota tikai tad, nosaucot tos par "Tut" 's), aptuveni Izmantojot CSS Clip īpašumu par dižoties tikai

Oriģinālais attēls

CSS DropShadow Rezultāti

Skatīt Demo Pārsūtīt | Download sourcefiles

Put stilu pie Top

Ja jūs vēlaties lapu, lai slodze pakāpeniski, tas ir, mēs vēlamies pārlūku, lai parādītu kāds saturs tajā ir cik ātri vien iespējams, ielieciet CSS augšpusē lapas iekšpusē dokumentu HEAD. Tas padara lapas, šķiet, iekraušana ātrāk, jo tas sekmē pakāpenisku renderēšanu lapā. Tas ir īpaši svarīgi lapas ar daudz satura un lietotājiem par lēnāku interneta pieslēgumu.

Tas ir dokumentēts fakts, ka, lai uzlabotu vispārējo lietotāju pieredzi, ir svarīgi nodrošināt progresa indikatorus un vizuālo feedbacks. Lai izvairītos, lai ievilktu elementus lapas, tādā gadījumā, ja viņu stilu izmaiņas, dažas pārlūkprogrammas, ieskaitot IE, bloki izciršanas lappuses kamēr CSS ir pilnībā ielādēta. Tādēļ, lietotājs saņem redzēt tukša balta lapa.

W3 HTML specifikācija "arī norāda, ka CSS ir mani iekļaut HEAD sadaļā HTML lapā. at the bottom of the page, so it's best not to use it. Arī atzīmē, ka, IE @import uzvedas tāpat kā lietojot <link> pie lapas apakšā, tāpēc vislabāk to neizmantot.

Izvairieties Izmantojot pārlūka īpatnības

Filtri: izmanto filtru palielina atmiņas patēriņu un piemēro vienu elementu, nevis vienu attēlu, lai problēma tiek reizināts. Arī filtri ir IE Patentēts, tāpēc nestrādās kā paredzēts citās pārlūkprogrammās. Ja jūs vēlaties, pārredzamas vai gradients fonus, izmantot 1Pixel ar attēliem.
Apzīmējumiem: CSS izpausmes ir jauka iezīme ir CSS, taču joprojām ir IE specifiska iezīme. Tāpat ir svarīgi atzīmēt, ka šie izteikumi ir izvērtēts lapa ir atveidota un mainīti, apskatus un pat tad, kad lietotājs pārvieto peli pāri lapā. Lieki teikt, tas varētu ietekmēt veiktspēju jūsu lapas. Tādējādi vienkāršā vārdiem, neizmantojiet CSS izpausmes, ja vien jūs jūtaties tā pozitīvo "sver vairāk nekā tās mīnusi"

Ārējos jums CSS

Izmantojot ārējo CSS radīs ātrāku iekraušana lpp jo JavaScript un CSS failus ir kešatmiņā ar pārlūku. Inline CSS HTML dokumentu iegūt lejupielādēt katru reizi HTML dokuments tiek pieprasīta. Tas tiešām var samazināt skaitu HTTP saņemto pieprasījumu, bet pēc tam palielina lielumu HTML dokumentā. Ārējo CSS ir kešatmiņā ar pārlūku, no HTML dokumenta izmēri ir samazināti nepalielinot strādājošo skaitu HTTP pieprasījumiem.

Lūdzu, ņemiet vērā, ka, ja lietotāji jūsu vietnē ir vairākas lapas apskatus vienā sesijā, un daudzi no jūsu lapas atkārtoti izmantot tos pašus skriptus un stilu, ir lielāks potenciāls gūt labumu no kešotiem ārējiem failiem.

Pack jūsu CSS failu

Iepakošanas vai crunching savu CSS ir prakse, kā likvidēt nevajadzīgās rakstzīmes kodu, lai samazinātu tā izmēru, tādējādi uzlabojot transportlīdzekļu noslodzes reizes.

CSS var man čaukstēja, atceļot visus komentārus un kādu nevēlamu rakstzīmes, piemēram, balto plankumu, newlines uc

CSS Reset tiek / ir CSS noteikt virkni elementu stilu ar konkrētu izejas, kas rada konsekvenci dažādos pārlūkos.

Mēs visi esam bijuši cauri rakstot pārrobežu pārlūku CSS 's murgi. Tātad, ja mēs sāktu rakstīt savu CSS, ir prakse, lai atjaunotu tā 1. noņemt / nomainīt jebkura šķērsgriezuma pārlūka nekonsekvences. CSS Atiestata, ir vienkārši dažas rindiņas CSS, ka jūs sākat savu CSS ar, sniedzot jums tīru bāzi sākt veidot savu uz.

CSS Atiestata ka es parasti mēdz izmantot izskatās šādi

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

ola, ul {
saraksts-style: none;
}

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

Atiestatīt pārlūkprogrammu fonta lielumu
Arī atzīmē, reset, kas ir bijusi piemērojama pārlūka fonta lielumu nākamajā rindā ...

html {font-size: 76%;}

Iepriekš CSS Atiestata pārlūkprogramma fonta izmērs 10 pikseļi, un tas ļauj strādāt ar relatīvo fonta izmēru, kura no katra svarīga no WAI atbilstības prespective)
Par piemēram, šādā definīcijā, font-size kādā posmā ir iestatīts uz 10 pikseļiem, un ka paragarph ir iestatīts uz 14 pikseļiem ...

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

Piem.
Norādot CSS īpašumu, piemēram, tas,

starpība: 5PX 0;

faktiski nozīmē,

starpība: 5PX 0px 5PX 0px;

Ka 1. starpība īpašums ir:

augšējā un apakšējā norma = 5PX | | kreisās un labās malas = 0px

tāpēc "vairāk stenogrāfija" būtu

starpība: 5PX 0px 5PX 0px; (T, R, B, L)

Jūs pat varētu izmantot 3 vērtības

starpība: 5PX 0 5PX;

kas nozīmē,

top = 5PX | | labās un kreisās = 0px | | grunts = 5PX

Internet Explorer automātiski pievieno polsterējums uz pogas HTML formu.
Šo vietu stiepjas pēc garuma pogas tekstu.

Risinājums ir pievienot pārplūst ar savu stilu .... ti

. Pogu {
pārplūde: redzams;
padding-left:! 10px svarīgi;
padding-right:! 10px svarīgi;
... Kāds cits stils šai pogai ...
}

VAI

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