CSS3 nədir? Bu, CSS versiyalarından biri olan və bir çox yeniliklərlə gələn CSS3 versiyası haqqında məlumatları ehtiva edir. CSS-nin nə olduğunu soruşsanız, o, Cascading Style Sheets-in baş hərflərindən gəlir. Onun dilimizdəki qarşılığı Cascading Style Template – Cascading Style Template deməkdir. CSS müxtəlif üslubları (rəng, şrift, şrift ölçüsü, haşiyə kimi) müəyyən etməklə HTML teqlərinin necə görünəcəyini müəyyən etməyə imkan verir. CSS-nin Kaskad adlandırılmasının səbəbi, HTML teqinə addım-addım daxil olmaqdır. Misal üçün; CSS ilə (****) bölməsində (****) abzas üçün üslub müəyyən etmək üçün siz **div >** **p** və ya **div p** sintaksisi ilə abzasa daxil ola bilərsiniz və üslub tətbiq olunur. CSS-in ən mühüm üstünlüklərindən biri odur ki, o, HTML teqləri üçün üslubları bir fayldan müəyyən etməyə imkan verir. CSS-dən əvvəl teq xüsusiyyətləri və əlavə HTML teqləri (**, **** və s.) olan hər bir teq üçün məhdud üslublar müəyyən edilmişdir. İnkişaf edən veb texnologiyaları ilə CSS versiyaları ortaya çıxmışdır. CSS 1, CSS 2, CSS 2.1 və son versiya CSS3 istifadə olunmaqdadır. CSS3-ün yaranmasının səbəbi smartfonlardan istifadənin və saytların daha dinamikləşməsidir. Saytları dinamik etmək üçün müxtəlif JavaScript kitabxanaları və plaginlərdən istifadə edilmişdir. Ancaq bu həllər çox vaxt çox çətin və asan olmayan müvəqqəti həllər idi. Bundan əlavə, mobil cihazların inkişafı ilə ekran həllərinin genişlənməsi və ekran ölçüsünə görə cavab verən dizayn ehtiyacı kimi səbəblərdən CSS3 versiyası ortaya çıxdı. CSS3 əvvəlki CSS versiyalarının xüsusiyyətlərini dəstəkləyir və yeni funksiyalar təklif edir. ### **CSS3 ilə gələn yeniliklər** ### **1. border-radius aərhəd yuvarlaqlaşdırma** JavaScript kitabxanaları və plaginləri ilə həyata keçirilən kənarın yuvarlaqlaşdırılması və oval kənarın işlənməsi border-radius xüsusiyyəti ilə birlikdə gəlmişdir. https://codepen.io/yusufsefasezer/pen/LbXqpa **QEYD: border-radius** xassəsi _border-top-left-radius_, border-top-right-radius, border-bottom-right-radius və border-left-right xüsusiyyətlərinin qısaltmasıdır. ### **border-radius istifadəsi** border-radius xassəsinə qiymət verilirsə; Eyni dəyər bütün dörd küncə tətbiq olunur `border-radius: 20px;` İki dəyər verilirsə; birinci dəyər yuxarı sol və aşağı sağ küncdədir; ikinci dəyər yuxarı sağ və aşağı sol küncə tətbiq olunur `border-radius: 20px 10px 30px;` Dörd dəyər verilirsə; Yuxarı sol, yuxarı sağ, aşağı sağ və aşağı sol künclərə tətbiq olunur. `border-radius: 10px 20px 30px 40px;` ### **Oval kənarların düzəldilməsi** Kənarları oval etmək üçün biz bunu border-radius xassəsinə irəli əyilmə (/) və oval qiymət verməklə edə bilərik. Bu xüsusiyyətdən istifadə edərək şəkilləri oval da edə bilərik. `border-radius: 20px/50%;` Yalnız faiz dəyəri verməklə istifadə edilə bilər. `border-radius: 50%;` https://codepen.io/yusufsefasezer/pen/WoYPKd ### **2. border-image Sərhəd Şəkilləri** CSS3 ilə gələn yeniliklərdən biri, sərhəd verdiyimiz HTML elementlərinin ətrafına şəkillər əlavə etmək üçün istifadə edilən **border-image** xüsusiyyətidir. CSS3 sərhəd-image xassəsi HTML ətrafında standart sərhədlər əvəzinə təsviri təyin etməyə imkan verir. Xüsusiyyət üç hissədən ibarətdir: 1. Haşiyə kimi istifadə etmək üçün şəkil 2. Şəkli kəsmək üçün harada 3. Orta hissəni təkrarlamaq və ya genişləndirmək seçimi [URL=https://i.imgur.com/aBNRCCF.jpeg][IMG]https://i.imgur.com/aBNRCCF.jpeg[/IMG][/URL] border-image xüsusiyyəti şəkil çəkir və onu doqquz hissəyə bölür. Sonra küncləri künclərə daxil edir və orta hissələr sizin təyin etdiyiniz kimi təkrarlanır və ya genişləndirilir. **Qeyd:** border-image funksiyasının işləməsi üçün sərhəd xassəsindən də istifadə edilməlidir. Təsviri yaratdıqdan və lazımi dəyərləri verdikdən sonra orta hissənin təkrarını və genişlənməsini təyin etmək üçün border-image-repeat xassəsinə stretch, repeat, round dəyərlərindən birini verə bilərik. ### **border-image nümunələri** https://codepen.io/team/css-tricks/pen/rVdEdp https://codepen.io/team/css-tricks/pen/LVdXdM https://codepen.io/team/css-tricks/pen/jPzQxB https://codepen.io/team/css-tricks/pen/Kporom ### **3. box-shadow** Sadə kölgə vermək üçün **box-shadow** xüsusiyyətində üfüqi kölgə (5px) və şaquli kölgə (10px) ölçüsünü təyin edə bilərik. ``` div { box-shadow: 5px 10px; } ``` Yaratdığımız kölgəni rəngləyə bilərik. ``` div { box-shadow: 5px 10px grey; } ``` Yaratdığımız və rənglədiyimiz kölgəni bulandıra bilərsiniz. ``` div { box-shadow: 5px 10px 5px grey; } ``` Birdən çox kölgə əlavə etmək üçün hər kölgə xüsusiyyətini vergüllə ayırmaq kifayətdir. ``` div { box-shadow: 10px 5px 3px silver, -10px -10px 3px grey; } ``` Təcrübə edərək müxtəlif kölgə effektləri verə bilərsiniz. ### **4. box-sizing qutu ölçüləndirmə** Varsayılan olaraq, HTML elementlərinin eni və hündürlüyü aşağıdakı kimi hesablanır. width + padding + border = HTML elementinin eni height + padding + border = HTML elementinin hündürlüyü Elementin enini və hündürlüyünü təyin etdikdə, element tez-tez göstərdiyinizdən daha böyük görünür. (çünki hündürlüyə və enə haşiyə (border) və doldurma (padding) əlavə olunur) ``` div1 div2 ``` ``` .div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; } ``` Yuxarıdakı iki **** elementi müxtəlif ölçülərə malik olacaq. (daxili boşluq div2 elementinə əlavə edildiyi üçün) Biz bu problemi en və hündürlükdən daxili məkanı və sərhəd dəyərlərini çıxarmaqla həll edirdik. CSS3 **box-sizing** funksiyası ilə biz indi qutunun hesablanmasını müəyyən edə bilərik. ``` .div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; } ``` ### **5. column Mətni bölm'** CSS3 column-* xassələri mətni qəzet və jurnallarda olduğu kimi bir neçə sütuna bölməyə imkan verən funksiyaları əhatə edir. - column-count - column-gap - column-rule-style - column-rule-width - column-rule-color - column-rule - column-span - column-width ### **Mətnin sütunlara bölünməsi** **column-count** xüsusiyyəti mətni sütunlara bölmək üçün istifadə olunur. ``` div { column-count: 3; } ``` ### **Sütunlar arasında boşluq buraxmaq** Sütunlar arasındakı boşluq **column-gap** ilə müəyyən edilir. ``` div { column-count: 3; column-gap: 40px; } ``` Sütunlara sərhədlər vermək Sütunlara sərhədlərin verilməsi CSS **border** xassəsi ilə eyni xüsusiyyətə malikdir. **column-rule-style** ilə sütunlar arasında haşiyə üslubunu təyin edirik. ``` div { column-count: 3; column-gap: 40px; column-rule-style: solid; } ``` **column-rule-width** sütunlar arasında sərhəd üslubunun enini təyin edə bilərik. ``` div { column-count: 3; column-gap: 40px; column-rule-style: solid; column-rule-width: 1px; } ``` **column-rule-color** ilə sütunlar arasında sərhəd üslubunun rəngini təyin edə bilərik. ``` div { column-count: 3; column-gap: 40px; column-rule-style: solid; column-rule-width: 1px; column-rule-color: gray; } ``` Bütün sərhəd xüsusiyyətlərini column-rule ilə bir sətirdə təyin edə bilərik. ``` div { column-count: 3; column-gap: 40px; column-rule: 1px solid gray; } ``` ### **Sütunlara başlıqların verilməsi** Sütunlara başlıq vermək istəyə bilərik. Lakin verdiyimiz başlıqlara uyğun olaraq sütunlara bölünəcək. Başlıqların sütunlara bölünməsinin qarşısını almaq üçün biz **column-span** xassəsindən istifadə edə bilərik. ``` h1 { column-span: all; } ``` ### **Sütun genişliyini təyin edilməsi** Mətni sütunlara bölməyin digər üsulu, **column-width** ilə sütun enini təyin etməkdir. ``` div { column-width: 100px; } ``` ### **6. text-shadow Mətnə kölgə əlavə etmək** Sadə kölgə vermək üçün text-shadow xüsusiyyətində üfüqi kölgə (2px) və şaquli kölgə (3px) ölçüsünü təyin edə bilərik. ``` h1 { text-shadow: 2px 3px; } ``` Yaratdığımız kölgəni rəngləyə bilərik. ``` h1 { text-shadow: 2px 3px red; } ``` Yaratdığımız və rənglədiyimiz kölgəni bulandıra bilərsiniz. ``` h1 { text-shadow: 2px 3px 5px red; } ``` Birdən çox kölgə əlavə etmək üçün hər kölgə xüsusiyyətini vergüllə ayırmaq kifayətdir. ``` h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } ``` Təcrübə edərək mətnə effektlər əlavə edə bilərsiniz. ### **7. opacity Şəffaflıq** CSS3 **opacity** xüsusiyyəti 0.0 ilə 1.0 arasında dəyərlər alır. ``` div { opacity: 0.5; } ``` CSS3 **opacity** xüsusiyyəti daha çox şəkillərdə istifadə olunur. ``` img { opacity: 0.5; } ``` ### **opacity effekti tətbiq etm'k** Şəkillərə şəffaflıq verdikdən sonra üzərinə sürüşdürüldükdə şəffaflığı aradan qaldıraraq gözəl effekt əldə edə bilərik. ``` img { opacity: 0.5; } img:hover { opacity: 1.0; } ``` ### **8. resize Yenidən ölçüləndirmə** CSS3 resize xüsusiyyəti HTML elementlərinin ölçüsünü dəyişməyə imkan verir. ``` p { border: 2px solid; padding: 20px; width: 300px; resize: horizontal; overflow: auto; } ``` Aşağıdakı nümunə istifadəçiyə yalnız **** elementinin hündürlüyünü dəyişməyə imkan verir. ``` p { border: 2px solid; padding: 20px; width: 300px; resize: vertical; overflow: auto; } ``` Aşağıdakı nümunə istifadəçiyə yalnız **** elementinin hündürlüyünü və enini dəyişməyə imkan verir. ``` p { border: 2px solid; padding: 20px; width: 300px; resize: both; overflow: auto; } ``` ### **9. transform Çevrilmələr** CSS3 transform xüsusiyyətinin dəyərindən asılı olaraq, biz çevirilmələri ikiyə bölmək olar: 2D transformasiya və 3D transformasiya. ### **2D Transformasiyalar** - translate() - rotate() - scale() - skewX() - skewY() - matrix() Bütün üsulları başa düşülən etmək üçün onları aşağıdakı strukturda sınamağı məsləhət görürəm. ``` div { width: 200px; height: 200px; background-color: yellow; border: 1px solid black; } ``` ### **translate** translate üsulu tətbiq olunan elementi qəbul etdiyi qiymətə uyğun olaraq cari vəziyyətindən başqa mövqeyə keçirmək üçün istifadə olunur (X oxu, Y oxu). ``` div { -ms-transform: translate(50px, 100px); -webkit-transform: translate(50px, 100px); transform: translate(50px, 100px); } ``` **QEYD:** X və Y dəyərlərinə mənfi qiymətlər (-50px, -100px) verə bilərik. ### **rotate** rotate metodu tətbiq olunan elementi saat əqrəbi istiqamətində və ya saat əqrəbinin əksinə fırladır. ``` div { -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg); } ``` **QEYD:** Qarşısına mənfi (-) işarəsi əlavə etməklə dəyəri saat əqrəbinin əksinə çevirə bilərik. **QEYD 2:** Biz fırlanma üçün dərəcə (deg) vahidindən, həmçinin gradient (grad), radian (rad) və dönmə (turn) vahidlərindən istifadə edə bilərik. ### **scale** Tətbiq olunan elementin ölçüsünü dəyişdirmək (kiçiltmək, böyütmək) üçün scale metodundan istifadə olunur. ``` div { -ms-transform: scale(2, 3); -webkit-transform: scale(2, 3); transform: scale(2, 3); } ``` **QEYD:** Elementi kiçik etmək üçün dəyərin qarşısına mənfi (-) əlavə edə bilərik. **QEYD 2:** Mülkiyyətə iki dəyər və ya tək dəyər verə bilərik. **QEYD 3:** Biz nöqtə ilə xüsusiyyətə kəsr dəyəri verə bilərik. ### **skewX** skewX metodu tətbiq olunan elementi X oxunda əymək (sağ, sola) üçün istifadə olunur. ``` div { -ms-transform: skewX(30deg); -webkit-transform: skewX(30deg); transform: skewX(30deg); } ``` **QEYD:** Dəyərin önünə mənfi (-) əlavə etsək, elementi əks istiqamətdə əymək olar. ### **skewY** skewY metodu tətbiq olunan elementi Y oxunda əymək (yuxarı, aşağı) üçün istifadə olunur. ``` div { -ms-transform: skewY(30deg); -webkit-transform: skewY(30deg); transform: skewY(30deg); } ``` **QEYD:** Dəyərin önünə mənfi (-) əlavə etsək, elementi əks istiqamətdə əymək olar. ### **skew** Tətbiq olunan elementi X və Y oxunda əymək (sağa, sola, yuxarıya, aşağıya) skew üsulundan istifadə olunur. ``` div { -ms-transform: skew(20deg, 30deg); -webkit-transform: skew(20deg, 30deg); transform: skew(20deg, 30deg); } ``` **QEYD:** Dəyərlərin qarşısına mənfi (-) əlavə etsək, elementi əks istiqamətə əymək olar. ### **matrix** matrix metodu 2D çevrilmələri (məsələn, miqyaslı, fırlanan, hərəkət edən, əyilməklə) bir üsulda tətbiq etmək üçün istifadə olunur. Parametr sırası aşağıdakı kimidir. matrix(scaleX, skewY, skewX, scaleY, translateX, translateY) ``` div { -ms-transform: matrix(1, -0.5, 0, 1, 0, 0); -webkit-transform: matrix(1, -0.5, 0, 1, 0, 0); transform: matrix(1, -0.5, 0, 1, 0, 0); } ``` **QEYD:** Digər üsullarda olduğu kimi, qiymətlərin qarşısına mənfi (-) əlavə etsək, elementi əks istiqamətə əymək olar. ### **Çoxsaylı transformasiyaların tətbiqi** Bəzən HTML elementinə birdən çox transformasiya metodu tətbiq etmək istəyə bilərik. Çox çevrilmələri tətbiq etmək üçün matrix metodundan istifadə edə bilərik. Bununla belə, matrix metodu çox mürəkkəb görünə bilər. Başqa bir üsul əlavə etdiyimiz çevrilmələr arasında boşluq qoyaraq, çoxlu transformasiyaları tətbiq etməkdir. ``` div { -ms-transform: translate(50px, 100px) rotate(20deg) scale(2, 3) skewX(30deg) skewY(30deg); -webkit-transform: translate(50px, 100px) rotate(20deg) scale(2, 3) skewX(30deg) skewY(30deg); transform: translate(50px, 100px) rotate(20deg) scale(2, 3) skewX(30deg) skewY(30deg); } ``` 2D çevrilmələr tək istifadə edildikdə lazımsız hiss edə bilər. İstifadə sahələrini daha yaxşı başa düşmək üçün aşağıdakı nümunələri sınamağı tövsiyə edirəm. ``` div:hover { -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg); } ``` ``` div:hover { -ms-transform: scale(2); -webkit-transform: scale(2); transform: scale(2); } ``` CSS3 **transition** xüsusiyyəti ilə istifadə edildikdə daha effektiv nəticələr verəcəkdir. ``` div { width: 200px; height: 200px; background-color: yellow; border: 1px solid black; transition: all 3s; } ``` Üst strukturda, sadəcə **transition: all3s;** əlavə edilmişdir. ``` div:hover { -ms-transform: scale(2); -webkit-transform: scale(2); transform: scale(2); } ``` Fərqli dəyərlər verməklə təsirli nəticələr əldə edə bilərsiniz. ### **3D Transformasiyalar** - rotateX() - rotateY() - rotateZ() Bütün üsulları başa düşülən etmək üçün onları aşağıdakı strukturda sınamağı məsləhət görürəm. ``` div { width: 200px; height: 200px; background-color: yellow; border: 1px solid black; } ``` ### **rotateX** Tətbiq olunan elementi X oxu ətrafında döndərmək üçün **rotateX** metodundan istifadə edilir. ``` div { -webkit-transform: rotateX(50deg); transform: rotateX(50deg); } ``` ### **rotateY** **rotateY** metodu tətbiq olunan elementi Y oxu ətrafında fırlatmaq üçün istifadə olunur. ``` div { -webkit-transform: rotateY(80deg); transform: rotateY(80deg); } ``` rotateZ Tətbiq olunan elementi Z oxu ətrafında (saat əqrəbi istiqamətində) döndərmək üçün **rotateZ** metodundan istifadə olunur. 2D çevrilmələrdə rotate() metodu ilə eyni şeyi edir. ``` div { -webkit-transform: rotateZ(70deg); transform: rotateZ(70deg); } ``` **QEYD:** Qarşısına mənfi (-) işarəsi əlavə etməklə dəyəri saat əqrəbinin əksinə çevirə bilərik. CSS3 transform 3D transformasiya ilə hazırladığım nümunə aşağıdadır. https://codepen.io/yusufsefasezer/pen/RKRMMm ### **10. font-face Xüsusi Font İstifadəsi** Axtarış sistemlərində şrift, şrift yükləmə və s. axtararaq sadalanan saytlardan bəyəndiyimiz şrifti endirin. Şriftlər əsasən **.tff** uzantısı ilə gəlir. Əksər brauzerlər **.tff** formatını dəstəkləsə də, bəzi brauzerlər bunu dəstəkləmir; Onlar həmçinin böyük ölçüdə ola bilər. Buna görə də onu W3C tərəfindən dəstəklənən format olan **.woff** formatına çevirməliyik. Şriftin çevrilməsi prosesini [Font Face Generator](https://http://www.fontsquirrel.com/fontface/generator) ilə edirik. İstifadə etmək istədiyimiz şrifti quraşdırdıqdan və istifadəsini təsdiqlədikdən sonra CSS kodları ilə tərcümə edilmiş versiyasını yükləyə bilərsiniz. CSS **font-face istifadəsi** aşağıdakı kimidir. ``` @font-face { font-family: 'Benim Fontum'; src: url('benimfontum.woff'); } ``` **QEYD:** Şriftdə birdən çox söz varsa, onu dırnaq içərisində qeyd etməyi və şrift faylının adını kiçik hərflərlə yazmağı unutmayın! Xüsusi şriftdən sayt boyu istifadə etmək üçün **body** teqinin **font-family** xüsusiyyətində müəyyən etdiyimiz şriftin adını yazmaq kifayət edəcək. ``` body { font-family: 'Mənim Şriftim'; } ``` İstədiyimiz bəzi bölmələrdə istifadə edəcəyiksə, həmin bölmənin etiketinin **font-family** xüsusiyyətinə müəyyən etdiyimiz şriftin adını yazmaq kifayət edər. ``` .ustbolum { font-family: 'Mənim Şriftim'; } ``` Veb səhifələrdə xüsusi şriftlərdən istifadə etmək gözəl görünsə də, çox fərqli şriftlərdən istifadə saytın yavaş açılmasına səbəb olacaq. ### **11. blend-mode Fon Qarışığı** CSS3 **background-blend-mode** rejimi birdən çox fonu qarışdırmaq üçün istifadə olunur. CSS3 **mix-blend-mode** rejimi səhifədəki HTML elementlərini (paraqraf, haşiyə və s.) səhifənin fonu ilə qarışdırmaq üçün istifadə olunur. ### **background-blend-mode istifadəsi** **background-blend-mode** rejimi funksiyasından istifadə etmək üçün HTML elementinə birdən çox fon əlavə etməliyik. ``` body { background: blue url("http://unsplash.it/1499/1000"); } ``` Biz bu funksiyanı təkcə səhifənin fonunda deyil, həm də istənilən HTML elementinin fonunda tətbiq edə bilərik. ``` p { background: blue url("https://unsplash.it/458/354"); } ``` Lazım olanları etdik, indi **background-blend-mode** rejimindən istifadə etməyə keçək. ``` body { background: blue url("https://unsplash.it/458/354"); background-blend-mode: multiply; } ``` Burada mavi rəngi şəkillə qarışdırdım. İstəsəniz, birdən çox şəkli də aşağıdakı kimi qarışdıra bilərsiniz. ``` body { background: url("http://unsplash.it/1499/1000"), url("https://unsplash.it/458/354"); background-blend-mode: multiply; } ``` Başqa bir nümunə; ``` body { background: url("http://unsplash.it/1000"), url("http://unsplash.it/1499/1000"); background-blend-mode: exclusion; } ``` [Burada](http://bennettfeely.com/image-effects/) müxtəlif blend-mode tətbiqlərinə də baxa bilərsiniz. ### **mix-blend-mode istifadəsi** **mix-blend-mode** rejimi xassəsi **background-blend-mode** rejimi xassəsinə bənzəyir. Fərq ondadır ki, mix-blend-mode funksiyası heç bir fon tələb etmir və bütün HTML elementlərinə tətbiq edilir. ``` body { background: url("http://unsplash.it/1000"); text-align: center; } p { font-size: 300%; color: white; mix-blend-mode: exclusion; } ``` **mix-blend-mode nümunəsi** https://codepen.io/team/css-tricks/pen/ogrMQx **Müxtəlif mix-blend-mode nümunələri** https://codepen.io/team/css-tricks/pen/ZYdjmZ Fərqli dəyərləri sınamaqla fərqli nəticələr əldə edə bilərsiniz.

