Go Dilinde Concurrency

2,312 More

Projedeki Git Dosyaları Nasıl Silinir?

1 7,911 More

yTheme

4 2,690 More

Sunucu Güvenliği | SSH (Secure Shell) Kullanımı

2 2,167 More

Truemag

  • PHP
  • Golang
  • Laravel
  • Linux
  • SQL
  • SEO
  • WordPress
  • Diğer
    • Yazılım
    • Javascript
    • Css/XHtml/W3C
    • Genel
    • Tanıtım
    • Ajax
  • Home
  • ANASAYFA
  • HAKKIMDA
  • SPONSORLUK
  • ARŞİV
  • İLETİŞİM
  • BENİMLE ÇALIŞMAK İSTER MİSİNİZ?

CSS3 Yuvarlak Köşeler

CSS3 ile gelen en önemli yeniliklerden birisi de görsel kullanmadan yuvarlak köşeler oluşturabilmemize imkan sağlayan border-radius özelliğidir. Eskiden hatırlıyorum da basit bir yuvarlak köşe oluşturmak için hem köşeler için görseller kullanır hem de bu yuvarlak köşeleri nesnemize eklemek için iç içe satır satır kod yazmak zorunda kalırdık. Neyse ki standartlar zamanla çok daha yaygın hale geliyor. Bu sayede böyle çok kullanılan teknikler için her gün daha pratik çözümler üretiliyor.

border-radius

CSS3 ile birlikte gelen border-radius ile hiç görsel kullanmadan nesnelerimizin köşelerini yuvarlak yapabiliriz. Örnek kullanımı ise aşağıdaki şekildedir.

Tüm köşeleri aynı anda yuvarlamak için:

CSS
1
border-radius:2em;

Köşeleri tek tek yuvarlamak için:

CSS
1
2
3
4
border-top-left-radius:2em; //Üst sol köşe
border-top-right-radius:2em; //Üst sağ köşe
border-bottom-right-radius:2em; //Alt sağ köşe
border-bottom-left-radius:2em; //Alt sol köşe

Not: Yuvarlama miktarını belirlemek için kod içerisinde benim kullandığım 2em şeklinde olduğu gibi uzunluk ölçüsü yerine yüzde (%) değer de girebilirsiniz.

Örnek

CSS

CSS
1
2
3
4
5
6
7
8
.kutu{
border: 2px solid #797c83;
border-radius: 10px;
width: 100px;
padding: 10px;
text-align:center;
color:#e65d10;
}

HTML

CSS
1
<div class="kutu">yakuter</div>

Sonuç
border-radius

Kaynaklar ve Araçlar

Kimi zaman hem vakit kazanmak hem de ek yükten kurtulmak için çevirimiçi araçlardan faydalanırız. CSS3 ile yuvarlak köşeler oluşturabileceğiniz bazı siteler aşağıda listelenmiştir.

  • W3Schools CSS3 Border Radius
  • http://border-radius.com
  • http://cssround.com
  • http://css3gen.com/border-radius/
  • http://www.cssmatic.com/border-radius
  • http://www.cssportal.com/css3-rounded-corner/
Jun 12, 2013Erhan Yakut
Cloud Sunucu


hosting

CSS3 Color (Renk) ModülüCSS3 Kenarlık Resimleri
You Might Also Like
 
ytelefon | Yakuter Telefon Defteri Betiği
 
Css İle Sütun Yapısı
Erhan Yakut
7 years ago 2 Comments Css/XHtml/W3Cborder-radius, Css/XHtml/W3C, CSS3, CSS3 Modülleri9,448
Sponsorlar

sponsor

sponsor

sponsor

sponsor
Bağlantılar
  • Beyazıt Kölemen
  • Domatessuyu
  • Lezzetli Robot Tarifleri
  • Ofizzo
  • PHP Dersleri
  • Wordpress Hosting
Random Posts
Sunucu Güvenliği | SSH (Secure Shell) Kullanımı
14 Şubat 2008 – Sevgililere Özel
WordPress Yazar Bilgileri
iPhone 3.0 Güncelleme Sorunu
Status Post Format
sdafasdf
Hakkımda

Bilişim Teknolojileri alanında içerik üretmek üzere oluşturulmuş olan Yakuter.com 2006 yılında Erhan Yakut tarafından hayata geçirilmiştir. devamını okuyun…

CLOUD SUNUCU DESTEĞİ
2006-2020 © Yakuter