After Effects, Photoshop Dersleri, 3DS Max Bilgi Paylaşım Forumları
Şu an ya üyemiz değilsiniz yada giriş yapmadınız, tüm imkanlarımızdan yararlanamıyorsunuz!
Üyemiz iseniz aşağıdaki bağlantılarımızdan Giriş yaparak, üyemiz değilseniz Kayıt olarak kısıtlamayı kaldırabilirsiniz.

Join the forum, it's quick and easy

After Effects, Photoshop Dersleri, 3DS Max Bilgi Paylaşım Forumları
Şu an ya üyemiz değilsiniz yada giriş yapmadınız, tüm imkanlarımızdan yararlanamıyorsunuz!
Üyemiz iseniz aşağıdaki bağlantılarımızdan Giriş yaparak, üyemiz değilseniz Kayıt olarak kısıtlamayı kaldırabilirsiniz.
After Effects, Photoshop Dersleri, 3DS Max Bilgi Paylaşım Forumları
Would you like to react to this message? Create an account in a few clicks or log in to continue.
En son konular
» Yıldız Sinema Günleri
CSS 3 İle Radius (Oval) Kenarlar EmptySalı 25 Ocak 2022, 16:12 tarafından ytusinema

» epic games reklamı
CSS 3 İle Radius (Oval) Kenarlar EmptyPerş. 12 Eyl. 2019, 14:02 tarafından ainoslu.22

» Hesap silimi ya da banlanma
CSS 3 İle Radius (Oval) Kenarlar EmptyC.tesi 31 Ağus. 2019, 09:04 tarafından gariban

» 10. Yıldız Kısa Film Festivali Geliyor!
CSS 3 İle Radius (Oval) Kenarlar EmptyPaz 14 Mayıs 2017, 10:38 tarafından ytusinema

» After Effects Uzmanı Aranıyor (Ankara)
CSS 3 İle Radius (Oval) Kenarlar EmptyCuma 14 Nis. 2017, 13:58 tarafından Kün Medya Yapım

» İÇERİ BAK LÜTFEN KAFAYI YİCEM
CSS 3 İle Radius (Oval) Kenarlar EmptySalı 11 Nis. 2017, 10:55 tarafından korsankirici

» After Effects - Neon Text Efekti - Ders 8
CSS 3 İle Radius (Oval) Kenarlar EmptyPerş. 30 Mart 2017, 15:32 tarafından theyamak

» After Effects - Tanıtım Animasyonu Kurumsal - Ders 7
CSS 3 İle Radius (Oval) Kenarlar EmptyPerş. 30 Mart 2017, 15:31 tarafından theyamak

» After Effects - Retro Intro Yapımı - Ders 6
CSS 3 İle Radius (Oval) Kenarlar EmptyPerş. 30 Mart 2017, 15:31 tarafından theyamak

Giriş yap

Şifremi unuttum

Kimler hatta?
Toplam 83 kullanıcı online :: 0 Kayıtlı, 0 Gizli ve 83 Misafir :: 1 Arama motorları

Yok

[ Bütün listeye bak ]


Sitede bugüne kadar en çok 1614 kişi Paz 10 Tem. 2016, 20:42 tarihinde online oldu.
Istatistikler
Toplam 12710 kayıtlı kullanıcımız var
Son kaydolan kullanıcımız: ceren0

Kullanıcılarımız toplam 60796 mesaj attılar bunda 6689 konu
En iyi yollayıcılar
haziran
CSS 3 İle Radius (Oval) Kenarlar Vote_lcapCSS 3 İle Radius (Oval) Kenarlar Voting_barCSS 3 İle Radius (Oval) Kenarlar Vote_rcap 
boronzox
CSS 3 İle Radius (Oval) Kenarlar Vote_lcapCSS 3 İle Radius (Oval) Kenarlar Voting_barCSS 3 İle Radius (Oval) Kenarlar Vote_rcap 
Hale
CSS 3 İle Radius (Oval) Kenarlar Vote_lcapCSS 3 İle Radius (Oval) Kenarlar Voting_barCSS 3 İle Radius (Oval) Kenarlar Vote_rcap 
olivon
CSS 3 İle Radius (Oval) Kenarlar Vote_lcapCSS 3 İle Radius (Oval) Kenarlar Voting_barCSS 3 İle Radius (Oval) Kenarlar Vote_rcap 
render
CSS 3 İle Radius (Oval) Kenarlar Vote_lcapCSS 3 İle Radius (Oval) Kenarlar Voting_barCSS 3 İle Radius (Oval) Kenarlar Vote_rcap 
alpino
CSS 3 İle Radius (Oval) Kenarlar Vote_lcapCSS 3 İle Radius (Oval) Kenarlar Voting_barCSS 3 İle Radius (Oval) Kenarlar Vote_rcap 
Joker
CSS 3 İle Radius (Oval) Kenarlar Vote_lcapCSS 3 İle Radius (Oval) Kenarlar Voting_barCSS 3 İle Radius (Oval) Kenarlar Vote_rcap 
aloha34
CSS 3 İle Radius (Oval) Kenarlar Vote_lcapCSS 3 İle Radius (Oval) Kenarlar Voting_barCSS 3 İle Radius (Oval) Kenarlar Vote_rcap 
mobidik
CSS 3 İle Radius (Oval) Kenarlar Vote_lcapCSS 3 İle Radius (Oval) Kenarlar Voting_barCSS 3 İle Radius (Oval) Kenarlar Vote_rcap 
ypr
CSS 3 İle Radius (Oval) Kenarlar Vote_lcapCSS 3 İle Radius (Oval) Kenarlar Voting_barCSS 3 İle Radius (Oval) Kenarlar Vote_rcap 

Anahtar-kelime

