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

Τετάρτη, Ιουνίου 30

7

Επίσημα share Buttons από το Blogger



Blogger δίνει τη δυνατότητα να δοκιμάσουμε ένα σύνολο πέντε share posts social εικονίδια ,που περιλαμβάνουν : Blogger, Twitter, Facebook και το Google Buzz .
Στην περίπτωση του Twitter χρησιμοποιεί μια υπηρεσία shortened url .
Τα επίσημα share Buttons από το Blogger είναι πλεον διαθέσιμα στο "κανονικό" Blogger πάνελ,χωρίς να χρειάζεται να μεταβείτε στο Πρόχειρο Blogger

Τα κουμπιά θα είναι, όπως βλέπετε στην παρακάτω εικόνα και περιλαμβάνουν hover effect και με το πέρασμα του κέρσορα θα εμφανίζονται όλα τα χρώματα .



Αν και ακόμα είναι σε δοκιμαστική λειτουργία, μπορούμε να αρχίσουμε να χρησιμοποιήσετε τα share Buttons ακόμα κaι σε παλαιοτέρα σχεδιασμένα πρότυπα και γενικά σε όλα τα πρότυπα, υπό την προϋπόθεση ότι θα προσθέσουμε στο πρότυπο μας τον απαραίτητο κώδικα για τα κουμπιά του Blogger.

Τα βήματα που πρέπει να ακολουθήσετε για να ενεργοποιήσετε τα share Buttons είναι τα έξης:

1 . Πηγαίνετε Σχεδίαση >> Στοιχεία Σελίδας και στο πλαίσιο Αναρτήσεις ιστολογίου (ακριβώς απο κάτω ) πατήστε Επεξεργασία .



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


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

Τα βήματα που πρέπει να ακολουθήσετε είναι τα εξής :

[1 ] Πηγαίνετε Σχεδίαση >> Επεξεργασία HTML και επιλέξτε το κουτάκι Επέκταση προτύπων γραφικών στοιχείων.

[ 2 ]
Τώρα βρείτε στο πρότυπό σας τον παρακάτω κώδικα :

<div class='post-footer-line post-footer-line-3'>


Και κολλήστε ακριβώς από κάτω τους παρακάτω κωδικούς :


<!-- share buttons -->

      <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div>


Αν δεν θέλετε να εμφανίζονται τα share Buttons στην αρχική σελίδα, απλά αντί για τον κώδικά που σας δίνω πάνω ,προσθέστε τον παρακάτω κώδικά :


<b:if cond='data:blog.pageType == "item"'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>


Και αποθηκεύετε το πρότυπό σας .

[ 3 ] Τώρα ακολουθήστε τα βήματα για να ενεργοποιήσετε τα share Buttons ,που σας περιγραφω στην αρχή της ανάρτησης και πλέον έχετε και εσείς τα Επίσημα share Buttons από το Blogger.

Αυτή η διαδικασια δεν χρειαζετε να γινει βεβαια , σε καινουργια επισημα προτυπα του Blogger , αυτο που πρεπει να κανετε για να τα χρισημοπιησετε ειναι απλά να τα ενεργοποιήσετε ( δείτε τις οδηγίες στην αρχή της ανάρτησης )

Σας έχω όμως κάτι καλύτερο !

Όπως είπα στην αρχή το blogger προσφέρει μόνο πέντε share Buttons ,Blogger, Twitter, Facebook και το Google Buzz .
Όμως τώρα μπορείτε να προσθέσετε και άλλα 6 δημοφιλής share Buttons αν θέλετε, τα οποία είναι Yahoo , Google, Stumbleupon ,Delicious , Digg και Reddit , προσθέτοντας τον παρακάτω κώδικα στο πρότυπο σας,πάνω από την ετικέτα ]]></b:skin>


/* Share Buttons --bloggertrics.blogspot.com----- */
.post-share-buttons {width:290px;}
.share-button2 {
display:block;
width:21px;
height:22px;
float:left;
background:url("http://2.bp.blogspot.com/_TNNQpsSXiP8/TBu4A0z9UPI/AAAAAAAAGQc/4xkaS0IAmDQ/s1600/share_buttons2.png") no-repeat left !important;
overflow:hidden;
margin-left:-1px;
}

.sb-yahoo {background-position:-21px 0 !important;}
a:hover.sb-yahoo {background-position:-21px -22px !important;}
a:active.sb-yahoo {background-position:-21px -44px !important;}
.sb-google {background-position:-84px 0 !important;}
a:hover.sb-google {background-position:-84px -22px !important;}
a:active.sb-google {background-position:-84px -44px !important;}
.sb-stumbleupon {background-position:-105px 0 !important;}

a:hover.sb-stumbleupon {background-position:-105px -22px !important;}
a:active.sb-stumbleupon {background-position:-105px -44px !important;}
.sb-delicious {background-position:-126px 0 !important;}

a:hover.sb-delicious {background-position:-126px -22px !important;}
a:active.sb-delicious {background-position:-126px -44px !important;}
.sb-digg {background-position:-147px 0 !important;}
a:hover.sb-digg {background-position:-147px -22px !important;}
a:active.sb-digg {background-position:-147px -44px !important;}
.sb-reddit {background-position:-168px 0 !important; width:22px;}
a:hover.sb-reddit {background-position:-168px -22px !important;}
a:active.sb-reddit {background-position:-168px -44px !important;}


Τώρα βρείτε στο πρότυπό σας την παρακάτω γραμμή :

<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>


Και αντικαταστήστε αυτήν την γραμμή με τον παρακάτω κώδικά :


