Style Sheets Web
CSS tips & tricks

Ky dokument është një përkthim i "CSS Tips & Tricks." Përkthimi nuk është një përkthim i normative dhe mund të përmbajë gabime e përkthimit. Rishikimi i statusit të vetëm në anglisht në dokument http://www.w3.org/Style/Examples/007/roundshadow.html W3C është e mbrojtur nga copyright.

Qoshet Rounded dhe shadowed kuti

CSS3 do të kenë prona të sigurojë kufijtë e harmonishëm, kufijtë e përbërë nga imazhe dhe kutive me hijet, por me disa punë që ju mund të simulojnë disa prej tyre tashmë me CSS2 - dhe pa asnjë shenjë tabelat apo ekstra-up.

Kjo faqe është frymëzuar nga një e krijuar nga Arve Bersvendsen. Ai ka shumë më tepër interesante popull CSS.

Sigurisht, kufijtë e harmonishëm dhe hijet do të jetë shumë më të thjeshtë me CSS3. Për shembull, për të dhënë një paragraf të një kufi të trashë të kuqe me qoshe të rrumbullakosura, ju do të duhet vetëm dy linjat e CSS3 të ngjashme me këtë:

P (border: solid trashë të kuqe;
    border-radius: 1em)

Dhe për të shtuar një hije blurry em një rënie e gjysmë më poshtë dhe për të drejtën e paragrafi, vetëm një linjë do të jetë e mjaftueshme:

(P box-hije: të zezë 0.5em 0.5em 0.3em)

(Ju mund të provoni këtu nëse punon tashmë.) Por në qoftë se keni nevojë për to tani dhe ju nuk parasysh kompleksitetin dhe mungesa e fleksibilitetit, ju mund të përdorni teknikën më poshtë. Në shumë paktën ajo do të jetë një provë e mirë për shfletuesit buggy ...

Pesë imazhet në një element

Mashtrim kryesor është që të përdorin generated content ( ':: para' dhe ':: pas') për të vënë katër imazhet në një element shtesë. ':: Pseudo para-element mund të ketë një sfond dhe një imazh i dukshëm,':: pas 'pseudo-element gjithashtu, dhe element vetë mund të ketë një sfond, për një total prej pesë images.

Ne krijimin e pesë imazhe PNG dhe i vuri në katër qoshet dhe kundër buzë drejtën e elementit. Këtu janë imazhe:

top left corner:

buzë të lartë dhe këndin e lartë të drejtë:

pjesa e mesme dhe buzë të drejtë:

left bottom corner:

buzë fund dhe këndin fund të drejtë:

Dhe këtu janë rregullat CSS në pozicionimin e tyre:

blockquote (
    max-width: 620px;
    background: url (rs-right.png) repeat-y) drejtë
blockquote:: para (
    display: block;
    line-height: 0;
    background: url (rs-topright.png) top right no-repeat;
    Përmbajtja: url (rs-topleft.png))
blockquote:: pas (
    display: block;
    line-height: 0;
    background: url (rs-bottomright.png) djathtë poshtë no-repeat;
    Përmbajtja: url (rs-bottomleft.png))

Që imazhit tonë sfond është 620px gjerë, ne nuk mund të lejojmë më të gjerë se sa 620px kuti, pa marrë çara. Kjo është arsyeja pse pronë 'max-width' është atje. Display ': pronës block' është e nevojshme për t'u siguruar që kutitë e gjeneruar forma të përmbajtjes së saj mbi dhe nën main content, në vend që të futet në rreshtin e parë dhe e fundit. Line-height: 0 'e bën të sigurt se nuk ka vend për të lënë të hapura për ascenders dhe descenders mbi imazhet më poshtë dhe në përmbajtje' pronë.

Rezultati

Dhe këtu është se si duket:

HTML është me të vërtetë nuk ka më shumë se ajo duhet të jetë:

<blockquote>
<p> A keni parë një kuti zbehtë jeshile me qoshe të rrumbullakosura
dhe një hije rënie kundër një sfond të bardhë? Nëse jo,
Shfletuesi juaj nuk po e trajton generated content
korrekt (ose ndoshta jo të gjitha).
</ blockquote>

Dhe në qoftë se ju doni të testuar nëse shfletuesi juaj tashmë mund të bëjë këtë CSS3-mënyrë, ju mund të provoni këtu.