@"Schwarz"#p493 məncə də 🤭

@"Schwarz"#p654 mövzu hardan açım a 2 gündü axtarıram :D

@"RaMo"#p666 ! sağ üstdə qələmə sıx)

CSS3 nədir? Gələn yeniliklər

Mr_iLQaR

CSS3 nədir?
Bu, CSS versiyalarından biri olan və bir çox yeniliklərlə gələn CSS3 versiyası haqqında məlumatları ehtiva edir.

CSS-nin nə olduğunu soruşsanız, o, Cascading Style Sheets-in baş hərflərindən gəlir.

Onun dilimizdəki qarşılığı Cascading Style Template – Cascading Style Template deməkdir.

CSS müxtəlif üslubları (rəng, şrift, şrift ölçüsü, haşiyə kimi) müəyyən etməklə HTML teqlərinin necə görünəcəyini müəyyən etməyə imkan verir.

CSS-nin Kaskad adlandırılmasının səbəbi, HTML teqinə addım-addım daxil olmaqdır.

Misal üçün; CSS ilə (<div>) bölməsində (<p>) abzas üçün üslub müəyyən etmək üçün siz div > p və ya div p sintaksisi ilə abzasa daxil ola bilərsiniz və üslub tətbiq olunur.

CSS-in ən mühüm üstünlüklərindən biri odur ki, o, HTML teqləri üçün üslubları bir fayldan müəyyən etməyə imkan verir.