<a class='share-button2 sb-yahoo' expr:href='&quot;http://bookmarks.yahoo.co.jp/action/bookmark?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url' target='_blank' title='Yahoo!'> 
        <span class='share-button-link-text'>Yahoo!</span></a> 
      <a class='share-button2 sb-google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google bookmarks'> 
        <span class='share-button-link-text'>Google bookmarks</span></a> 
      <a class='share-button2 sb-stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='stumbleupon'> 
        <span class='share-button-link-text'>stumbleupon</span></a> 
      <a class='share-button2 sb-delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='del.icio.us '> 
        <span class='share-button-link-text'>del.icio.us </span></a> 
      <a class='share-button2 sb-digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='digg '> 
        <span class='share-button-link-text'>digg </span></a> 
      <a class='share-button2 sb-reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='reddit '> 
        <span class='share-button-link-text'>reddit</span></a>  
        <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>


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



Read More ►

6

Τίτλος ως υποχρεωτικό πεδίο για τα gadgets

Κατά την τελευταία ενημέρωση του Blogger , όλα τα gadgets απαιτούν τώρα έναν τίτλο, προκειμένου να αποθηκευτούν .
 Δηλαδή αν θέλετε να αλλάξει και να αποθηκεύσετε κάποιο gadget χωρίς να έχετε βάλετε ένα τίτλο για αυτό, δεν θα& μπορέσετε να το κάνετε.
 Αλλά αυτό θα επιλυθεί σύντομα , όπως μας ενημερώνει το Blogger

 Σίγουρα έχετε δει περισσότεροι αυτό το το μήνυμα : Το πεδίο δεν πρέπει να είναι κενό.




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

Μέχρι τότε, ενώ περιμένετε ποτέ θα λύσει αυτό το πρόβλημα το blogger σας δίνω ένα μικρο trick που χρησιμοποιώ εγώ .
Σε περίπτωση που θα χρειάζεται να αλλάξετε κάποιο gadget και δεν θέλετε να θέσετε τίτλο για το gadget σας , τότε στο πλαίσιο αντί για κάποιο τίτλο , απλά εισάγετε τα παρακάτω :
<h2> </ h2>



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


Read More ►

Πέμπτη, Ιουνίου 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

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





Read More ►

Τετάρτη, Ιουνίου 23

4

Εισαγωγή στο CSS3 - Μέρος 3ο: Box shadow


CSS3 border radius
CSS3 Box shadow

To css3 property box-shadow μας επιτρέπει να δημιουργήσουμε σκιές χωρίς χρήση εικόνας η javascript σε επιλεγμένο  elements.
Αν λοιπόν θέλουμε διάφορα elements της σελίδας μας να έχουν σκιές , αλλά ταυτόχρονα δεν θέλουμε να φορτώσετε τα site μας με επιπλέον γραφικά,  περίπλοκους styling κανόνες και markup. Με την έλευση του CSS3 η λύση είναι πολύ απλή και λειτουργική και ονομάζεται box-shadow.
Απλά θα επιλέξουμε κάποιο element το οποίο θέλουμε να έχει σκιά και η rendering μηχανή του εκάστοτε browser αναλαμβάνει όλη την βρώμικη δουλειά !
Χάρη στις διαφορετικές τιμές από το box-shadow , μπορούμε να διευκρινίσουμε αν  η σκιά είναι τοποθετημένη στα αριστερά / δεξιά ή πάνω / κάτω στην εξωτερική πλευρά του στοιχείου, το gradient of blur και το χρώμα του.
Αυτή η CSS3 ιδιότητα μπορεί να συνδυαστεί πολύ όμορφα με άλλες ιδιότητες, όπως  css3 border-radius

Η δομή για το  box shadow  property μπορεί να είναι  : x-offset, y-offset, blur, και  color .

Το box-shadow  χρειάζεται τουλάχιστον 3 τιμές η  4 κατ 'ανώτατο όριο:
  • Η οριζόντια αντιστάθμιση της σκιάς 
Η τιμή μπορεί να είναι  αρνητική ,η οποία θα μετακινήσει την σκιά πιο αριστερά η μπορεί να είναι θετική η οποία θα μετακινήσει την σκιά πιο δεξιά από το element στο οποίο εφαρμόζουμε τον box shadow κανόνα.
  Παράδειγμα :   box-shadow: 20px 10px 20px gray;
                           box-shadow: -20px 10px 20px gray;
  • Η κάθετη μετατόπιση της σκιάς
Και εδώ η τιμή μπορεί να είναι  αρνητική , η οποία  θα μετακινήσει την σκιά πιο πάνω η μπορεί να είναι θετική η οποία  θα μετακινήσει την σκιά πιο κάτω από το element στο οποίο εφαρμόζουμε τον box shadow κανόνα.
Παράδειγμα :   box-shadow:20px 10px 20pχ gray;
                         box-shadow:20px -10px 20px gray;
  • Το χρώμα της σκιάς (shadow’s color)
Παράδειγμα : box-shadow:20px 10px 20px #000000;
                       box-shadow:20px 10px 20px black;
                      box-shadow:20px 10px 20px rgb(0,0,0);
  • Το  blur radius  (θολούρα ακτίνας ) 
Εάν η τιμή οριστεί σε 0 τότε η σκιά θα είναι απότομη, όσο υψηλότερος είναι ο αριθμός, τόσο πιο θολή θα είναι και η σκιά .
Παράδειγμα : box-shadow:20px 10px 20px black;
                        box-shadow:20px 10px 10px black;
                        box-shadow:20px 10px  0px black;


Σημείωση : υπάρχουν άλλες 2 τιμές  διαθέσιμες για  το css3 box-shadow , που όμως στην πραγματικότητα δεν στηρίζονται σε κανένα προγράμματα περιήγησης:

 - Η τιμή  ’spread radius’ για να προσθέσετε σκιά σε όλες  τις κατευθύνσεις του στοιχείου
 - Η τιμή ‘inset’ για να προσθέσουμε  μια εσωτερική σκιά αντί για μία εξωτερική


Τα προθέματα:

-moz ( -moz-box-shadow) δουλεύει σε  FireFox.
-webkit ( -webkit-box-shadow) δουλεύει σε Safari & Google Chrome.
-khtml ( -khtml-box-shadow) δουλεύει σε Konqueror
border-( box-shadow ) δουλεύει σε Opera & IE9 Preview

