Resme Hover+Border Radius

23.10.2014 12:48

#1

Durotan WM Aracı Kullanıcı

Üyelik 28.02.2014
Yaş/Cinsiyet 29 / E
Meslek 3D Sanatçı
Konum Kocaeli

Ad Soyad F** T**
Mesajlar 1676
Beğeniler 204 / 340
Ticaret 2, (%100)

Merhaba arkadaşlar. Aşağıdaki resmin;

üst yarısı gözükecek ve 3px border radius olacak,

Hover olarak ise; alt yarısı gözükecek, 3px border radius'un yanı sıra, 1px solid border olacak şekilde kod yapmaya çalıştım.

Ancak CSS bilgim zayıf olduğundan batırdım.

Resim: http://i.imgur.com/83aGLHG.jpg

Yardımcı olabilecek var mı acaba?

23.10.2014 12:56

#2

Hucukii </ismailcaakir> Kullanıcı

Üyelik 14.09.2013
Yaş/Cinsiyet 29 / E
Meslek Freelancer
Konum Bursa

Ad Soyad İ** Ç**
Mesajlar 382
Beğeniler 57 / 78
Ticaret 8, (%100)

Border radius'u bu siteyi kullanarak istediğin gibi şekillendirebilirsin :)



Border radius için;

http://border-radius.com/

Diğer css araçları için;

http://css3generator.com/

Css yapında


.element{
 // border radius kodları
}
.element:hover{
 // üzerine gelince oluşmasını istediğin border radius kodları
}

Develops everything always..

23.10.2014 13:03

#3

Durotan WM Aracı Kullanıcı

Üyelik 28.02.2014
Yaş/Cinsiyet 29 / E
Meslek 3D Sanatçı
Konum Kocaeli

Ad Soyad F** T**
Mesajlar 1676
Beğeniler 204 / 340
Ticaret 2, (%100)

Hucukii adlı üyeden alıntı

Border radius'u bu siteyi kullanarak istediğin gibi şekillendirebilirsin :)

Css yapında

Çok teşekkürler, zaten asıl kafamın karıştığı yer kodun adının yazılış şekli. Bazı yerlerde nokta koyuluyor, niye koyuluyor o mesela bilmiyorum. Bakalım biraz kurcalayayım, olacak mı :)

23.10.2014 13:43

#4

cgrclk Fortis Fortuna Adiuvat Kullanıcı

Üyelik 18.11.2011
Yaş/Cinsiyet 35 / E
Meslek Web Developer
Konum İstanbul Avrupa

Ad Soyad B** Ç**
Mesajlar 3270
Beğeniler 1014 / 1983
Ticaret 53, (%100)

Element class ise . koyabilirsiniz, elemet id ise # koyabilirsiniz. Örneğin;

ise
.element{ /*CSS KODLARI*/ }

ise
#element{ /*CSS KODLARI*/ }

şeklinde yazmalısınız. w3 kurallarına göre id 'ler sayfada bir adet bulunur, class'lar daha fazla yazılabilir. Yani 10 tane

yazabilirsiniz ama

bir defa kullanırsınız.

23.10.2014 19:01

#5

tiwaly NodeJS / PHP / NoSQL Kullanıcı

Üyelik 10.10.2013
Yaş/Cinsiyet 34 / E
Meslek Yazılımcı
Konum İzmir

Ad Soyad i** A**
Mesajlar 363
Beğeniler 135 / 104
Ticaret 7, (%100)

eğer geçiş efekti istersen .orc-barbarian clasına transition:background 0.5s; eklemen yeterli.

23.10.2014 21:31

#6

Durotan WM Aracı Kullanıcı

Üyelik 28.02.2014
Yaş/Cinsiyet 29 / E
Meslek 3D Sanatçı
Konum Kocaeli

Ad Soyad F** T**
Mesajlar 1676
Beğeniler 204 / 340
Ticaret 2, (%100)

cgrclk adlı üyeden alıntı

Element class ise . koyabilirsiniz, elemet id ise # koyabilirsiniz. Örneğin;

ise
.element{ /*CSS KODLARI*/ }

ise
#element{ /*CSS KODLARI*/ }

şeklinde yazmalısınız. w3 kurallarına göre id 'ler sayfada bir adet bulunur, class'lar daha fazla yazılabilir. Yani 10 tane

yazabilirsiniz ama

bir defa kullanırsınız.

tiwaly adlı üyeden alıntı

eğer geçiş efekti istersen .orc-barbarian clasına transition:background 0.5s; eklemen yeterli.

İkinize de çok teşekkür ederim.

2 kişi bu mesajı beğendi.

Resme Hover+Border Radius

Üye Girişi Yap