CSS-dən əvvəl teq xüsusiyyətləri və əlavə HTML teqləri (<font>, <center> və s.) olan hər bir teq üçün məhdud üslublar müəyyən edilmişdir.

İnkişaf edən veb texnologiyaları ilə CSS versiyaları ortaya çıxmışdır.

CSS 1, CSS 2, CSS 2.1 və son versiya CSS3 istifadə olunmaqdadır.

CSS3-ün yaranmasının səbəbi smartfonlardan istifadənin və saytların daha dinamikləşməsidir.

Saytları dinamik etmək üçün müxtəlif JavaScript kitabxanaları və plaginlərdən istifadə edilmişdir.

Ancaq bu həllər çox vaxt çox çətin və asan olmayan müvəqqəti həllər idi.

Bundan əlavə, mobil cihazların inkişafı ilə ekran həllərinin genişlənməsi və ekran ölçüsünə görə cavab verən dizayn ehtiyacı kimi səbəblərdən CSS3 versiyası ortaya çıxdı.

CSS3 əvvəlki CSS versiyalarının xüsusiyyətlərini dəstəkləyir və yeni funksiyalar təklif edir.

CSS3 ilə gələn yeniliklər

1. border-radius aərhəd yuvarlaqlaşdırma

JavaScript kitabxanaları və plaginləri ilə həyata keçirilən kənarın yuvarlaqlaşdırılması və oval kənarın işlənməsi border-radius xüsusiyyəti ilə birlikdə gəlmişdir.