Το IE 8 υποστηρίζει Box shadow, χρησιμοποιώντας το φίλτρο :

-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=DarkGray, offX=5, offY=5, positive=true)"; /* >= IE8 */

Και για τα IE 5 - IE 7

filter : progid:DXImageTransform.Microsoft.dropShadow(color=DarkGray, offX=5, offY=5, positive=true); /* <= IE7 */

Όμως εκτός από το ότι , το prefix είναι τεράστιο, δίνει τόσο άσχημα και περίεργα αποτελέσματα που προτιμω να μην τα χρησιμοποιησω

Δεν υποστηρίζει βέβαια , όλες τις δυνατότητες ,τις οποίες θα δούμε παρακάτω .
Καλό θα ήταν να επισκεφτείτε το MSDN Library  για να το κατανοήσετε καλύτερα .

Αλλά ας δούμε με μερικά παραδείγματα καλύτερα .

 Παραδείγματα Box shadow

Ο πιο βασικός τρόπος καθορισμού σκιάς σε ένα στοιχείο  χρησιμοποιεί box-shadow: [x offset] [y offset] [color] :


box-shadow:10px 10px  #000;
-webkit-box-shadow:10px 10px  #000;
-moz-box-shadow: 10px 10px  #000;
-goog-ms-box-shadow: 10px 10px  #000;
-khtml-box-shadow: 10px 10px  #000;


Και το αποτέλεσμά μας είναι :



        
               Το κουτί μας έχει σκιά ! 

Και αυτό είναι το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :





  • Προσθέτοντας άλλη μια τιμή , τότε μας επιτρέπει να καθορίσουμε το blur radius .

Παράδειγμα :box-shadow: 10px 10px 20px black;


CSS κώδικας :


box-shadow:10px 10px 20px #000;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow: 10px 10px 20px #000;
-goog-ms-box-shadow: 10px 10px 20px #000;
-khtml-box-shadow: 10px 10px 20px #000;


Και το αποτέλεσμά μας είναι :




        
           Box-shadow με blur radius

Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :




  • Μπορούμε επίσης να ορίσουμε ακόμη και μια τιμή spread radius (αυτή η τιμή έχει την ιδιότητα να επεκτείνει την σκιά):  
Παράδειγμα : box-shadow: 0 0 8px 5px #000;

CSS κώδικας :


box-shadow: 0 0 8px 8px #000;
-webkit-box-shadow: 0 0 8px 8px #000;
-moz-box-shadow: 0 0 8px 8px #000;
-goog-ms-box-shadow: 0 0 8px 8px #000;
-khtml-box-shadow: 0 0 8px 8px #000;

Και το αποτέλεσμά μας είναι :




        
           Box-shadow με spread radius

 Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :




  • Αρνητικές τιμές εξάπλωσης σκιάς είναι δυνατόν επίσης να εφαρμοστούν :  
Παράδειγμα : box-shadow:-8px -8px 5px #000;

CSS κώδικας :


box-shadow:-8px -8px 5px #000;
-webkit-box-shadow:-8px -8px 5px #000;
-moz-box-shadow: -8px -8px 5px #000;
-goog-ms-box-shadow: -8px -8px 5px #000;
-khtml-box-shadow: -8px -8px 5px #000;

Και το αποτέλεσμά μας είναι :




        
           Box-shadow με αρνητική τιμή! 

 Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :




  • Η μπορούμε να εφαρμόσουμε μια Negative spread τιμή  
Παράδειγμα : box-shadow: 0 8px 8px -3px #000;

CSS κώδικας :


box-shadow: 0 8px 8px -3px #000;
-webkit-box-shadow: 0 8px 8px -3px #000;
-moz-box-shadow: 0 8px 8px -3px #000;
-goog-ms-box-shadow:0 8px 8px -3px #000;
-khtml-box-shadow: 0 8px 8px -3px #000;


Και το αποτέλεσμά μας είναι :




        
      Box-shadow με Negative spread τιμή ! 

  Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :




  • Ένα άλλο ενδιαφέρον χαρακτηριστικό είναι η δυνατότητα να ορίσουμε πολλαπλά box shadows, που χωρίζονται με κόμμα, ξεκινώντας από τη βασική σκιά:  
Παράδειγμα :  box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;.

CSS κώδικας :


box-shadow:0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
  -20px -15px 30px blue,20px -15px 30px red;
-webkit-box-shadow: 0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
  -20px -15px 30px blue,20px -15px 30px red;
-moz-box-shadow: 0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
  -20px -15px 30px blue,20px -15px 30px red;
-goog-ms-box-shadow: 0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
  -20px -15px 30px blue,20px -15px 30px red;
-khtml-box-shadow: 0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
  -20px -15px 30px blue,20px -15px 30px red;


Και το αποτέλεσμα μας είναι :





 Box-shadow με πολλαπλά box shadows! 

  Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :




Inset Box Shadows


Η χρήση του inset box shadows είναι πολύ εύκολη υπόθεση .
Δεν έχουμε πάρα να προσθέσουμε το inset κλειδί στο box shadow layer.

Παράδειγμα : box-shadow: inset 3px 2px 5px grey;

CSS κώδικας :


box-shadow: inset 3px 2px 5px grey;
-webkit-box-shadow: inset 3px 2px 5px grey;
-moz-box-shadow:inset 3px 2px 5px grey;
-goog-ms-box-shadow: inset 3px 2px 5px grey;
-khtml-box-shadow: inset 3px 2px 5px grey;

Και το αποτέλεσμα μας είναι :




        
             Box με inset box shadow! 
  Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :




  • Η μπορούμε να χρησιμοποιήσου με συνδυασμούς Inset και outset shadows μαζί .  
Παράδειγμα : box-shadow: inset 2px 2px 5px black, 2px 2px 5px black;

