CSS σημαίνει Cascading Style Sheets. Και τι σημαίνει αυτό; Ας το πάρουμε από την αρχή.

Η γνωστή σε όλους μας γλώσσα προγραμματισμού ιστοσελίδων και εφαρμογών, η HTML, χρησιμοποιείται για την δημιουργία και την περιγραφή στοιχείων σε μια ιστοσελίδα. Όταν λοιπόν εμείς διαβάζουμε ένα κείμενο, όπως αυτό που διαβάζεται αυτήν την στιγμή, o browser μας, δεν το “διαβάζει” όπως και εμείς. Συνήθως τα κείμενα που βρίσκονται σε μια ιστοσελίδα, είναι περιτρυγυρισμέμα σε paragraph tags. Τα Tags είναι ο τρόπος που χρησιμοποιείται για να περιγράψουμε αντικείμενα. Έτσι, ότι βρίσκεται ανάμεσα σε tags, παίρνει και τις αντίστοιχες ιδιότητες.

Αν λοιπόν το κείμενο “Lorem ipsum dolor sit amet, consectetur adipiscing elit.” το γράψουμε <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>, αυτό θα πάρει τις ιδιότητες της παραγράφου, ενώ αν το γράψουμε <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b> θα γίνει bold.

Ωραία ως εδώ. Τι γίνεται όμως όταν θέλουμε αυτό το κείμενο να έχει μεγαλύτερο μέγεθος από κάποιο άλλο στοιχείο paragraph στην ιστοσελίδα μας; H ακόμα χειρότερα άμα θέλουμε να έχουμε 8 διαφορετικά είδη παραγράφων και τίτλων; Εδώ έρχονται και συμπληρώνουν τα CSS. Μέσα από τους selectors (επιλογέας) μπορούμε να “στοχεύσουμε ” στοιχεία στην HTML σελίδα, και να τους δώσουμε στυλ.

Σύνταξη – Δομή

Για να στοχεύσουμε λοιπόν τα διάφορα στοιχεία στην σελίδα μας, πρέπει να γνωρίζουμε την δομή και την σύνταξη μιας CSS εντολής. Ας δούμε καλύτερα σε ένα γράφιμα

Το παραπάνω παράδειγμα, “στοχεύει” όλα τα στοιχεία H1 στην ιστοσελίδα μας. H1 είναι ο μεγαλύτερος σε μέγεθος τίτλος σε ένα κείμενο. Αρχίζοντας λοιπόν, σαν selector, χρησιμοποιούμε το όνομα του tag που θέλουμε να αλλάξουμε. Αφήνουμε ένα κενό, και  ανοίγουμε αγκύλες. Ότι περιέχεται μέσα στις αγκύλες είναι η δήλωση μας . Χρησιμοποιόντας την ιδιότητα (property) color στοχεύουμε το χρώμα του κειμένου. Αμέσως μετά την ιδιότητα βάζουμε άνω και κάτω τελείες και δίνουμε την τιμή μας. Για να κλείσουμε την πρώτη δήλωση, χρησιμοποιούμε το ελληνικό ερωτηματικό (semicolon). Στην δεύτερη δήλωση, χρησιμοποιούμε την ιδιότητα font-size, η οποία αλλάζει το μέγεθος του κειμένου. Βάζουμε άνω και κάτω τελείες και δίνουμε την τιμή που θέλουμε να έχει σε pixels. Κλείνουμε με ελληνικό ερωτηματικό, και με την ανάποδη αγκύλη.

Χρησιμοποιόντας λοιπόν τα CSS μπορούμε να επιλέξουμε όλα τα στοιχεία της ιστοσελίδας μας, και να τους δώσουμε ζωή. Δείτε τον κώδικα ζωντανά μέσω του w3scholls.com χρησιμοποιόντας τον σύνδεσμο που ακολουθεί

Id και Class

Επειδή τα tags της HTML είναι περιορισμένα, τα CSS μας δίνουν την δυνατότητα να δηλώσουμε τα δικά μας μοναδικά ή μη στοιχεία, και να τους δώσουμε στύλ. Αυτό το κάνουμε χρησιμοποιόντας μέσα στα division tags της HTML (τα γνωστά divs) , ID και CLASS. Πως το κάνουμε αυτό; Ας δούμε ένα γράφιμα.

Στα παραπάνω παραδείγματα, βλέπουμε πως μπορούμε να “τυλίξουμε” την παράγραφο μας μέσα σε divs, και να επιλέξουμε ακριβώς αυτό που θέλουμε για να του δώσουμε στύλ. Στην πρώτη περίπτωση μπορεί να θέλουμε να βάλουμε το κείμενο στο κέντρο αλλά να μην θέλουμε το ίδιο για όλα τα <p> tags της σελίδας μας. Έτσι γράφουμε

.test { color: black; text-align:center;}

Αυτό θα επιλέξει όλο το div και θα μετακινίσει το κείμενο του στο κέντρο, χωρίς να επιρεάσει άλλα paragraphs στην σελίδα.

Αν θέλουμε να επιλέξουμε την παράγραφο που υπάρχει μέσα στο div, γράφουμε

.test p { color: black; text-align:left;}

Γενικότερα, όταν θέλουμε να επιλέξουμε στοιχεία μέσα σε divs, γράφουμε αναλυτικά όλο το “μονοπάτι” μέχρι να φτάσουμε σε αυτά. Ας δούμε για παράδειγμα το 3 κώδικα στο γράφιμα παραπάνω. Έχουμε ένα paragraph μέσα σε ένα div μέσα σε ένα id. Για να επιλέξουμε και να δώσουμε στυλ μόνο στην παράγραφο, γράφουμε

#test .test p { color:white; }

Παρατηρήστε ότι έχουμε το ίδιο όνομα στο class και στο id μας. Αυτό δεν πειράζει καθόλου. Τα ID και τα Classes είναι διαφορετικά στοιχεία και έτσι επιτρέπεται να έχουν το ίδιο όνομα.

