CSS-uri pentru imagini

CSS joacă un rol important în afişarea imaginilor. Cu ajutorul CSS-urilor puteţi stabili următoarele proprietăţi ale unei imagini:

proprietatea border este folosită pentru a seta grosimea bordurii imaginii;
proprietatea height pentru a stabili înălţimea imaginii;
proprietatea width pentru a stabili lăţimea imaginii;
proprietatea opacity pentru a seta opacitatea imaginii.

Proprietatea border poate lua valori în pixeli sau în procente (%). O lăţime a bordurii de zero pixeli înseamnă no border (fără bordură).

Exemple:

<html>
<head>
<title>CSS image border property</title>
</head>
<body>

<img style="border:0px;" src="bufnite.jpg" />
<img style="border:3px dashed red;" src="bufnite.jpg" />

</body>
</html>

<html>
<head>
<title>CSS image height property</title>
</head>
<body>

<html>
<head>
<title>CSS image width property</title>
</head>
<body>

Pentru alte tipuri de borduri studiaţi următorul link: http://www.w3schools.com/css/css_border.asp

Aplicaţie:

Realizaţi diverse borduri pentru mai multe imagini alese de voi. Spre exemplu: