Δημιουργούμε τον καμβά μας

Ανοίγουμε τον αγαπημένο μας text editor (για παράδειγμα το Notepad++) και δημιουργούμε ένα νέο αρχείο HTML. Γράφουμε μέσα στο body τον παρακάτω κώδικα:

Αφού σώσουμε την σελίδα ώς index.html για παράδειγμα, έχουμε δημιουργήσει το περιβάλλον στο οποίο θα βρίσκεται ο καμβάς μας. Συνεχίζουμε γράφοντας μέσα στο head της σελίδας μας τον παρακάτω κώδικα:

%MINIFYHTML67880d01f0c8a1424ab9654161f627460%%MINIFYHTML67880d01f0c8a1424ab9654161f627461%

Έτσι εισάγουμε την jQuery στην σελίδα μας, και “καλούμε” το στοιχείο canvas που δημιουργήσαμε μέσα από την βιβλιοθήκη. Προσοχή, ο javascript κώδικας που γράψαμε στο head, χρειάζεται οπωσδήποτε το στοιχείο canvas που γράψαμε στο body, για να δουλέψει. Από μόνος του δεν κάνει τίποτα.

Ας ζωγραφίσουμε

Στο head μας, αλλάζουμε τον κώδικα στον παρακάτω κώδικα

var ctx = canvas.getContext("2d");
	// Ζωγραφίζουμε τον σταυρό
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(0, 0, 50, 50);
	ctx.fillStyle = "white";
	ctx.fillRect(50, 0, 25, 50);
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(75, 0, 50, 50);
	ctx.fillStyle = "white";
	ctx.fillRect(0, 50, 125, 25);
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(0, 75, 50, 50);
	ctx.fillStyle = "white";
	ctx.fillRect(50, 75, 25, 50);
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(75, 75, 50, 50);
	// Ζωγραφίζουμε τις ρίγες
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(125, 0, 280, 25);
	ctx.fillStyle = "white";
	ctx.fillRect(125, 25, 280, 25);
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(125, 50, 280, 25);
	ctx.fillStyle = "white";
	ctx.fillRect(125, 75, 280, 25);
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(125, 100, 280, 25);
	ctx.fillStyle = "white";
	ctx.fillRect(0, 125, 400, 25);
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(0, 150, 400, 25);
	ctx.fillStyle = "white";
	ctx.fillRect(0, 175, 400, 25);
	ctx.fillStyle = "#0873a5";
	ctx.fillRect(0, 200, 400, 25);
});

O παραπάνω κώδικας μας δίνει το εξής αποτέλεσμα

Ας δούμε λοιπόν τι ακριβώς γίνεται στον παραπάνω κώδικα.

Για να ζωγραφίσουμε παραλληλόγραμμα χρησιμοποιούμε την εντολή:

fillRect(x,y,width,height)

Στην παραπάνω εντολή το χ και το ψ αντιπροσωπεύουν την αρχή του παραλληλόγραμμου, και ώς σημείο 0,0 θεωρούμε την πάνω αριστερή γωνία του παραθύρου μας.

Για να ορίσουμε το χρώμα του παραλληλογράμμου που θα σχεδιάσουμε, ακριβώς στην γραμμή πρίν το σχεδιάσουμε χρησιμοποιούμε την εντολή:

ctx.fillStyle = "#0873a5"

στην οποία δίνουμε σε δεκαεξαδική ή rgb μορφή τον κωδικό του χρώματος.

Τέλος αν θέλουμε να προσθέσουμε και περίγραμμα γύρω από το παραλληλόγραμμο μας χρησιμοποιούμε την εντολή:

strokeRect(x,y,width,height)

με την οποία δίνουμε συντεταγμένες για το που ακριβώς θα ζωγραφιστεί το border.

Χρησιμοποιώντας και επιπλέον εντολές όπως στην λίστα παρακάτω μπορούμε να δημιουργήσουμε rounded corners στα borders μας, με διαφορετικό χρώμα, και διαφορετικό πάχος.

  var rectX = 10;
  var rectY = 10;
  var rectWidth = 100;
  var rectHeight = 100;
  var cornerRadius = 15;
  context.lineJoin = "round";
  context.lineWidth = cornerRadius;
  context.strokeStyle = "rgb(0, 128, 0)";
  context.strokeRect(rectX+(cornerRadius/2), rectY+(cornerRadius/2),
  rectWidth-cornerRadius, rectHeight-cornerRadius);