ΠΡΟΣΟΧΗ: Το σωστό είναι όταν χρησιμοποιούμε ID να μην εμφανίζουμε το ίδιο στοιχείο πάνω από μια φορά στην σελίδα μας. Τα ID δηλώνουν μοναδικά στοιχεία. Το αντίθετο συμβαίνει με τα Classes. Μπουρούμε να έχουμε απεριόριστα αντίγραφα του class μέσα στην σελίδα μας.

Cascading

Και τι πάει να πεί Cascading; Είναι αναφορά στο φαινόμενο του καταράχτη, και ουσιαστικά δείχνει την κληρονομικότητα που έχουν τα στοιχεία των CSS. Και πως εφαρμόζεται αυτό;

Στο τρίτο παράδειγμα που γράψαμε παραπάνω, αν γράψουμε

#test .test p { color:white; }

θα “στοχεύσουμε” την παράγραφο κατευθείαν, και θα της δώσουμε στύλ συγκεκριμένα. Αν όμως δώσουμε στύλ στο ID τι θα συμβεί;

#test { color:white; }

Ακριβώς το ίδο. Όλα τα στοιχεία που περιέχονται μέσα στο ID αυτό θα κληρονομίσουν την ιδιότητα να έχουν λευκό χρώμα στα γράμματα.

Στο επόμενο μέρος…

Αφού κάναμε μια εισαγωγή στα CSS, στο επόμενο μέρος θα δούμε πιο αναλυτικά πράγματα που μπορούμε να κάνουμε με τις επιλογές, τα Ids και τα Classes, και θα ξεκινήσουμε να δίνουμε στύλ σε στοιχεία. Μέχρι τότε, περιμένουμε να ακούσουμε τις απόψεις σας και τις πρακτικές σας πάνω σε θέματα χρήσης των CSS.

Αναλυτικότερα θα δούμε :

• Τις βασικές αρχές
• Την σύνταξη
• Τις κλάσσεις και τα IDs
• Πως δίνουμε στύλ με τα CSS
• Την επεξήγηση του Box Model

Σε κάθε άρθρο θα έχουμε πληθώρα παραδειγμάτων κώδικα, αλλά και όλα τα αρχεία παραδειγμάτων ΔΩΡΕΑΝ προς κατέβασμα για όλους τους αναγνώστες μας.

Tέλος για τους συνδρομητές μας, όλα τα βοηθήματα, θα παρέχονται και σε βίντεο !

Μείνετε μαζί μας, και γίνετε και εσείς ένας CSS Super Hero !!!

Παρακαλουθήστε τα άθρα καθώς αυτά δημοσιεύνται

Βασικές Αρχές

Ξεκινάμε από εκεί που είχαμε μείνει στο πρώτο μέρος. Αφού έχουμε έτοιμη την σελίδα μας, επόμενο βήμα είναι να φορτώσουμε την βιβλιοθήκη jQuery και την επιπλέον βιβλιοθήκη jQueryUI. Στον οδηγό μας θα χρησιμοποιήσουμε αυτές τις δύο βιβλιοθήκες της Javascript για να προσθέσουμε την λειτουργία drag n drop στα παράθυρα μας. Επισκεπτόματε την ιστοσελίδα http://jqueryui.com/download και κατεβάζουμε το πακέτο ώς είναι. Έτσι θα έχουμε 2 αρχεία, το jquery-1.3.2.min.js και το jquery-ui-1.7.2.custom.min.js. Μετά τα αποθηκεύουμε μαζί με τα αρχεία της ιστοσελίδας μας αλλά σε έναν νέο φάκελο με το όνομα scripts.

Βήμα 2

Ανοίγουμε το index.html που φτιάξαμε χτές, και μέσα στο <head> γράφουμε

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Έτσι συμπεριλαμβάνουμε τα δύο αρχεία που κατεβάσαμε, και λέμε στην ιστοσελίδα μας να τα φορτώσει κατά την εκκίνηση.

Βήμα 3

Πρίν κάνουμε οτιδήποτε άλλο, ας προσθέσουμε το περιεχόμενο στην σελίδα μας. Στο <body> του αρχείου index.html και πιο συγκεκριμένα μέσα στο div content προσθέτουμε

<div class="column">
<div class="widget">
<h3>Τελευταία Άρθρα</h3>
<p><strong>Μαθήματα ECDL</strong><br />Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL. <a href="#">Περισσότερα...</a></p>
<p><strong>Eiσαγωγή στην PHP Μέρος 2</strong><br />Σε αυτό το άρθρο θα δούμε το δεύτερο μέρος της εισαγωγής στην PHP, συνέχίζοντας από εκεί που είχαμε μείνει.<a href="#">Περισσότερα...</a></p>
<p><strong>Δημιουργήστε το δικό σας sticker</strong><br />Σε αυτό το βοήθημα θα δούμε βήμα βήμα πως μπορούμε να δημιουργήσουμε το δικό μας αυτοκόλλητο στο Photoshop.<a href="#">Περισσότερα...</a></p>
</div>
<div class="widget">
<h3>Γράψτε για το GreekTuts</h3>
<p>Θέλετε και εσείς να γράψετε άρθρα για το GreekTuts; Διαβάστε περισσότερα εδώ. Οποιοσδήποτε μπορεί να στείλει, γι'αυτό αδράξτε την ευκαιρία και στείλτε μας και εσείς.</p>
</div>
<div>
<h3>Συνεντεύξεις</h3>
<p><strong>Συνέντευξη με τον Γεράσιμο Τσιάμαλο</strong><br />O Γεράσιμος δέχτηκε να μας παραχωρήσει μια συνέντευξη στα πλαίσια του μήνα WordPress και να μοιραστεί μαζί μας τις εμπειρίες του και τις δουλειές του. <a href="#">Περισσότερα...</a></p>
</div>
</div>
<div id="featured">
<h2>Δωρεάν Μαθήματα ECDL</h2>
<p>Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL. Mέσα από την σειρά οδηγών που ξεκινάει τον Ιούνιο, θα μάθετε και εσείς να χρησιμοποιείτε σαν επαγγελματίες τον υπολογιστή στις κύριες εφαρμογές αυτοματισμού γραφείου και τις βασικές υπηρεσίες του διαδικτύου.</p>
</div>
<div class="column">
<div class="widget">
<h3>Γίνε Συνδορμητής Στο GreekTuts</h3>
<p>Κερδίστε πρόσβαση σε επιπλέον υλικό και άρθρα, αλλά και πολλές άλλες παροχές και προσφορές αγοράζοντας μία απο τις συνδρομές που σας προσφέρει το GreekTuts.</p>
</div>
<div class="widget">
<h3>RSS Feed</h3>
<strong>Μαθήματα ECDL</strong>
<p>Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL.</p>
</div>
<div class="widget">
<h3>Επικοινωνία...</h3>
<p>Επικοινωνήστε μαζί μας</p>
<input type="text" value="Όνομα..." />
<input type="text" value="Email..." />
<textarea rows="4" cols="20" value="Μήνυμα..."></textarea>
</div>
</div>
<div class="column">
<div class="widget">
<h3>Οι Φίλοι μας στο Twitter</h3>
<center><img src="styles/twitt.png"></img></center>
</div>
</div>