QEYD: border-radius xassəsi border-top-left-radius, border-top-right-radius, border-bottom-right-radius və border-left-right xüsusiyyətlərinin qısaltmasıdır.

border-radius istifadəsi

border-radius xassəsinə qiymət verilirsə; Eyni dəyər bütün dörd küncə tətbiq olunur
border-radius: 20px;
İki dəyər verilirsə; birinci dəyər yuxarı sol və aşağı sağ küncdədir; ikinci dəyər yuxarı sağ və aşağı sol küncə tətbiq olunur
border-radius: 20px 10px 30px;
Dörd dəyər verilirsə; Yuxarı sol, yuxarı sağ, aşağı sağ və aşağı sol künclərə tətbiq olunur.
border-radius: 10px 20px 30px 40px;

Oval kənarların düzəldilməsi

Kənarları oval etmək üçün biz bunu border-radius xassəsinə irəli əyilmə (/) və oval qiymət verməklə edə bilərik.

Bu xüsusiyyətdən istifadə edərək şəkilləri oval da edə bilərik.
border-radius: 20px/50%;
Yalnız faiz dəyəri verməklə istifadə edilə bilər.
border-radius: 50%;

2. border-image Sərhəd Şəkilləri

CSS3 ilə gələn yeniliklərdən biri, sərhəd verdiyimiz HTML elementlərinin ətrafına şəkillər əlavə etmək üçün istifadə edilən border-image xüsusiyyətidir.