Sosyal yer imi

Sosyal yer imi reddit      

Sosyal bookmarking sitesinde After Effects, Photoshop Dersleri, 3DS Max Bilgi Paylaşım Forumları adresi saklayın ve paylaşın


CSS 3 İle Radius (Oval) Kenarlar

Aşağa gitmek

CSS 3 İle Radius (Oval) Kenarlar Empty CSS 3 İle Radius (Oval) Kenarlar

Mesaj  Admin Ptsi 25 Ekim 2010, 11:29

Artık yavaş yavaş CSS 3 ve HTML 5'ten bahsetmeye başlamak gerek. Aslında bir çoğumuz web trendi gereği oval nesneler ve arayüzler görmeye bunları sayfalarımızda uygulamaya dolayısıyla CSS 3'de border-radius kullanımına başladık. Ancak bu konuyla ilgili ben tatmin edici türkçe bir kaynağa denk gelmedim. Bu makalemde CSS 3 ile gelen radius(ovallik verme) özelliğinin hangi browserlarda nasıl yorumlandığını anlatacağım.

Aşağıdaki resimde de görüldüğü üzere iki buton var bunlardan bir tanesi CSS 2.1 ile yapılan background'a image vererek yaptığımız klasik buton diğeri ise CSS 3 ile gelen radius ve gradient özellikleri ile yapılabilecek bir buton. Bu noktada bir parentez açayım. Gradient yani deglare özelliği CSS 3 ile gelen diğer özelliklerden biridir. Bunu da ilerleyen zamanlarda bir makaleyle ele alacağım.
CSS 3 İle Radius (Oval) Kenarlar Radius_button

Her browser'ın CSS ve HTML kodlarını kendine göre yorumlama şekli vardır. Bu yorumlama farkı browser'ları geliştiren firmaların kullandıkları layout engine olarak adlandırılan web içeriği görüntüleme teknolojilerinin farklılıklarından (framework farklılıklarından) kaynaklanmaktadır.

Bu framework'ler Safari ve Chrome'da Webkit, Firefox'ta Gecko, Opera'da Presto ve Internet Explorer tarayıcılarında Trident olarak karşımıza çıkar. Dolayısıyla UI'ların en çok sıkıntısını çektiği noktalardan biridir her browser'a uygun CSS kodu yazmak hem CSS dosyasını şişir hemde insana sırf iş keser. Her ne kadar IE 9 ile CSS 3 sıkıntıları daha da azalmışta olsa Microsoft'un CSS'i yorumlama tarafında özellikle IE 8, IE 7 ve IE 6'da ciddi sıkıntılar var. (Ben IE'yi CSS 3 için kasmamanızı öneririm. Tabi bu sitenizin hedef kitlesine göre değişir).

Radius temelde border-radius olarak tanımlanır. Form nesnelerine (buton,textbox, textarea, combo vb..) , division'lara ve hatta table'larınıza bile uygulayabilirsiniz. Şimdi gelin radius'u hangi browser'da nasıl kullanacağımıza bakalım.

Firefox border-radius kullanımı:

-moz-border-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin 4 tarafına istediğiniz açısal değerde ovallik vermenizi sağlar)

Kod:
.xStyle { -moz-border-radius: 7px; }

-moz-border-radius-topleft: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin üst sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

-moz-border-radius-topright: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin üst sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

-moz-border-radius-bottomright: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin alt sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

-moz-border-radius-bottomleft: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin alt sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

Kod:
.xStyle {
-moz-border-radius-topleft: 9px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 9px;
-moz-border-radius-bottomleft: 7px;
}
-moz-border-radius:<ovallik değeri1> <ovallik değeri2> <ovallik değeri3> <ovallik değeri4> (şeklindeki kullanımda ilk değer için sol üst, ikinci değer için sağ üst, üçüncü değer için sağ alt, dördüncü değer sol alt köşeler için istediğiniz açısal değerde ovallik vermenizi sağlar)
Kod:
.xStyle { -moz-border-radius:10px 5px 10px 5px; }
Chrome ve Safari border-radius kullanımı:

-webkit-border-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin 4 tarafına istediğiniz açısal değerde ovallik vermenizi sağlar)
Kod:
.xStyle { -webkit-border-radius: 7px; }

-webkit-border-top-left-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin üst sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

-webkit-border-top-right-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin üst sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

-webkit-border-bottom-right-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin alt sağ köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)

-webkit-border-bottom-left-radius: <ovallik değeri> (şeklindeki kullanım uyguladığınız elementin alt sol köşesine istediğiniz açısal değerde ovallik vermenizi sağlar)
Kod:
.xStyle {
-webkit-border-top-left-radius: 9px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 9px;
-webkit-border-bottom-left-radius: 7px;
}
-webkit-border-radius:<ovallik değeri1> <ovallik değeri2> <ovallik değeri3> <ovallik değeri4> (şeklindeki kullanımda ilk değer için sol üst, ikinci değer için sağ üst, üçüncü değer için sağ alt, dördüncü değer sol alt köşeler için istediğiniz açısal değerde ovallik vermenizi sağlar)
Kod:
.xStyle { -webkit-border-radius:10px 5px 10px 5px; }
Admin
Admin
Admin
Admin

Varsa Çalıştığınız Firma : Kale Web Solitions
Mesaj Sayısı : 338
Yaş : 40
Nerden : Ankara
Meslek : Webmaster
Kullandığınız Programlar : Hepsinden biraz
Reputation : 18
Puanları : 902
Kayıt tarihi : 26/08/07

Sayfa başına dön Aşağa gitmek

Sayfa başına dön

- Similar topics

 
Bu forumun müsaadesi var:
Bu forumdaki mesajlara cevap veremezsiniz