Έτσι δημιουργούμε 3 στήλες, με 3 blocks στις 2 πρώτες, και 1 block στην τρίτη. Columns είναι οι στήλες και widgets τα blocks.

Βήμα 4

Ανοίγουμε το screen.css στον φάκελο styles, και προσθέτοντας τον εξής κώδικα θα δώσουμε μορφή στο περιεχόμενο μας

#featured {
width:                    592px;
padding:                6px;
margin:                    6px;
margin-left:            18px;
margin-top:                16px;
float:                    left;
height:                    200px;
background:                #333333 url("accent.jpg") no-repeat scroll -200px -40px;
border-radius:            5px;
-moz-border-radius:        5px;
-webkit-border-radius:    5px;
}

#featured h2 {
margin-left:            340px;
color:                    #ffffff;
font-size:                20px;
font-weight:            bold;
}

#featured p {
margin-left:            342px;
color:                    #ffffff;
}

.column {
width:                    290px;
padding:                6px;
margin:                    0;
margin-left:            12px;
float:                    left;
min-height:                300px;
height:                    100%;
}

.widget {
position:                relative;
padding:                6px;
margin:                    0;
margin-top:                10px;
background:                #f3f3f3 url(grad1.png) no-repeat top right;
border-radius:            5px;
-moz-border-radius:        5px;
-webkit-border-radius:    5px;
min-height:                30px;
overflow:                hidden;
border:                    1px solid #C9C9C9;
}
.widget h3 {
margin-top:                -6px;
color:                    #0f57bb;
font-size:                1.6em;
line-height:            2em;
font-weight:            normal;
border-bottom:            1px solid #999999;
background:                transparent url(movable.png) no-repeat center left;
text-indent:            12px;
cursor:                    hand;
text-shadow:            0 1px 0 #FFFFFF;
}

Βήμα 5

Θα χρησιμοποιήσουμε τις εξής εικόνες

accent.jpg

grad1.png

movable.png

twitt.png

Βήμα 6

Τώρα που έχουμε τα πάντα έτοιμα, θα προσθέσουμε την λειτουργία drag n drop. Αυτό το κάνουμε προσθέτοντας στο <head> του index.html και κάτω από τα 2 scripts τον εξής κώδικα

<script type="text/javascript">
$(document).ready(function(){
$(".column").sortable({
connectWith: '.column',
cursor: 'hand',
handle: 'h3',
opacity: 0.2,
change: function(e, i) {
// Post data back to server or update cookie
}
});
$(".widget").append('<div></div>');
$(".close").click(function(){
if ($(this).parent().data("collapsed")=="yes") {
$(this).parent().data("collapsed","no");
$(this).parent().animate({height:$(this).parent().data("height")});
} else {
$(this).parent().data("height",$(this).parent().height());
$(this).parent().data("collapsed","yes");
$(this).parent().animate({height:30});
}
});

});
</script>

Βήμα 7

Στο screen.css θα προσθέσουμε τον παρακάτω κώδικα, για να διορθώσουμε κάποιες ατέλεις που δημιουργούνται

.widget .close {
width:                    25px;
height:                    25px;
position:                absolute;
top:                    0;
right:                    0;
cursor:                    pointer;
}

.ui-sortable-helper {
border:                    3px solid #0f57bb;
cursor:                    move;

}

Βήμα 8

Πλέον η σελίδα μας είναι έτοιμη. Κάθε block που υπάρχει σε αυτήν, μπορεί να μετακινηθεί, και να μικρύνει ή να μεγαλώσει πατώντας το μπλέ κουμπάκι στην επικεφαλίδα του.

Δείτε παρακάτω το τελικό αποτέλεσμα

Οι συνδρομητές μας μπορούν παρακάτω να κατεβάσουν τα αρχεία του βοηθήματος

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

Βήμα 1

Ας ξεκινήσουμε πρώτα δημιουργώνας την σελίδα μας σε HTML. Ανοίγουμε ένα νέο αρχείο με το όνομα index.html και γράφουμε τον εξής κώδικα

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Μετακινούμενα Παράθυρα μέρος 1ο - GreekTuts.net</title>
<link href="styles/screen.css" rel="stylesheet" type="text/css" media="screen" />
<!--
Εδώ θα προσθέσουμε την Javascript στο 2ο μέρος
//-->
</head>
<body>

</body>
</html>

Βήμα 2

