Posts tagged 'CSS "

Įrašyta DropShadow vaizdus naudojant CSS

Trečiadienis, vasaris 18, 2009 Iki nikhil

Kitas greitas tut. Čia yra kažkas, paprastas ir gražus, naudojant CSS POWER ... bet buvo sunku concieve (ir jis tikrai buvo ne man) pradėti. Įrašyta Dropshadow, gali būti vieni už daugelį iš mūsų peice, naudojant keletą vaizdo redagavimo įrankiai pavyzdžiui, Photoshop ANF Fejerverkai ir tt
Priežastis, kodėl aš nusprendė išskleidžiamajame šešėlis naudojant CSS, kad paprastai, o sukurti puslapio dizainas / html paraiškos, reikalavimai išlaikyti Iteracja. Ką reiškia, Be egzistuojančią svetainę su daugybe vaizdų, pavyzdžiui, tuos, kuriuose pasireiškė FREINDS sąrašą ar nuotraukų galeriją, ji bus sunku perdirbti visą krūvį vaizdus, ​​kurie buvo jau iškrautos pridėti arba pašalinti šešėlius, nes tai klausimas.
Taigi, jei jūs turite padaryti šiek tiek perspektyvi kurdami HTMLs pridėti šiuos papildomus padalinius arba paprastai situaciją yra tai, kad jūs turite Loop Logic kuriantį Šios piktogramos / miniatiūros XSL, PHP. Java arba bet kokia kita programavimo / skriptų kalba, galite pridėti jį bet kuriuo metu, tada yra tik šou dalykas ir slepiasi šešėlius per CSS Display turtą, kaip už klientų kintančius reikalavimus ... Aš havn't tai padarė mąstyti apie ateitį, rūšiuoti Prieš tai ... bet ahev pradėjo dabar!

Toliau pateiktame pavyzdyje, originalus paveikslėlis yra šešėlyje nemokamai ir dropshadows yra taikomi kaip reikia! Be to, aš jau dingo šiek tiek daugiau, naudojant mano anksčiau Tut gudrybės (Na! Tai tikriausiai yra trumpiausias įvairovė Pamokos, todėl yra pateisinamas tik vadindamas juos "Tut" 's) apie Naudojant CSS Clip Nekilnojamas turtas skirtas parodyti tik

Originalus vaizdas

original_image

CSS DropShadow rezultatai
css_dropshadow_results
Peržiūrėti Demo | Parsisiųsti sourcefiles


get ExpressingIT News by Email Prenumeruoti ExpressingIT elektroniniu paštu arba Follow Me on Twitter


Best Practices: Darbas su CSS

Ketvirtadienis, balandis 24, 2008 Iki nikhil

Įdėkite Stylesheets viršuje

Jei norite puslapis įkelti palaipsniui; Tai yra, mes norime naršyklė rodyti kokia turinys turi kuo greičiau, įdėti CSS ties viduje dokumento HEAD puslapio viršuje. Tai daro puslapiai atrodo pakrovimo greičiau, nes tai palengvina progresyvų atvaizdavimo puslapio. Tai ypač svarbu, puslapių su daug turinio ir naudotojams lėčiau interneto ryšį.

Tai dokumentuota tai, kad siekiant padidinti bendrą vartotojo patirtį, svarbu pateikti pažangos rodiklius ir vizualinius sukaupta. Norėdami išvengti perbraižyti elementai puslapį, tuomet, jei jų stilius keičiasi, kai kurios naršyklės, įskaitant IE, blokų atvaizdavimas puslapio iki CSS pilnai pakrautas. Dėl šios priežasties, vartotojas gali matyti tuščias baltas puslapis.

W3 HTML specifikacijos "taip pat teigia, kad CSS turi mane įtraukti į skyrių HEAD HTML puslapyje. 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 ir naudojant <link> ties puslapio apačioje, kad tai geriausia nenaudoti.

Venkite naudoti naršyklės ypatybes,

Filtrai: Naudoti filtrą padidina atminties sąnaudas ir taikomas vienam elementui, o ne už vaizdą, todėl problema yra dauginama. Be to, Filtrai IE Patentuotas, todėl neveiks taip, kaip numatyta kitose naršyklėse. Jei norite, skaidrus arba gradientas fonas, naudokite 1Pixel su vaizdais.
Posakiai: CSS išraiškos yra gražus bruožas turėti CSS, bet vis dar yra IE ypatybė. Be to, svarbu pažymėti, kad šie išraiškos apskaitomas, kai atvaizduojant puslapį ir keičiamas, przewijany ir net tada, kai vartotojas pajudina per puslapį pelę. Nereikia nė sakyti, tai gali paveikti jūsų puslapio veikimą. Taigi paprastais žodžiais, Venkite CSS išraiškų, jei jūs manote, jos privalumus "sveria daugiau nei" prieš "

Išorę jūs CSS

Naudojant išorinį CSS lems greitesnis pakrovimo puslapiai, nes JavaScript ir CSS failų talpyklos iš naršyklės. Inline CSS HTML dokumentų siųstis kiekvieną kartą HTML dokumentas yra prašoma. Tai iš tiesų gali sumažinti HTTP prašymus skaičių, bet vėliau ji padidina HTML dokumento dydį. Išorinis CSS yra paslėptas per naršyklę; iš HTML dokumento dydis mažinamas nedidinant HTTP užklausų skaičius.

Atkreipkite dėmesį, kad, jei vartotojai apie savo svetainės turi kelis puslapių peržiūrų per sesiją ir daugelis iš jūsų puslapių pakartotinai naudoti tuos pačius scenarijus ir Stilių, yra didesnė nauda iš talpyklos išorės failus.

Pack jūsų CSS failą

Pakavimo arba crunching CSS yra pašalinti nereikalingą simbolių iš kodo sumažinti jos dydį, taip pagerinant apkrovos metu praktika.

CSS man crunched panaikinant visas pastabas ir bet kokius nepageidaujamus simbolius, pavyzdžiui, baltos erdvės, naujos eilutės ir tt


get ExpressingIT News by Email Prenumeruoti ExpressingIT elektroniniu paštu arba Follow Me on Twitter


Kas yra CSS Resetai?

Antradienis, kovas 11, 2008 Iki nikhil

CSS Atstatyti yra / yra CSS nustatyti elemento stilių numerį konkretaus pradinio, kuri sukuria nuoseklumą įvairių naršyklių.

Mes visi buvo per rašymo kryžminio naršyklės CSS košmarai. Taigi, kai mes pradedame rašyti savo CSS, Tai praktika, kad iš naujo tai, kad pašalintumėte / atkurti jokių Cross Browser neatitikimus. CSS naujo, yra paprasti keletą eilučių CSS, kad jums pradėti savo CSS su, suteikiant Jums švarų pagrindą pradėti kurti savo veiksmų.

CSS atstato, 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: normal;
}


