Oval Köşe Yapımı

Oval

Apple şirketi tarafından safari web browser için geliştirdiği web içeriği görütüleme teknolojisi webkitin oval köşe yapımı:

Ne yazıkki Bu özellik şu anda bütün tarayıcılar tarafından desteklenmemekte. Şu anda Destekleyen tarayıcılar Mozilla, Google ve Safari browserleri ile kısıtlıdır. Böylesi bir durumda ister istemez webtasarımcının canını sıkabiliyor. Çünkü yapılan tasarımlar her tarayıcıda aynı görüntüyü vermiyor. İnternet explorerinde bu teknolojiyi tanıyıp bu teknoloji hakkında çalışmalara başlamasını merakla bekliyoruz.

Eskiden hazırladığımız normal bir css cerceve kodu

Oval Bu css kodumuzun oluşturacağı çerçeve şekli internet explorer mozilla  ve cheromede  aşağıdaki resimdeki gibi olur

Oval

Şimdi bu css kodlarımızın içerisine border-radius: 15px kodunu ekleyelim.

3 ayrı tarayıcıda  açtığımızda karşımıza  çıkacak olan görüntüler.

İnternet Explorer ekran görüntü  şeklü  keskin köşeli bir  şekilde  görünür :Oval

Google Cherome Ekran görüntüsü bir şekilde  görünür:

Oval

Mozilla firefox görüntüsüde  cherome  ile aynıdır:

Oval

border-radius: 15px ayarını  border-radius: 70px olarak  ayarlarsak oval  köşeli  görüntümüz yuvarlak  bir  görüntü halini  alacaktır.

Konu ile  ilgili aşağıda verdiğim demo adresinde örnek çerçeve görünümünü  bulabilirsiniz. Yanlız  demo adreslerini farklı farklı tarayıcılardan görmeniz  daha iyi  olur aradaki farkı kendiniz  görürsünüz.

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-12-26 tarihinde yayınlandı,Toplam 1199 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...