CSS κώδικας :


box-shadow:inset 2px 2px 5px black, 2px 2px 5px grey;
-webkit-box-shadow:inset 2px 2px 5px black, 2px 2px 5px grey;
-moz-box-shadow:inset 2px 2px 5px black, 2px 2px 5px grey;
-goog-ms-box-shadow: inset 2px 2px 5px black, 2px 2px 5px grey;
-khtml-box-shadow: inset 2px 2px 5px black, 2px 2px 5px grey;

Και το αποτέλεσμα μας είναι :




 Box με Inset και outset shadows ! 
  Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :




Τώρα, η χρησιμότητα των multiple shadow layers γίνεται πραγματικά εμφανής όπως βλέπετε.
Μπορείτε να χρησιμοποιήσετε inset box shadows για να δημιουργήσετε  gradients, highlights, 3D borders κλπ., καθώς μπορούμε ελεύθερα  να κολλήσουμε το ένα πάνω στο άλλο. Είναι ακριβώς όπως χρησιμοποιούμε έναν απεριόριστο αριθμό των  “inner shadow” layer styles σε Photoshop!

Box-shadow  συνδιασμος με border-radius :


Μπορούμε να συνδυάσουμε πολλές ιδιότητες μαζί , όπως έχω κάνει σε αυτό το παράδειγμα ,
όπου έχουμε συνδυάσει Box-shadow με border-radius


 background-color: magenta;
-webkit-box-shadow: 10px 10px 5px #888; 
-moz-box-shadow:10px 10px 5px #888;
 box-shadow:10px 10px 5px #888;
-khtml-box-shadow:10px 10px 5px #888; 
-goog-ms-box-shadow:10px 10px 5px #888;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

Και το αποτέλεσμα μας είναι :



   Γεια σας , είμαι ένα όμορφο κουτί με σκίαση και στρογγυλεμένες γωνίες .
Δημιουργήθηκα αποκλειστικά με CSS3 .
Δεν είναι φοβερό ?! 

                



Καταπληκτικό έτσι ?!!

Και φυσικά αυτή η CSS3 εντολή μπορεί να εφαρμοστεί σε όποιο στοιχείο στα styles μας θέλουμε πολύ απλά.
Αν παρατηρήσετε ,αυτή την τεχνική χρησιμοποιώ κ'εγώ στις φωτογραφίες στις αναρτήσεις μου .
Οι ημέρες του ακατάστατων και περίπλοκων CSS  hacks για  να δημιουργήσει σκιές έχουν περάσει στο παρελθόν ευτυχώς !

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

Ας πούμε , ότι θέλουμε να εφαρμόσουμε την ιδιότητα Box shadow στις φωτογραφίες στο blog μας.
Αυτό που πρέπει να κάνουμε είναι , να βρούμε τον CSS κώδικα που καθορίζει το στυλ των φωτογραφιών στις αναρτήσεις του blog μας .
Ο κώδικας αυτός μπορεί να είναι κάτι σαν αυτό :

.post img {
  padding:4px;
  border:1px solid $bordercolor;
  }

Τωρα , για να δημιουργησουμε σκιαση γυρο απο τις φωτογραφιες μας ,αυτο που πρεπει να κανουμε ειναι να επικολλησουμε τΙς CSS3 ιδιοτητες που δημιουργουν σκιες ,σε αυτον τον κωδικα .
Και ο κωδικας μς θα γινει :


.post-body img {
  padding:4px;
  border:1px solid $bordercolor;
-webkit-box-shadow: 1px 1px 5px #888; 
-moz-box-shadow:1px 1px 5px #888;
 box-shadow:1px 1px 5px #888;
-khtml-box-shadow:1px 1px 5px #888; 
-goog-ms-box-shadow:1px 1px 5px #888;
  }

Και το αποτέλεσμα μας θα μοιάζει με αυτό :


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


Θα ακολουθήσουν ακόμη πιο ενδιαφέροντα άρθρα  , όπου θα δούμε και να μάθουμε περισσότερα για το CSS3  .
Έτσι στο επόμενο άρθρο , θα ασχοληθούμε με το πως δημιουργούμε Σκιά στα επιλεγμένα μας κείμενα - Τext shadow 

Μέχρι τότε υπομονή  : )

Read More ►

Δευτέρα, Ιουνίου 21

7

Εισαγωγή στο CSS3 - Μέρος 2ο: CSS3 border properties


CSS3 border radius
CSS3 border properties

Συνεχίζοντας την ενότητα μας , στο δεύτερο μέρος της σειράς μας για CSS3, θα ρίξουμε μια ματιά στις άκρες ( borders ).
Όσοι χρησιμοποιούν CSS και είναι εξοικειωμένοι με τα border property ξέρουν ότι είναι ένα πολύ καλός τρόπος για τη δομήση του περιεχομένου, δημιουργίας αποτελεσμάτων γύρω από τις εικόνες και για την βελτίωση διάταξης της σελίδας.

Τώρα CSS3 μεταφέρει τα borders σε ένα νέο επίπεδο με την ικανότητα να χρησιμοποιεί gradients, rounded corners και border images . Θα εξετάσουμε κάθε ένα από αυτά με περισσότερη λεπτομέρεια, χρησιμοποιώντας παραδείγματα όπου είναι δυνατόν.

Στρογγυλεμένες άκρες (rounded corners)

Η επίτευξη στρογγυλοποίησης των ακρων χρησιμοποιώντας την τρέχουσα CSS κωδικοποίηση μπορεί να είναι δύσκολη υπόθεση .
Αν και υπάρχουν αρκετοί τρόποι να το κάνουμε , όπως χρησιμοποιώντας εικόνες για να πετύχουμε την στρογγυλοποίηση των ακρων , άλλη μέθοδος είναι με την χρήση javascript όπως το curvycorners.js ,είτε επισημοποιώντας έτοιμα εργαλεία , που μας επιτρέπουν να δημιουργήσουμε rounded corners , όμως κανένας από αυτούς τους τρόπους δεν είναι εύκολη υπόθεση .

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


