Informatica
Programare - Software - Web Design
|
Nou pe simpatie:
alexxandra pe Simpatie
 | Femeie
24 ani
Timis
cauta Barbat
26 - 59 ani |
|
|
InformaticaInregistrareLoginPozeNu sunteti logat. Lista Forumurilor Pe Tematici
|
| #1 |
 AdminAdministrator
Postari: 315
|
|
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 imagine 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 ambele proprietati sunt introduse in style(pentru compatibilitate cu ambele browsere).
In Firefox (opacity ) x poate fi o valoare de la 0.0 la 1.0 . O valoare mai mica produce un efect 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 efect de transparenta mai accentuat.
2.In exemplul urmator se realizeaza un efect 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 transparent 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 culoare alba va fi transparent 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> |
|
|
| |
|
