Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Πέμπτη, Ιουνίου 24

6

Εισαγωγή στο CSS3 - Μέρος 4ο: Τext shadow


CSS3Τext shadow
CSS3 Τext shadow

Σε αυτό το κείμενο θα κάνουμε μια μικρή εισαγωγή σε άλλο ένα css property που ονομάζετε text-shadow . Αν και αυτή η δυνατότητα δεν είναι καινουργια στο CSS3. Είχε αρχικά προταθεί στο CSS2 όμως ήταν πολύ χρονοβόρα διαδικασία  .
Τώρα όμως έχει γίνει πάρα πολύ απλή διαδικασία και στην ουσία αυτό που έχουμε να κάνουμε μόνο είναι, να δώσουμε την εντολή text-shadow στο επιλεγμένο μας κείμενο και όλα τα υπόλοιπα γίνονται αυτόματα .
Αυτό που μου αρέσει πάρα πολύ ,είναι ότι μας δίνει την δυνατότητα να δημιουργήσουμε όμορφα εφέ και σκίαση στο κείμενο μας , χωρίς να χρησιμοποιήσουμε Photoshop .

Σε αυτό το άρθρο θα περιγράψουμε τους τρόπους με τους οποίους δουλεύει το text-shadow  και τι μπορείτε να κάνετε με αυτό .
Στο τέλος αυτού του άρθρου θα δείτε και  μερικά παραδείγματα και να παρέχει μια λίστα με χρήσιμους πόρους.

1 . Σε τι μας χρησιμεύει το text-shadow  :


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

2 . Ποια browsers υποστηρίζουν αυτήν την ιδιότητα :



Safari 3.1 (Mac/Win) : Ναι, όμως όχι τα  multiple shadows
Safari 4 (Mac/Win) : Ναι, full υποστήριξη
Opera 10.5 (Mac/Win/Lin) : Ναι, full υποστήριξη
Firefox 2/3 (Mac/Win/Lin) : Όχι
Firefox 3.1/3.6 (Mac/Win/Lin) : Ναι, full υποστήριξη
Google Chrome 1 (Win) : Όχι
Google Chrome  (Win) : Ναι, full υποστήριξη
IE 7/8 (Win) :Όχι
Shiira (Mac) : Ναι, όμως όχι τα  multiple shadows
Konqueror (Lin/Mac/Win) : Ναι, full υποστήριξη
Safari iPhone : Ναι, όμως όχι τα  multiple shadows
Nokia Symbian-Smartphones (Series 60) :Ναι
Opera Mini 4.1 : Ναι, όμως όχι το blur radius



3 . Πως λειτουργεί και πως χρησιμοποιείται :


 Όταν ορίζουμε στο css-stylesheet την ιδιότητα text-shadow πρέπει να μοιάζει με αυτό:

h1 { text-shadow: 1px 1px 1px #000; }

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

Εναλλακτικά , για WebKit  προγράμματα περιήγησης, μπορείτε να χρησιμοποιήσετε τις τιμές RGBA αντί του δεκαεξαδικού κώδικα χρωμάτων, ως τέταρτη τιμή .
Ο τελευταίος αριθμός αντιπροσωπεύει τη διαφάνεια και μπορεί να ρυθμιστεί μεταξύ 0,0 και 1,0 για να μπορείτε να κάνετε το text-shadow πιο διακριτικά :

p { text-shadow: 1px 1px 1px rgba(255,255,255, .5); }  

Δείτε ένα παράδειγμα χρήσης στο πραγματικό κώδικα στα πρότυπά μας :


.post h3{
margin:4px 0 6px 0;
font:29px gramond,'times new roman';
line-height:1.4em;
font-weight:bold;
font-variant:small-caps;
letter-spacing:0;

text-shadow:1px 1px 0 #dcd6d5;
}


Φυσικά την ιδιότητα text-shadow μπορούμε να χρησιμοποιήσουμε σε όποιο στοιχείο εμείς θέλουμε και τα αποτελέσματα που μπορεί να έχουμε με αυτή την τιμή, συχνά εξαρτάται από το χρώμα του κειμένου μας και τα background μας, οπότε τώρα ας ρίξουμε μια ματιά στο τι μπορούμε να κάνουμε με όλους τους συνδυασμούς.


4. Παραδείγματα με κωδικούς και Demos :


Έχω κάνει  μερικά παραδείγματα για να σας δείξω τις δυνατότητες αυτού του css property .
Κάθε κωδικός  ακολουθείται από ένα παράδειγμα κειμένου που αποδίδεται από τον browser σας. Κάτω από αυτό θα βρείτε ένα μικρο screenshot  με το αποτέλεσμα tου , ώστε και οι χρήστες του Internet Explorer να  μπορέσουν να δουν το αποτέλεσμα.


 Apple style - Χαραγμένα κείμενο


Με αυτές τις γραμμές του κώδικα μπορείτε να έχετε αυτό το αποτέλεσμα , που χρησιμοποιείται συχνά από την Apple.
Θα πρέπει να χρησιμοποιείτε ένα γκρι η σκούρο φόντο και ένα σκοτεινό χρώμα του κειμένου για αυτό , για να έχουμε αυτό το αποτέλεσμα . Στην πραγματικότητα δεν είναι τίποτα περισσότερο από ένα λευκό φως ή γκρι σκιά, η οποία τοποθετείται 1px κάτω από το κείμενο. Μπορείτε να χρησιμοποιήσετε μια θαμπάδα 1px  γύρο από το κείμενο, για να φανεί περισσότερο:
Αυτό το αποτέλεσμα φαίνεται υπέροχο σε σκούρο background όπως θα δείτε . 


color: #222;
text-shadow: 0px 2px 3px #555;



Είμαι χαραγμένο κείμενο

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας








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


color: #999; 
text-shadow: 0px 3px 8px #2a2a2a;



Είμαι χαραγμένο κείμενο

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας









Χαραγμένο κείμενο σε πολύ σκούρο φόντο και ανοιχτόχρωμη θαμπάδα :
 

color: #666;
background: #000;
text-shadow: 0px 1px 0px #ccc;



Χαραγμένο κείμενο σε μαύρο

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας



Κλασικοί τρόποι


Με τις ακόλουθες γραμμές του css κώδικα μπορείτε να δημιουργήσετε ένα μπλε κείμενο σε λευκό φόντο, με ομαλή  μαύρη σκίαση .
Η σκιά τοποθετείται δεξιά 2 pixels και 2 pixels κάτω από το κείμενο και έχει μια θαμπάδα ακτίνας 3:


color:#006699;
background: #fff;
text-shadow: 2px 2px 3px #999;



Είμαι ένα κείμενο με ομαλή σκίαση

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας



Χρησιμοποιώντας κάποιες αρνητικές τιμές , μπορείτε να το κάνετε να δείχνει την σκιά  σαν να είναι αντανάκλαση  από το κείμενο:


color: #000;
background: #fff;
text-shadow: 2px -2px 3px #999;



Η Σκιά ως αντανάκλαση κείμενου

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας




Η χρησιμοποιώντας μόνο μια τιμή π.χ . θαμπάδα ακτίνας 8px , η σκιά τοποθετείται ακριβώς πίσω και γύρο από το κείμενο .


color: #ffcc00;
text-shadow: 0 0 8px #000;



Είμαι ένα κείμενο με μαύρη σκιά 

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας




Μultiple shadows


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

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


color: #CCC;
text-shadow: -1px -1px #666, 1px 1px #FFF;



Έχω πολλαπλές σκιές !


Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας



Παρακάτω είναι ένας τρόπος χρήσης , με RGB αντί του δεκαεξαδικού κώδικα χρωμάτων .

color:#999999;
background: none repeat scroll 0% 0% rgb(153, 153, 153);
text-shadow: 1px 1px 3px rgb(102, 102, 102), -1px -1px 3px rgb(255, 255, 255),
1px 1px rgb(102, 102, 102), -1px -1px rgb(255, 255, 255);



           Μultiple shadows

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας



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


color: #999; 
text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;



    Ξεχωρίζω από το φόντο !

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας



Εδώ είναι άλλο ένα παράδειγμα . Απλα δείτε πόσο όμορφο φαίνεται .


color: #EEE; 
text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;



Κείμενο με μαύρο περίγραμμα !

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας




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


color: #000;
text-shadow: 1px 0 #F33, -1px 0 #33F;



  Είμαι ένα πολύ funky κείμενο!

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας




Εδώ τι να πω !!! Απλα υπέροχο !
Πραγματικά είναι δύσκολο να πιστέψει κανείς ότι αυτό το εφέ έχει γίνει μόνο με CSS και όμως εδώ δεν έχουμε χρησιμοποιήσει ούτε εικόνα ούτε javascript .



color: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80,
2px -18px 18px #f20;



Δεν είναι απλά υπέροχο ?

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας





Εδώ το κείμενο μας είναι πιο θολό .


color:#fff;
text-shadow: 0 6px 4px #33F, -3px -5px 4px #F00, 3px -5px 4px #0F0;



 Έχω πολύχρωμες σκιές !

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας




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


color: #fff;
text-shadow: 0 0 24px #C00, 0 0 4px #C00, 1px 1px 2px #333;



     Είμαι πολύ όμορφο έτσι ?

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας




Glowing Text


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


color: #fff;
background: #000;
text-shadow: 1px 1px 6px #fff;



Είμαι ένα λαμπερό κείμενο !

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας








Μπορείτε επίσης να κάνετε όλο το κείμενο πιο θολό, χρησιμοποιώντας το ίδιο χρώμα για το κείμενο και για τη σκιά , χωρίς αντιστάθμιση :


color: #fff;
background: #000;
text-shadow: 0px 0px 3px#fff;



Είμαι λαμπερό και θολό κείμενο !

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας








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


color: #000;
background: #000;
text-shadow: 1px 1px 4px #fff;



Φωτεινό και μυστηριώδες κείμενο

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας








Δείτε το και σε άσπρο φόντο με άσπρο κείμενο :


color: #fff;
background: #fff;
text-shadow: 1px 1px 4px#000;



Είμαι ασυνήθιστο κείμενο !

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας








Αυτά ήταν μόνο μερικά δείγματα με το τι μπορείτε να κάνετέ με το Τext shadow property .
 Πειραματιστείτε με τους συνδυασμούς για να δημιουργήσετε απίστευτα πράγματα !

Λοιπόν , ελπίζω να είδατε όλοι τα όμορφα μαγικά που μπορούμε να κάνουμε με αυτό το CSS3 property.
Και το καλύτερο απ'ολα είναι ότι , δεν επιβαρύνουμε το style sheet μας με άχρηστους κωδικούς , ογκώδης φωτογραφικά αρχεία  και javascript , επομένως βελτιώνουμε έτσι τον χρόνο φόρτωσης της σελίδας μας .

Μείνετε συντονισμένοι


Έχουμε να δούμε ακόμη πιο πολλά ενδιαφέροντα κολπάκια γι 'αυτό μείνετε συντονισμένοι  .
Στο επόμενο άρθρο θα δούμε Opacity / Transparency

Μέχρι τότε μπορείτε να διαβάσετε τα προηγούμενα άρθρα για αυτήν την ενότητα :





6:

Snowball είπε...

Σοφία καταπληκτική δουλειά!!!
Προτείνω να πάρεις όλα τα posts και να τα κάνεις ένα pdf και να βάλεις ένα download link να το κατεβάζουμε... εγώ τουλάχιστον αυτό θα κάνω όταν θα τελειώσουν τα tutorials για το CSS3 :)

