CSS'de Resimlere Border Ekleme

Border(kenarlık) veya çerçeveleri olan Resimler, Resimlerin daha etkili görünmesini ve sayfadaki diğer içerikten farklı olmasını sağlar.

Bazen, bir web sayfası oluştururken resmin fotoğraf gibi çerçeveli bir kenarlığı varmış gibi görünmesini, ancak Photoshop veya Gimp gibi bir grafik programı kullanmamasını istersiniz. Bu, Resmi burada gösterilen fotoğraftaki gibi biçimlendirmek için CSS (Basamaklı Stil Sayfaları) kullanılarak kolayca gerçekleştirilebilir.

CSS kullanmanın yararı, her görüntüyü ayrı ayrı düzenlemek yerine, yalnızca CSS dosyasını ayarlayarak kenarlık rengini, stilini ve genişliğini diğer görüntülerle birlikte değiştirebilmenizdir. Aşağıda CSS ile bir görüntünün etrafına nasıl çerçeve veya kenarlık ekleneceği gösterilecektir. Resmin altına bir resim yazısı da ekleyebilirsiniz.

HTML5'de <img> türünde (resim,fotoğraf) bir border niteliğini kullanılmadığından, Bu nedenle bunun yerine CSS border özelliğini kullanmanızı öneririz.


img {
  border: 5px solid #555;
}

HTML:


<img src="istanbuljpg" class="resim" alt="manzara">

ÇIKTI:

images border

Saydam Bir Arka Plan ile Çerçeveli Resim


Saydam bir arka plan için CSS dosyanıza aşağıdakileri ekleyin.


.resim {
    background:transparent;
    padding:8px;
    border:1px solid #999999; 
}


HTML:


<img src="istanbuljpg" class="resim" alt="manzara">

ÇIKTI:

images border

Resim Çerçevesi altına Gölge nasıl eklenir


Gölge eklemek istiyorsanız CSS dosyanıza aşağıdakileri ekleyin:

box-shadow:5px 5px 5px #999;

Gölgeli resim çerçevesi için CSS dosyanıza aşağıdakileri ekleyin.


.resim {
    background:transparent;
    padding:8px;
    border:1px solid #ccc;
    box-shadow:5px 5px 5px #999; 
}

Resminizin sağ ve alt taraflarında, çerçevenin dışında aşağıdaki gibi bir alt gölge olmalıdır:

ÇIKTI:

images border

CSS Değişik border özellikleri


CSS border ridge özellik:


.resim{
border: 10px ridge #7b3200;
 }

HTML:


<img src="istanbuljpg"  class="resim" alt="manzara">

ÇIKTI:

images border

CSS border outset özellik:


.resim{
border: 10px outset #578ddf;
 }

HTML:


<img src="istanbuljpg" class="resim" alt="manzara">

ÇIKTI:

images border

CSS border dashed özellik:


.resim{
border: 2px dashed #c18512;
 }

HTML:


<img src="istanbuljpg" class="resim" alt="manzara">

ÇIKTI:

images border

CSS border double özellik:


.resim{
border: 5px double black;
 }

HTML:


<img src="istanbuljpg" class="resim" alt="manzara">

ÇIKTI:

images border

Daha detaylı CSS border konusunu inceleyin.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

6399

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML KAYAN YAZI VE Marguee KULLANIMI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.