Τα προθέματα:

-moz ( -moz-border-radius) δουλεύει σε  FireFox.
-webkit ( -webkit-border-radius) δουλεύει σε Safari & Google Chrome.
-khtml ( -khtml-border-radius) δουλεύει σε Konqueror
border-radius δουλεύει σε Opera and IE9 Preview
 
Έτσι λοιπόν, με το παρακάτω παράδειγμα το div και με "border_radius" θα έχουμε  borders που θα στρογγυλεύουν κατά 12 pixels στις άκρες του!



.border_radius{background-color:#f4f4f4;
-moz-border-radius:12px;/* Gecko */ 
-webkit-border-radius:12px;/* Safari and Chrome */
-khtml-border-radius: 12px;/* for (old) Konqueror */ 
border-radius:12px;/* W3C, Opera and IE9 Preview */ 
border:2px solid # 3a6b8c;
padding:40px;
width:310px;
}

Και το HTML για  το box μας θα είναι :

<div class="my-box"> Είμαι ένα όμορφο rounded box </div>


Είμαι ένα όμορφο rounded box


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

Rounded Corner CSS3 Boxes










Δεν θέλετε να είναι και οι τέσσερις γωνίες στρόγγυλες ?
Δεν υπάρχει κανένα πρόβλημά ! Χρησιμοποιήστε το radious σε συγκεκριμένες γωνίες μόνο , όπως για παράδειγμα :


.custom_box_radius {
     border-top-right-radius: 20px;
     border-bottom-left-radius: 20px;
    -moz-border-radius-topright: 20px;
     -moz-border-radius-bottomleft: 20px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    border: 1px solid  #000;
     padding: 45px;
    background-color: #ccc;
   width: 310px;
} 




Το box μας έχει μόνο δυο rounded corners


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








Και το HTML για το box μας θα είναι :

<div class="custom_box_radius"> Το box μας έχει μόνο δυο rounded corners</div>


Δείτε ένα παράδειγμα για το πως μπορούμε να χρησιμοποιήσουμε την εντολή border_radius για να δημιουργήσουμε ένα απλό αλλά όμορφο Web2 button μόνο με CSS3  .



a.button {
 border: 1px solid  #96d1f8;
 padding: 10px 20px 10px;
 color: #f2f2f2;
 text-decoration: none;
 font-size:19px;
 font-family: Georgia, serif;
 line-height: 30px;
 background: #a2ceeb;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
} 


Και το HTML για το button μας θα είναι :

<a class="button" href="#">I'm a pretty button</a>


Έτσι το αποτέλεσμα μας θα είναι αυτό το όμορφο button .


I'm a pretty button



Και αυτό είναι το screenshot.







Ας δούμε άλλο ένα παράδειγμα με μια φωτογραφία :


.rounded-foto {
width: 250px;
height: 120px;
background: url(http://2.bp.blogspot.com/_L116RpGjEMY/TBerxsatb0I/AAAAAAAAB2s/SZsuBkLEvdQ/s1600/pool.jpg);
-moz-border-radius-topleft: 35px;
-moz-border-radius-bottomright:35px;
-webkit-border-top-left-radius: 35px;
-webkit-border-bottom-right-radius: 35px;
border-radius-topleft: 35px;
radius-bottomright:35px;
border-top-left-radius: 35px;
border-bottom-right-radius: 35px;
}


Και θα έχουμε αυτό το αποτέλεσμα :





Αυτό είναι το screenshot.











Όπου θέλουμε να εμφανιστεί αυτή η φωτογραφία μας απλά θα επικολλήσουμε τον HTML κώδικα:


<div class="rounded-foto">
</div>


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

Παράδειγμα χρήσης της εντολής border-radius στο style sheet μας :

#container {
width: 900px;
margin: 0 auto;
background-color: #777;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
}

Αρκετά εντυπωσιακό έτσι ?....

Gradient Borders

Gradient borders είναι άλλο ένα πολύ χρήσιμο border property .
Αλλά τι είναι το καινούργιο σε αυτό ? Το νέο στοιχείο είναι ότι, μπορείτε να καθορίσετε πολλές τιμές χρώματων στα borders για το κάθε pixel. Ας πούμε ότι έχουμε borders με πλάτος 6 pixel, τότε μπορούμε να ορίσουμε 6 διαφορετικά χρώματα .

Δυστυχώς σήμερα,μόνο το Firefox υποστηρίζει αυτό το property .
Και χρησιμοποιεί την σύνταξη : -moz-border-top-colors: value;  ,για το top border , πρέπει να κάνετε το ίδιο για το κάτω μέρος , αριστερά και δεξιά .

Η τιμή μπορεί να οριστεί σε pixel. Για παράδειγμα :  -moz-border-left-colors: 10px;

Gradient borders μπορεί να φαίνονται φανταστικά και αποτελεσματικά αν χρησιμοποιηθεί σωστά ο κωδικας .
Αυτός ο κωδικός είναι λίγο πιο περίπλοκος , γιατι απαιτεί να ορίσετε κάθε χρώμα απο τα borders ξεχωριστά .

Όπως θα δείτε το χρώμα των borders αρχίζουν με σκούρο χρώμα και ανοίγουν σταδιακά προς το τέλος.Αυτό το κάνουμε για να δώσουμε στα borders την ψευδαίσθηση οτι χρησιμοποιείται Gradient .


Ο κωδικός CSS είναι:


.content {
width: 400px;
background-color: #f4f4f4;
border: 9px solid #000;
-moz-border-bottom-colors: #5C680C #8A9A24 #ACBA4C #BCCA63 #C7D476 #D7E28B #DAE49B #E7EFB6;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #4F39BD #486DD1 #5F82E2 #7692DF #99ADE4 #ABBCEC #B5C3EB #CBD5F3;
-moz-border-right-colors: #A22452 #BD3969 #E66464 #EF8383 #F09A9A #F5ADAD #F5C0C0 #F3D7D7;
padding: 5px 5px 35px 15px;
}