Ας προσθέσουμε λοιπόν την επικεφαλίδα την φόρμα αναζήτησης και το μενού πλοήγησης. Στο <body> γράφουμε

<div id="container">

<div id="header">
<h1>GreekTuts</h1>
<input type="text" id="searchbox" value="Αναζήτηση..." />
</div>
<div id="navigation">
<ul>
<li>Κεντρικη</li>
<li>Σχετικα</li>
<li>Blog</li>
<li>Υπηρεσιες</li>
<li>Επικοινωνια</li>
</ul>
</div>

</div>

Βήμα 3

Ας προσθέσουμε και το υποσέλιδο μας. Κάτω ακριβώς από τον παραπάνω κώδικα γράφουμε

<div id="footer">
<ul>
<li>Σχετικά</li>
<li>Υπηρεσίες</li>
<li>Blog</li>
<li>Επικοινωνία</li>
</ul>
<ul>
<li>Άρθρο 1</li>
<li>Άρθρο 2</li>
<li>Άρθρο 3</li>
<li>Άρθρο 4</li>
<li>Άρθρο 5</li>
</ul>
<ul>
<li>Όροι Χρήσης</li>
<li>Απόρητο</li>
<li>Sitemap</li>
</ul>

</div>
<div class="footP">
<p>Σχεδιασμός & Ανάπτυξη : <a href="http://pantso.gr" target="_blank">Pantso</a> για το GreekTuts.net</p>
</div>
</div>

Βήμα 4

Πλέον έχουμε την δομή της σελίδας μας έτοιμη. Ας προσθέσουμε λοιπόν και το στύλ μαζί με εικόνες. Δημιουργούμε ένα αρχείο με το όνομα screen.css και γράφουμε

body {
margin:                    0;
padding:                0;
background:                #9f9f9f;
color:                    #000000;
font-size:                62.5%;
font-family:            arial, helvetica, sans-serif;
}

h1 {
font-family:            helvetica, arial, sans-serif;
margin-left:            12px;
height:                    120px;
width:                    300px;
color:                    #ffffff;
text-indent:            -10000px;
overflow:                hidden;
background:                transparent url(logo.png) center left no-repeat;
}

a {
color:                    #0f57bb;
text-decoration:        none;
}

#searchbox {
position:                absolute;
bottom:                    10px;
right:                    22px;
font-size:                1.8em;
font-weight:            normal;
border:                    1px solid #660000;
color:                    #bdbdbd;
padding:                5px;
bottom:                    40px;
}

h2 {
color:                    #7FA9A5;
font-size:                1.6em;
font-weight:            normal;
}

p {
font-size:                1.2em;
line-height:            1.5em;
}

#container {
margin:                    0;
padding:                0;
position:                relative;
width:                    960px;
margin:                    auto;
background:                #ffffff;
border-left:            10px solid white;
border-right:            10px solid white;
border-bottom:            10px solid white;
top:                    -20px;
}

#header {
margin:                    0;
padding:                0;
position:                relative;
width:                    960px;
height:                    120px;
background:                #0f57bb url(headerbg.png) repeat-x top left;
}

#navigation {
background:                transparent url(navbg.png) repeat-x top left;
height:                    35px;
margin-top:                2px;
margin-bottom:            2px;
}

#navigation ul {
margin:                    0;
padding:                0;
}

#navigation ul li {
list-style:                none;
font-size:                1.7em;
text-transform:            uppercase;
float:                    left;
padding-left:            41px;
padding-right:            41px;
line-height:            35px;
color:                    #aeaeae;
border-right:            1px inset #cdcdcd;
cursor:                    pointer;
}

#navigation ul li:hover {
background:                #394eb8;
color:                    #ffffff;
}

#content {
margin-top:                1px;
padding-top:            12px;
background:                #dddddd;
float:                    left;
width:                    960px;
padding-bottom:            12px;
min-height:             300px;
}
#footer {
height:                    100px;
background:                #313131;
color:                    #ffffff;
border-top:                2px solid #ffffff;
clear:                    left;
}

#footer ul {
margin:                    0;
padding:                0;
margin-top:                10px;
float:                    left;
width:                    290px;
padding-left:            12px;
margin-left:            12px;
border-left:            1px solid white;

}

#footer ul li {
list-style:                none;
text-transform:            uppercase;
line-height:            2em;
font-size:                0.8em;
}

.footP {
margin:                    0 auto;
text-align:                center;
}

Βήμα 5

Οι εικόνες που θα χρησιμοποιήσουμε είναι οι εξής

logo.png

headerbg.png

navbg.png

Συμπεριλαμβάνουμε τις εικόνες και το screen.css σε έναν φάκελο με το όνομα styles και αυτό ήταν! Πλέον έχουμε έτοιμη την σελίδα μας τόσο δομικά όσο και στυλιστικά. Δείτε παρακάτω ένα demo του τι έχουμε κάνει μέχρι τώρα στο πρώτο μέρος.

Στο δεύτερο μέρος, αύριο, θα δούμε πως θα προσθέσουμε το περιεχόμενο μας, και πως θα κάνουμε τα διάφορα blocks να δέχονται drag n drop, ώστε να μπορούμε να τα μετακινούμε μέσα στην ιστοσελίδα, και να τα ανακατανέμουμε όπως εμείς θέλουμε.

Οι συνδρομητές μας μπορούν παρακάτω να κατεβάσουν τα αρχεία του βοηθήματος

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

Τι θα χρειαστούμε

Για την δημιουργία του μενού θα χρειαστούμε τα εξής:

• Την εικόνα bg.jpg για το φόντο
• Ένα μικρό πλαίσιο
• και σκιά

HTML

Δημιουργούμε ένα νέο αρχείο με το όνομα index.html και γράφουμε τον εξής κώδικα:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
	<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>

<div id="nav-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>

</body>
</html>

CSS

Ας δώσουμε ζωή στο μενού μας.

