CSS İle Bir Resme Görsel Çerçeve Eklemek (Resim İçine Resim Eklemek)

Yazar:

CSS bilginiz varsa, resimlere border ekleme yöntemini zaten biliyorsunuzdur. Bu yazımızda ise bunun biraz daha ilerisine giderek iki farklı resimden birini çerçeve olarak ekleteceğiz, diğerini ise ana görsel olarak çerçeve resmi içerisine atacağız. Yani elde etmek istediğim sonuçlar şu tarzda şeyler olacak. Bakınız :



Gördüğünüz gibi görsellerden bir tanesi bulutun içerisinde bir diğeri ise bir tablonun içerisine konumlanmış durumda. Normal şartlarda internette "border image" olarak arama yaptığınız zaman, CSS'in border özelliğine nasıl resim ekleneceği çok basit bir şekilde anlatılmış. Bu yazıda, biz işi biraz daha ilerleterek relative ve absolute olayları ile CSS'in "border image" denen olayını daha profesyonel boyuta taşımış olacağız.

Benim yapmak istediğim resim şudur : 



Böyle bir resim için ise şu 2 görsele ihtiyacımız var :



Kodlar ise aşağıdak gibidir. Kodları bir html dosyası olarak kaydederseniz, sonucu kendiniz görebilirsiniz.



Ana class adını "main" olarak belirleyip bu "main" denen class'ın relative olmasını sağladık. Amaç, "image-container" denen ve aynı zamanda bizim çerçevemiz olan "div"e "absolute" özelliği vererek onu istediğimiz gibi harekt ettirebilmek. Aynı şekilde "img" tagına da absolute verip onu da "main" class'ı içine yerleştirip, bunların üst üste gelmesi sağlandı. Burada, "image-container" denen "div"in sagip olduğu z-index değerinin 5 olması ve buna karşılık resmi barındıran "img" tagının z-index değerinin "1" olması resme, çerçevenin içerisindeymiş gibi bir görüntü vermesini sağladı.

Olayın temel mantığı ise şudur. "image-container" adlı div'e belli bir yükseklik ve genişlik veriyoruz. Daha sonrasında ise buna border image özelliği ekliyoruz. Daha önceden genişlik ve yükseklik verildiği için, içi boş olan bir çerçevemiz artık hazır. Sonrasında ise bu çerçeve ile resmi üst üste getirip, z-index ile farklı derinlikler verince olay bitiyor. Yani resmimize çerçeve ekletmiş oluyoruz.

Buraya tıklayarak tamamını bilgisayarınıza indirebilirsiniz.

Konuyla ilgili yorumunuzu, sorunuzu veya varsa önerinizi, aşağıdaki yorum formu aracılığıyla bana iletebilirsiniz.





Hey!

Blogkafem'de okuduğunuz içeriklerle ilgili kişisel Twitter hesabım üzerinden benimle iletişme geçmek isterseniz Twitter adresim : www.twitter.com/aliarslan10

Sosyal medya hesabım dışında Blogkafem'de okumuş olduğun içerik ile ilgili belirtmek istediklerinizi aşağıdaki yorum formuna yazabilirsin. En kısa sürede dönüş yapacağımdan emin olabilirsin. :)

Okuduğunuz içerik faydalı olduysa #blogkafem etiketiyle okuduğunuz içeriğin linkini Twitter'da paylaşarak Blogkafem'e destek olabilirsiniz.

0 yorum:

Yorum Sayfası :



Yorum yaparken dikkat edilmesi gerekenler;

1. Yorum Formunu doldurduktan sonra Profil Seç -> ADI/URL bölümünden isminizi yazıp yorum yaparsanız size karşı bir hitap şeklimiz olur. (URL kısmını boş bırakabilirsiniz.)

2. Anonim olarak yaptığınız yorumlar "Adsız" olarak gözükmektedir.

3. Türkçe yazım ve dilbilgisi kurallarına uymaya özen gösteriniz.

4. Küfür,hakaret,mail adresi veya konu ile ilgisi olmayan reklam amaçlı website adresi içeren yorumlar yayınlanmamaktadır.

Custom Search

Kafemizde En Son Kim, Ne Demiş?

Kafeyi Dikizleyenler :)

Blog Istatistik

BLOGKAFEM.NET

© Copyright 2008-2016
Sitedeki yazıların her hakkı BLOGKAFEM.NET sitesine aittir.
Kopyalanması halinde lütfen kaynak gösteriniz.
DMCA.com Protection Status
Anasayfa | Hakkımızda | Bizden | Reklam | İletişim