Box με πολύχρωμα gradient border.


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












Και άλλο ενα παράδειγμα με gradient border σε συνδυασμό με rounded corners


 #content_radius {
      border: 10px solid #c4c8cc;
      -moz-border-radius: 15px;
      border-radius: 15px;
      -webkit-border-radius: 15px;
      -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A;
      -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A;
      -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A;
      -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A;
      padding: 5px 5px 35px 15px;
    }





Box με πολύχρωμα gradient border


Και αυτό είναι το screenshot.











CSS3 Border Image

Border images είναι μια από τις πιο χρήσιμες προσθήκες .
CSS έχει τη δυνατότητα να κάνει  repeat, η stretch στα  Border images , όπως εσείς επιλέξετε.

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

Για να εφαρμόσουμε τα Border images , χρησιμοποιούμε το CSS


border-image: url(border.png) 25 25 25 27 round round;

Τα προθέματα:


-moz ( -moz-border-image) δουλεύει σε  FireFox.
-webkit ( -webkit-border-image) δουλεύει σε Safari & Google Chrome.
-khtml ( -khtml-border-image) δουλεύει σε Konqueror
border-( border-image ) δουλεύει σε Opera & IE9 Preview


Border Image (round)


Θα χρησιμοποιήσουμε την παρακάτω εικόνα για τα border μας .



Χρησιμοποιώντας το border-image round, η εικόνα μας θα πρέπει να επαναληφθεί, κλιμακωτά/ γύρο από το στοιχείο μας.

 CSS κώδικας μας θα μοιάζει :



-moz-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 round; border: 15px solid rgb(196, 200, 204); 
-khtml-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 round; border: 15px solid rgb(196, 200, 204); 
border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 round; border: 15px solid rgb(196, 200, 204); 
-webkit-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 round; border: 15px solid rgb(196, 200, 204); 


Και το αποτέλεσμα θα είναι αυτό :

Πρώτα απ'ολα πρέπει να δημιουργήσουμε τα βασικά borders και αυτά θα γεμίσουν αυτόματα απο τα border images που θα χρησιμοποιήσουμε.


Και αυτό είναι το screenshot.









CSS 3 Border Image (stretch)


Ενναλακτικα , χρησιμοποιώντας το border-image stretch, η εικόνα μας θα πρέπει να επεκταθει ,να επαναληφθεί η πλευρά των borders με το μήκος και το ύψος του στρώματος που περιέχει .


-moz-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 40 40 40 40 stretch; border: 15px solid rgb(196, 200, 204); 
-khtml-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 40 40 40 40 stretch; border: 15px solid rgb(196, 200, 204); 
border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 40 40 40 40 stretch; border: 15px solid rgb(196, 200, 204); 
-webkit-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 40 40 40 40 stretch; border: 15px solid rgb(196, 200, 204);


Και θα έχουμε αυτό το αποτέλεσμα :


Πρώτα απ'ολα πρέπει να δημιουργήσουμε τα βασικά borders και αυτά θα γεμίσουν αυτόματα από τα border images που θα χρησιμοποιήσουμε.


Και αυτό είναι το screenshot.








Σε αυτή την περίπτωση απλά αλλάζοντας την τιμή από τα borders (border-top, border-right, border-bottom, border-left) από 40 σε 30  θα έχουμε αυτό το αποτέλεσμα 


-moz-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 stretch; border: 15px solid rgb(196, 200, 204); 
border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 stretch; border: 15px solid rgb(196, 200, 204);
-khtml-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 stretch; border: 15px solid rgb(196, 200, 204);
-webkit-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 stretch; border: 15px solid rgb(196, 200, 204);


Πρώτα απ'ολα πρέπει να δημιουργήσουμε τα βασικά borders και αυτά θα γεμίσουν αυτόματα από τα border images που θα χρησιμοποιήσουμε.


Και αυτό είναι το screenshot.










Για να μάθετε περισσότερα και να κατανοήσετε καλύτερα τις border-image ιδιότητες , θα ήταν καλό να επισκεφτείτε την ιστοσελίδα  lrbabe.com , όπου θα δείτε πολλά ενδιαφέροντα παραδείγματα .

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


Το ξέρω οτι σας άνοιξα την όρεξη να δείτε και να μάθετε περισσότερα για το τι άλλο μπορεί να κάνει για μας το CSS3  , όμως κάντε υπομονή μέχρι το επόμενο άρθρο , όπου θα δούμε πως δημιουργούμε Σκιά γύρο από κάποιο στοιχείο μας  - box shadow

Μέχρι τότε πειραματιστείτε και που ξερετε , ισως να δημιουργήσετε όμορφα πράγματα
Read More ►

Τετάρτη, Ιουνίου 16

12

Εισαγωγή στο CSS3 - Μέρος 1ο: Τι είναι το CSS3



Από καιρό ήθελα να γράψω ένα άρθρο με θέμα τις νέες δυνατότητες του CSS 3 και τώρα που τελείωσε η εξεταστική μου και έχω λίγο παραπάνω χρόνο ,νομίζω ότι είναι η πιο κατάλληλη στιγμή να το κάνω !

Το άρθρο αυτό σηματοδοτεί την αρχή για τα υπόλοιπα άρθρα που θα ακολουθήσουν, στα οποία θα δούμε τι είναι το νέο CSS3 πρότυπο το οποίο εδώ και λίγο καιρό έχει αντικαταστήσει το CSS2.

   Θα ξεκινήσουμε από την αρχή - για όλους αυτούς που μπορεί να μην έχουν καν ακούσει για CSS3, για να κατανοήσετε όλοι και δείτε με παραδείγματα αργότερα τι είναι και τι το διαφορετικό έχει το CSS3.

Τι είναι το CSS3 .

