ev > Fayllar və qovluqlar > Blok kölgəsinin quraşdırılması uzunluğu nə qədərdir. CSS-də daxili kölgələr. Kiçik bir məsafə və güclü bulanıqlıq aşağı sürüşdürün


Blok kölgəsinin quraşdırılması uzunluğu nə qədərdir. CSS-də daxili kölgələr. Kiçik bir məsafə və güclü bulanıqlıq aşağı sürüşdürün




Elementə kölgə əlavə edir. Parametrlərini vergüllə ayıraraq bir neçə kölgədən istifadə etməyə icazə verilir, kölgələr tətbiq edildikdə, siyahıdakı ilk kölgə daha yüksək, sonuncu kölgə daha aşağı olacaq. Əgər element sərhəd-radius xüsusiyyəti vasitəsilə yuvarlaqlaşdırma radiusuna malikdirsə, kölgənin də yuvarlaq küncləri olacaq. Kölgənin əlavə edilməsi elementin enini artırır, ona görə də brauzerdə üfüqi sürüşmə çubuğunun görünməsi mümkündür.

qısa məlumat

Sintaksis

qutu-kölgə: heç biri |<тень> [,<тень>]*

Harada<тень>:

daxil<сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>

Qeyd

TəsvirMisal
<тип> Dəyərin növünü təyin edir.<размер>
A&BDəyərlər müəyyən edilmiş qaydada çıxmalıdır.<размер> && <цвет>
A | BTəklif olunan dəyərlərdən yalnız birinin (A və ya B) seçilməli olduğunu göstərir.normal | kiçik qapaqlar
A || BHər bir dəyər tək başına və ya başqaları ilə birlikdə istənilən qaydada istifadə edilə bilər.eni || saymaq
Qrup dəyərləri.[ məhsul || xaç]
* Sıfır və ya daha çox dəfə təkrarlayın.[,<время>]*
+ Bir və ya bir neçə dəfə təkrarlayın.<число>+
? Göstərilən növ, söz və ya qrup isteğe bağlıdır.daxil?
(A, B)Ən azı A təkrarlayın, lakin B dəfədən çox deyil.<радиус>{1,4}
# Vergüllə ayrılmış bir və ya bir neçə dəfə təkrarlayın.<время>#
×

Dəyərlər

heç biri kölgə əlavə etməyi ləğv edir. inset Kölgə elementin içərisinə çəkilir.<сдвиг по x>Elementə nisbətən kölgənin üfüqi ofseti. Bu parametrin müsbət dəyəri kölgə sürüşməsini sağa, mənfi dəyər - sola təyin edir.<сдвиг по y>Elementə nisbətən kölgənin şaquli ofseti. Müsbət dəyər kölgə sürüşməsini aşağı salır, mənfi qiymət onu yuxarıya doğru aparır.<размытие>Kölgə bulanıqlığı radiusunu təyin edir. Bu dəyər nə qədər böyükdürsə, kölgə bir o qədər hamarlanır, daha geniş və yüngül olur. Bu parametr təyin edilməyibsə, o, standart olaraq 0-dır, bu, kölgəni bulanıq deyil, kəskin edəcək.<растяжение>Müsbət dəyər kölgəni uzadır, mənfi dəyər onu azaldır. Bu parametr təyin edilməyibsə, o, standart olaraq 0-dır və kölgə elementlə eyni ölçüdə olacaq.<цвет>İstənilən mövcud CSS formatında kölgənin rəngi, standart olaraq kölgə qaradır.

Parametrlərini vergüllə ayıraraq bir neçə kölgənin göstərilməsinə icazə verilir. Aşağıdakı ardıcıllıq nəzərə alınır: siyahıda birinci kölgə ən yuxarıda, siyahıda sonuncu kölgə isə ən aşağıda yerləşir.

Misal

qutu kölgəsi

Sitruslar cənubun kolluqlarında yaşayarmı? Bəli, amma saxta surət!

Nümunənin nəticəsi Şəkildə göstərilmişdir. 1.

düyü. 1. Kölgə növü

Obyekt Modeli

Bir obyekt.style.boxKölgə

Qeyd