CSS3 sərhəd-image xassəsi HTML ətrafında standart sərhədlər əvəzinə təsviri təyin etməyə imkan verir.

Xüsusiyyət üç hissədən ibarətdir:

Haşiyə kimi istifadə etmək üçün şəkil
Şəkli kəsmək üçün harada
Orta hissəni təkrarlamaq və ya genişləndirmək seçimi

border-image xüsusiyyəti şəkil çəkir və onu doqquz hissəyə bölür.

Sonra küncləri künclərə daxil edir və orta hissələr sizin təyin etdiyiniz kimi təkrarlanır və ya genişləndirilir.

Qeyd: border-image funksiyasının işləməsi üçün sərhəd xassəsindən də istifadə edilməlidir.

Təsviri yaratdıqdan və lazımi dəyərləri verdikdən sonra orta hissənin təkrarını və genişlənməsini təyin etmək üçün border-image-repeat xassəsinə stretch, repeat, round dəyərlərindən birini verə bilərik.

border-image nümunələri

https://codepen.io/team/css-tricks/pen/rVdEdp

https://codepen.io/team/css-tricks/pen/LVdXdM

https://codepen.io/team/css-tricks/pen/jPzQxB

https://codepen.io/team/css-tricks/pen/Kporom

3. box-shadow

Sadə kölgə vermək üçün box-shadow xüsusiyyətində üfüqi kölgə (5px) və şaquli kölgə (10px) ölçüsünü təyin edə bilərik.

div {
    box-shadow: 5px 10px;
}

Yaratdığımız kölgəni rəngləyə bilərik.

div {
    box-shadow: 5px 10px grey;
}

Yaratdığımız və rənglədiyimiz kölgəni bulandıra bilərsiniz.

div {
    box-shadow: 5px 10px 5px grey;
}

Birdən çox kölgə əlavə etmək üçün hər kölgə xüsusiyyətini vergüllə ayırmaq kifayətdir.

div {
    box-shadow: 10px 5px 3px silver, -10px -10px 3px grey;
}

Təcrübə edərək müxtəlif kölgə effektləri verə bilərsiniz.

4. box-sizing qutu ölçüləndirmə

Varsayılan olaraq, HTML elementlərinin eni və hündürlüyü aşağıdakı kimi hesablanır.

width + padding + border = HTML elementinin eni

height + padding + border = HTML elementinin hündürlüyü

Elementin enini və hündürlüyünü təyin etdikdə, element tez-tez göstərdiyinizdən daha böyük görünür. (çünki hündürlüyə və enə haşiyə (border) və doldurma (padding) əlavə olunur)

<div class="div1">div1</div>
<div class="div2">div2</div>

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
}

Yuxarıdakı iki <div> elementi müxtəlif ölçülərə malik olacaq. (daxili boşluq div2 elementinə əlavə edildiyi üçün)

Biz bu problemi en və hündürlükdən daxili məkanı və sərhəd dəyərlərini çıxarmaqla həll edirdik.

CSS3 box-sizing funksiyası ilə biz indi qutunun hesablanmasını müəyyən edə bilərik.

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

5. column Mətni bölm’

CSS3 column-* xassələri mətni qəzet və jurnallarda olduğu kimi bir neçə sütuna bölməyə imkan verən funksiyaları əhatə edir.

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

Mətnin sütunlara bölünməsi

column-count xüsusiyyəti mətni sütunlara bölmək üçün istifadə olunur.

div {
    column-count: 3;
}

Sütunlar arasında boşluq buraxmaq

Sütunlar arasındakı boşluq column-gap ilə müəyyən edilir.

div {
    column-count: 3;
    column-gap: 40px;
}

Sütunlara sərhədlər vermək
Sütunlara sərhədlərin verilməsi CSS border xassəsi ilə eyni xüsusiyyətə malikdir.

column-rule-style ilə sütunlar arasında haşiyə üslubunu təyin edirik.

div {
    column-count: 3;
    column-gap: 40px;
    column-rule-style: solid;
}

column-rule-width sütunlar arasında sərhəd üslubunun enini təyin edə bilərik.

div {
    column-count: 3;
    column-gap: 40px;
    column-rule-style: solid;
    column-rule-width: 1px;
}

column-rule-color ilə sütunlar arasında sərhəd üslubunun rəngini təyin edə bilərik.

div {
    column-count: 3;
    column-gap: 40px;
    column-rule-style: solid;
    column-rule-width: 1px;
    column-rule-color: gray;
}

Bütün sərhəd xüsusiyyətlərini column-rule ilə bir sətirdə təyin edə bilərik.

div {
    column-count: 3;
    column-gap: 40px;
    column-rule: 1px solid gray;
}

Sütunlara başlıqların verilməsi

Sütunlara başlıq vermək istəyə bilərik. Lakin verdiyimiz başlıqlara uyğun olaraq sütunlara bölünəcək.

Başlıqların sütunlara bölünməsinin qarşısını almaq üçün biz column-span xassəsindən istifadə edə bilərik.

h1 {
    column-span: all;
}

Sütun genişliyini təyin edilməsi

Mətni sütunlara bölməyin digər üsulu, column-width ilə sütun enini təyin etməkdir.

div {
    column-width: 100px;
}

6. text-shadow Mətnə kölgə əlavə etmək

Sadə kölgə vermək üçün text-shadow xüsusiyyətində üfüqi kölgə (2px) və şaquli kölgə (3px) ölçüsünü təyin edə bilərik.

h1 {
    text-shadow: 2px 3px;
}

Yaratdığımız kölgəni rəngləyə bilərik.

h1 {
    text-shadow: 2px 3px red;
}

Yaratdığımız və rənglədiyimiz kölgəni bulandıra bilərsiniz.

h1 {
    text-shadow: 2px 3px 5px red;
}

Birdən çox kölgə əlavə etmək üçün hər kölgə xüsusiyyətini vergüllə ayırmaq kifayətdir.

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Təcrübə edərək mətnə effektlər əlavə edə bilərsiniz.

7. opacity Şəffaflıq

CSS3 opacity xüsusiyyəti 0.0 ilə 1.0 arasında dəyərlər alır.

div {
    opacity: 0.5;
}

CSS3 opacity xüsusiyyəti daha çox şəkillərdə istifadə olunur.

img {
    opacity: 0.5;
}

opacity effekti tətbiq etm’k

Şəkillərə şəffaflıq verdikdən sonra üzərinə sürüşdürüldükdə şəffaflığı aradan qaldıraraq gözəl effekt əldə edə bilərik.

img {
    opacity: 0.5;
}

img:hover {
    opacity: 1.0;
}

8. resize Yenidən ölçüləndirmə

CSS3 resize xüsusiyyəti HTML elementlərinin ölçüsünü dəyişməyə imkan verir.

p {
    border: 2px solid;
    padding: 20px; 
    width: 300px;
    resize: horizontal;
    overflow: auto;
}

Aşağıdakı nümunə istifadəçiyə yalnız <p> elementinin hündürlüyünü dəyişməyə imkan verir.

p {
    border: 2px solid;
    padding: 20px; 
    width: 300px;
    resize: vertical;
    overflow: auto;
}

Aşağıdakı nümunə istifadəçiyə yalnız <p> elementinin hündürlüyünü və enini dəyişməyə imkan verir.