CSS3 είναι η επόμενη γενιά του CSS το οποίο βρίσκεται σε μια συνεχή φάση ανάπτυξης και αναμένεται να αλλάξει όλο τον παγκόσμιο ιστό όταν οριστικοποιηθεί .
Είναι σε εξέλιξη από το 2002 και δεν έχει ακόμη ολοκληρωθεί.
Τα περισσότερα προγράμματα περιήγησης (με εξαίρεση το IE ) υποστηρίζουν σε μεγάλο βαθμό τις ιδιότητες του CSS 3.

Χρησιμοποιώντας CSS3 μπορούμε να δημιουργήσουμε όμορφα εφέ, που με τις κλασικές μεθόδους χρειαζόμαστε αρκετό κόπο, javascript και περισσότερο γράψιμο xHTML/CSS.
Αντί να χρησιμοποιήσουμε λοιπόν τις εικόνες και πολύπλοκο CSS μπορούμε να καθορίσουμε έναν νέο CSS3 κανόνα πχ. στρογγυλεμένες γωνίες και τα δεδομένα να παράγονται από τα browsers , μειώνοντας έτσι χρόνο φόρτωσης και sever requests.
CSS3 ιδιότητες  επιτρέπουν να γίνει μια πολύ καλύτερη διαδικασία το web design και αν ρίξετε μια μάτια σε ξένες ιστοσελίδες θα δείτε ότι ήδη οι περισσότεροι web designers βασίζονται αποκλειστικά η εν-μέρη στο CSS3 για την κατασκευή ιστοσελίδων .

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

Το CSS3 Σήμερα :


Αυτήν τη στιγμή - Safari, Chrome, Firfox, Opera 10.5 alpha και IE9 Preview υποστηρίζουν μεγάλη ποικιλία από συγκεκριμένες CSS3  μορφές.
Το μειονέκτημα με το CSS3 όπως με όλα τα web design είναι ότι IE δεν τα υποστηρίζει πλήρως . ( και τι υποστηρίζει να μου πείτε,αλλά άλλο κεφάλαιο αυτό )
Η τρέχουσα σταθερή έκδοση του IE8 browser έχει ελάχιστη υποστήριξη για CSS3 , Όμως το IE9 που είναι σήμερα σε εξέλιξη θα υποστηρίζει πλήρως το CSS3.
Το πρόβλημα με τα IE9 είναι ότι θα διατίθεται μόνο σε Vista λειτουργικά συστήματα και άνω και όχι για τα XP δυστυχώς  , τα οποία ένα μεγάλο ποσοστό εξακολουθούμε να χρησιμοποιούμε .

Τα χαρακτηριστικά και τα οφέλη του CSS3


CSS3 προσφέρει κάποια σπουδαία  νέα  selectors , τα  οποία θα δώσουν στους web designers, όχι μόνο καλύτερη εμφάνιση από τις εικόνες, αλλά και πολλές δυνατότητες εξοικονόμηση χρόνου  για να έχουν το επιθυμητό τελικό αποτέλεσμα .
Τα κύρια οφέλη του CSS3 είναι ότι επιτρέπει την δημιουργία  λειτουργιών  του στυλ  Javascript , χωρίς όμως να χρησιμοποιείται .
Ένα άλλο συν στο CSS3 είναι η δυνατότητα δημιουργίας απίστευτων γραφικών,που μέχρι τώρα χωρίς το Photoshop ήταν αδύνατον να δημιουργηθούν .

Τι Μπορούμε να κάνουμε με CSS3


Εδώ είναι μια μικρή λίστα από CSS3 selectors  

  • Στρογγυλεμένες  γωνίες  (rounded corners) 
  • Gradients
  • Σκιά σε κείμενο (text shadow)
  • Animations
  • Διαφάνεια (Opacity)
  •  Box shadow
  • Χρήση πολλαπλών εικόνων φόντου (Multiple background images )
  • RGB τιμές χρωμάτων (RGB color values)
  • Χρήση οποιαδήποτε γραμματοσειράς επιθυμούμε με  @font-face  
  • Border image  και Multiple borders  
  • Opacity  
  • User interfaces,όπως box sizing και  resizing
  • Multi –column
Και αρκετά άλλα .

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

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


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


Στην επόμενη ανάρτηση θα δούμε εντολές για  Στρογγυλεμένες  γωνίες  (rounded corners) .


Γι 'αυτό μείνετε συντονισμένοι και δεν θα χάσετε !
Read More ►

Τρίτη, Ιουνίου 15

2

100% CSS οριζόντιο Drop Down Menu



Στην προηγούμενη ανάρτηση είχαμε δει πως δημιουργούμε  ένα όμορφο CSS Image rollover menu .
 Σήμερα , θα δούμε άλλη μια παραλλαγή του  rollover menu .Θα προσθέσουμε σε αυτό το  μενού , Drop Down στοιχεία υπομενού  .

Χρησιμοποιώντας Pure Drop Down Menu CSS, μπορείτε να προσθέσετε όσα πολυεπίπεδα στοιχεία υπομενού θέλετε  .

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

Πρώτα ας δούμε το  HTML.

Σημείωση : Τοποθετήστε τον παρακάτω κώδικα  μέσα στο  </body> ετικέτα της ιστοσελίδας σας, όπου θέλετε να εμφανιστεί το μενού η πηγαίνετε Προσθήκη gadget >> HTML/JavaScript και εισάγετε τον κώδικα εκεί :  

<!-- Αρχίζει το Menu -->
<ul id='topnav'>
<li class='current_page_item'><a href='/'>Home</a></li>

<li><a href='http://bloggertrics.blogspot.com/' title='Blogger Tricks'>Blogger Tricks</a></li>
<li><a href='http://loneeagle110.blogspot.com/' title='Στάλες στο γαλάζιο'>Στάλες στο γαλάζιο</a>
</li>
<li><a href='http://bloggertrics.blogspot.com/search/label/My%20blogger%20templates' title='Blogger Templates'>Templates</a>
<!-- Εδώ αρχίζει το SubMenu -->
<ul>
<li><a href='#' title='Τιτλος 1'>Τιτλος 1</a></li>
<li><a href='#' title='Τιτλος 2'>Τιτλος 2</a></li>