5.1-dən əvvəl Safari, 10.0-dan əvvəl Chrome, 4.0-dan əvvəl Android -webkit-box-shadow xüsusiyyətini dəstəkləyir.

4.0 versiyasından əvvəl Firefox -moz-box-shadow xüsusiyyətini dəstəkləyir.

9.0 versiyasından əvvəlki Internet Explorer qutu-kölgə xassəsini dəstəkləmir, bunun əvəzinə filtr xassəsindən istifadə edə bilərsiniz:

Filtr: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

Burada: offX — kölgə üfüqi ofset; offY - kölgənin şaquli ofseti; rəng - kölgənin rəngi.

Açılan kölgə filtrinin tətbiqi xırtıldayan, sərt kölgə verir, beləliklə siz kölgə effekti üçün kölgə filtrindən istifadə edə bilərsiniz.

Filtr: progid:DXImageTransform.Microsoft.shadow(istiqamət=120, rəng=#000000, güc=10);

Burada: istiqamət — kölgə istiqaməti bucağı 0-dan 360°-ə qədər; rəng - kölgə rəngi; güc - piksellərdə kölgə ofset.

Spesifikasiya

Hər bir spesifikasiya bir neçə təsdiq mərhələsindən keçir.

  • Tövsiyə (Tövsiyə) - spesifikasiya W3C tərəfindən təsdiqlənir və standart olaraq tövsiyə olunur.
  • Namizəd Tövsiyəsi ( Mümkün tövsiyə) - standarta cavabdeh olan qrup onun məqsədlərinə cavab verdiyindən razıdır, lakin standartın həyata keçirilməsi üçün inkişaf cəmiyyətinin dəstəyi tələb olunur.
  • Təklif olunan Tövsiyə ( Təklif olunan tövsiyə) - bu mərhələdə sənəd yekun təsdiq üçün W3C Məsləhət Şurasına təqdim olunur.
  • İşçi Layihə - Müzakirədən və icmanın nəzərdən keçirilməsi üçün düzəlişlərdən sonra daha yetkin layihə.
  • redaktorun layihəsi ( Redaksiya layihəsi) layihə redaktorları tərəfindən dəyişikliklər edildikdən sonra standartın qaralama versiyasıdır.
  • qaralama ( Spesifikasiya layihəsi) standartın ilk qaralama versiyasıdır.
×

Tipoqrafiya veb-dizaynerlərin sevimli oyuncağıdır. CSS-in tərkibində çox maraqlı bir alət var - mətn kölgəsi(mətn kölgəsi), ilk baxışdan kifayət qədər sadə görünən, lakin ixtiraçılıq və təxəyyüldən istifadə etsəniz, yaddaqalan effektlər yaratmaq üçün istifadə edilə bilər.

Kölgə əsasları

Əmlak mətn kölgəsi istifadə etmək çox asandır. Bütün müasir brauzerlər tərəfindən və hətta prefikslərdən istifadə etmədən də dəstəklənir. Lakin IE-də heç bir dəstək yoxdur (hətta IE9). Siz hətta IE-nin köhnə versiyalarında CSS3 effektlərini çıxarmağa kömək etmək üçün Modernizr kimi vasitələrdən istifadə edə bilərsiniz.

Sintaksis

Xüsusiyyət sintaksisi mətn kölgəsi yaratmaq üçün istifadə olunur mətn kölgəsi, aşağıda verilmişdir. Dörd parametr müəyyən edilməlidir: ilk ikisi kölgənin mövqeyini, üçüncüsü bulanıqlıq səviyyəsini, dördüncüsü isə kölgənin rəngini təyin edir.

Mətn-kölgə: horizontal_offset vertical_offset bulanıq rəng;

Aşağıda iki piksel aşağı və dörd piksel sağa sürüşdürülmüş, üç piksel bulanıqlaşdırılmış və 30% qeyri-şəffaflıqda qara olan mətn kölgəsi nümunəsidir.

Mətn-kölgə: 2px 4px 3px rgba(0,0,0,0,3);

Bu əmlakdan istifadənin nəticəsi belə görünəcək:

Niyə rgba istifadə olunur?

Xüsusiyyəti təyin edərkən kölgə rəngini təyin etmək üçün rgba-dan istifadə etmək lazım deyil. Bununla belə, rgba kölgə tərifinə başqa bir ölçü əlavə edir - şəffaflıq səviyyəsi.

Bu üsul digər rəng təyini üsullarından daha sadədir. Kölgə rənginin kölgəsini müəyyən etməyə diqqət yetirmək lazım deyil, bu, fon rəngindən bir qədər qaranlıq və ya daha açıq ola bilər. Rgba ilə siz sadəcə olaraq ağ və ya qara rənglərdən istifadə edə və rəngləri qarışdırarkən istədiyiniz fon rənginə nail olmaq üçün onların qeyri-şəffaflığını artıra bilərsiniz.

Əmlakdan istifadə mətn kölgəsi sadə kölgə kölgələri ilə məhdudlaşmayaraq mətn üçün müxtəlif effektlər yarada bilərsiniz. Məsələn, girintili mətnin illüziyasını yaratmaq üçün kod buradadır.

Əvvəlcə mətn rəngini fon rəngindən bir qədər tünd təyin etməlisiniz. Və sonra əmlakdan istifadə etməlisiniz mətn kölgəsi ağ rəng və artan şəffaflıq ilə.

Fon rəngi #222 və mətn rəngi 60% qeyri-şəffaflığa malikdir. Ağ kölgə 10% qeyri-şəffaflıqla bir qədər aşağı və sağa yerləşdirilib.

Əsas (fon: #222; ) #text h1 (rəng: rgba(0,0,0,0.6); mətn kölgəsi: 2px 2px 3px rgba(255,255,255,0.1); )

Kölgəni ümumiyyətlə bulandırmaq lazım deyil. Aydın bir kölgə saytın dizaynı ilə yaxşı uyğunlaşa bilər.

Mətn-kölgə: 6px 6px 0px rgba(0,0,0,0.2);

Əsl əyləncə yalnız bir kölgəyə sahib olmaq məhdudiyyətini atdığınız zaman başlayır. Tərifləri ayırmaq üçün vergüldən istifadə edərək, istədiyiniz qədər kölgə istifadə edə bilərsiniz!

Mətn-kölgə: kölgə1, kölgə2, kölgə3;

Budur iki kölgədən istifadə edən bir nümunə. Birincisi fonla eyni rəngə malikdir.

Mətn-kölgə: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Uzun məsafə aşağı hərəkət

Bir neçə kölgənin istifadəsini mənimsədikdən sonra nəticə getdikcə daha ifadəli olacaq. Mətn üçün 3D effekti yaratmaq çox asandır.

Nümunədə dörd kölgə istifadə olunur, hamısı müxtəlif məsafələrdə aşağı sürüşdürülmüş və bulanıqdır.

Mətn kölgəsi: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,01) );

