Σε αυτό το βοήθημα θα δούμε πως μπορούμε να χρησιμοποιήσουμε τα CSS3 για να ομορφύνουμε διάφορα html στοιχεία, όπως φόρμες επικοινωνίας και στην ιστοσελίδα μας. Θα εξηγήσουμε βήμα προς βήμα ενώ θα χρησιμοποιήσουμε σκίαση, ντεγκραντέ χρωματισμούς και μερικά άλλα νέα κόλπα που μας φέρνει η νέα έκδοση των Cascading Style Sheets.
HTML
Πρώτα απόλα ας δημιουργήσουμε μια απλή φόρμα με τα κλασσικά στοιχεία που μπορεί να βρεί κάποιος σε μια φόρμα επικοινωνίας. Δημιουργούμε ένα κενό αρχείο 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.
10 Σχόλια
an 8a mporousate na lete AKRIVOS pws 8a ginete 8a me dieukolinate.
dhladh na lete pws akrivos apo8ikeuoume ta files ola auta
kai emena m ta emfanizei etsi
����� ������������
Name
E-mail
Website
�������� ����������
#linearBg{
height: 100px;
background-color: #1a82f7; /* fallback color */
background-image: url(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));
}
oxi opws to dixneis stn eikona … MIPWS KSEREIS GIATI?
Έχει να κάνει με την κωδικοποίηση. Πρέπει να την βάλεις UTF-8 για να τα δείς σωστά
Ποιό πρόγραμμα χρησιμοποιείς για να κάνεις επεξεργασία των αρχείων html και css?
t einai t utf 8?xrisimopoiousa to top style
k kati akoma p.x exw dei se ksena tuts p lene p.x dinoun tn kodika opws eseis k ts lene san t arxeio nt apo8ikeusoun edw dn keei
loipon?
tlk ebala tora t dreamweaver ok alla checkare k t eipa pio pno
Ωραία το λύσαμε λοιπόν το θέμα με τα γράμματα? UTF-8 είναι τύπος κωδικοποίησης. Στο Dreamweaver θα το βρείς κάνοντας δεξί κλίκ και Page Properties. Εκεί λέει κάπου Encoding. Επέλεξε UTF-8 και θα είσαι οκ.
Όσο για τα αρχεία, τα html έχουν κατάληξη .html και τα css κατάληξη .css
nai alla san t css? p.x n lete auto t arxeio t apothikeoume san “tade.css k t allo san 875.html” ktlbs t ennow?
Στο συγκεκριμένο άρθρο χρειάζεσαι 3 αρχεία. Τα index.html, style.css και reset.css