Bilder pynter opp. Noen ganger forteller de en historie. “Et bilde sier med enn tusen ord”, heter det jo.
Og mange bruker bilder på nett. Her er et lite tips for å få bildene til å se litt penere ut: En liten pen, diskret skygge får bildet til å se ut som det står litt ut over teksten. Her er et bilde uten skygge og et med. Jeg synes i alle fall det ser pent ut.
Det er ikke vanskelig å få det til med CSS og HTML. Den koden som legger et bilde inn i en blogg eller en web-side er:
<img src="montpellier-2.jpg" alt="" />
Så er det mulig å ha med alternativ tekst til bildet, bildets høyde og vidde, informasjon om plassering, med mer. Men dette er det essensielle. For å få skyygevirkningen i det neste bildet legger jeg bildet inn i en såkalt DIV. Koden ser da slik ut (jeg tar med “width” og “height” også) :
<div style="background: url(http://blogging.nekkidblogger.com/shadow2.gif) no-repeat right bottom; border-top: #eee 1px solid; border-left: #eee 1px solid;"><img src="montpellier-2.jpg" alt="" width="150" height="152" /></div>
Jeg legger altså inn et bakrunnsbilde som du ikke ser (shadow2.gif), som inneholder en skygge. Dette bildet trenger du får å bruke denne metoden for å lage skygge (det finnes tre, fire til, men ikke så enkle og stabile etter min vurdering). Dernest plasserer jeg skyggen under og til høyre for bildet.
Denne koden kan legges inn i et eksternt CSS-stylesheet. Den ser da slik ut:
div.shade img {
background: url(shadow2.gif) no-repeat right bottom;
padding: 4px 10px 10px 4px;
border-top: #eee 1px solid;
border-left: #eee 1px solid; }Og med definisjonen av denne div-en på plass, kan du enkelt få skygger rundt bildene dine :
<div class="shade"><img <strong>class="shade"</strong> src="/montpellier-2.jpg" alt="" width="150" height="152" /></div>
Det er alt (plassering med mer går jeg ut fra at du kan). Du kan bare kopiere koden herfra. Og bakgrunnsbildet, “shadow2.gif”, det finner du her!
{ 2 comments… read them below or add one }
Denne koden gir en veldig pen ramme rundt et bilde:
img{
padding:4px;
border:solid;
border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
border-width: 1px 1px 1px 1px;
background-color:white;
}
Bruker den veldig ofte selv:-)
Sindre Andre:
Takk!
Jeg sjekket den akkurat ut. Den er pen, grei og enkel.
Du kunne gjøre stilen til en “class” slik at du kunne ha flere bildestiler og velge mellom dem bare ved
<img class="xxx" etc