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

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.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
    <title>BLOGKAFEM.NET</title>
    <meta name="viewport" content="width=device-width, initial-scale= 1">
    <style>
 .main {
  position: relative;
 }
 .image-container {
  position: absolute;
  top: 0px;
  border: 50px solid rgba(25,255,255);
  z-index: 5;
  width: 600px;
  height: 200px;
  border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIz1X4pgUdM_MaL9WxNUCe1o_4jcVKERxqpohaOpMOE57UsPbpUj5BkoKvouw1YZh-DGMhRpoIBHYbU5A8VGO9RCICRYOtfN89PlgOidagQFXOd-6l5kiGpVOhS27l6ZPkh8VozR1EQ/s1600/buluttt.png') 80 80 80 80 stretch stretch;
  border-color: white;
  border-style: inset;
  border-width: 100px;
 }
 img {
  position: absolute;
  background: #eaff77;
  width: 800px;
  height: 400px;
  z-index: 1;
 }
 </style>
</head> 
<body>

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.

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

0 yorum:

Kategoriler