http___qqbilisim.com_yuvarlak-koseli-tablo-veya-kutu-olusturma__replytocom_9_1.xml
1.1 1.2 1.3 1.4 1.5 2.1 2.2 2.3 3.1 3.2 3.3 4.1 5.1 6.1 7.1 8.1
Many of you may have noticed a new trend of circular shape avatars (profile images) in author bio as well as in comments section. You may also be wondering how it’s done or do I need to edit them in Photoshop to make it circular. Editing your avatar in image editing software will only make your profile image rounded but you cannot do the same for avatars in your comments section. The solution is very simple and you don’t need to use any special software to create circular shape avatars in WordPress. In this article, I will show you how to make your WordPress avatar images rounded. In order to display circular shape avatar images you need to add a few lines of CSS code to your stylesheet and it will do the trick for you. It’s just rounded corners using border-radius property in CSS3 and all modern browsers these days support the border-radius property. We can apply this CSS style to .avatar class that WordPress adds to all avatar/profile images. Open your website’s style.css and paste this CSS code at the very bottom. And now you will have circular shape avatars all over your website. It’s very unlikely but if your WordPress theme uses different CSS class for avatars then you will have to define class name accordingly in following code, before adding it to your style.css. /* display circular shape avatars in wordpress */ .avatar { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
1.1 2.1 3.1 4.1 5.1 7.1 9.1 10.1 11.1 12.1 13.1 14.1 15.1 16.1
Kutu veya tabloların köşelerini yuvarlama Aşağıdaki örnekte oluşturulan id seçici istenen table veya div elemanına uygulanarak, köşeleri yuvarlak hale getirilebilir. İçinde radius geçen satırlarda (kırmızı renkle gösterilen), köşeleri yuvarlama miktarı ayarlanmıştır. Shadow geçen satırlarda (turuncu gösterilen) ise tablo veya kutuya gölge verilmiştir. Yuvarlama ve gölge verme işi farklı tarayıcılar için, farklı kodlar ile yapılmıştır. Dolayısıyla her tarayıcıda aynı görüntüyü elde etmek için 3 satırı da yazmak gereklidir. Tarayıcıların eski versiyonlarında bu css kodları işe yaramayacaktır. #kutu1 background-color:#ffffff; width: 360px; padding: 7px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 0 5px #779900; -webkit-box-shadow: 0 0 5px #779900; box-shadow: 0 0 5px #779900;