p {
    border: 2px solid;
    padding: 20px; 
    width: 300px;
    resize: both;
    overflow: auto;
}

9. transform Çevrilmələr

CSS3 transform xüsusiyyətinin dəyərindən asılı olaraq, biz çevirilmələri ikiyə bölmək olar: 2D transformasiya və 3D transformasiya.

2D Transformasiyalar

translate()
rotate()
scale()
skewX()
skewY()

matrix()
Bütün üsulları başa düşülən etmək üçün onları aşağıdakı strukturda sınamağı məsləhət görürəm.

div {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 1px solid black;
}

translate

translate üsulu tətbiq olunan elementi qəbul etdiyi qiymətə uyğun olaraq cari vəziyyətindən başqa mövqeyə keçirmək üçün istifadə olunur (X oxu, Y oxu).

div {
    -ms-transform: translate(50px, 100px);
    -webkit-transform: translate(50px, 100px);
    transform: translate(50px, 100px);
}

QEYD: X və Y dəyərlərinə mənfi qiymətlər (-50px, -100px) verə bilərik.

rotate

rotate metodu tətbiq olunan elementi saat əqrəbi istiqamətində və ya saat əqrəbinin əksinə fırladır.

div {
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}

QEYD: Qarşısına mənfi (-) işarəsi əlavə etməklə dəyəri saat əqrəbinin əksinə çevirə bilərik.

QEYD 2: Biz fırlanma üçün dərəcə (deg) vahidindən, həmçinin gradient (grad), radian (rad) və dönmə (turn) vahidlərindən istifadə edə bilərik.

scale

Tətbiq olunan elementin ölçüsünü dəyişdirmək (kiçiltmək, böyütmək) üçün scale metodundan istifadə olunur.

div {
    -ms-transform: scale(2, 3);
    -webkit-transform: scale(2, 3);
    transform: scale(2, 3);
}

QEYD: Elementi kiçik etmək üçün dəyərin qarşısına mənfi (-) əlavə edə bilərik.

QEYD 2: Mülkiyyətə iki dəyər və ya tək dəyər verə bilərik.

QEYD 3: Biz nöqtə ilə xüsusiyyətə kəsr dəyəri verə bilərik.

skewX

skewX metodu tətbiq olunan elementi X oxunda əymək (sağ, sola) üçün istifadə olunur.

div {
    -ms-transform: skewX(30deg);
    -webkit-transform: skewX(30deg);
    transform: skewX(30deg);
}

QEYD: Dəyərin önünə mənfi (-) əlavə etsək, elementi əks istiqamətdə əymək olar.

skewY

skewY metodu tətbiq olunan elementi Y oxunda əymək (yuxarı, aşağı) üçün istifadə olunur.

div {
    -ms-transform: skewY(30deg);
    -webkit-transform: skewY(30deg);
    transform: skewY(30deg);
}

QEYD: Dəyərin önünə mənfi (-) əlavə etsək, elementi əks istiqamətdə əymək olar.

skew

Tətbiq olunan elementi X və Y oxunda əymək (sağa, sola, yuxarıya, aşağıya) skew üsulundan istifadə olunur.

div {
    -ms-transform: skew(20deg, 30deg);
    -webkit-transform: skew(20deg, 30deg);
    transform: skew(20deg, 30deg);
}

QEYD: Dəyərlərin qarşısına mənfi (-) əlavə etsək, elementi əks istiqamətə əymək olar.

matrix

matrix metodu 2D çevrilmələri (məsələn, miqyaslı, fırlanan, hərəkət edən, əyilməklə) bir üsulda tətbiq etmək üçün istifadə olunur.

Parametr sırası aşağıdakı kimidir.

matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)

div {
    -ms-transform: matrix(1, -0.5, 0, 1, 0, 0);
    -webkit-transform: matrix(1, -0.5, 0, 1, 0, 0);
    transform: matrix(1, -0.5, 0, 1, 0, 0);
}

QEYD: Digər üsullarda olduğu kimi, qiymətlərin qarşısına mənfi (-) əlavə etsək, elementi əks istiqamətə əymək olar.

Çoxsaylı transformasiyaların tətbiqi

Bəzən HTML elementinə birdən çox transformasiya metodu tətbiq etmək istəyə bilərik.
Çox çevrilmələri tətbiq etmək üçün matrix metodundan istifadə edə bilərik.
Bununla belə, matrix metodu çox mürəkkəb görünə bilər.
Başqa bir üsul əlavə etdiyimiz çevrilmələr arasında boşluq qoyaraq, çoxlu transformasiyaları tətbiq etməkdir.

div {
    -ms-transform: translate(50px, 100px) rotate(20deg) scale(2, 3) skewX(30deg) skewY(30deg);
    -webkit-transform: translate(50px, 100px) rotate(20deg) scale(2, 3) skewX(30deg) skewY(30deg);
    transform: translate(50px, 100px) rotate(20deg) scale(2, 3) skewX(30deg) skewY(30deg);
}

2D çevrilmələr tək istifadə edildikdə lazımsız hiss edə bilər.
İstifadə sahələrini daha yaxşı başa düşmək üçün aşağıdakı nümunələri sınamağı tövsiyə edirəm.

div:hover {
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}

div:hover {
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
}

CSS3 transition xüsusiyyəti ilə istifadə edildikdə daha effektiv nəticələr verəcəkdir.

div {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 1px solid black;
    transition: all 3s;
}

Üst strukturda, sadəcə transition: all3s; əlavə edilmişdir.

div:hover {
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
}

Fərqli dəyərlər verməklə təsirli nəticələr əldə edə bilərsiniz.

3D Transformasiyalar

rotateX()
rotateY()
rotateZ()

Bütün üsulları başa düşülən etmək üçün onları aşağıdakı strukturda sınamağı məsləhət görürəm.

div {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 1px solid black;
}

rotateX