Kiçik bir məsafəni aşağı sürüşdürün və güclü bulanıqlıq

Budur, eyni ideyanın başqa bir həyata keçirilməsi. Üç kölgə daha kiçik bir məsafəyə köçürülür və daha bulanıq olur.

Mətn-kölgə: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

Mark Dotto tərəfindən 3D mətn

Effekt MarkDotto.com saytında istifadə olunur. Əla 3D effekti yaratmaq üçün 12 müxtəlif kölgədən istifadə edir.

Mətn kölgəsi: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0) ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Gordon Hall tərəfindən qabartılmış mətn

Yuxarıdakı nümunədə diqqət yetirin, mən texnikamı “tez və çirkli” hərf effekti adlandırdım. Bunun səbəbi, daha inandırıcı olan ciddi şəkildə daxil edilmiş mətn yaratmaq üçün daha çox cəlbedici bir yol var.

Qordon yalnız xarici kölgəni deyil, həm də həqiqi daxili kölgəni çəkmək üçün ciddi CSS vudu istifadə edir. Texnikanın tam izahı üçün onun blog yazısına baxın.

fon rəngi: #666666; -webkit-background-clip:mətn; -moz-fon-klip:mətn; fon klipi:mətn; rəng: şəffaf mətn kölgəsi: rgba(255,255,255,0.5) 0px 3px 3px;

parıltı

Mətn-kölgə: 0px 0px 6px rgba(255,255,255,0.7);

Mətn-kölgə: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Çoxsaylı işıq mənbələri