Διαβάστε περισσότερα για το στοιχείου canvas σε μια από τις καλύτερες ιστοσελίδες για τεχνικά θέματα της HTML5, το DiveIntoHTML5

Εσείς τι μπορείτε να σχεδιάσετε με το στοιχείο canvas; Περιμένουμε στα σχόλια να δούμε τις δικές σας δοκιμές.

Η Ύλη του Σεμιναρίου

Το σεμινάριο θα διαρκέσει 6 ώρες συνολικά και θα διεξαχθεί 3 διαδοχικά Σάββατα του Οκτωβρίου. Αναλυτικότερα στα 3 διαφορετικά Sessions θα δούμε:

Session 1  (Σάββατο 22/10/2011 Ώρα: 18:00)

• Προαπαιτούμενα για την ανάπτυξη εφαρμογών.
• Γνωριμία με το Xcode: Βασικές κατηγορίες εφαρμογών,ξενάγηση  στο περιβάλλον του Xcode, επεξήγηση των συστατικών μίας εφαρμογής.
• Hello World Application,επεξήγηση ModalViewController model και χρήση κουμπιών,Labels,textfield.

Session 2  (Σάββατο 29/10/2011 Ώρα: 18:00)

• Δημιουργία MultiView Application ( πολλαπλών οθονών)
• Χρήση Table για εμφάνιση λίστας δεδομένων. (πχ Contacts του iPhone)

Session 3   (Σάββατο 4/11/2011 Ώρα: 18:00)

• Χρήση Navigation για πλοήγηση μεταξύ διαφορετικών οθονών (πχ Contacts του iPhone)
• Χρήση Tabbar για εμφάνιση πολλαπλών οθονών (πχ Phone του iPhone)

Το κόστος συμμετοχής στο σεμινάριο είναι 33€ η μέρα, δηλαδή 16,50€ την ώρα για live παρακολούθηση την ώρα που θα διαξέγεται. Έτσι θα έχετε την δυνατότητα στο τέλος να κάνετε ερωτήσεις, και να πάρετε απαντήσεις σε απορίες που μπορεί να σας δημιουργηθούν κατά την διάρκεια του σεμιναρίου.

Επίσης μπορείτε να διαλέξετε να δείτε όλο το σεμινάριο μαγνητοσκοπημένο, και το κόστος εγγραφής σε αυτήν την περίπτωση ανέρχεται στα 70€ για την παρακολούθηση και των 6 ωρών.

Εισηγητής του σεμιναρίου είναι ο Γιώργος Τερμετζόγλου, ο οποίος είναι σχεδιαστής και προγραμματιστής iPhone και iPad Applications.

Διαλέξτε τώρα το πακέτο συμμετοχή που σας συμφέρει και μάθετε πως θα αναπτύξετε μία πλήρως λειτουργική εφαρμογή για iPhone ή iPad.

Σημείωση: Στην φόρμα εγγραφής, το κόστος αναγράφεται σε δολάρια λόγω έλειψης πληρωμών του συστήματος σε Ευρώ. Παρόλα αυτά ο PayPal λογαριασμός σας ή η κάρτα σας θα χρεωθεί αυτόματα σε Ευρώ.

Διαβάστε περισσότερα για το 960 Grid System και το πως μπορείτε να το εκμεταλλευτείτε

Κατεβάστε το 960GS

Χρήσιμα links

Κατεβάστε και εσείς τα παραπάνω tools και plugins και κάντε την δουλειά σας πιο εύκολα

Firebug

http://getfirebug.com/

Web Developer ToolBar

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

Dust-Me Selector

https://addons.mozilla.org/en-us/firefox/addon/dust-me-selectors/

YSlow

https://addons.mozilla.org/en-US/firefox/addon/yslow/

