CSS border-radius (Blob) generatoru
Üfüqi və şaquli künc radiuslarını dəyişin — 8 dəyərli mürəkkəb border-radius sintaksisi ilə canlı üzvi («blob») fiqurlar əldə edin.
.blob {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
background: linear-gradient(135deg, #6366f1, #a855f7);
}Necə istifadə etmək olar
- Hazır nümunələrdən birini seçin (damla, üzvi ləkə, kapsul, yumurta, parlaq daş) və ya sürüşdürücüləri hərəkət etdirin.
- Künclərin üfüqi (sol/sağ) və şaquli (yuxarı/aşağı) faiz nisbətlərini dəyişərək unikal qeyri-simmetrik forma qurun.
- «Canlı dalğalanma» (Morphing animation) rejimini yandıraraq formanın rəvan dalğalanmasını sınayın.
- Blokun ölçüsünü, qradiyent rəngini seçin və hazır CSS kodunu kopyalayın.
Bu necə işləyir
8 dəyərli border-radius və bölmə işarəsi (/)
Çoxları border-radius: 16px yazılışına bələddir. Lakin CSS hər künc üçün həm üfüqi, həm də şaquli radius təyin etməyə imkan verir. Onlar aralarında «/» işarəsi ilə ayrılır: əvvəl 4 üfüqi radius, sonra isə 4 şaquli radius yazılır: sol-üst sağ-üst sağ-alt sol-alt / sol-üst sağ-üst sağ-alt sol-alt.
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;Üzvi «Blob» effektinin sirri
Əgər qarşıdurma tərəflərin radiuslarının cəmi 100%-ə bərabərdirsə və ya ona yaxındırsa, blok tam simmetrik dairə yerinə təbii, maye damlası və ya dəniz daşı kimi elastik formaya çevrilir. Bu üslub müasir veb-saytlarda fotoşəkillərin fonunda və ya brend elementlərində geniş istifadə olunur.
Dəyirmi künclərin CSS animasiyası
border-radius CSS transition və @keyframes vasitəsilə 60 kadr/saniyə sürətlə çox rəvan animasiya olunur. İki və ya dörd fərqli blob forması arasında keçid quraraq arxa planda «nəfəs alan» canlı vektor effekti almaq mümkündür.
@keyframes morph {
0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}Tez-tez verilən suallar
Künclərin ardıcıllığı necədir?
Saat əqrəbi istiqamətində gedir: sol-yuxarı, sağ-yuxarı, sağ-aşağı, sol-aşağı. Bölmə xəttindən sonra həmin 4 küncün şaquli radiusları eyni ardıcıllıqla gəlir.
Bölmə xətti (/) niyə lazımdır?
Bölmə xətti olmadan yazılan dörd rəqəm sadəcə hər küncün həm X, həm Y oxu üçün eyni radius verir. Bölmə xətti küncün dairə deyil, ellips şəklində kəsilməsini təmin edir.
Bütün brauzerlər 8 dəyərli radiusu dəstəkləyirmi?
Bəli, bu sintaksis CSS Backgrounds and Borders Modulunun rəsmi standartıdır və artıq 10 ildən çoxdur ki, bütün brauzerlərdə tam dəstəklənir.
