CSS3 Dersleri 2 border-radius Kenar Yuvarlama – BilgeBank
Anasayfa / DERSLER / Web Tasarım Dersleri / HTML - CSS Dersleri / CSS3 Dersleri 2 border-radius Kenar Yuvarlama

CSS3 Dersleri 2 border-radius Kenar Yuvarlama

CSS3 ile birlikte gelen border-radius özelliğimiz, HTML etiketlerinin kenarlarını yuvarlamak, oval yapmak için kullanılır. Web tasarımda artık bu özellik sıklıkla kullanılıyor, Daha önceleri bu özelliği javascript kütüphanesi ve eklentileriyle kenar yuvarlama işlemleri yapılıyordu.  Artık CSS3 ile gelen border-radius özelliğini kullanmamız yeterli oluyor.

Hemen örneğimize geçerek uygulamalı şekilde border-radius özelliğimizi inceleyelim.


Kodların Ön İzlemesine Buradan Bakabilirsiniz

CSS3 border-radius Örnek 1

border-radius: 25px; border-radius özelliğine Extra Bir değer verilmiş ise, dört köşeye de aynı değer uygulanır.

 

CSS3 border-radius Örnek 2

border-radius: 0px 50px 0px 50px; 
border-radius özelliğine dört değer verilmiş ise sırasıyla

1. Değer: sol üst

2. Değer: sağ üst

3. Değer: sağ alt

4. Değer: sol alt köşe değerleri olarak belirlenir.

 

CSS3 border-radius Örnek 3

border-top-right-radius: 50px;
border-bottom-left-radius: 50px;

border-radius özelliğini sade alan değerini vererek de tanımlayabiliriz.

border-top-left-radius : Sol Üst

border-top-right-radius : Sağ Üst

border-bottom-right-radius : Sağ Alt

border-bottom-left-radius : Sol Alt

 

CSS3 border-radius Örnek 4

border-radius özelliğini resimlerin kenarlarını oval yapmakta da kullanabiliriz.

background: url(“http://www.bilgebank.com/wp-content/uploads/2017/02/bayrak.png”) no-repeat; Resim yolunu belirledik.

border-radius: 50%;  %50 özelliğini kullanarak tam ovallik sağladık.

padding: 0px; resmimizi sıfırlıyoruz.

width: 400px; resmimizin genişlik boyutunu belirtiyoruz.

height: 400px; resmimizin yükseklik boyutunu belirtiyoruz.

Hakkında BilgeBank

İlgili Makale

CSS3 Dersleri 4 box-shadow Kutuları Gölgelendirme

CSS3 ile birlikte gelen ve kutuya gölge verme için kullanılan box-shadow özelliği ve kullanımı ile ilgili bilgi vermeye çalışacağım. Hemen …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi:
%d blogcu bunu beğendi: