
Πράγματα τα οποία θεωρούνταν αμετάβλητα, όπως κάτω υπογράμμιση συνδέσεων , το χρώμα των form στοιχείων , η απόσταση μεταξύ κειμένου και πολλά περισσότερα, μπορούν πλέον όλοι να τροποποιήσουν , χάρη στο CSS.
Σε αυτό το άρθρο θα σας δείξω τον πηγαίο κώδικα για μερικά από τα πιο συνηθισμένα CSS κόλπα που μπορείτε να προσθέσετε και εσείς τώρα στο δικτυακό σας τόπο.
Προσθήκη εικόνας φόντου ανάρτησης .
Αν θέλετε να χρησιμοποιήσετε στην ανάρτηση σας κάποια εικόνα φόντου , τότε εισάγετε στο header τμήμα της ανάρτησης σας τον παρακάτω κώδικα :
<div style="background:url(διεύθυνση URL της εικόνας σας) no-repeat;">
Δημοσίευση περιεχομένου σας πηγαίνει εδώ .....................
</ p>
Δημοσίευση περιεχομένου σας πηγαίνει εδώ .....................
</ p>
Αντικαταστήστε διεύθυνση URL της εικόνας σας με το URL της εικόνας σας.
Δείτε ένα δείγμα κάτω :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque sit amet metus auctor adipiscing. Phasellus ac libero non turpis elementum aliquam. Pellentesque non libero turpis, in euismod nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque sit amet metus auctor adipiscing. Phasellus ac libero non turpis elementum aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque sit amet metus auctor adipiscing. Phasellus ac libero non turpis elementum aliquam. Pellentesque non libero turpis, in euismod nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque sit amet metus auctor adipiscing. Phasellus ac libero non turpis elementum aliquam.Pellentesque non libero turpis, in euismod nisi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque sit amet metus auctor adipiscing. Phasellus ac libero non turpis elementum aliquam. Pellentesque non libero turpis, in euismod nisi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque sit amet metus auctor adipiscing. Phasellus ac libero non turpis elementum aliquam. Pellentesque non libero turpis, in euismod nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque sit amet metus auctor adipiscing. Phasellus ac libero non turpis elementum aliquam.
Συνδέσεις ( links ) χωρίς υπογράμμιση από κάτω :
Για να χρησιμοποιήσετε αυτό το CSS και να επιτύχετε αυτό το αποτέλεσμα. Να εντάξετε τον παρακάτω κώδικα στο header τμήμα της ανάρτησης σας :
<style type="text/css"> a{ text-decoration:none; } </style>
Τώρα πλέων οι συνδέσεις ( links ) σας δεν θα υπογραμμίζονται από κάτω .
Συνδέσεις ( links ) με mouse hover χρώμα επιλογής σας
Για να δημιουργήσετε συνδέσμους ( links ) που αλλάζουν χρώμα όταν το ποντίκι περνά πάνω του . Εδώ είναι ο πηγαίος κώδικας για το σκοπό αυτό . Όπως πάντα τον CSS κώδικα εισάγετε στο header τμήμα της της ανάρτησης σας :
<style type="text/css"> a:hover{ color:red; } </style>
Βεβαίως , την λέξη " red " , το χρώμα μπορείτε να το αλλάξετε ανάλογα με τις επιθυμίες σας .
Εδώ είναι ένα παράδειγμα μιας σύνδεσης με mouse hover χρώμα επιλογής :
Πατήστε εδώ για να μεταβείτε στο google
Επισήμανση κείμενου
Μου αρέσει πολύ αυτό , γιατί στο κείμενο τονίζονται αποτελέσματα , μας επιτρέπει να επιστήσουμε την προσοχή στο συγκεκριμένο κείμενο ,όπου δώσαμε ένα χρώμα φόντου. Ρίξτε μια ματιά παρακάτω :
Το CSS είναι μια καινοτομία στο Web design γιατί επιτρέπει στους χρήστες να κοντρολάρουν το πως θα είναι η γενική και ειδική εμφάνιση πολλών Web σελίδων μαζί ταυτόχρονα!
Επειδή θέλω να τονίσω τη φράση σε αυτό το κείμενο , χρησιμοποίησα CSS για να δώσω στο τμήμα του κειμένου που επιθυμώ , ένα χρώμα στο φόντο κίτρινο.
Το χρώμα μπορείτε να το αλλάξετε και να χρησιμοποιήσετε ότι χρώμα επιθυμείτε .
Εδώ είναι ο πηγαίος κώδικας που χρησιμοποίησα :
<span style="background-color: yellow">επιτρέπει στους χρήστες να κοντρολάρουν </span>
Όμορφοι Πινάκες με χρωματιστά περιγράμματα :
Πίνακας με κόκκινο , λεπτό περίγραμμα |
Πίνακας με κίτρινο , παχύ περίγραμμα |
Πίνακας με κόκκινο λεπτό dashed περίγραμμα |
Πίνακας με κόκκινο λεπτό dotted περίγραμμα |
Το παραπάνω αποτέλεσμα επιτυγχάνεται με τον ακόλουθο κώδικα, τοποθετημένα μέσα στο <table> ετικέτα :
1) Με το κίτρινο παχύ περίγραμμα :
<table style="border-bottom: yellow 20px solid; border-left: yellow 20px solid; border-top: yellow 20px solid; border-right: yellow 20px solid" width="332"><tbody>
<tr>
<td width="330">Πίνακας με κίτρινο , παχύ περίγραμμα </td>
</tr>
</tbody></table>
<tr>
<td width="330">Πίνακας με κίτρινο , παχύ περίγραμμα </td>
</tr>
</tbody></table>
2) Με το κόκκινο λεπτό περίγραμμα :
<table style="border-bottom: red 2px solid; border-left: red 2px solid; border-top: red 2px solid; border-right: red 2px solid" width="322"><tbody>
<tr>
<td width="322">Πίνακας με κόκκινο , λεπτό περίγραμμα</td>
</tr>
</tbody></table>
<tr>
<td width="322">Πίνακας με κόκκινο , λεπτό περίγραμμα</td>
</tr>
</tbody></table>
Μπορείτε να αλλάξετε "20px" και το χρώμα "yellow " σε διαφορετικές τιμές για μεταβάλλουν το πάχος και το χρώμα των περιγραμμάτων , αντίστοιχα.
Μπορείτε να αλλάξετε επίσης “ solid “ με “ dashed “ η με “ dotted “ η με ότι εσείς θέλετε .
links που αλλάζουν μέγεθος
Δείτε Εδώ |
Ο πηγαίος κώδικας για αυτό είναι:
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {font-size:24; font-weight:bold; color: red;}
</style>
---Εδώ το link σας---
Scroll box με χρωματιστό υπόβαθρο
Το Scroll box είναι ένα κουτί που μεγαλώνει όταν το περιεχόμενο είναι πολύ μεγάλο για να χωρέσει στο κουτί.
Μορειτε να εισάγετε μέσα εικόνες , αναρτήσεις, κώδικα πηγής η ότι άλλο θέλετε εσείς και ειδικά όταν πρέπει να εξοικονομήσουμε χώρο στην σελίδα μας είναι ότι πρέπει νομίζω .
Δείτε ένα δείγμα κάτω :
Νέα στοιχεία για ζωή στον Αρη
Τις μέχρι τώρα πιο σοβαρές ενδείξεις ότι υπήρχε ζωή στον Αρη, ανακάλυψαν επιστήμονες της ΝΑSA. Oι τελευταίοι μελέτησαν ένα μετεωρίτη που έπεσε στην Ανταρκτική από τον Αρη πριν 13.000 χρόνια και εντόπισαν βακτήρια που ήταν ενσωματωμένα κάτω από τα πρώτα στρώματα του βράχου. Η ανακάλυψη των βακτηρίων
Τις μέχρι τώρα πιο σοβαρές ενδείξεις ότι υπήρχε ζωή στον Αρη, ανακάλυψαν επιστήμονες της ΝΑSA. Oι τελευταίοι μελέτησαν ένα μετεωρίτη που έπεσε στην Ανταρκτική από τον Αρη πριν 13.000 χρόνια και εντόπισαν βακτήρια που ήταν ενσωματωμένα κάτω από τα πρώτα στρώματα του βράχου. Η ανακάλυψη των βακτηρίων
Πώς να κάνετε το Scroll box ;
Μπορείτε απλά να αντιγράψετε και να επικολλήσετε τον παρακάτω κώδικα :
<style type="text/css">
div.scroll
{
background-color:#CCF1EF;
width:400px;
height:100px;
overflow:scroll;
}
div.hidden
{
background-color:#CCF1EF;
width:400px;
height:200px;
overflow:hidden;
}
</style>
<br />
<div class="scroll">
Το περιεχόμενο σας εδώ.....
<br />
</div>
Φυσικά, μπορείτε να αλλάξετε τις τιμές που ταιριάζουν (όπως το height , width και το χρώμα background-color:#CCF1EF )
Αλλάξτε τα cursor του ποντικιού σας :
Περάστε το ποντίκι σας πάνω στις λέξεις για να δείτε το αποτέλεσμα .
Ιδιότητες CURSOR :
|
Για να το κάνετε αυτό απλά συμπεριλαμβάνεται τον παρακάτω κώδικά στην ανάρτησή σας :
Σημειωση : Αλλάζετε την ιδιότητα cursor >> help σε cursor: w-resize , cursor:wait η σε ότι εσείς θέλετε
Αυτά προς το παρόν , στην επόμενη ανάρτηση θα αναρτήσω και άλλα CSS κόλπα...
Καλησπέρα, έχω μια ερώτηση: θέλω στο blog μου να αναρτήσω φωτογραφίες, οι οποίες θέλω να είναι ταξινομημένες σε ομάδες (ή ετικέτες???). Έχεις ιδέα για το πώς θα γίνει αυτό???
Ευχαριστώ!