Το CSS tutorial που ακολουθεί σας εξηγεί αναλυτικά πως μπορείτε να δημιουργήσετε μια gallery εικόνων.H gallery αυτή θα είναι εύκολη στο σχεδιασμό, πολύ εύκολη και οι φωτογραφίες σας θα εμφανίζονται σε αυτή σαν να ήταν από μηχανή POLAROID. Η χρήση των CSS gallery εικόνων είναι πολύ διαδεδομένη στις μέρες μας διότι χρησιμοποιούνται κατά κόρον όταν κάποιος θέλει να δείξει κάποιες δουλειές που έχει κάνει. Θα δημιουργήσουμε λοιπόν μία πολύ απλή gallery όπου οι εικόνες μας θα είναι εμφανίζονται μέσα της σαν να από φωτογραφία που τραβήχτηκε με POLAROID φωτογραφική μηχανή. Στο πρώτο μέρος θα εξηγήσουμε πώς κάνουμε μία css gallery και στο δεύτερο θα προσθέσουμε μία μικρή λειτουργικότητα στην css gallery μας..Θα δείτε…!
Δείτε LIVE DEMO!
Ξεκινώντας την CSS gallery..Αρχικές σκέψεις
1)Για τις μικρογραφίες των φωτογραφίών που θα εμφανίζονται στη css gallery θα χρησιμοποιήσουμε 4 φωτογραφίες που κατεβάσαμε από το site http://www.publicdomainpictures.net/.
2)Στην gallery θα πρέπει όλες οι φωτογραφίες να είναι στο ίδιο μέγεθος. Αλλιώς θα προκληθεί ασυμμετρία και δεν το θέλουμε.
3)Οι φωτογραφίες στη CSS gallery θα είναι Polaroid –style,άρα θα έχουν κείμενο περιγραφής στην κάτω πλευρά τους.
4)Με τον όρο φωτογραφία θα εννοούμε ολόκληρο το περίγραμμα της φωτογραφίας μαζί με τη μικρογραφία της φωτογραφίας που βρίσκεται μέσα του.
Το σχέδιο της CSS gallery και εφαρμογή των σκέψεων.
Απ ότι βλέπουμε αποτελείται από 8 φωτογραφίες και περιβάλλεται από ένα container το οποίο έχει χρώμα ανοικτό γκρι. Ας δούμε λοιπόν μία από αυτές τις φωτογραφίες πιο αναλυτικά….
ΠΕΡΙΟΧΕΣ ΠΟΥ ΠΡΕΠΕΙ ΝΑ ΠΡΟΣΕΞΟΥΜΕ ΣΤΗ ΦΩΤΟΓΡΑΦΙΑ.
Ας εξηγήσουμε μία- μία τις παραπάνω περιοχές στη φωτογραφία….
Περιοχή 1: Αυτό είναι το container κάθε μιας φωτογραφίας -ο χώρος που την περιέχει και την περιβάλλει δηλαδή. Είναι με γκρι χρώμα .Βλέπουμε ότι μέσα σε αυτό υπάρχουν και η μικρογραφία της φωτογραφία μας, η περιοχή 3 καθώς και η περιοχή 2 όπου είναι ο χώρος όπου θα βρίσκεται η περιγραφή της φωτογραφίας. Επίσης βλέπουμε ότι εξωτερικά της περιοχής 1 υπάρχει μία λεπτή γκρι γραμμή, ένα border το οποίο έχει πλάτος 1px. Επίσης, ένα λεπτό border περιβάλλει και τη μικρογραφία της φωτογραφίας δηλαδή την περιοχή 3.Αρα συνοψίζοντας:
Περιοχή 1: Το container περιβάλλει τη μικρογραφία της φωτογραφίας μας καθώς και την περιγραφή της.
Περιοχή 2:Η περιοχή που περιβάλλει την περιγραφή της φωτογραφίας.
Περιοχή 3:H περιοχή που περιέχει την μικρογραφία της φωτογραφίας μας.
Οδηγίες για τα αρχεία που θα χρησιμοποιήσουμε.
Δημιουργήστε μία html σελίδα στον αγαπημένο σας editor ή στο notepad και αποθηκεύστε την σαν gallery.html. Επίσης στον ίδιο φάκελο που αποθηκεύσατε τη σελίδα δημιουργήστε ένα κενό css αρχείο και σώστε το σαν “styles.css”.
CSS Gallery tutorial –HTML ΜΕΡΟΣ
Θα δημιουργήσουμε ένα div το οποίο θα περιβάλλει όλα τα στοιχεία της σελίδας μας-το “wrapper”- και εν συνεχεία θα δημιουργήσουμε ένα div όπου θα περιβάλλει την gallery και θα της δίνει το ελαφρύ γκρι φόντο. Επίσης θα δημιουργήσουμε μόνο μία φωτογραφία καταρχάς διότι όλες οι φωτογραφίες θα είναι παρόμοιες. Άρα θα δημιουργήσουμε μία και εν συνεχεία θα το επαναλάβουμε 8 φορές..!Τέλος ,οι μικρογραφίες φωτογραφιών θα τις κάνουμε μέσω του html κώδικα να εμφανίζονται στη σελίδα σε μέγεθος 150*150px.Ο κώδικας που θα μπει μέσα στα body tags της σελίδας μας είναι:
[html]
<div id="wrapper">
<h2>Polaroid Style fotografies…</h2>
<div class="galleryContainer">
<div class="ourPhoto">
<img src="images/img1.png" alt="" width="“150”" height="“150”" /></p>
<div class="ourTitle">
Φωτογραφία 1
</div>
</div>
</div>
</div>
<p>
[/html]
Εξηγώντας τον παραπάνω κώδικα :
Το div με class “galleryContent” είναι αυτό που θα περιέχονται όλες οι φωτογραφίες μας. Βλέπουμε ότι το div που περιέχει όλη την φωτογραφία μας είναι το “ourPhoto”.Δηλαδή είναι η περιοχή 1 που μιλήσαμε πριν. Επίσης υπάρχει η div «ourTitle» που εκεί γράφουμε την περιγραφή μας. Αυτή είναι η περιοχή 2.Η περιοχή 3 είναι ουσιαστικά στο σημείο που βρίσκεται η μικρογραφία μας δηλαδή το
[html] <img src="images/img1.png" alt="" width="150" height="150" />[/html]
.Το «width» και το «height» δίνει το μέγεθος στην μικρογραφία της φωτογραφίας μας.
Για να δούμε την gallery μας χωρίς να έχουμε εφαρμόσει css..
CSS Gallery tutorial – CSS μέρος.
Ας θυμηθούμε το προηγούμενο tutorial.Εκεί όταν θέλαμε να εφαρμόσουμε κάποιο στυλ σε οποιοδήποτε html στοιχείο χρησιμοποιούσαμε το αντίστοιχο id του στοιχείου αυτού μέσα στο CSS κώδικα. Σε αυτό το tutorial θα χρησιμοποιήσουμε όχι το id του αλλά την κλάση του,class.Θα μπορούσαμε να χρησιμοποιήσουμε και το id εδώ αλλά ΔΕΝ ΤΟ ΚΑΝΟΥΜΕ ΔΙΟΤΙ:
Το id αναφέρεται ΜΟΝΟ ΣΕ ΕΝΑ ΣΤΟΙΧΕΙΟ ΣΤΗ ΣΕΛΙΔΑ ΜΑΣ. Δηλαδή θα αναφερόταν μόνο σε μία φωτογραφία. Άρα για τις 8 φωτογραφίες θα έπρεπε να είχαμε 8 διαφορετικά ids με ίδιο κώδικα, κάτι που δεν το θέλουμε . Θέλουμε ο κώδικας μας να μην επαναλαμβάνεται .Από την άλλη πλευρά το css «class» αναφέρεται σε όλα τα στοιχεία της σελίδας μας που έχουν μία συγκεκριμένη class.Άρα θα γράψουμε ένα κώδικα για την εμφάνιση της κλάσης “ourPhoto” και θα το εφαρμόσουμε σε όλες τις φωτό!!!
Ο κώδικας που θα χρησιμοποιήσουμε για το wrapper και το container:
[css]
*{
margin:0;
padding:0;}
#wrapper {
width:850px;
margin: 0 auto;
color: blue;
}
.galleryContainer{
padding-top:10px;
padding-left:10px;
padding-bottom:10px;
width:736px;
font-family: Verdana, Arial, Helvetica, sans-serif;<br />
font-size: 14px;
font-style: normal;
float: left;
background:#eeeeee;
}
[/css]
Ας δούμε ένα στιγμιότυπο και εξηγούμε κάποια σημεία του κώδικα.
Όπως έχουμε ξαναδεί, όταν δίνουμε στο wrapper μας margin:0 auto όλη η σελίδα μας μετακινείται στη μέση. Στη div με class = “galleryContainer” δίνουμε κάποια paddings –περιθώρια από τη μέσα μεριά του galleryContainer – έτσι ώστε η φωτογραφία μας που βρίσκεται μέσα σε αυτό το container να μην ξεκινάει από πάνω αριστερά αλλά να έχει ένα μικρό περιθώριο και από πάνω και από κάτω και από αριστερά..Το float:left κάνει το galleryContainer να μετακινηθεί όσο πιο αριστερά γίνεται στο wrapper μέσα, το element που το περιέχει δηλαδή.
Ο κώδικας CSS που θα χρησιμοποιήσουμε για τις φωτογραφίες μας.
Στον παραπάνω css κώδικα προσθέτουμε
[css]
.ourPhoto {
border: 1px solid #cccccc;
height: auto;
float: left;
background:#ffffff;
margin-right: 10px;
margin-bottom:10px;
}
.ourPhoto img{
margin-top:10px;
margin-left:10px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid silver;
}
.ourTitle {
text-align: center;
font-size:12px;
width: 150px;
margin-left: 5px;
margin-right:5px;
margin-top:3px;
margin-bottom:5px;
}
[/css]
Για να δούμε λίγο την gallery μας τώρα..
Μία χαρά η φωτογραφία μας ,όπως ακριβώς τη θέλουμε. Για να εξηγήσουμε κάποια σημεία του παραπάνω CSS κώδικα.
.ourPhoto :H div που ανήκει αυτή η css class είναι ουσιαστικά η περιοχή 1 που είδαμε πιο πάνω. Σε αυτή την div φροντίζουμε να δώσουμε το χρώμα που θα περιβάλλει τη μικρογραφία της φωτογραφία μας και ,το λευκό .Επίσης δίνουμε και ένα border 1px πλάτος. Επίσης της δίνουμε ένα margin-top και ένα margin-right που ουσιαστικά είναι το πόσο θα απέχει αυτή η div -με class ourPhoto-από τα άλλα elements από πάνω και προς τα δεξία. Δηλαδή η επόμενη div με class “ourPhoto” ξεκινάει 10px δεξιότερα.
.ourPhoto img: Aυτή η κλάση αναφέρεται σε οποιοδήποτε image link υπάρχει μέσα σε divs με class = “ourPhoto”.Δηλαδή στο
[html]<img src="images/img1.png" alt="" width="150" height="150" />[/html]
Εδώ είναι το στυλ που εφαρμόζουμε στη μικρογραφία που βρίσκεται μέσα στο “ourPhoto” div.Tης δίνουμε ένα border και κάποια margins που ουσιαστικά με αυτά δημιουργούμε την απόσταση μεταξύ της μικρογραφίας και του εξωτερικού border της φωτογραφίας μας (αυτό που δίνουμε στη div με class «ourPhoto».
.ourTitle:Εδώ ορίζουμε μία div στην οποία θα γράψουμε την περιγραφή της φωτογραφίας μας! Δεν έχει τίποτα ιδιαίτερο να εξηγήσουμε εδώ.
Στη συνέχεια στον html κώδικα προσθέσαμε και τις υπόλοιπες φωτογραφίες.Δείτε όλο τον κώδικα html και css εδώ.
Ολόκληρος ο HTML κώδικας – το gallery.html
[html]</p>
<div id="wrapper">
<h2>Polaroid Style fotografies…</h2>
<div class="galleryContainer">
<div class="ourPhoto">
<img src="images/img1.png" alt="" width="150" height="150" />
<div class="ourTitle">
Photo 1</div>
</div>
<div class="ourPhoto">
<img src="images/img2.png" alt="" width="150" height="150" />
<div class="ourTitle">
Photo 2
</div>
</div>
<div class="ourPhoto">
<img src="images/img3.png" alt="" width="150" height="150" />
<div class="ourTitle">
Photo 3
</div>
</div>
<div class="ourPhoto">
<img src="images/img4.png" alt="" width="150" height="150" />
<div class="ourTitle">
Photo 4
</div>
</div>
<div class="ourPhoto">
<img src="images/img2.png" alt="" width="150" height="150" />
<div class="ourTitle">
Photo 5
</div>
</div>
<div class="ourPhoto">
<img src="images/img1.png" alt="" width="150" height="150" />
<div class="ourTitle">
Photo 6
</div>
</div>
<div class="ourPhoto">
<br />
<img src="images/img4.png" alt="" width="150" height="150" />
<div class="ourTitle">
Photo 7
</div>
</div>
<div class="ourPhoto">
<img src="images/img3.png" alt="" width="150" height="150" />
<div class="ourTitle">
Photo 8
</div>
</div>
</div>
</div>
[/html]
Oλόκληρος CSS κώδικας της CSS gallery
[css]
*{
margin:0;
padding:0;
}
#wrapper {
width:850px;
margin: 0 auto;
color: blue;
}
.galleryContainer{
padding-top:10px;
padding-left:10px;
padding-bottom:10px;
width:736px;
font-family: Verdana, Arial, Helvetica, sans-serif;</p>
<p>font-size: 14px;
font-style: normal;
float: left;
background:#eeeeee;
}
.ourPhoto {
border: 1px solid #cccccc;
height: auto;
float: left;<br />
background:#ffffff;
margin-right: 10px;
margin-bottom:10px;
}
.ourPhoto img{
margin-top:10px;
margin-left:10px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid silver;
}
.ourTitle {
text-align: center;
font-size:10px;
width: 150px;
margin-left: 5px;
margin-right:5px;
margin-top:3px;
margin-bottom:5px;
height:30px;
}
[/css]
Και το τελικό αποτέλεσμα είναι εδώ..
Στο δεύτερο μέρος θα προσθέσουμε μία μικρή λειτουργικότητα στην gallery αυτή.
Κατεβάστε από δω τα αρχεία μας html και CSS
Σημείωση: Μην βάζετε keywords στο πεδίο για το όνομα καθώς επίσης και links προς άσχετες ιστοσελίδες με τη θεματολογία του άρθρου. Οι διαχειριστές του ifeed θα μαρκάρουν αυτόματα αυτά τα σχόλια ως spam!
Ακη ωραίο το tutorial σου. Ασχολείσαι καιρό με css?
Πολύ ωραίο tutorial!