Δημιουργούμε ένα αρχείο και το ονομάζουμε style.css. Γράφουμε τον εξής κώδικα:

#nav-menu{
background: url(bg.jpg) no-repeat;
width: 901px;
height: 62px;
border: 1px solid #000000;
border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}

#nav-menu ul{
list-style: none;
padding: 0;
margin: 0;
width: 901px;
height: 62px;
}

#nav-menu li{
float: left;
margin: 0 0.15em;
}

#nav-menu li a{
height: 4em;
line-height: 3.6em;
float: left;
width: 6.7em;
display: block;
color: #ffffff;
text-decoration: none;
text-align: center;
}

#nav-menu li a:hover{
background-color: rgba(0, 0, 0, 0.2);
height: 60px;
}

Επίσης, δημιουργούμε ένα ακόμα αρχείο με το όνομα ie.css και γράφουμε:

#nav-menu{
border: none;
}
#nav-menu li a:hover{
background-color: #000;
}

(αυτό θα βελτιώσει την εμφάνιση του μενού στον Internet Explorer)

Τελικό Αποτέλεσμα

CSS

Στο αρχείο CSS που χρησιμοποιούμε, θα προσθέσουμε τις παρακάτω γραμμές κώδικα:

a.pdf {
background: url(images/pdf.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

a.txt {
background: url(images/text.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

a.zip {
background: url(images/zip.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

a.email {
background: url(images/email.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

a.external {
background: url(images/link.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

jQuery

Τώρα αυτό που χρειάζεται να κάνουμε είναι να δημιουργήσουμε το script της jQuery που θα αναλαμβάνει να ψάχνει τους συνδέσμους για καταλήξεις αρχείων, και να προσθέτει τις εικόνες μας. Γράφουμε λοιπόν στο <head> μέρος της σελίδας μας τον εξής κώδικα:

<script type="text/javascript">

$(document).ready(function() {

// Προσθέτει το εικονίδιο στα pdf
$("a[href$='.pdf']").addClass("pdf");

// Προσθέτει το εικονίδιο στα doc, rtf και txt
$("a[href$='.doc'], a[href$='.txt'], a[href$='.rft']").addClass("txt");

// Προσθέτει το εικονίδιο στα Zip αρχεία (zip και rar)
$("a[href$='.zip'], a[href$='.rar']").addClass("zip");

// Προσθέτει το εικονίδιο στους email συνδέσμους
$("a[href^='mailto:']").addClass("email");

//Προσθέτει το εικονίδιο στους εξωτερικούς συνδέσμους
$('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).addClass("external");

});
</script>

Επεξήγηση κώδικα
Ουσιαστικά ο κώδικας μας ψάχνει τα href tags για καταλήξεις. Αντιστοίχως λοιπόν όπoυ βρεί την κατάληξη που θα ψάξουμε, προσθέτει την αντίστοιχη κλάση, ώστε να μπορούμε μετά να αλλάξουμε την εμφάνιση του με τα CSS.

Ο παραπάνω κώδικας κάνει το εξής:
$(document).ready(function() – Ελέγχουμε ότι η σελίδα έχει φορτώσει πλήρως πρίν κάνουμε το οτιδήποτε
$(“a[href$='.pdf']“) – Ψάχνουμε τα a[href] tags. Όπου βρεί την κατάληξη .pdf
.addClass(“pdf”); – προσθέτει την κλάση pdf.

Τέλος πρέπει να κάνουμε την σελίδα μας να φορτώνει την βιβλιοθήκη της jQuery. Αυτό το κάνουμε γράφοντας στο <head> μέρος της σελίδας μας τον εξής κώδικα:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
     <title>Βιογραφική Σελίδα</title>

</head>

<body>    

</body>

</html>

Τα στύλ που θα χρησιμοποιήσουμε στην ιστοσελίδα μας θα είναι inline πράγμα που σημαίνει πως δεν θα κάνουμε επισύναψη εξωτερικού αρχείου στύλ, αλλά θα συμπεριληφθεί στον κώδικα μας. Αυτό το κάνουμε βάζοντας στον <head> της σελίδας μας τον εξής κώδικα

<style type="text/css">

</style>

Τώρα θα προσθέσουμε στο το <body> μέρος του κώδικα μας τα εξής:

<div id="wrapper">

    <div id="header">
    	<div id="title">
            <h1>Όνοματεπώνμο</h1>
            <small>Accounting Technician <span>|</span> Web Designer</small>
        </div>
        <dl id="contact">

            <dt>Διεύθυνση:</dt>

    <dd>123 Οδός, Αθήνα 12345</dd>
            <dt>Τηλέφωνο:</dt>
      <dd>(+30)210 12 34 567</dd>
            <dt>E-mail:</dt><dd><a href="mailto:yourname@yourdomain.com">yourname@yourdomain.com</a></dd>
            <dt>Ιστοσελίδα:</dt><dd><a href="http://www.yourdomain.com">www.yourdomain.com</a></dd>
       <dt class="no-print">Φωτογραφία:</dt>
          <dd class="no-print"><a rel="lightbox" href="assets/img/photo.jpg" title="Glenn McKeown" >φωτογραφία</a></dd>

        </dl>
        <big>&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque   adipiscing facilisis suscipit. Duis lectus purus, rhoncus at euismod ac,   tristique eget felis. Integer dictum, nisl eget pretium consequat, quam   enim scelerisque elit, ac dictum nisl dolor id dui. Nullam eu lacus   nisl. &quot;</big>
    </div>
    <div id="content">
    <div class="row">
  	<div class="col-mid">
        	<h2>&Epsilon;&rho;&gamma;&alpha;&sigma;&#943;&alpha;</h2>
            <p class="date">Νοε 2004 - Σήμερα</p>

            <h3>Roads Service Management Accounts</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien quis elit pretium ornare. Donec augue risus, pellentesque eget hendrerit id, ultricies nec erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

            <p class="date">Ιουλ 2001 - Νοε 2004</p>
          <h3>Senior Web Designer</h3>
            <p>This is an example of how a paragraph might look with a few hyperlinks thrown in. You may to link to your <a href="#">portfolio site</a>, your <a href="#">blog</a>, a previous employer or <a href="#">something else</a>. Be sure to keep it relevant and within the scope of the job you are applying for.</p>

            <p class="date">Δεκ 1999 - Ιουλ 2001</p>
            <h3>Circus Performer</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien quis elit pretium ornare. Donec augue risus, pellentesque eget hendrerit id, ultricies nec erat.</p>
        </div>
        <div class="col-min">

        	<h2>&Epsilon;&kappa;&pi;&alpha;&#943;&delta;&epsilon;&upsilon;&sigma;&eta;</h2>
            <p class="date">2006 - 2008</p>
            <h3>Belfast Institute of Further &amp; Higher Education</h3>
         <p>Institute of Accounting Technicians in Ireland – with Distinction.</p>

            <p class="date">1993 - 2000</p>

            <h3>Ballymena Academy</h3>
            <p><strong>A-Levels:</strong> Economics, Computing<br />
			<strong>GCSE:</strong> Biology, Business Studies, Information , English, Maths, Geography, Physics, Media Studies, Spanish</p>
      </div>
    </div>

    <div class="row">
        <div class="col-min">
        	<h2>&Sigma;&upsilon;&sigma;&tau;&#940;&sigma;&epsilon;&iota;&sigmaf;</h2>
            <h3>Current Employer</h3>
            <p>Lorem ipsum<br />
Management Accounts<br />
Lorem ipsum <br />
            Management Accounts<br />
            </p>

            <h3>Previous Employer</h3>
            <p>Lorem ipsum<br />
            Management Accounts<br />
          Lorem ipsum      </p>
      </div>
        <div class="col-min">
        	<h2>&Sigma;&epsilon;&mu;&iota;&nu;&#940;&rho;&iota;&alpha;</h2>

            <ul class="spaced">
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Lorem ipsum dolor sit amet</li>
        	</ul>
        </div>

        <div class="col-min">
        	<h2>&Epsilon;&xi;&epsilon;&iota;&delta;&#943;&kappa;&epsilon;&upsilon;&sigma;&eta;</h2>
            <h3>Λογισμικό</h3>
            <ul>
                <li>MS Office</li>
                <li>Dreamweaver</li>
                <li>Photoshop</li>

        	</ul>
            <h3>Γλώσσες Προγραμματισμού</h3>
          <ul>
                <li>HTML / CSS</li>
                <li>PHP</li>
                <li>Javascript</li>
                <li>Web Standards</li>

        	</ul>
           <h3>Επιπλέον Ειδικέυσεις</h3>
            <ul>
                <li>Communnication skills</li>
                <li>Project management</li>
                <li>Presentation skills</li>
        	</ul>

        </div>
    </div>
    <div class="row">
        <div class="col-max">
        	<h2>&Epsilon;&pi;&iota;&pi;&lambda;&#941;&omicron;&nu; &Pi;&lambda;&eta;&rho;&omicron;&phi;&omicron;&rho;&#943;&epsilon;&sigmaf;</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque   adipiscing facilisis suscipit. Duis lectus purus, rhoncus at euismod ac,   tristique eget felis. Integer dictum, nisl eget pretium consequat, quam   enim scelerisque elit, ac dictum nisl dolor id dui. Nullam eu lacus   nisl. </p>
        </div>
    </div>
    </div>
    <div id="footer">
    <p>&nbsp;</p>
    </div></div>

Τέλος για να δώσουμε την τελική μορφή του βογραφικού μας θα γράψουμε τον εξής κώδικα στο <style> μέρος του εγγράφου μας:

html {
	background:url(img/bg.jpg) fixed repeat #777;
	}
#wrapper {
	background-color:#fff;
	margin:50px auto;
	overflow:hidden;
	padding:0;
	width:903px;
	}
#header {
	background:url(img/bg-header.jpg) top left no-repeat;
	float:left;
	padding:40px 40px 0 40px;
	overflow:hidden;
	width:823px;
	}
	#title {
		float:left;
		}
#content {
	background:url(img/bg-content.jpg) top left repeat-y;
	float:left;
	padding:0 30px;
	width:843px;
	}
#footer {
	background:url(img/bg-footer.jpg) bottom left no-repeat;
	float:left;
	padding:0 30px;
	width:843px;
	}
.row {
	float:left;
	margin:20px 0 0 0;
	width:843px;
	}
	.col-min {
		float:left;
		margin:0 10px;
		width:260px;
		}
	.col-mid {
		float:left;
		margin:0 10px;
		width:540px;
		}
	.col-max {
		float:left;
		margin:0 10px;
		width:820px;
		}

body {
	color:#333;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size:14px;
	font-weight:normal;
	line-height:20px;
	}
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	}
h1 {
	color:#333;
	font-size:48px;
	line-height:48px;
	}
h2 {
	color:#5274b7;
	font-size:28px;
	line-height:28px;
	padding:0 0 10px 0;
	}
h3 {
	color:#333;
	font-size:16px;
	line-height:20px;
	padding:0 0 5px 0;
	}
p {
	padding:0 0 20px 0;
	}
a {
	color:#5274b7;
	}
a:link {
	text-decoration:underline;
	}
a:visited {
	text-decoration:underline;
	}
a:hover {
	text-decoration:none;
	}
a:active {
	text-decoration:none;
	}
a:focus {
	outline:none;
	}
b, strong {
	font-weight:bold;
	}
i, em {
	font-style:italic;
	}
small {
	font-size:13px;
	}
	small span {
		color:#5274b7;
		}
big {
	clear:both;
	color:#888;
	float:left;
	font-size:16px;
	font-style:italic;
	letter-spacing:1px;
	line-height:22px;
	padding:30px 0 10px 0;
	width:100%;
	}

ul {
	padding:0 0 20px 0;
	}
ul li {
	line-height:20px;
	padding:0;
	list-style:none outside none;
	}
	.spaced li {
	line-height:20px;
	list-style:inside square;
	padding:0 0 20px 0;
	}
#contact {
	float:right;
	padding-top:10px;
	width:300px;
	}
	#contact dt {
		color:#888;
		float:left;
		font-style:italic;
		padding-right:10px;
		text-align:right;
		width:60px;
		}
	#contact dd {
		float:left;
		width:230px;
		margin-right:-40px;
		}

.date {
	color:#888;
	padding:0;
	}

Τελικό Αποτέλεσμα

Τι θα χρειαστούμε

Για την δημιουργία του κουμπιού θα χρειαστούμε τα εξής:

• Ένα ντεγκρατνέ για το φόντο
• Στρογγυλοποιημένες γωνίες
• Ένα μικρό πλαίσιο
• Σκιά
• Και σκιά για το κείμενο μας

HTML

Δημιουργούμε ένα νέο αρχείο με το όνομα index.html και γράφουμε τον εξής κώδικα:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen,projection" />

<title>CSS3 Button</title>
</head>

<body>
Button

</body>
</html>

CSS

Αφού έχουμε το κουμπί μας έτοιμο ώρα να του δώσουμε και χρώμα

Δημιουργούμε ένα αρχείο και το ονομάζουμε style.css. Γράφουμε τον εξής κώδικα:

.css3button a {
background:url("background.gif") repeat-x scroll center bottom #0DB9E9;
padding: 5px 10px 5px 10px;
text-align: center;
font-weight: bold;
color: #006D85;
text-decoration: none; border: 1px inset #aaa;
-webkit-border-radius: 8px; width: auto; -moz-border-radius: 8px;  -khtml-border-radius: 8px;  border-radius: 8px;
-moz-box-shadow: 0 0 0 #666666;
-webkit-box-shadow: 1px 1px 1px #666;
box-shadow: 1px 1px 1px #666;
text-shadow: rgba(0,0,0, .5) 0px -1px 0px;
border: 1px solid #106176;
}

.css3button a:hover  {
background: #ffffff;
text-shadow: rgba(0,0,0, .5) 0px 1px 0px;
}

Τελικό Αποτέλεσμα

Πρώτα απόλα ας δημιουργήσουμε μια απλή φόρμα με τα κλασσικά στοιχεία που μπορεί να βρεί κάποιος σε μια φόρμα επικοινωνίας. Δημιουργούμε ένα κενό αρχείο html και γράφουμε τον κώδικα που ακολουθεί:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
<title>CSS3 και HTML Στοιχεία - GreekTuts</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>

<form>

<p>
<input type="text" name="name" id="name" />
<label for="name">Name</label>
</p>

<p>
<input type="text" name="email" id="email" />
<label for="email">E-mail</label>
</p>

<p>
<input type="text" name="web" id="web" />
<label for="web">Website</label>
</p>

<p>
<textarea name="text"></textarea>
</p>

<p>
<input type="radio" name="sex" value="male" /> Male

<input type="radio" name="sex" value="female" /> Female
</p>

<p>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</p>

<p>
<input type="submit" value="Send" />
</p>

</form>

</body>
</html>

Aφού λοιπόν έχουμε έτοιμη την σελίδα μας ας δούμε τι μπορούμε να κάνουμε σε ότι αφορά την εμφάνιση της.

CSS & CSS3

Αν παρατηρήσουμε στην γραμμή 7 έχουμε συνδέσει ένα αρχείο css. Αυτό το αρχείο θα δημιουργήσουμε και θα το ονομάσουμε style.css

Μέσα λοιπόν θα αρχίσουμε να διαμορφώνουμε την φόρμα μας. Έτσι γράφουμε

body { padding:50px 100px; font:13px/150% Verdana, Tahoma, sans-serif; }

Αυτό είναι για να δώσουμε μια συγκεκριμένη θέση στην φόρμα μας. Συνεχίζουμε προσθέτοντας όλα τα στοιχεία της φόρμας μας.

input, textarea {
}

textarea {
}

input:hover, textarea:hover,
input:focus, textarea:focus {
}

.form label {

}

.submit input {
}

Τώρα το μόνο που έχουμε να κάνουμε έιναι να διαμορφώσουμε όπως θέλουμε τα στοιχεία. Έτσι γράφουμε

input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
}

textarea {
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
}

.form label {
margin-left: 10px;
color: #999999;
}

.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
}

Αν κάνουμε τώρα μια προεπισκόπηση θα δούμε ότι έχουμε ορίσει το πλάτος, το περίγραμμα, αποστάσεις και χρώματα. Τελειώνοντας με την φόρμα μας θα προσθέσουμε και ένα ντεγκραντέ εφέ χρησιμοποιόντας μόνο css.

input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
background: #FFFFFF url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

textarea {
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}

.form label {
margin-left: 10px;
color: #999999;
}

.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
}