Σε μια προσπάθεια να κάνουμε πιο κατανοητά και διακριτά τα βήματα που χρειάζεται να ακολουθηθούν, αλλά και τις γνώσεις που χρειάζονται, για την δημιουργία μιας ιστοσελίδας, από την σκέψη μέχρι την υλοποίηση και την συντήρηση, προσφέρουμε σε όλους τους επισκέπτες μας μια σειρά από προσωπικούς online εκπαιδευτικούς οδηγούς που θα ξεκινήσει τον Σεπτέμβριο.

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

Τι είναι τα GreekTuts Sessions

Τα GreekTuts Sessions είναι μια σειρά από προσωπικούς online εκπαιδευτικούς οδηγούς που θα ξεκινήσουν από τον Σεπτέμβριο. H διεξαγωγή αυτών των οδηγών θα γίνει μέσω μιας online πλατφόρμας e-learning, που σας προσφέρει δυνατότητα αλληλεπίδρασης με τον παρουσιαστή σας. Οι εκπαιδεύσεις είναι προσωπικές, πράγμα που σημαίνει ότι έχετε την δυνατότητα να μάθετε όλα όσα χρειάζεστε από το σπίτι σας, τις ώρες και μέρες που σας βολέυουν.

Κατά την παρουσίαση, θα μπορείτε να δείτε σε video την εκπαίδευση και να κάνετε ερωτήσεις όσο συχνά χρειαστεί. Το μόνο εργαλείο που θα χρειαστείτε είναι ο αγαπημένος σας browser, και πολύ όρεξη για μάθηση.

Επίσης, μετά την ολοκλήρωση των εκπαιδεύσεων, θα μπορείτε να έχετε πλήρη πρόσβαση στα video αλλά και σε όλο το εκπαιδευτικό υλικό, με τους κωδικούς σας για πάντα.

Πακέτα Εκπαιδεύσεων

Σας προσφέρουμε 2 διαφορετικά πακέτα συμμετοχής στις εκπαιδεύσεις, για να διαλέξετε αυτό που σας συμφαίρει και σας βολέυει.

• Πλήρες Πακέτο – Για παρακολούθηση όλης της σειράς
• Συγκεκριμένο Κεφάλαιο – Για παρακολούθηση ενός συγκεκριμένου κεφαλαίου

* Οι τιμές των 2 πακέτων θα ανακοινωθούν σύντομα.

Περιεχόμενα Online Εκπαιδεύσης

Κεφάλαιο 1 – HTML & CSS

Σε αυτό το κεφάλαιο θα καλύψουμε όλες τις βασικές έννοιες για την γλώσσας προγραμματισμού του internet, την HTML, και θα δούμε όλα όσα χρειάζεται για το πώς μπορούμε να δώσουμε μορφοποίηση και στύλ στις σελίδες μας, με την χρήση των CSS.

Κεφάλαιο 2 – Javascript & jQuery

Σε αυτό το κεφάλαιο θα καλύψουμε όλες τις βασικές λειτουργίες για την Javascript και θα δούμε πως μπορούμε έυκολα και γρήγορα να κάνουμε το περιεχόμενο της ιστοσελίδας μας πιο ενδιαφέρον και διαδραστικό για τον χρήστη. Επίσης θα δούμε τα πάντα για την διάσημη βιβλιοθήκη jQuery

Κεφάλαιο 3 – Front End Design

Σε αυτό το κεφάλαιο θα δούμε όλες τις βασικές αρχές που πρέπει να ακολουθούμε κατά την διάρκεια σχεδιασμού μιας ιστοσελίδας, και ποιά είναι τα λάθη που πρέπει να αποφέυγουμε. Επίσης θα δούμε και θα αναλύσουμε ποιά είναι τα διάφορα styles και trends που ακολουθούνται από designers σε όλο τον κόσμο.

Κεφάλαιο 4 – WordPress

Σε αυτό το κεφάλαιο θα μάθουμε για πάντα για το WordPress. Από το πως θα στήσουμε ένα δικό μας απλό blog, μέχρι πως θα δημιουργήσουμε μια κομψή και περίπλοκη ιστοσελίδα χρησιμοποιώντας το WordPress. Τέλος θα δούμε την δομή ενός θέματος και ενός plugin και θα μάθουμε τα βασικά για την δημιουργία του δικού σας θέματος και του δικού σας Plugin.