Mətn-kölgə: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

Rəng: rgba(0,0,0,0,6); mətn kölgəsi: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

Nəticə

Əksər CSS effektləri kimi, kölgələri də həyata keçirmək çox asandır. Ancaq sadə hərəkətlərin birləşməsi heyrətamiz effektlərə səbəb ola bilər.

Səhifədəki blok səviyyəli elementin altındakı kölgə adətən üçölçülü effekt yaratmaq, elementə diqqət çəkmək və ya dizaynın bir hissəsi kimi istifadə olunur. Elementlərin altındakı kiçik bir kölgə də səhifənin həcmini və dərinliyini verir.

Kölgə əlavə etmək üçün altı dəyəri olan qutu-kölgə xassəsindən istifadə olunur, onlardan yalnız ikisi tələb olunur. Əncirdə. Şəkil 1-də bütün mümkün dəyərlərlə qutu-kölgə xassəsi göstərilir, onları müəyyən etmək üçün nömrələnir.

düyü. 1. Box-kölgə xassəsinin dəyərləri

  1. inset açar sözü elementin daxilində kölgə təyin edir;
  2. kölgənin üfüqi yerdəyişməsi (5px - sağa, -5px - sola);
  3. şaquli sürüşmə (5px - aşağı, -5px - yuxarı);
  4. kölgə bulanıqlığı radiusu (0 - kəskin kölgə);
  5. kölgə uzanması (5px - uzanır, -5px - daralır);
  6. kölgə rəngi.

Yalnız üfüqi və şaquli sürüşməni təyin etməyinizə əmin olun, bütün digər parametrlər standart olaraq qəbul ediləcəkdir. Bu halda, kölgə bulanıq və qara olmadan kəskin olacaq.

Fərqli parametrlərin və onların dəyərlərinin birləşmələri sayəsində çoxlu kölgə növləri əldə edilə bilər. Cədvəldə. 1 kodu və onun gətirdiyi nəticəni göstərir.

Tab. 1. Kölgə parametrlərinin birləşmələri
Kod Nəticə Təsvir
qutu kölgəsi: 5px 5px; Sağ və aşağı kəskin kölgə.
qutu-kölgə: -5px -5px; Solda və yuxarıda kəskin kölgə.
qutu-kölgə: 0 0 5px Element ətrafında bulanıq kölgə.
qutu-kölgə: 0 0 5px 2px; Kölgənin 2 piksel genişləndirilməsi.
qutu-kölgə: 0 0 5px 2px qırmızı; Element ətrafında qırmızı parıltı.
qutu-kölgə: 0,4em 0,4em 5px rgba(122,122,122,0,5); Şəffaf kölgə.
qutu-kölgə: daxil 0 0 6px; İçəridə kölgə.

Cədvəldən göründüyü kimi, kölgə sürüşməsinin piksellərlə göstərilməsinə ehtiyac yoxdur, baxmayaraq ki, bu rahatdır. Kölgənin rəngi istənilən mövcud formatda göstərilə bilər, məsələn, şəffaf bir kölgə əldə etmək üçün RGBA formatı uyğun gəlir, belə bir kölgə istənilən fonda yaxşı görünəcəkdir. Misal 1 bunun necə ediləcəyini göstərir.

Nümunə 1: Fon şəklinə kölgə

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Kölgə ilə bloklayın

Düşmənin bayraqları tam qaydasında olduqda onlara qarşı çıxmayın; düşmən keçilməz olduğu halda onun düşərgəsinə hücum etməmək; bu dəyişiklik idarəetməsidir.

Sun Tzu, trans. Nikolas Konrad

Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 2. Kölgə blokun künclərinin yuvarlaqlaşdırılmasını təkrarlayır.

düyü. 2. Fon təsvirindəki kölgənin görünüşü

"Geniş" kölgə əlavə edərkən nəzərə alın ki, o, görünən brauzer pəncərəsindən kənara çıxa bilər və bununla da üfüqi sürüşmə çubuğu ilə nəticələnə bilər.

Kölgə də psevdo elementlərə əlavə edilə bilər, bu bəzən mürəkkəb tərtibat üçün tələb olunur. Əncirdə. 3 kölgənin əlavə olunduğu başlığı olan bloku göstərir. Qovşaqda xətlərin olmaması üçün psevdoelementdən sonra ::after istifadə etməli və ona kölgə əlavə etməlisiniz.

