folder Tahribat.com Forumları
linefolder Html - CSS - XML - JavaScript - Ajax
linefolder Css İle Resimleri İşlemsiz Oval Yapma



Css İle Resimleri İşlemsiz Oval Yapma

  1. KısayolKısayol reportŞikayet pmÖzel Mesaj
    FOXXLY
    FOXXLY's avatar
    Kayıt Tarihi: 19/Haziran/2006
    Erkek

    baktım herkes çatır çatır döküman yazıyo bende geçenlerde bana lazım olan şeyi yazayım dedim :)

    resimlerin kenarlarını oval yapmak için resimi işleme sokmaya gerek yok. css ile bu işi yapabiliyoruz.

    öncelikle bu işte bize yardımcı olcak mucize siteyi yazıyım.

    http://border-radius.com/

     

    siteye giriyoruz. 4 köşedede 0 yazıyor.  oralara vereceğimiz değer ile kenarlar ovalleşiyor. ben 14 olarak uygun gördüm.

     

    çıkan sonuç

    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;

     

    aşağıdaki tikleri kaldırmayın. onlar ff, ie gibi tarayıcılar için farklı komutlarda olduğunu için ie de çalışan ff de, ff de çalışan ie de çalışsın diye yapimış.

     

    css çıktılarımızı ayarlıyalım

    .indeximgff {

    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;

    } 


    bunu css dosyanızın içine koyun. oval olmasını istediğiniz resimin kodu aşağıdaki gibi diyelim
     
    <img src="Resim Link" width="140" height="210" class="indeximgff" alt="" />

    classımızıda atadık. çıktısı 4 köşesi oval olacaktır.

    not : resimlerin köşeleri şeffaftır. arkasındaki renk görünür.
    not 2: yaşasın css3

    http://www.turkcedublajfilmindir.net
    örnek olarak ilk 4 resime bakabilrisiniz ben 2 çapraz köşeyi yamulttum. sizde verdiğim siteden yamultabilrsiniz.
    kelimeler albayım bazı anlamlara gelmiyor.
    Reply With Quote Alıntı yap
  2. KısayolKısayol reportŞikayet pmÖzel Mesaj
    imlegend
    imlegend's avatar
    Banlanmış Üye
    Kayıt Tarihi: 04/Ocak/2010
    Erkek

    Güzel site lakin buradaki olaylar ie de çalışmıyor sanki . Yoksa ben mi yanlış görüyorum. sendeki ie 9 mu.

    Sağdaki resim chrome tarayıcıya ait soladki ise ie 8 e ait.

    http://i1105.hizliresim.com/2011/5/26/9193.png

    Reply With Quote Alıntı yap
  3. KısayolKısayol reportŞikayet pmÖzel Mesaj
    hipokondriyak
    hipokondriyak's avatar
    Kayıt Tarihi: 02/Temmuz/2007
    Erkek

    ıyıymıs çizik

    Homo sapiens, yaşamak için, diğer canlıların yaşamasına muhtaç; obligat parazit türüdür. "Sen olursan boş bardak , sana olur koyan çok su. a.g."
    Reply With Quote Alıntı yap
  4. KısayolKısayol reportŞikayet pmÖzel Mesaj
    ndmylmz
    ndmylmz's avatar
    Kayıt Tarihi: 01/Ocak/2010
    Erkek

    Evet hocam böyle bi özellik html5 ile gelmişti.. Ben uzun süredir kullanıyorum ama Benim bildiğim bunu şuanlık sadece FF destekliyor :(

    Sistemi de kapattım ama PHP konusunda hala yardımcı olurum // Boş gezenin boş kalfası - Öğrenci - YTÜ
    Reply With Quote Alıntı yap
  5. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Ayro
    Ayro's avatar
    Kayıt Tarihi: 08/Ağustos/2005
    Erkek

    .yuvarla {background-origin: padding-box;background-clip: border-box;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-top-left-radius: 4px;border-top-right-radius: 4px;}

    şu kodlar explorerda falan çalışacak mı bakar mısınız ?? Operada çalışmıuyordu hepsi fakat apple şunlarla yuvarlamış ; opera firefox ve chrome da çalıştı.

    Tek sorun ie 6-7-8 de nasıl oalcak ? Kullanımı şöyle bir diviniz var mesela class 'ı baslik olsun.Şöyle yazacaksınız

    <div class="baslik yuvarla">

    gerisini kodlar halleder

    --

    konuya kaynatma yapayım dedim.

    Reply With Quote Alıntı yap
Toplam Hit: 3787 Toplam Mesaj: 5