Με μια προεπισκόπηση θα δούμε ότι η φόρμα μας έχει γίνει αγνώριστη. Να σημειώσουμε ότι η επιλογή -moz- μιλάει στον firefox. Η αντίστοιχη για όλους τους άλλους browsers είναι -webkit- για τον safari και χρειαζόμαστε εικόνα για τον IE. Η εικόνα που χρησιμοποιούμε είναι στην συγκεκριμένη περίπτωση αυτή

CSS3 Gradients

Αναλυτικά με τα gradients η εντολή που δίνουμε είναι η εξής.

div {

background-color: #1a82f7; /* fallback color */

background-image: url(images/linear_bg_2.png); /* fallback image */

background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

}

Ας δούμε ένα παράδειγμα. Δημιουργούμε ένα νέο html αρχείο και γράφουμε

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>CSS3 Gradiet</title>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<link rel="stylesheet" href="reset.css" type="text/css" media="screen" />

<style type="text/css">

body {background: #e6e9ed; font: 12px Arial, Helvetica, sans-serif; color: #333;}
#header {height: 100px; overflow: hidden; width: 100%; position: relative;}
#header h1 {margin: 0 20px; border: none; font-size: 16px;}
#content {
width: 760px;
margin: 20px auto;
background: #fff;
border: 1px solid #ddd;
padding: 20px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

h1 {font-size: 25px; padding: 0 0 10px; margin: 0 0 10px; color: #1a82f7; border-bottom: 1px solid #ddd;}
h2 {font-size: 18px; padding: 10px 0; color: #1a82f7}

#linearBg{
height: 100px;
background-color: #1a82f7; /* fallback color */
background-image: url(images/linear_bg_2.png); /* fallback image */
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}

pre {
margin: 5px 0 20px 0; padding: 15px; background: #eee; overflow: auto;
}

</style>

</head>

<body>

<div id="content">

<h1>CSS3 Gradient</h1>

<h2>Linear background</h2>

<div id="linearBg"></div>
<pre>#linearBg {
height: 100px;
background-color: #1a82f7; /* fallback color */
background-image: url(images/linear_bg_2.png); /* fallback image */
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}</pre>

</div>

</body>

</html>

Η εικόνα που θα χρησιμοποιήσουμε είναι αυτή.

Κάντε μια επισκόπηση και θα δείτε ένα απίθανο gradient φτιαγμένο με CSS.

HTML

Δημιουργούμε ένα κενό αρχείο html και γράφουμε τον εξής κώδικα στο < body > κομμάτι

<ul>

<li>

<a href="#" class="thumb"><span><img src="image.jpg" alt="" /></span></a>

<h2><a href="#">Image Name</a></h2>

</li>

</ul>

CSS

Αφού έχουμε έτοιμο το αρχείο μας, θα δημιουργήσουμε και θα συνδέσουμε το αρχείο του στυλ. Δημιουργούμε το style.css και γράφουμε τον εξής κώδικα

body {

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

-x-system-font:none;

background:#FFFFFF none repeat scroll 0 0;

font-family:Verdana,Arial,Helvetica,sans-serif;

font-size:10px;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:normal;

height:100%;

line-height:normal;

margin:0;

padding:0;

position:relative;

}

h1 {

font-size:2.5em;

font-weight:normal;

text-align:center;

}

h1 small {

color:#999999;

display:block;

font-size:0.7em;

}

img {

border:medium none;

}

ul.gallery {

list-style-image:none;

list-style-position:outside;

list-style-type:none;

margin:0 auto;

padding:0;

width:708px;

}

ul.gallery li {

-moz-border-radius-bottomleft:3px;

-moz-border-radius-bottomright:3px;

-moz-border-radius-topleft:3px;

-moz-border-radius-topright:3px;

border:1px solid #CCCCCC;

display:inline;

float:left;

margin:10px;

padding:0;

text-align:center;

}

ul.gallery li a.thumb {

border-bottom:1px solid #CCCCCC;

cursor:pointer;

height:182px;

padding:5px;

width:204px;

}

ul.gallery li span {

display:block;

height:182px;

overflow:hidden;

width:204px;

}

ul.gallery li a.thumb:hover {

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

background:#333333 none repeat scroll 0 0;

}

ul.gallery li h2 {

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

background:#F0F0F0 none repeat scroll 0 0;

border-top:1px solid #FFFFFF;

font-size:1em;

font-weight:normal;

margin:0;

padding:10px;

text-transform:uppercase;

}

ul.gallery li a {

color:#777777;

display:block;

text-decoration:none;

}

Για να συνδέσουμε το αρχείο στυλ με την ιστοσελίδα μας γράφουμε τον εξής κώδικα στο <head> μέρος του Index.html

<link rel="stylesheet" type="text/css" href="style.css" media="screen">

Η Εικόνα Μας

Για το σημερινό βοήθημα θα χρησιμοποιήσουμε τα css sprites (image replacement). Έτσι θα δημιουργήσουμε την εικόνα μας η οποία μέσω του css και της jQuery θα μετακινείται

Μπορείτε να κατεβάσετε τα αρχεία στο τέλος του άρθρου

jQuery

Τέλος αφού έχουμε τα αρχεία μας έτοιμα, είναι ώρα να δημιουργήσουμε το εφέ μας. Θα γράψουμε τον παρακάτω κώδικα στο <head> κομμάτι της ιστοσελίδας μας

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Θα δημιουργήσουμε το εφέ γράφοντας λίγη jQuery, σε ένα νέο αρχείο με το όνομα fade.js

$(document).ready(function() {

       $("ul.gallery li").hover(function() { //Όταν ο χρήστης κάνει hover...

              var thumbOver = $(this).find("img").attr("src"); //Βρές το url της εικόνας και ανάθεσε το στο 'thumbOver'

               //Όρισε την εικόνα παρασκηνίου (thumbOver) στο <a> tag - Όρισε την θέση ώς bottom
              $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

              //Θέσε στην εικόνα 0 opacity (fade out)
              $(this).find("span").stop().fadeTo('normal', 0 , function() {
                      $(this).hide() //Κρύψε την εικόνα μετά το fade
              });
       } , function() { //Όταν ο χρήστης κάνει hover out...
              //Ξαναφέρε την εικόνα σε full opacity
              $(this).find("span").stop().fadeTo('normal', 1).show();
       });

});

Τέλος θα προσθέσουμε το παρακάτω κομμάτι κώδικα στο <head> μέρος της σελίδας μας ώστε να συμπεριλάβουμε το αρχείο που μόλις φτιάξαμε.

<script type="text/javascript" src="fade.js"></script>

Δείτε το τελικό αποτέλεσμα εδώ

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