Atstatyti naršyklės šrifto dydį
Taip pat atkreipkite dėmesį, kad iš naujo, kad buvo taikytos naršyklė šrifto dydį į šią eilutę ...

html {font-size: 76%;}

Virš CSS atstato naršyklė šrifto dydį iki 10 taškų, o tai leidžia dirbti su santykiniais šrifto dydis (kuris yra kiekvienas svarbus iš WAI atitikties prespective)
Dėl pvz, tokia apibrėžimą, font-size per tarpą yra nustatytas iki 10 pikselių ir kad paragarph yra nustatytas iki 14 taškų ...

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


get ExpressingIT News by Email Prenumeruoti ExpressingIT elektroniniu paštu arba Follow Me on Twitter


CSS Stenografistų savybės

Trečiadienis, rugpjūtis 15, 2007 Iki nikhil

Pvz.
Nurodžius CSS turtą, kaip tai,

skirtumas: 5px 0;

iš tikrųjų reiškia,

skirtumas: 5px 0tšk 5px 0tšk;

Tai pirmasis marža nuosavybė reiškia:

viršuje ir apačioje marža = 5px || kairę ir į dešinę marža = 0tšk

taip "ilgiau sutrumpinimas" būtų

skirtumas: 5px 0tšk 5px 0tšk; (T, R, B, L)

Jūs netgi galite naudoti 3 reikšmes

skirtumas: 5px 0 5px;

o tai reiškia,

top = 5px || dešinę ir į kairę = 0tšk || apačioje = 5px


get ExpressingIT News by Email Prenumeruoti ExpressingIT elektroniniu paštu arba Follow Me on Twitter


Nuisence Su "Internet Explorer mygtuką" Siųsti "Horizontal išklojimui

Antradienis, birželis 26, 2007 Iki nikhil

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

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

Button {
perpildymo: matomas;
padding-left: 10px svarbu!;
padding-dešinę:! 10px svarbu;
<...> Bet kitas stilius šį mygtuką ...
}

ARBA

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


get ExpressingIT News by Email Prenumeruoti ExpressingIT elektroniniu paštu arba Follow Me on Twitter


Prenumeruoti ExpressingIT RSS
get ExpressingIT News by Email Prenumeruoti ExpressingIT elektroniniu paštu
Follow Me on Twitter