E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale CSS

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  CSS  /  Diverse (5)

Crearea unei galerii de imagini cu CSS

02.03.2009
Crearea unei galerii de imagini cu CSS

O galerie de imagini este o cerinta destul de uzuala pentru o pagina web - o serie de imagini thumbnail care fac legatura cu imagini de dimensiuni mai mari. In acest tutorial este prezentata o tehnica de afisare a acestor imagini folosind CSS.

Total vizualizari: 12021 12021 afisari   |   Comentarii  1   |   Rating   |   (2 voturi)   |   Timp necesar: 20 min 20 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

Sursa:  brandnewbox.co.uk  
Autor:  Andrew Weaver
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

O galerie de imagini este o cerinta destul de uzuala pentru o pagina web - o serie de imagini thumbnail care fac legatura cu imagini de dimensiuni mai mari. In acest tutorial este prezentata o tehnica de afisare a acestor imagini folosind CSS.

Creeaza lista de imagini

Pentru o galerie de imagini, este esentiala o lista de imagini, pentru care, in HTML, ar fi logic sa folosesti o lista neordonata. Pentru fiecare element din lista, imaginea thumbnail are o eticheta si un link catre imaginea mare.

Pentru incepatori sa folosim:

<ul>
  <li>
  <a href="big-image">
    <img src="thumbnail-image" alt="Eticheta" />
  </a></li>
  ...
</ul>

Aranjarea imaginilor in linii si coloane

Pentru a aranja imaginile thumbnail in randuri trebuie sa folosesti urmatorul cod CSS:

li { display: inline; float: left; }

Am fi putut sa folosim si tabele, dar cu CSS numarul coloanelor variaza in functie de latimea disponibila.

Avand in vedere ca imaginile thumbnail pot fi de dimensiuni diferite, poti adauga valori pentru latime si inaltime astfel incat sa obtii o aranjare uniforma.

li { 
  display: inline; 
  float: left;  
  width: 101px; 
  height: 101px; 
}

Adaugarea unei imagini de fundal

Ca sa faci lucrurile si mai dragute, poti adauga o imagine de fundal in < li >.



li { 
  display: inline; 
  float: left; 
  width: 101px; 
  height: 101px; 
  margin: 4px;  
  background: transparent url(frame.gif) no-repeat top left; 
}

Pozitionarea imaginilor thumbnail in centru

Pentru a centra thumbnail-urile, ele pot fi transformate in imagini de fundal pentru tag-ul <a>.

HTML:

<li>
  <a href="" 
    style="background-image: url(thumbnail-image)" /></a>
</li>

CSS:

li a { 
  display: block; 
  width: 101px;
  height: 101px;
  background-position: center; 
  background-repeat: no-repeat;
  text-decoration: none;
}

Afisarea etichetelor

Mutarea unei imagini thumbnail intr-una de fundal duce la pierderea etichetei imaginii din HTML. Pentru a o afisa, trebuie sa o incluzi intr-un < span > din tagul < a >.

HTML:

<li> < a href="" 
  style="background-image: url(thumbnail-image)" />
  <span>Eticheta</span>
  </a></li>

CSS:

 
li { height: 115px; }
li a span { 
  font-size: 9px; 
  position: relative; 
  top: 103px; 
  color: #666;  
  text-transform: uppercase; 
  display: block; 
  text-align: center; 
} 
li a:hover span { color: red; }

Iata un exemplu functional de galerie de imagini.

Ideal ar fi ca imaginile sa fie definite ca taguri < img >. Ca alternativa, a fost creata si o alta metoda bazata pe Javascript si CSS.

Pagina:
1
comenteaza printeaza
Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(2 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (1) spune-ti parerea
bennyy , Luni, 07 Septembrie 2009
#1

Interesant tutorialul.As vrea sa faci si un tutorial despre cum sa se mareasca o poza din site fara a da click pe ea ci doar in momentul in care trec cu mouse-ul pe ea.

Raporteaza acest comentariu ca injurios!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4550
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4460
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4415
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4285
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4165
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
StyleSheet Word Bridge MySQL HTML Flash Fotografie SWF PHP Java Outlook Lightroom COREL DRAW AJAX SEO CSS Dreamweaver Javascript Vista Photoshop Sony Vegas Action Script Fireworks Python XHTML Swift 3D XML Excel Illustrator Ruby on Rails PSD RoR Verilog JSON Gimp Powerpoint
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software