<li><a href='#' title='Τιτλος 3'>Τιτλος 3</a></li>
<li><a href='#' title='Τιτλος 4'>Τιτλος 4</a></li>
<li><a href='#' title='Τιτλος 5'>Τιτλος 5</a></li>
<li><a href='#' title='Τιτλος 6'>Τιτλος 6</a></li>
<li><a href='#' title='Τιτλος 7'>Τιτλος 7</a></li>

<li><a href='#' title='Τιτλος 8'>Τιτλος 8</a></li>
</ul>
<!-- Εδώ τελειώνει το SubMenu -->
</li>
<li><a href='http://bloggertrics.blogspot.com/search/label/blogger%20tips' title='Blogger Tips'>Tips</a>
<!-- Εδώ αρχίζει το SubMenu -->
<ul>
<li><a href='http://bloggertrics.blogspot.com/search/label/Image%20Effects' title='Image Effects'>Image Effects</a></li>

<li><a href='#' title='Τιτλος 2'>Τιτλος 2</a></li>
<li><a href='#' title='Τιτλος 3'>Τιτλος 3</a></li>
<li><a href='#' title='Τιτλος 4'>Τιτλος 4</a></li>
<li><a href='#' title='Τιτλος 5'>Τιτλος 5</a></li>
<li><a href='#' title='Τιτλος 6'>Τιτλος 6</a></li>
<li><a href='#' title='Τιτλος 7'>Τιτλος 7</a></li>
<li><a href='#' title='Τιτλος 8'>Τιτλος 8</a></li>
</ul>
<!-- Εδώ τελειώνει το SubMenu -->
</li>
   <li><a href='http://bloggertrics.blogspot.com/search/label/Blogger%20Widgets' title='Widgets'>Widgets</a>

<li><a href='#' title='Τιτλος 1'>Τιτλος 1</a></li>
<li><a href='#' title='Τιτλος 2'>Τιτλος 2</a></li>
<li><a href='#' title='Τιτλος 3'>Τιτλος 3</a></li>
<li><a href='#' title='Τιτλος 4'>Τιτλος 4</a></li>
<li><a href='#' title='Τιτλος 5'>Τιτλος 5</a></li>
<li><a href='#' title='Τιτλος 6'>Τιτλος 6</a></li>
<li><a href='#' title='Τιτλος 7'>Τιτλος 7</a></li>
</ul>
<!-- Εδώ τελειώνει το SubMenu --></li>
</ul>
<!-- Τελειώνει το Menu -->


Μπορείτε να προσθέσετε όσες ετικέτες  και οσα  Drop Down στοιχεία υπομενού εσείς θέλετε  .


Το επόμενο βήμα είναι να γράψουμε  το CSS , για να πάρει σχήμα το μενού μας .

Ο βασικός μας CSS κώδικας :

#topnav {
margin: 0px;
padding: 5px 5px 5px 5px;
float: left;
z-index:8;
background-color:#000;
}

#topnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#topnav li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;

}

#topnav li a, #topnav li a:link {
color: #FFFFFF;
display: block;
font-family: Arial, Tahoma, Verdana;
font-size: 12px;
font-weight: bold;
margin: 0px 5px 0px 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
text-transform: uppercase;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-radius: 5px;
}

#topnav li a:hover {
background-color: #F76C10;
color: #FFFFFF;
margin: 0px 5px 0px 0px;
padding: 8px 15px 8px 15px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-radius: 5px;
}

#topnav li li a, #topnav li li a:link, #topnav li li a:visited {
background-color:#000;
width: 150px;
color: #FFFFFF;
float: none;
margin: 0px 0px 0px -1px;
padding: 7px 10px 7px 10px;
border-bottom: 1px dashed #222;
border-left: 1px dashed #222;
border-right: 1px dashed #222;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}

#topnav li li a:hover {
background:#f08c34;
color: #FFFFFF;
margin: 0px 0px 0px -1px;
padding: 7px 10px 7px 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-khtml-border-radius: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}

#topnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 180px;
margin: 0px;
padding: 0px;
}

#topnav li li {
}

#topnav li ul a {
width: 150px;
}

#topnav li ul a:hover, #topnav li ul a:active {

}

#topnav li ul ul {
margin: -30px 0 0 171px;
}

#topnav li:hover ul ul, #topnav li:hover ul ul ul{
left: -999em;
}

#topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul{
left: auto;
}

#topnav li:hover {
position: static;
}

#topnav .current_page_item a {
background-color: #F76C10;
color: #FFFFFF;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-khtml-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}

Σημείωση : Εισάγετε τον παραπάνω CSS κώδικα πάνω από την ετικέτα ]]></b:skin> στο πρότυπο σας .

Δείτε το μενού σε λειτουργία

 Κατανόηση του κώδικα που μπορείτε να επεξεργαστείτε :  

background-color:#000; -  -> Το χρώμα υπόβαθρου από το μενού , το οποίο σε αυτή την περίπτωση είναι το μαύρο

 color: #FFFFFF; -> Το χρώμα της γραμματοσειράς

background-color: #F76C10; -> Το hover χρώμα κάθε στοιχείου li  του μενού , το οποίο είναι το πορτοκαλί . 

background:#f08c34;  -> Το hover χρώμα κάθε στοιχείου li  από το SubMenu  του μενού .

Επεξεργαστείτε το κάθε στοιχείο , μέχρι να βρείτε αυτό που σας αρέσει . 

Καλή επιτυχία σε όλους  : ) 
Read More ►
 

© 2010 Bloggertrics

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

ΑΡΧΙΚΗ| Sitemap| Posts RSS