düyü. 3. Kölgə ilə bloklayın

Misal 2 belə bir blokun yaradılmasını göstərir.

Misal 2. Kölgəli qutu

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Kölgə ilə bloklayın

başlıq

Məzmunu bloklayın

Elementin bir kölgəsi yox, eyni anda bir neçəsi ola bilər, onların parametrləri qutu-kölgə xassəsinin qiymətində vergüllə ayrılmış şəkildə verilmişdir. Misal 3 bütün şəkillərə ikiqat kölgənin necə əlavə olunacağını göstərir.

Misal 2. Kölgəli qutu

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Şəkil

Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 4.

düyü. 4. Qoşa kölgəli şəkil

Birinci kölgə şəklin solunda 20px bulanıqlıq radiusu ilə verilir, ölçüsü dördüncü parametr (-20px) ilə azaldılır. İkinci kölgənin parametrləri vergüldən sonra göstərilir, kölgə şəklin sağında göstərilir və simmetriya üçün də azaldılır.

Blok kölgəsi saytın bloklarına realizm və üçölçülülük verən əla 3D effektidir. Öyrənməyə başlayanda (təxminən 5-6 il əvvəl) varlıq haqqında heç bir fikrim yox idi və sayt yaradanda blokların kölgəsini şəkil etməli oldum. Çox əlverişsiz idi və həmişə istədiyimiz kimi alınmırdı. Veb dizaynerlərinin işini asanlaşdıran CSS-in gücü sayəsində. Bu gün sizə CSS-də qutu kölgəsi yaratmağı göstərəcəyəm.

CSS-də kölgə əlavə etmək üçün xassədən istifadə edin qutu kölgəsi .

1. kölgənin üfüqi yerdəyişməsi (100px-ə qədər sağa, -100px-ə qədər sola);
2. şaquli sürüşmə (100px aşağı, -100px-ə qədər);
3. kölgə bulanıqlığı (0 - aydın kölgə, 100 - güclü bulanıq kölgə);
4. kölgənin uzanması (100px-ə qədər - uzanma, -100px-ə qədər - sıxılma);
5. kölgə rəngi;
6. inset - elementin daxilində kölgə, daxil edilmədən kölgə kənarda olacaq.

CSS-də qutu kölgəsi

HTML dilini öyrənməyə başlayanda (təxminən 5-6 il əvvəl) CSS-nin varlığı haqqında heç bir fikrim yox idi və sayt yaradanda qutunun kölgəsini şəkilə çevirməli idim.

Nəticə :

Kölgələri olan cədvəl:

kod Misal:
qutu-kölgə: 0px 13px 17px -6px #000000;
qutu-kölgə: 10px -10px 0px -6px #000000;
qutu-kölgə: 10px 13px 0px -6px #000000;
qutu-kölgə: 1px 1px 32px -6px #000000;
qutu-kölgə: -1px 23px 41px -25px #000000;
qutu-kölgə: -1px 23px 41px -25px #4dc13c;
qutu-kölgə: -10px -10px 40px -6px #000000 daxil;
qutu-kölgə: 7px 10px 23px -8px #92a9e7;

Kölgənin köməyi ilə üç ölçülü blok yarada bilərsiniz:

