Css ile resim köşelerini düzenleme

Merhaba arkadaşlar aslında farklı amaçlar için öğrenmenizde faydalı olacağını düşündüğüm bir konudan bahsetmek istiyorum css ile resim köşelerine bir nevi animasyon tadında üstüne gelince efekt oluşturan bir düzenleme yapacağız efekt diyince kafanız karışmasın sadece resmin üstüne gelince kenar çubuğunun rengini değiştireceğiz o kadar bu gün çoğu blogçu bu tarz küçük tasarıma öznellik katan dokunuşlar yapıyorlar. Hem örnek olması hemde birebir benzerini yapacağımızdan dolayı line25 blogundaki resimlerin üzerine geldiğinizde kenarlardaki renk değişimi göreceksiniz. Sizde dilerseniz eğer kendinize ait bir blogunuz var ise bu tarz bir küçük ama öznellik katan eklentiler yapmak isterseniz dersimizi takip edin. Oldukça basit bir css düzenlemesi yapacağız.

Şimdi ilk yapmamız gereken css kodumuzu hazırlamak hemen açıklamalı olarak görelim. Kullanacağımız css tekniklerini söyleyim ilk olarak  link, visited, active ve hover tekniklerini kullancağız bu tekniklerin kullanma yöntemlerini biliyor iseniz daha da fonksiyonel hale getirebilirsiniz.

a.makale_resim, a.makale_resim:link, a.makale_resim:visited {
	background: #eaeaea;
	padding: 6px;
	border: solid 1px #d6d6d6;
	text-align: center;
	display: block;
}

a.makale_resim:hover, a.makale_resim:active {
	background: #ddd;
}

a.makale_resim img {
	display: inline;
	border: none;
	border: solid 1px #d6d6d6;
}

Yukarıda sınıfları kendi kafama göre belirledim eğer blogunuza eklemek istiyor iseniz resim sınıflarını düzenlemeniz gerekir örneğin yukarıdaki koda göre makale_resim sınıfından olamayan bir resim fonksiyonu göstermeyecektir. Burda zaten öenmli olan tekniği öğrenmeniz gerisi sizin hayal gücünüze kalmış.

4 Yorum

  1. Crazyvelet 10 Nisan 2010
  2. Gökberk 14 Mayıs 2010
  3. medyum 05 Ekim 2010
  4. Medyum Efendi 27 Ocak 2017

Yorum Yaz