Képek formázása CSS-sel

Bemutatok néhány trükköt, amivel feldobhatod a weboldaladon megjelenő képeket, hogy ne legyenek olyan egyhangúak. CSS-sel ez sokkal egyszerbb, mintha az összes képed beleraknád Photoshoppal valami előre megalkotott keretbe. Ha neked is van hasolnló ötleted, várom!

Drop Shadow – Adjunk a képnek árnyékot

A lényeg, hogy egy nagy, árnyékkal ellátott képet beteszünk háttérképnek. Mivel az IE6 nehezen kezeli az átlátszó png-t, ezért érdemes testreszabott gif-et használni. Minél nagyobb a háttérképünk, annál nagyobb képeknél lehet használni. A példában egy 1000×1000 pixeles kép is árnyékkal jelenne meg.

HTML

<img class="shadow" src="sample.jpg" alt="" />

CSS

img.shadow {
   background: url(shadow-1000x1000.gif) no-repeat right bottom;
   padding: 5px 10px 10px 5px;
}

Dupla keret

Az egyik legegyszerűbb és legelterjedtebb technika. Háttérszínt és bordert, azaz keretet adunk a képnek

HTML

<img class="double-border" src="sample.jpg" alt="" />

CSS

img.double-border {
   border: 5px solid #b4c842;
   padding: 5px; /*Belső keret mérete*/
   background: #fff; /*Belső keret színe*/
}

Vízjelezett kép

Mintha csak photoshoppal raktuk volna rá a vízjelet. Az IE6 hibájának köszönhetően nem átlátszó png-vel oldottam meg, hanem egy jpeg kép css átlátszóságával játszottam. Szerintem üt :)

HTML

<div class="transp-block">
   <img class="transparent" src="sample.jpg" alt="" />
</div>


CSS

.transp-block {
   background: #000 url(watermark.jpg) no-repeat;
   width: 420px;
   height: 177px;
}
img.transparent {
   filter:alpha(opacity=75);
   opacity:.75;
}

Kép felirattal

Áttetsző csík a kép alján, rajta a felirat – akár keresőoptimalizálás szempontból is tökéletes lehet. Egy hátránya van, hogy nem lehet tetszőleges méretű képre alkalmazni, annak előre tudni kell a méretét. De egyébként mutatós :)

HTML

<div class="img-desc">
   <img src="sample.jpg" alt="" />
   <cite>Budapest - The dark city</cite>
</div>

CSS

.img-desc {
   position: relative;
   display: block;
   height:177px;
   width: 420px;
}
.img-desc cite {
   background: #111;
   filter:alpha(opacity=55);
   opacity:.55;
   color: #fff;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 400px;
   padding: 10px;
   border-top: 1px solid #999;
}

A képeket acs.com-tól loptam.

Megosztás