-
Üyelik
26.02.2012
-
Yaş/Cinsiyet
34 / E
-
Meslek
PHP Developer
-
Konum
İzmir
-
Ad Soyad
G** B**
-
Mesajlar
40
-
Beğeniler
1 / 15
-
Ticaret
2, (%100)
Merhabalar,
Photoshop'ta grafik hazırlamakla uğraşmak yerine güncel web tarayıcıların desteğinden faydalanın. border-radius özelliği ile kenarları dilediğiniz piksel boyutunda yuvarlayın.
Direk img etiketi için:
img {
border-radius: 10px;
}
Resmi 10 piksel yuvarladık. Şimdi ise Opera ve Mozilla'nın eski sürümleri için destek kodlarını yazalım.
img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Üst sol ve sağ alt kısımları yuvarlayalım:
img {
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
İstediğiniz kenarı aşağıda ki kodlarla yuvarlayabilirsiniz.
Sol üst: border-top-left-radius
Sol alt: border-bottom-left-radius
Sağ üst: border-top-right-radius
Sağ alt: border-bottom-right-radius
İnternet Explorer 8 ve öncesi için destek yoktur.
3 kişi bu mesajı beğendi.
Poyraz
Sms Onayı Gerekli
Banlı Kullanıcı
-
Üyelik
23.10.2011
-
Yaş/Cinsiyet
30 / E
-
Meslek
Öğrenci
-
Konum
Zonguldak
-
Ad Soyad
** **
-
Mesajlar
1047
-
Beğeniler
4 / 168
-
Ticaret
1, (%100)
Artık Google Chrome'da -webkit- kullanmadan çıkmıyor.. Güzel açıklama olmuş, başarılar..
Kenar
Web & Mobil Arayüz
Kullanıcı
-
Üyelik
18.07.2011
-
Yaş/Cinsiyet
30 / E
-
Meslek
UI/UX Designer
-
Konum
Mersin
-
Ad Soyad
E** K**
-
Mesajlar
718
-
Beğeniler
203 / 160
-
Ticaret
12, (%92)
Artık sadece border-radius yeterli oluyor.
Ayrıca sol üst, sağ alt vs vs için ayrı ayrı tanımlama yapmamıza gerek yok.
img{
border-radius: 10px 5px 10px 5px;
}
şeklinde yaptığımızda zaten sırasıyla; sol üst, sağ üst, sağ alt, sol alt şeklinde tanımlamış oluyoruz.
-
Üyelik
26.02.2012
-
Yaş/Cinsiyet
34 / E
-
Meslek
PHP Developer
-
Konum
İzmir
-
Ad Soyad
G** B**
-
Mesajlar
40
-
Beğeniler
1 / 15
-
Ticaret
2, (%100)
Verdiğiniz ek bilgi için teşekkürler. Pratik için tek satırda halledilebiliyor. Tıpkı padding, background, margin, font komutlarında olduğu gibi.
Not: Alt satırlarda -webkit- ve -moz- ekleriyle tarayıcı desteği yapmayı unutmayalım.
