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

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:

yuxarı kənar və yuxarı sağ künc:

sağ kənarın orta hissəsi:

aşağı sol künc:

aşağı kənar və aşağı sağ künc:

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üşü:

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.