Tətbiq olunan elementi X oxu ətrafında döndərmək üçün rotateX metodundan istifadə edilir.

div {
    -webkit-transform: rotateX(50deg);
    transform: rotateX(50deg);
}

rotateY

rotateY metodu tətbiq olunan elementi Y oxu ətrafında fırlatmaq üçün istifadə olunur.

div {
    -webkit-transform: rotateY(80deg);
    transform: rotateY(80deg);
}

rotateZ
Tətbiq olunan elementi Z oxu ətrafında (saat əqrəbi istiqamətində) döndərmək üçün rotateZ metodundan istifadə olunur.

2D çevrilmələrdə rotate() metodu ilə eyni şeyi edir.

div {
    -webkit-transform: rotateZ(70deg);
    transform: rotateZ(70deg);
}

QEYD: Qarşısına mənfi (-) işarəsi əlavə etməklə dəyəri saat əqrəbinin əksinə çevirə bilərik.

CSS3 transform 3D transformasiya ilə hazırladığım nümunə aşağıdadır.

10. font-face Xüsusi Font İstifadəsi

Axtarış sistemlərində şrift, şrift yükləmə və s. axtararaq sadalanan saytlardan bəyəndiyimiz şrifti endirin.

Şriftlər əsasən .tff uzantısı ilə gəlir.

Əksər brauzerlər .tff formatını dəstəkləsə də, bəzi brauzerlər bunu dəstəkləmir; Onlar həmçinin böyük ölçüdə ola bilər.

Buna görə də onu W3C tərəfindən dəstəklənən format olan .woff formatına çevirməliyik.

Şriftin çevrilməsi prosesini Font Face Generator ilə edirik.

İstifadə etmək istədiyimiz şrifti quraşdırdıqdan və istifadəsini təsdiqlədikdən sonra CSS kodları ilə tərcümə edilmiş versiyasını yükləyə bilərsiniz.

CSS font-face istifadəsi aşağıdakı kimidir.

@font-face {
    font-family: 'Benim Fontum';
    src: url('benimfontum.woff');
}

QEYD: Şriftdə birdən çox söz varsa, onu dırnaq içərisində qeyd etməyi və şrift faylının adını kiçik hərflərlə yazmağı unutmayın!

Xüsusi şriftdən sayt boyu istifadə etmək üçün body teqinin font-family xüsusiyyətində müəyyən etdiyimiz şriftin adını yazmaq kifayət edəcək.

body {
    font-family: 'Mənim Şriftim';
}

İstədiyimiz bəzi bölmələrdə istifadə edəcəyiksə, həmin bölmənin etiketinin font-family xüsusiyyətinə müəyyən etdiyimiz şriftin adını yazmaq kifayət edər.

.ustbolum {
    font-family: 'Mənim Şriftim';
}

Veb səhifələrdə xüsusi şriftlərdən istifadə etmək gözəl görünsə də, çox fərqli şriftlərdən istifadə saytın yavaş açılmasına səbəb olacaq.

11. blend-mode Fon Qarışığı

CSS3 background-blend-mode rejimi birdən çox fonu qarışdırmaq üçün istifadə olunur.

CSS3 mix-blend-mode rejimi səhifədəki HTML elementlərini (paraqraf, haşiyə və s.) səhifənin fonu ilə qarışdırmaq üçün istifadə olunur.

background-blend-mode istifadəsi

background-blend-mode rejimi funksiyasından istifadə etmək üçün HTML elementinə birdən çox fon əlavə etməliyik.

body {
    background: blue url("http://unsplash.it/1499/1000");
}

Biz bu funksiyanı təkcə səhifənin fonunda deyil, həm də istənilən HTML elementinin fonunda tətbiq edə bilərik.

p {
    background: blue url("https://unsplash.it/458/354");
}

Lazım olanları etdik, indi background-blend-mode rejimindən istifadə etməyə keçək.

body {
    background: blue url("https://unsplash.it/458/354");
    background-blend-mode: multiply;
}

Burada mavi rəngi şəkillə qarışdırdım.
İstəsəniz, birdən çox şəkli də aşağıdakı kimi qarışdıra bilərsiniz.

body {
    background: url("http://unsplash.it/1499/1000"), url("https://unsplash.it/458/354");
    background-blend-mode: multiply;
}

Başqa bir nümunə;

body {
    background: url("http://unsplash.it/1000"), url("http://unsplash.it/1499/1000");
    background-blend-mode: exclusion;
}

Burada müxtəlif blend-mode tətbiqlərinə də baxa bilərsiniz.

mix-blend-mode istifadəsi

mix-blend-mode rejimi xassəsi background-blend-mode rejimi xassəsinə bənzəyir.

Fərq ondadır ki, mix-blend-mode funksiyası heç bir fon tələb etmir və bütün HTML elementlərinə tətbiq edilir.

body {
    background: url("http://unsplash.it/1000");
    text-align: center;
}
p {
    font-size: 300%;
    color: white;
    mix-blend-mode: exclusion;
}

mix-blend-mode nümunəsi
https://codepen.io/team/css-tricks/pen/ogrMQx

Müxtəlif mix-blend-mode nümunələri
https://codepen.io/team/css-tricks/pen/ZYdjmZ
Fərqli dəyərləri sınamaqla fərqli nəticələr əldə edə bilərsiniz.

Schwarz

Bu mövzunu oxuduqdan sonra öyrənməmək ayıb olar , Əllərinə və keyboard-una sağlıq )))

mmirzaagha

Schwarz məncə də 🤭

RaMo

Mövzunuzu bəyəndim ama sizi heç həzm edə bilmirəm 🙁

Schwarz

RaMo Əziz və hörmətli(siz) Ramin bəy üzərindən 1 bakal ayran içərsiniz.

RaMo

Schwarz mövzu hardan açım a 2 gündü axtarıram 😃

Schwarz

RaMo ! sağ üstdə qələmə sıx)