Stillərin kaskadlı cədvəlləri
CSS məsləhətlər & üsullar

(Bu səhifə CSS stillərin kaskadlı cədvəllərini istifadə edir)

Bu sənəd məqalənin tərcüməsidir "Web Style Sheets CSS tips & tricks".
Sənədin original versiyası mövcüddür yalnız W3C saytında http://www.w3.org/Style/Examples/007/roundshadow.html
Bü tərcümə rəsmi W3C sənəddi DEYIL.
Bütün Müəllif Hüqüqları W3C Malikdir.
Bu sənəddə tərcümə tərcümə səhvləri və mətbəə xətaları ola bilər.

Müəllif: Sabir Sabutai (bütün tərcümələr müəllifindir)
Lokal versiya: http://www.carionltd.com/Style/Example007/roundshadow.html

Yumru & kölgəli

Beş şəkil

Nəticə

Yumru künclər və kölgəli bloklar

CSS3-da yumru kənarlar, şəkillrədən ibarət kənarlar və kölgəli blokların yaradılması mümkün olacaq. Lakin bir sıra addımları ataraq onların bəzisi CSS2 versiyasında mümkün olacaq — hansısa cədvəl və ya əlavə tərtibatsız.

Bu səhifənin müəllifi Arve Bersvendsondur. Və onda çoxlu başqa maraqlı CSS nümayişləri var.

Əlbətdə ki, CSS3 versiyasında yumru künclər və kölgələrin yaradılması asanlaşdırılacaq. Misal üçün, paraqrafın yumru küncləri olan qalın qırmızı sərhədini yaratmaq üçün yalnız belə iki CSS3 xəttləri lazım olacaq:

P { border: solid thick red;
    border-radius: 1em }

Və paraqrafın yarısına aşağı və sağa yuyulmuş kölgə əlavə etmək üçün yalnız bir xətt kifayət olacaq:

P { box-shadow: black 0.5em 0.5em 0.3em }

(İşləyib işləməməsiniburada yoxlaya bilərsiniz.) Ancaq onlar sizə indi lazımdırsa və mürəkkəblik və mahirliyin çatmamazliğisiz üçün problem deyilsə, aşağıda sərh edilən texnologiyanı yoxlaya bilərsiniz. Ən azı, bu buggy brauzerlərin istofadəçiləri üçün əla bir test olacaq. …

Bir elementdə beş şəkil

Əsas tryuk – yaradılmış '::before' və '::after') kontentini dörd əlavə şəkillərin bir elementə uerləşdirilməsi üçün istifadə edilməsi. '::before' psevdoelementin fon və qabaq layı ola bilər, '::after' psevdoelementi də belə, elementin özünün isə beş şəkil üçün fon layı ola bilər.

Beş PNG şəkil yaradırıq və onları dörd künclərdə və beşinci kənarın əksində yerləşdiririk. Bu şəkillər:

yuxarı sol künc:
top left corner
yuxarı kənar və yuxarı sağ künc:
top right corner
sağ kənarın orta hissəsi:
background and right edge
aşağı sol künc:
bottom left corner
aşağı kənar və aşağı sağ künc:
bottom and bottom left corner

Bu isə onların yerləşdirilməsi üçün CSS qaydalarıdır:

blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote::before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote::after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

Bizim fon şəkilin eni 620px təşkil edir və biz blokları 620px-dən geniş edə bilmərik. Buna görə də 'max-width' aləti var. 'display: block' lazımdır ki, əmin olaq ki, yaradılmış kontent birinci və axırıncı sətirdə yerləşmənin əvəzinə əsas kontentin yuxarısı və aşağısında xüsusi bloklarını yaradır. 'line-height: 0' aləti zəmin edir ki, şəkillərin yuxarısı və aşağısında 'content' alətində sətirüstü və sətiraltı işarələr üçün yer qalacaq.

Nəticə

Bu da onun görünüşü:

Ağ fonda yumru kümcləri və kölgə ilə açıq yaşıl bloku görürsünüzmü? Əgər yox isə brauzeriniz yaradılmış kontent üçün düzgün qurulmqyıb (yaxud tamailə qurulmqyıb).

HTML mənbəsi aşağıdaki kimi olmalıdır:

<blockquote>
<p>Ağ fonda yumru kümcləri və kölgə ilə açıq yaşıl bloku görürsünüzmü? Əgər yox isə brauzeriniz yaradılmış kontent üçün düzgün qurulmqyıb (yaxud tamailə qurulmqyıb).
</blockquote>

Və brauzeriniz CSS3 köməyilə bunu yetirə bilməyini yoxlaq istıyirsinizsə burda yoxlayın.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Yaradılıb 6 yanvar 2004;
Son dəyişikliklər $Tarix: 2007/07/20 16:19:10 $ GMT