Kod Misal
qutu-kölgə: 1px 0px rgb(220.195.35), 1px 1px rgb(192.167.7), 2px 1px rgb(219.194.34), 2px 2px rgb(191.166.6), 3px, 2px,81px, rgb9(331px) 3px rgb(190.165,5), 4px 3px rgb(217.192.32), 4px 4px rgb(189.164,4), 5px 4px rgb(216.191,31), 5px 5px rgb(188,163,rg515), 30), 6px 6px rgb(187,162,2) rgb(212,187,27), 9px 9px rgb(184,159,0);
qutu-kölgə: -1px 0px rgb(220.195.35), -1px 1px rgb(192.167.7), -2px 1px rgb(219.194.34), -2px 2px rgb(191.166,6), -3px 28, rgb13( ,33), -3px 3px rgb(190.165.5), -4px 3px rgb(217.192.32), -4px 4px rgb(189.164.4), -5px 4px rgb(216.191.31), -5px 588, rgb13 ,3), -6px 5px rgb(215.190.30), -6px 6px rgb(187.162,2), -7px 6px rgb(214.189,29), -7px 7px rgb(186.161,1), -8px 73,rgb1821 ,28), -8px 8px rgb(185.160.0), -9px 8px rgb(212.187.27), -9px 9px rgb(184.159,0);
qutu-kölgə: -1px -0px rgb(220.195.35), -1px -1px rgb(192.167.7), -2px -1px rgb(219.194.34), -2px -2px rgb(191.166.6), -3px -2px rgb(218.193.33), -3px -3px rgb(190.165.5), -4px -3px rgb(217.192.32), -4px -4px rgb(189.164.4), -5px -4px rgb(216.191, 31), -5px -5px rgb(188.163,3), -6px -5px rgb(215.190.30), -6px -6px rgb(187.162,2), -7px -6px rgb(214.189.29), -7px - 7px rgb(186.161,1), -8px -7px rgb(213.188.28), -8px -8px rgb(185.160.0), -9px -8px rgb(212.187.27), -9px -9px rgb(184.150, );
qutu-kölgə: 1px -0px rgb(220.195.35), 1px -1px rgb(192.167.7), 2px -1px rgb(219.194.34), 2px -2px rgb(191.166.6), 3px -21px rgb132 ,33), 3px -3px rgb(190.165.5), 4px -3px rgb(217.192.32), 4px -4px rgb(189.164.4), 5px -4px rgb(216.191.31), 5px -58px rgb61( ,3), 6px -5px rgb(215.190.30), 6px -6px rgb(187.162.2), 7px -6px rgb(214.189.29), 7px -7px rgb(186.161,1), 8px -73,rgb1821 ,28), 8px -8px rgb(185.160,0), 9px -8px rgb(212.187.27), 9px -9px rgb(184.159,0);

Blok1 (en: 70%; maksimum en: 550px; kənar: 10px avtomatik; doldurma: 1em; qutu-kölgə: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0) , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) daxil; )

Nəticə :

