CSS3-ün yaranmasından əvvəl, forma və ya düymələr kimi veb səhifə elementlərini əlavə etmək üçün, yuvarlaq künclər, bir sıra şəkillərdən və çoxlu əlavə işarələrdən istifadə etmək lazım idi. Xoşbəxtlikdən, indi yuvarlaqlaşdırılıb CSS küncləri yaratmağı çox asanlaşdırır. Bunu border-radius xassəsindən istifadə etməklə də etmək olar.
Bu CSS3 xassəsindən aşağıdakı brauzerlər üçün istifadə edə bilərsiniz:
- Chrome 6+;
- Firefox 4+;
- Safari 5+;
- IE9+;
- Opera 10.5+;
- Android 2.1+;
- iOS 3.1+.
Biz “info-box” sinfi ilə işləyəcəyik. Bu, veb səhifənizin sahəsi ola bilər Əlaqə məlumatı və onunla istəyirsən CSS istifadə edərək küncləri yuvarlaqlaşdırın.
Küncləri yuvarlaqlaşdırmaq istədiyiniz elementin HTML kodunu yazın:
Məlumat qutusu ( -webkit-border-radius: 20px; haşiyə-radius: 20px; fon rəngi: #000000; (
Qeydlər:
Biz əmlakın həm satıcı versiyasını, həm də adi versiyasını əlavə etdik. Biz də fon rəngi əlavə edirik. Çərçivənin künc radiusunun düzgün göstərilməsi üçün elementin fonu elementin yerləşdirildiyi sahənin fonundan fərqli olmalıdır. Əks halda haşiyə üslubları, eni və rəngi əlavə etməli olacaqsınız.
CSS-ni yuvarlaq künclər etməzdən əvvəl qeyd etmək lazımdır ki, verilən nümunədə çərçivənin bütün dörd küncü eyni radiusda (20px) olacaq.
Qeyri-bərabər açılarSiz həmçinin bir-birindən fərqli yuvarlaq küncləri olan panellər yarada bilərsiniz. Bu, üçün əlavə etməklə edilə bilər CSS xüsusiyyətləriçoxlu dəyərlər. CSS qısa yolları ilə siz onları bir sətirdə təyin edə bilərsiniz. Dəyərlərin təyin edilməsi qaydası belədir: yuxarı sol, yuxarı sağ, aşağı sağ, aşağı sol:
Məlumat qutusu ( -webkit-border-radius: 20px 60px 40px 30px; haşiyə radiusu: 20px 60px 40px 30px; fon rəngi: #000000; (
Bir dairəni necə yaratmaq olarBu xüsusiyyət ilə yarada biləcəyiniz digər effekt dairəvi şəkillərdir. Mükəmməl kvadrat formalı bir şəkliniz varsa, təsvirin künclərini yuvarlaqlaşdırmaq üçün CSS-dən istifadə edə bilərsiniz, sonra çərçivə şəklin kənarlarını "kəsəcək" və mükəmməl bir dairə yaradacaq.
Deyək ki, sizin HTML işarələmənizdə "bio-pic" sinfinə malik kvadrat şəkliniz var. Bu şəkli aşağıdakı CSS kodu ilə yuvarlaqlaşdıra bilərsiniz:
img.bio-pic ( -webkit-border-radius: 50%; sərhəd-radius: 50%; (
Bu halda, şəkilə bu üslubları əlavə etdiyiniz üçün fon rəngi və ya haşiyə rəngi təyin etməyə ehtiyac yoxdur, şəkil yerləşdirildiyi fonun rəngindən fərqli olacağı üçün dairəvi künc effekti işləyəcək.
“CSS3 Border Radius ilə dairəvi künclər” məqaləsinin tərcüməsi mehriban layihə komandası tərəfindən hazırlanmışdır.
Yaxşı Pis
Əvvəlki dərsdə element üçün haşiyəni necə təyin etməyi öyrəndik. Haşiyə rəngi və haşiyə üslubu kimi xassələrə də baxdıq, haşiyənin rəngini və üslubunu fərdiləşdirə bilərsiniz. Bununla belə, bütün çərçivələrimiz düzgün açılarla çıxdı. İndi biz sizə sərhədlər üçün CSS-də yuvarlaq künclərin necə yaradılacağını göstərəcəyik.
Küncləri necə yuvarlaqlaşdırmaq olar: CSS3 sərhəd-radius MülkiyyətiCSS-də künclərin yuvarlaqlaşdırılması HTML səhifəsində istənilən element üçün edilə bilər. Bunun üçün ona uyğun qiymətlə border-radius xassəsini tətbiq etmək lazımdır. Çox vaxt dəyər piksellərlə göstərilir, lakin em və ya faiz kimi digər vahidlərdən də istifadə edilə bilər (sonuncu halda hesablama blokun eninə nisbətən aparılır).
Effekt bu əmlakın yalnız üslubda olan element rəngli fon və/və ya haşiyəyə malik olduqda nəzərə çarpacaq. Misal üçün:
BorderElement (fon rəngi: #EEDDFF; haşiyə: 6px bərk #7922CC; haşiyə radiusu: 25px; )
Yuxarıda təsvir edilən üslub 200x200 piksel elementdə aşağıdakı nəticəni verəcək:
Siz həmçinin elementin yalnız yuxarı və ya aşağı küncləri üçün yuvarlaq kənarlar düzəldə bilərsiniz və ya hər küncə fərqli yuvarlaqlaşdırma radiusu verə bilərsiniz - təxəyyül üçün çoxlu yer! Misal:
BorderElement (fon rəngi: #EEDDFF; haşiyə: 6px bərk #7922CC; haşiyə radiusu: 25px; ) .borderElement1 ( fon rəngi: #FFE8DB; haşiyə: 6px bərk #FF5A00; haşiyə radiusu: 15px 100px 15px 100px;) 
Ancaq bu hamısı deyil: sadə yuvarlaq künclər əvəzinə elliptik yuvarlaqlaşdırma təyin edə bilərsiniz. Bunu etmək üçün, kəsiklə ayrılmış iki dəyər göstərməlisiniz (ellipsin üfüqi və şaquli yarım oxları üçün). 150x450 piksellik bloka misal verək:
BorderElement (fon rəngi: #EEDDFF; haşiyə: 6px bərk #7922CC; haşiyə radiusu: 280px/100px; ) 
Siz dəyərləri qarışdıra bilərsiniz (yəni eyni üslubda həm müntəzəm, həm də eliptik dairəvi istifadə edin) və müvafiq xüsusiyyətlərdən istifadə edərək hər künc üçün şəxsi üslub əlavə edə bilərsiniz:
- border-top-left-radius - yuxarı sol künc üçün;
- sərhəd-yuxarı-sağ-radius - yuxarı sağ künc üçün;
- border-bottom-left-radius - aşağı sol künc üçün;
- sərhəd-aşağı-sağ-radius - sağ alt künc üçün.
Aşağıdakı şəkil künc yuvarlaqlaşdırmasının CSS-də necə hesablandığını göstərir. Beləliklə, bucaq üçün tək bir dəyər göstərilibsə - məsələn, 20px - bu, yuvarlaqlaşdırmanın 20 piksel radiuslu bir dairə boyunca baş verəcəyini bildirir. İki dəyərin kəsik işarəsi ilə ayrıldığı halda, məsələn, 30px/20px , künclər ellips boyunca yuvarlaqlaşdırılacaq. Bu vəziyyətdə birinci dəyər ellipsin üfüqi yarımoxunun uzunluğu - 30px, ikinci dəyər isə şaquli yarımoxun uzunluğudur - 20px:
Əmlak CSS sərhəd radiusu hamı tərəfindən dəstəklənir müasir versiyaları brauzerlər.
Hər kəs veb-sayt dizaynında ənənəvi düzbucaqlı künclərdən çoxdan bezmişdir. Dairəvi künclər dəbdədir, şəkillərdən istifadə edilmir, lakin sərhəd radius xüsusiyyətindən istifadə edilən üslublar vasitəsilə hazırlanır. Bu əmlak bütün künclərin və ya hər birinin radiusunu müəyyən edən boşluqla ayrılmış bir, iki, üç və ya dörd dəyərə malik ola bilər.
Cədvəldə 1 verilir müxtəlif miqdarlar dəyərlər və bu halda əldə edilən blokun növü.
| div (sərhəd radiusu: 10px; ) | Bir anda bütün künclər üçün yuvarlaqlaşdırma radiusu. | |
| div (sərhəd radiusu: 0 10px; ) | Birinci dəyər yuxarı sol və aşağı sağ künclərin radiusunu, ikinci dəyər yuxarı sağ və aşağı sol künclərin radiusunu təyin edir. |  |
| div (sərhəd radiusu: 20px 10px 0; ) | Birinci dəyər yuxarı sol küncün radiusunu təyin edir, ikincisi - həm yuxarı sağ, həm də aşağı sol, üçüncü dəyər - aşağı sağ. |  |
| div (sərhəd radiusu: 20px 10px 5px 0; ) | Yuxarı sol, yuxarı sağ, aşağı sağ və aşağı sol künclərin radiusunu ardıcıl olaraq təyin edir. |  |
Misal 1, yuvarlaq küncləri olan bir blokun necə yaradılacağını göstərir.
Nümunə 1. Blokun küncləri
HTML5 CSS3 IE 9+ Cr Op Sa Fx
div radiusu (fon: #007E3E; /* Fon rəngi */ rəng: #fff; /* Mətn rəngi */ padding: 10px; /* Mətn ətrafındakı kənarlar */ sərhəd-radius: 5px; /* Künclər */ ) Me - i-dən ittiham halının tamamlayıcı forması.
Nəticə bu misalŞəkildə göstərilmişdir. 1.
düyü. 1. Dəyirmi küncləri olan blok
Yuvarlaqlaşdırma radiusunu elementin hündürlüyünün və eninin yarısından çox olaraq təyin etsəniz, maraqlı effekt əldə edilə bilər. Bu vəziyyətdə bir dairə alacaqsınız. Nümunə 2 şəkil ilə dəyirmi düymənin necə yaradılacağını göstərir.
Misal 2: Dairəvi düymə
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Düymə düyməsi ( fon: #f2f6f8; /* Fon rəngi */ haşiyə: 1px bərk #7a7b7e; /* Sərhəd seçimləri */ eni: 60px; /* Düymə eni */ hündürlük: 60px; /* Hündürlük */ sərhəd-radius: 30px) 
Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 2.
düyü. 2. Dairəvi düymə
IN Opera brauzeri haşiyə xassəsi vasitəsilə haşiyə göstərilməyibsə, fileto səhv tətbiq edilir.
Sərhəd-radius xüsusiyyəti digər xüsusiyyətlərlə birləşdirilə bilər, məsələn, elementə kölgə əlavə etmək. Misal 3-də dairələr dəsti hazırlanmışdır, onlardan biri qutu-kölgə istifadə edərək vurğulanır. Bu dəst səhifələr və ya fotoşəkillər arasında gəzmək üçün istifadə edilə bilər.
Misal 3. Parıltı
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Parıltı gövdəsi (fon: #608DA2; /* Veb səhifə fonu */ ) ul (siyahı üslubu: heç biri; /* Markerləri sil */ ) li ( ekran: inline-block; /* Inline blok elementi */ haşiyə: 2px bərk #fff; /* Kontur parametrləri */ margin-right: /* Right margin */ background: /* Width and height */ radius: 10px; */ ) li.active (fon: #b00; /* Qırmızı fon */ qutu-kölgə: 0 0 4px 2px #fff; /* Parıltı parametrləri */ )
Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 3.
düyü. 3. Dairə ətrafında parıldamaq
İLƏ sərhəd radiusundan istifadə etməklə Yalnız bir dairə deyil, həm də bir ellips, eləcə də bir blokda elliptik yuvarlaqlaşdırma edə bilərsiniz. Bunun üçün bir dəyər deyil, kəsik işarəsi ilə ayrılmış iki dəyər yazmaq lazımdır. 20px/10px yazmaq o deməkdir ki, filenin üfüqi radiusu 20 piksel, şaquli radius isə 10 piksel olacaq. Nümunə 4 fotoşəkilə komiks üslubunda başlıq əlavə etmək üçün elliptik künclərin necə yaradılacağını göstərir.
Misal 4: Ellipslər
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Elliptik künclər div ( mövqe: nisbi; ) span ( mövqe: mütləq; /* Mütləq yerləşdirmə*/ fon: rgba(255,255,255,0,9); /* Ağ şəffaf fon*/ ) .bulb1 ( en: 10px; hündürlük: 10px; /* En və hündürlük */ sol: 65px; yuxarı: 85px; /* Mövqe */ sərhəd-radius: 10px; /* Onu dairəyə çevirin */ ) .bulb2 ( en: 20px; hündürlük: 14px; /* En və hündürlük */ sol: 45px; yuxarı: 60px; /* Mövqe */ sərhəd-radius: 10px/6px; /* Ellipsə çevirmək */ ) .bulb3 ( sol: 10px; yuxarı: 15px; /* Mövqe */ padding: 5px 10px; sərhəd-radius: 60px/15px; /* Ellips yaratmaq */ ) Siz öz müəlliminizsiniz. 
Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 4.
düyü. 4. Elliptik künclərdən istifadə etməklə
Siz həmçinin, Misal 5-də göstərildiyi kimi img seçicisinə border-radius xassəsini əlavə etməklə şəkillərin künclərinin görünüşünü dəyişə bilərsiniz.
Misal 5: Şəkillər
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Şəkillərin gövdəsi (fon: #4b5457; ) img ( sərhəd radiusu: 10px; )
Hamısı müasir brauzerlər dəstək standartları hipermətn işarələnməsi HTML5 və CCS3 üslubu. Və saytınız (şablon) dəstəkləyirsə müasir standartlar, onda siz qrafik redaktorların köməyinə müraciət etmədən dizaynda yuvarlaqlaşdırma küncləri, kölgələr, gradient dolguları kimi dəyişikliklər edə bilərsiniz.
Veb ustaları ondan hər yerdə istifadə edirlər yuvarlaq künclər saytlarda bloklarda və çərçivələrdə. Bu yazıda sizə saytdakı şəkillərin və fotoşəkillərin künclərini istifadə etmədən necə yuvarlaqlaşdıracağınızı söyləyəcəyəm üçüncü tərəf proqramları, yalnız CSS istifadə edərək.
Məqalədə verilən nümunələrin ekranınızda düzgün şəkildə görünməsi üçün ən çox istifadə etməlisiniz son versiyalar brauzerlər, FireFox, Chrome və onların əsasında hazırlanmışlar: Yandex.Browser, Amigo və s.
DIV bloklarının künclərinin yuvarlaqlaşdırılmasıCSS3 standartına görə, DIV-in yuvarlaq künclərə sahib olması üçün onun üslubu olmalıdır sərhəd-radius məsələn, bu kimi:
Sərhəd radiusu: 10px;
Aydınlıq üçün düz və yuvarlaq küncləri olan iki blok çəkək:
Düz bucaqlı blok
Dairəvi küncləri olan blok
Şəkillərin künclərinin yuvarlaqlaşdırılmasıYuxarıdakı nümunəyə bənzətməklə, siz saytdakı şəkillərin künclərini yuvarlaqlaşdıra bilərsiniz, məsələn, fotoşəkillər. Aydınlıq üçün səhifədəki fotoşəkilin künclərini yuvarlaqlaşdıraq
Budur CSS emal edilmədən şəkil
İndi yuvarlaq künclərlə:
Sərhəd radiusu: 10px;
Onu həqiqətən "gözəl" etmək üçün əvvəldən bir az kənar əlavə edək...
Sərhəd radiusu: 10px; haşiyə: 5px #ccc bərk;
və sonra kölgələr:
Sərhəd radiusu: 10px; haşiyə: 5px #ccc bərk; qutu-kölgə: 0 0 10px #444;
Aşağıdakı seçim (sərhədsiz kölgə ilə yuvarlaq künclər) siçan padinə çox bənzəyir:
Sərhəd radiusu: 10px; qutu-kölgə: 0 0 10px #444;
Və nəhayət, təsvirin tam istehzasıdır
Sərhəd radiusu: 50%; haşiyə: 5px #cfc bərk; qutu-kölgə: 0 0 10px #444;
Şəkli yeni pəncərədə açsanız, görəcəksiniz ki, o (şəkil) dəyişməzdir və bütün künclər, kölgələr və s. sadəcə işlənmənin nəticəsidir. CSS brauzerinizin üslubları.
Kiçik bir lirik təxribatStil sərhəd təsvir ölçüsünü haşiyənin miqdarı ilə artırır. Dəyər göstərilibsə haşiyə: 5px, sonra yekun şəkil 10 piksel daha geniş və hündür olacaq. Bunu nəzərə alın, bəzi hallarda saytın tərtibatı işləməyə bilər.
Bir üslub qutu kölgəsişəklin ölçüsünə təsir etmir, kölgə üzərində hərəkət edir qonşu elementlər. Onu istifadə edərkən saytın tərtibatı əziyyət çəkmir.
WordPress-də şəkillərin künclərini necə yuvarlaqlaşdırmaq olarYuxarıdakı bütün nümunələrdə üslubları birbaşa etiketlərə yazdım html kodu. Məsələn, sonuncu belə görünür:
Bir şəkil və ya fotoşəkili yenidən təşkil etmək lazım olduqda bu yaxşıdır. Hər şeyi dəyişdirmək istəsən nə olacaq? Yaxşı, hər birinin ekranını redaktə etmək üçün saytınızın hər tərəfinə qalxmayacaqsınız. Əksər hallarda WordPress etiketi IMG bir neçə üslub sinfini müəyyən edir. Biri şəkil faylının unikal adı ilə, digəri ölçüsü ilə, digəri isə hizalama ilə. Onlardan birini yuxarıda göstərilən parametrlərlə tamamlaya bilərsiniz.
Məsələn, faylda düzülmə göstərilməyən bütün şəkillər üçün style.css sizin WordPress mövzuları aşağıdakıları yazın:
Alignnone ( haşiyə radiusu: 10px; haşiyə: 5px #cfc bərk; qutu-kölgə: 0 0 10px #444; )
Ya ən çox çətin üsul saytda şəkli olan hər kəs üçün. Bütün teqlər üçün üslubu yenidən təyin edək IMG:
Img ( haşiyə radiusu: 10px; haşiyə: 5px #cfc bərk; qutu-kölgə: 0 0 10px #444; )
Son seçim yalnız WordPress üçün deyil, istənilən CMS üçün uyğundur. Və hətta sadə üçün HTML səhifələr, şəkilləri göstərərkən etiket olduqda IMG heç bir üslub dərsləri təyin edilmir. Amma diqqətli olun. Əgər etiketin göstərilməsi seçimlərini ləğv etsəniz IMG dəyişəcəksən görünüş Saytdakı bütün şəkillər!
Nəticə əvəzinəMəqalədəki bütün nümunələr şərtidir və yalnız bəzilərini nümayiş etdirmək üçün nəzərdə tutulub CSS xüsusiyyətləri təsvirin işlənməsi haqqında və bunun nə qədər asan olduğunu göstərin.
Bayram yaxınlaşır - Beynəlxalq Qadınlar Günü. Gəlin buna əvvəlcədən hazırlaşaq. Aşağıda müzakirə olunan kartpostal xidmətlərindən istifadə edərək, qızları və qadınları orijinal şəkildə təbrik edə bilərsiniz.
8 Mart üçün onlayn açıqca yaradın Faydalanmaq aşağıdakı xidmətlər demək olar ki, sıfırdan bir kart yaratmaq.
Ümid edirəm ki, bu generatorlardan birini istifadə etməklə siz xanımlarınızı 8 Mart münasibəti ilə layiqincə təbrik edə biləcəksiniz!
Məqalənin məzmunu:
Google Plus Google Plus platforması tərtibatçıların ümidlərini doğrultmadı və 2 aprel 2019-cu ildə tamamilə silinəcək. Onunla əlaqəli albomlar da yox olacaq. Google Foto, çevriləcək əlçatmaz icazələr Google Plus hesabı olan saytlarda. Artıq fevralın 4-də oldu mövcud olmayan funksiya Google Plus profillərinin, kanallarının və səhifələrinin yaradılması. Əgər dəyərli məzmun hesabınızda saxlanılıbsa, onda siz yükləyə bilərsiniz ehtiyat surəti.Dəyişikliklər ən çox Blogspot-da bloqlarını idarə edən bloggerlərə təsir edəcək. Bəzi G+ vidjetləri, G+ şərhləri və Google profili+. Bu barədə Blogger admin sahəsində bildirişdə deyilir:
İşin dayandırılması elan edildikdən sonra Google API 2019-cu ilin martına planlaşdırılan +, fevralın 4-də Blogger-in Google+ ilə inteqrasiyasında bir sıra dəyişikliklər ediləcək.
Google+ Vidjetləri. Bloq dizaynları daha +1 Düyməsi, Google+ İzləyiciləri və Google+ Nişanı vidjetlərini dəstəkləməyəcək. Bu vidcetlərin bütün nümunələri bloqunuzdan silinəcək.
+1 düymələri. +1 və G+ düymələri, bloq yazılarının altında və naviqasiya panelində "Google+-da dərc et" linkləri silinəcək.
İstifadə etsəniz nəzərə alın fərdi şablon, olan Google xüsusiyyətləri+, onu dəyişdirmək lazım ola bilər. Tövsiyələr üçün bu şablonu sizə təqdim edən şəxslə əlaqə saxlayın.
Google+ Şərhlər. Şərh dəstəyi dayandırılacaq Google istifadə edərək+ və bu funksiyadan istifadə edən bütün bloqlar üçün bərpa olunacaq standart şərhlər Blogger. Təəssüf ki, Google+ vasitəsilə yerləşdirilən şərhlər Bloggerə köçürülə bilməz, ona görə də onlar daha bloqunuzda görünməyəcək. Silinmə Google şərhləri Plus Təəssüf ki, sistemdə dərc edilmiş şərhlər həmişəlik silinəcək. Yalnız eyni alətdən istifadə edə bilərsiniz https://takeout.google.com Google+-dan kompüterinizə ehtiyat şərhlər demək. Yalnız bunun üçün heç bir yükləyici yoxdur və şərhləri yalnız əyri şəkildə əl ilə bərpa edə bilərsiniz. Nə yaxşı ki, vaxtında vaxtında olmuşam. Google Plus profilini Blogger profili ilə necə əvəz etmək olar. Əgər siz Blogspot-da bloq yazırsınızsa, onda indi Google Plus profilindən Blogger profilinə qayıtmağınız məsləhətdir (dəyişənlər üçün). bir anda Google Plus-a). Bunun qarşısını almaq üçün indi bunu etməyi məsləhət görürəm gözlənilməz vəziyyətlər silərkən baş verə bilər Google hesablarıÜstəlik. Blogger profilinizi necə geri qaytarmaq olar. Bunu Blogger admin parametrlərində etmək asandır:
Parametrlər -> Fərdi Parametrlər–> İstifadəçi Profili – burada Blogger seçin
Dəyişikliklərinizi yadda saxlayın.
Keçidi təsdiqləyin və adınızı və ya ləqəbinizi daxil edin.
Blogger profilinizə avatar yükləməyi unutmayın.
Google Plus profilini necə silmək olar Əgər siz G+ profilinizdən birdəfəlik xilas olmaq qərarına gəlsəniz, o zaman Google Plus səhifənizə keçin -> Parametrlər -> səhifənin aşağısına keçin -> Google Plus hesabını silin:
Bu gün sizə CSS3-ün nə olduğunu, nə ilə istifadə olunduğunu, onu harada axtarmaq lazım olduğunu və necə düzgün yazacağını söyləyəcəyəm. Sizi xəbərdar edirəm, mən özümdən izah edəcəyəm, geniş ictimaiyyət üçün sadələşdirilmiş, gördüyüm kimi + nümunələr. Beləliklə, uzaqdan başlayaq.
CSS, obyektin xüsusiyyətlərinin yazıldığı üslublardır. Beləliklə, onlar hər kəsdə var mövcud mühərriklər, onları tapa bilmirsinizsə, ya səhv yerdə axtarırsınız, ya da həqiqətən yoxdur ( əyri sayt). Onlar adətən harada tapılır? Adətən bu, saytın kökü, style.css faylının adıdır, baxmayaraq ki, bu cür uzantılı fayl stil faylıdırsa, prinsipcə, ad .css uzantısı qədər vacib deyil.
Mənim bloqumda da baxın.
