Css 10

Administrator Data inscrierii: 07/Dec/2013 Mesaje: 1103

Citat:

Un exemplu de galerie de imagini

<html>
<head>
<style>

div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
fiecare imagine va fi continuta de un div cu border albastru (#0000ff) de un pixel, fiecare pe orizontala de la stanga la dreapta (float : left) avand inaltimea si latimea setata pe auto (in functie de dimensiunea imaginii si pozitionarea div-ului)
div.img img
{
margin: 3px;
border: 2px solid #ffffff;
}
imaginile continute de div-urile de clasa img vor fi la o distanta de borderul div-ului de 3px si vor avea un border invizibil(#ffffff) de 2px.
div.img a:hover img {border: 2px solid #0000ff;}
cand mouse-ul este peste link-ul care contine imaginea se va adauga un border de 2px albastru
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
ne mai trebuie o descriere a imaginii si aceasta va avea o latime de 120 pixeli la o distanta de 2 pixeli de border-ul div-ului in care se afla
</style>
</head>
<body>

<div>

<a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>

<div>adaugati o descriere a imaginii 1</div>

</div>

<div>

<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
</a>

<div> adaugati o descriere a imaginii 2</div>

</div>

<div>

<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
</a>

<div> adaugati o descriere a imaginii 3</div>

</div>

<div>

<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
</a>

<div> adaugati o descriere a imaginii 4</div>

</div>

</body>
</html>

Opacitatea (sau transparenta)

1. Iata urmatorul cod:
<img src="klematis.jpg" width="150" height="113" alt="klematis">
In exemplul de mai sus o poză este transparenta in functie de una dintre cele doua proprietati:
opacity: 0.4 care functioneaza in Firefox
sau
filter:alpha(opacity=40) care functioneaza in Internet Explorer
de aceea cele două proprietati sunt introduse in style(pentru compatibilitate cu ambele browsere).
In Firefox (opacity:x) x poate fi o valoare de la 0.0 la 1.0 . O valoare mai mica produce un urmare de transparenta mai accentuat.
In IE (filter:alpha(opacity=x)) x poate fi o valoare de la 0 - 100. O valoare mai mica produce un rezultat de transparenta mai accentuat.
2.In exemplul urmator se realizeaza un concluzie de transparenta la trecerea mouse-ului peste o imagine:
<html><head>
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40)
}
initial imaginile sunt semitransparente
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="klematis.jpg" width="150" height="113" alt="klematis">
<img src="klematis2.jpg" width="150" height="113" alt="klematis">
</body>
</html>

2. Un exemplu in care un text este intr-un box străveziu asezat peste o imagine
<html><head>
<style>

div.background
{
width: 500px;
height: 250px;
background: url(klematis.jpg) repeat;
border: 2px solid black;
} imaginea pe care va fi asezat box-ul

div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
filter:alpha(opacity=60); pentru IE
opacity:0.6; pentru firefox
}div-ul de colorit alba va fi clar in ambele browsere si va avea un border negru de un pixel

div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>

<div>
<div>
<p>This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>