Divlerde kenarlara ovallik verme

23-12-2010, 18:37:43

Divlerde kenarlara ovallik vermeyi göstereceğim arkadaşlar size bilmeyenler için gayet güzel ve kullanışlı bir kodlamadır aslında kodlarımızı body tagları arasında yazacağız background arka plan rengini ayarlar width ve height genişlik ve yüksekliği ayarlar burdaki topright bölümündeki right ı isterseniz left te yapabilirsiniz isterseni komple oval yapabilirsiniz kafanız karışmasın diye şimdilik küçük örnekler veriyorum

<html>
<head>
<title>MJ Türkiye LitmuS - Divlerde Kenarlara Ovallik Verme.</title>
</head>
<body>
<div style="background:#898989; width:400px; height:150px; -moz-border-radius-topright:30px;">&nbsp;MJ Türkiye LitmuS - Divlerde Kenarlara Ovallik Verme.</div>
</body>
</html>

Yukarıda &nbsp kullandım normalde padding(iç boşluk) vermemiz gerekiyordu yazı sola yapışmasın diye, paddingleride ilerleyen günlerde göstereceğim

buda görünümü

Kaynak: MJTurkiye

23-12-2010, 18:39:04

#2

bassedas

ie hala desteklemiyor değil mi bunu ?

23-12-2010, 18:40:11

#3

LitmuS

hayır ff sadece

23-12-2010, 18:41:26

#4

~~JustGo~~

Üyeliği durduruldu

-webkit-border-radius yaparak webkit kullanan tarayıcılarında desteklemesini sağlayabilirsiniz. (google chrome gibi)

24-12-2010, 10:03:35

#5

justices

şurada güzel ve basit bir örnek var

http://www.webcredible.co.uk/user-fr...-borders.shtml

24-12-2010, 12:27:01

#6

LitmuS

Link vermekle olmaz açıklama bekliyoruz böylelikle bilmeyenler için faydalı olur link vermek basit

mesela ben background un arka plan olduğunu söylemiştim orda background url var bunun ne işe yaradığını anlatabilirsin yada no-repeat in ne olduğunu border a solid vermişler solid in ne olduğunu yada solid yerine dashed kullansaydık ne olurdu vs. vs...

canlılık gelsin ya css kategorisine çok ölü duruyor

24-12-2010, 12:31:22

#7

justices

e örneği var orada bende aynısını oturup türkçeleştireyim mi? oldu olacak sana uygun kodunu da yazayım eline vereyim ? elim değmişken sitenide yaparım zaten

sordun ve bulabileceğin en güzel örneklerden birisi işte..

24-12-2010, 12:42:36

#8

LitmuS

Nerde sordum?

Anlayan\yazan birisi zaten gördüğü zaman neyin ne olduğunu görür orda burdaki amacım bilmeyen kişiler için faydalı olmak ben kimseye bir şey sormadım sen kendin geldin salça oldun konuya bende link verceğine açıklama yapsan daha faydalı olur dedim ki bozuk psikolojin ile bir sürü şey kurguladın(türkçeye çevirmek, bana uygun kod yazmak, siteyi yapmak, soru sormuşum) kafanda bu sebepten seni tebrik ederim.

Ayrıca şu konuda artık hem fikiriz galiba kimseye fayda sağlamamak en iyisi.

24-12-2010, 12:56:00

#9

~~turkproduksiyon~~

Üyeliği durduruldu

justices adlı üyeden alıntı: mesajı görüntüle

şurada güzel ve basit bir örnek var

http://www.webcredible.co.uk/user-fr...-borders.shtml

konuda bahsi geçen css yardımıyla moz yönetimiyle ovallik verme.sizin verdiğiniz link ise ovar kenarları resim olarak kayıt edip kullanmayı gösteren bir uygulama.bu uygulama daha mantıklıdır.moz a göre sorun yaşamassınız.

sayfadaki kodlara gelince ;

<div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div>

And the CSS that makes it all happen:

.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}

css yardımıyla oluşturulan classlara uygun yerlerine göre kesilen resim linkleri yazılmaktadır.
bl - bottomleft -> altsol
br - bottomright -> altsag
tl - topleft -> üstsol
tr - topright -> üstsağ demektir.

div classlarına belirlenen resimler arkaplan olarak atanıyor ve divler sıraya göre dizilerek içine metin yazılarak oval bir görüntüm oluşturuyor.

forumlar bilgi paylaşılan yerlerdir.eğer buraya cevap yazmaya karar verdiyseniz,tartışmak yerine kodda yazacaksınız paylaşımda yapacaksınız.aksi halde hiç yazıp ne konuyu kirleteceksiniz,nede saçma tartışmalara gireceksiniz.
kolay gelsin