 |
|
 |
 |
| Subiectul anterior :: Subiectul urmator |
| Autor |
Mesaj |
Admin
Administrator
Data inscrierii: 07/Dec/2013
Mesaje: 44
|
 Trimis: 22/01/2017 18:40 Titlul subiectului: Css 10 |
|
|
| 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 mărimea 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 cele două 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 concluzie de transparenta mai accentuat.
2.In exemplul urmator se realizeaza un rezultat 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 clar 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 străveziu 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> |
|
|
| Sus » |
|
|
|
|
|
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum
|
|
 |
|
|
 |
|