Κεφάλαιο 5 – SEO & Promotion

Σε αυτό το κεφάλαιο θα μιλήσουμε για τις μηχανές αναζήτησεις και για το πώς μπορούμε να ανεβάσουμε την ιστοσελίδα μας ψηλά στις λίστες αποτελεσμάτων. Θα δούμε διάφορες τεχνικές προαγωγής της σελίδας μας, και όλα όσα πρέπει να αποφύγουμε κατά την προσπάθεια του Search Engine Optimization.

Φόρμα Εκδήλωσης Ενδιαφέροντος

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

[contact-form-7]

Τα cookies είναι μικρά αρχεία κειμένου, που αποθηκεύονται στον υπολογιστή μας όταν σερφάρουμε στο διαδίκτυο. Αυτά τα αρχεία βοηθούν τις ιστοσελίδες να “θυμούνται” κάποιες ρυθμίσεις που έχουμε κάνει, ή κάποια προτίμηση μας στην εκάστοτε ιστοσελίδα. Για παράδειγμα, μια ιστοσελίδα μπορεί να έχει εναλλασόμενες εικόνες παρασκηνίου. Έτσι κάθε φορά που αλλάζουμε εικόνα, αποθηκεύεται ένα cookie με την εικόνα που επιλέξαμε, και έτσι κάθε φορά που φορτώνουμε μια σελίδα από την συγκεκριμένη ιστοσελίδα, διαβάζει τα στοιχεία του cookie, και εφαρμόζει το τελευταίο μας background.

Ο Παραδοσιακός τρόπος

Με την χρήση javascript, μπορούμε να δημιουργήσουμε cookies για οποιαδήποτε χρήση. Ο παραδοσιακός τρόπος δημιουργίας είναι γράφοντας

document.cookie = 'name=value; expires=Thu, 2 Aug 2008 20:00:00 UTC; path=/'

jQuery Cookies

Με την χρήση του plugin Cookie της βιβλιοθήκης jQuery, μπορούμε να δημιουργήσουμε cookies, με πιο απλή σύνταξη, και πιο εύκολη διαδικασία. Δείτε τον παρακάτω κώδικα και συγκρίνετε τον με τον αντίστοιχο της κλασσικής javascript πιο πάνω

$.cookie('myCookie', 'blue', { expires: 2 });

O παραπάνω κώδικας, δημιουργεί ένα cookie ονόματι “myCookie”, του δίνει την τιμή “blue” και του βάζει ημερομηνία λήξης τις 2 ημέρες.

Άλλες λειτουργίες με τα cookies

Με την παρακάτω γραμμή κώδικα μπορούμε να διαβάσουμε την τιμή που έχει μέσα το cookie που έχουμε δημιουργήσει

$.cookie('myCookie');

ενώ με τον παρακάτω κώδικα μπορούμε να του δώσουμε νέα τιμή

$.cookie('myCookie', 'blue');

Τέλος με τον παρακάτω κώδικα μπορούμε να διαγράψουμε την τιμή που έχει μέσα το cookie μας

$.cookie('myCookie', null);

Παράδειγμα

Δείτε μια live επίδειξη της χρήσης των cookies

Μπορείτε να κατεβάσετε και να χρησιμοποιήσετε και εσείς το plugin Cookie από την σελίδα http://github.com/carhartl/jquery-cookie

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

Με την παραπάνω εικόνα ενημερώνουμε τον χρήστη για την διεύθυνση email μας, και ταυτόχρονα δεν επιτρέπουμε στις μηχανές συλλογής email να την δούν. Παρόλαυτά όμως με αυτόν τον τρόπο πρώτον γεμίζουμε την σελίδα μας με εικόνες κάθε φορά που θέλουμε να εμφανίσουμε το email μας, πράγμα που επιβαρύνει και σε θέματα bandwidth, και δεύτερον είναι αρκετά δύσκολο για τον χρήστη γιατί για να επικοινωνήσει μαζί μας, πρέπει να κοιτάει την εικόνα και να κάνει αντιγραφή την διεύθυνση.

Ο σωστός τρόπος λοιπόν να το κάνουμε αυτό είναι ο εξής:

Ανοίγουμε τον κώδικα της σελίδας μας και βρίσκουμε το <head> μέρος στην κορυφή του HTML κώδικα μας.

Εκεί θα προσθέσουμε τις παρακάτω γραμμές

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function() {
$('a.email').each(function(i) {
var text = $(this).text();
var address = text.replace("*[se]*", "@");
$(this).attr('href', 'mailto:' + address);
$(this).text(address);
});
});
</script>

Το μόνο που έχουμε να κάνουμε τώρα, είναι να γράψουμε το email μας με την μορφή

διεύθυνση*[se]*domain.gr

Ας δούμε ακριβώς τι κάνει ο παραπάνω κώδικας για να καταλάβουμε πως λειτουργεί

Με την γραμμή

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

καλούμε την jQuery στην σελίδα μας

Με την γραμμή

$(document).ready(function() {

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

Με την γραμμή

$('a.email').each(function(i) {

επιλέγουμε κάθε <a> tag που έχει class=”email”

Με τις γραμμές

var text = $(this).text();
var address = text.replace("*[se]*", "@");

δημιουργούμε 2 νέες μεταβλητές (text και address) και κάνουμε την μετατροπή των χαρακτήρων *[se]* σε παπάκι (@)

Με τις γραμμές

$(this).attr('href', 'mailto:' + address);
$(this).text(address);

προσθέτουμε τα χαρακτηριστικά href, mailto και την διεύθυνση στο link μας.

Έτσι λοιπόν ο παραπάνω κώδικας, ψάχνει τα <a class=”email”> tags που βρίσκονται στην σελίδα μας, και μετατρέπει τους χαρακτήρες *[se]* σε παπάκι (@).

Με άλλα λόγια, όπου εμείς γράψουμε διεύθυνση*[se]*domain.gr η jQuery θα αναλάβει να το μετατρέψει σε διεύθυνση@domain.gr μόλις φορτώσει η σελίδα

Δοκιμάστε το και εσείς και ίσως ξενοιάσετε από τα ενοχλητικά spam emails.

TIP: Μπορείτε να αλλάξετε το *[se]* σε ότι συνδιασμό χαρακτήρων θέλετε αλλά μετά τα email στον HTML κώδικα σας θα πρέπει να τα μετατρέψετε αναλόγως.

Πως χρησιμοποιώ το Font Directory και το Font API;

To μόνο που έχουμε να κάνουμε είναι να συμπεριλάβουμε σαν stylesheet το font από το Google Directory στο <head> της σελίδας μας. Δείτε το παράδειγμα παρακάτω

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<style>
body { font-family: 'Yanone Kaffeesatz', serif; font-size: 100px; }
</style>
</head>
<body>
Hello World
</body>
</html>

Τι κερδίζουμε χρησιμοποιόντας το Font API;

1. Ελατωμένη χρήση bandwidth (το βάρος το επωμίζεται η Google)
2. Ταχύτητα λόγω Caching  (ίδια fonts που χρησιμοποιούνται σε ιστοσελίδες, αποθηκεύονται στους browser μας)
3. Γενικότερη ταχύτητα (Το Google’s CDN είναι γρηγορότερο από κάθε ιστοσελίδα)

Μπορείτε να βρείτε περισσότερες οδηγίες και την λίστα με τα διαθέσιμα fonts εδώ

Πρώτα απόλα ας δημιουργήσουμε μια απλή φόρμα με τα κλασσικά στοιχεία που μπορεί να βρεί κάποιος σε μια φόρμα επικοινωνίας. Δημιουργούμε ένα κενό αρχείο 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.

Get Ready for HTML 5

CSS code structure for HTML 5: some useful guidelines

HTML 5 Tutorial – A Simple Web Page Layout

HTML5: The Basics (1 of 4)

A Preview of HTML 5

Steve Smith on HTML5 and CSS3

HTML5 Doctor

The Future of HTML 5

5 Exciting Things to Look Forward to in HTML 5

Yes, You Can Use HTML 5 Today!

HTML 5 Pocket Book

HTML 5 PDF Cheat Sheet

HTML 5 Visual Cheat Sheet by Woork

HTML5 Draft Standard

Πηγή άρθρου Line25.com