Johnpatra είπε...

Σοφία είσαι μακράν η καλύτερη ελληνίδα blogger που ξέρει τόσα πολλά και εξειδικευμένα πράγματα για css, html κώδικες και xml. Τιμή μου να σαι φίλη μου. Σήμερα με τη βοήθεια σου ανέβασα και μια ανάρτηση στο blog μου. Και παλι συγχαρητήρια. Αλήθεια έχεις κάνει καμιά ανάρτηση για να μάθουμε πως φτιάχνουμε εικόνες σαν κι αυτή: http://img41.imageshack.us/img41/781/bettbanner.gif

bloggertrics είπε...

<span>Βρε καλώς σε ! Που είσαι χαμένος εσύ ?!  :-P   
 
Σταμάτα βρε , κάνεις και κοκκινίζω  μ'αυτα που γράφεις λολ  :-[   :-[   :-[  Οτι ξέρω γράφω, τίποτα παραπάνω ! 
Σ'ευχαριστω ειλικρινά ! Τιμή είναι δική μου John ,να έχω όλους εσάς φίλους  ! 
 
Κοίτα , ανάρτηση γι'αυτό δεν έχω! Θυμάμαι που σου είχα πει οτι θα κάνω, αλλά το ξέχασα χι χι, όμως  υπάρχουν διάφορα προγράμματα που μπορείς να χρησιμοποιήσεις, μερικά πρέπει να είναι και online . Θα το ψάξω και θα κάνω ανάρτηση ! 
Τα φιλιά μου John  ;)   </span>

post2.soo είπε...

Είμαι πολύ όμορφη έτσι? >:o :-P
Κάποια στιγμή θα πρέπει να αφιερώσεις ποστ και σε μένα, όχι μόνο στα κείμενα!
Μουαχαχα

Johnpatra είπε...

Ok βρε, ναι σαι πάντα καλά!

bloggertrics είπε...

Τελικά είσαι πολύ τρελοκομείο :-P  χαχαχουχα  :-D :-D

Φιλάααακια κοριτσάκι !!!

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS