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:

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:

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

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

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:

CSS Değişik border özellikleri

CSS border ridge özellik:

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

HTML:

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

ÇIKTI:

CSS border outset özellik:

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

HTML:

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

ÇIKTI:

CSS border dashed özellik:

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

HTML:

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

ÇIKTI:

CSS border double özellik:

.resim{
border: 5px double black;
 }

HTML:

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

ÇIKTI:

Daha detaylı CSS border konusunu inceleyin.