Blok1 (en: 30%; maksimum en: 550px; kənar: 2em avtomatik; doldurma: 1em; fon: #DADADA; qutu-kölgə: 6px 6px #BBBBBB, 12px 12px #919191; )

Nəticə :

Blok1 (en: 30%; kənar: 0 avtomatik; doldurma: 2em; qutu-kölgə: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px 0 -10px # FFFF00, -20px 0 0 -10px #FF3399; )

Nəticə :

Kölgənin köməyi ilə gözəl bir çərçivə edə bilərsiniz.

Əmlak ilə gözəl çərçivəQutu- kölgə

Blok1 (en: 20%; maksimum en: 250px; kənar: 0 avtomatik; doldurma: 1em; haşiyə: 2px kəsikli #999; qutu-kölgə: 0 0 0 1px #999, daxil 0 0 0 1px #999; )
Nəticə
:




Blok1 (en: 30%; maksimum en: 250px; kənar: 2em avtomatik; doldurma: 4em; fon: #dcc005; qutu-kölgə: 0 0 4em 4em #fff daxil; )
Nəticə
:




Blok1 ( maksimum en: 250px; kənar: 0 avtomatik; doldurma: 1em; haşiyə radiusu: 10px; fon: rgb(100.100.100) radial-qradiyent (0 0-da dairə, rgba(255.255.255,.65), rgba(255.255.255,.65), rgba55 .35)); qutu-kölgə: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px; )
Nəticə
:





 
 
 CSS-də qutu kölgəsi
 
 
 
 

 

 


vebsayt

 



 


Nəticə
:




Bunlar CSS kölgələri ilə əldə edə biləcəyiniz gözəl effektlərdir.  Yeni və orijinal bir şey tapın, hər şey sizin əlinizdədir.  Sizin bilik və imkanınız var. 
Və bu günlərin birində Photoshop istifadə etmədən necə yarada biləcəyiniz haqqında məqalə dərc edəcəyəm.  Beləliklə, hadisələrin mərkəzində olun və blog yeniləmələrimə abunə olun.  Sizi maraqlandıran mövzunu qaçırmayın.  Yaxşı, uğurlar!!!


Elementlərə kölgələr əlavə edə və onların görünüşünü box-shadow CSS xüsusiyyəti ilə dəyişə bilərsiniz.  Bu üslub üçölçülülük və üçölçülü blok kimi maraqlı effektləri həyata keçirməyə imkan verir.  Mülk bütün müasir brauzerlər tərəfindən dəstəklənir.  İstisnalar IE8 və Opera Minidir.


qutu-kölgə xüsusiyyəti: sintaksis


Bu üslub aşağıdakı kimi yazılır:
Qutu-kölgə: daxil 4px 4px 8px 5px #333333;
Hər bir parametrin nəyə görə cavabdeh olduğunu (soldan sağa) nəzərdən keçirin:


  • Açar söz daxil: isteğe bağlı olan parametr;  kölgə çəkir içəri element.
    • 

  • Shift X: Kölgənin elementə nisbətən üfüqi olaraq nə qədər uzaqlaşdığını müəyyən edir.  Müsbət dəyər sağa, mənfi qiymət sola sürüşmə deməkdir.  0 dəyəri kölgənin dəyişdirilmədiyini bildirir.
    • 

  • Y növbəsi: Kölgənin şaquli yerdəyişməsinin miqdarını göstərir.  Müsbət dəyər aşağı, mənfi qiymət isə yuxarı sürüşmə deməkdir.  0 dəyəri yerdəyişmə olmayan kölgədir.
    • 

  • Bulanıqlıq radiusu: Bu, kölgənin bulanmasının miqdarıdır.  Dəyər nə qədər böyükdürsə, kölgə bir o qədər bulanıqlaşır.  Parametr göstərilməyibsə, standart dəyər 0 istifadə olunur.  Bu vəziyyətdə kölgə mükəmməl aydın olacaq.
    • 

  • Uzatma: kölgənin hər iki ox boyunca uzanmasına cavabdeh olan isteğe bağlı parametr;  dəyər nə qədər böyükdürsə, uzanma da bir o qədər böyükdür.  Uzatma yalnız əvvəlki parametr mövcud olduqda işləyir.  Varsayılan dəyər 0-dır.
    • 

  • Kölgə rəngi: bu parametrlə hər şey aydındır - elementin kölgəsinin rəngini təyin edir.  Varsayılan rəng qaradır.
    • 

Qeyd. Android brauzerləri və iPhone Safari-nin köhnə versiyaları düzgün işləməsi üçün qutu-kölgə CSS xüsusiyyəti üçün -webkit- prefiksini tələb edir.


Bu xüsusiyyət bir neçə dəyər qrupunu qəbul edə bilər (eyni anda bir neçə kölgə yarada bilər).  Bunu etmək üçün, vergüllə ayrılmış bu parametr qruplarını sadalamalısınız.  Misal üçün:
Qutu kölgəsi: 15px 15px 20px #8b0163, daxil 15px 15px 20px #630046;
qutu-kölgə nümunələri


CSS qutu-kölgə xüsusiyyətinin gücünü və gözəlliyini daha yaxşı başa düşmək üçün sizə bəzi praktik nümunələr göstərəcəyik.  Bu əmlak adi bir bloku çox dəyişdirə bilər! 


yüngül kölgə
Qutu-kölgə: 0 2px 4px rgba(0, 0, 0, .25); 
kağız effekti
Qutu kölgəsi: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), daxil edin 0 0 40px rgba(0, 0, 0, .1); 

Çox qat
Qutu kölgəsi: 6px 6px #ccc, 12px 12px #a3a3a3; 

üçlü çərçivə
Qutu kölgəsi: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0.6), 0 0 0 21px rgba(118, 46, 177, 0.4); 

künclər
Qutu-kölgə: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385; 

Gördüyünüz kimi, qutu-kölgə xüsusiyyəti təxəyyül üçün böyük bir sahə təmin edir.  Blokları istədiyiniz kimi çevirə bilərsiniz - əsas odur ki, nisbət hissi olsun!  😉 


Növbəti fəsildə siz elementlərin ölçüsünü təyin edən en və hündürlük xassələrini araşdıracaqsınız.