5 + 3 απλά κόλπα με την χρήση CSS

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

 Προσθήκη εικόνας φόντου ανάρτησης .

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

<div style="background:url(διεύθυνση URL της εικόνας σας) no-repeat;">
Δημοσίευση περιεχομένου σας πηγαίνει εδώ .....................
</ 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>

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>

Μπορείτε να αλλάξετε "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 χρόνια και εντόπισαν βακτήρια που ήταν ενσωματωμένα κάτω από τα πρώτα στρώματα του βράχου. Η ανακάλυψη των βακτηρίων

Πώς να κάνετε το 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 :

Εμφάνιση Μεταβλητές Τεστ NS IE Παράδειγμα default TEST 6+ 4+ cursor:default crosshair TEST 6+ 4+ cursor:crosshair hand TEST 4+ cursor:hand pointer TEST 6+ cursor:pointer Cross browser TEST 4+ cursor:pointer;cursor:hand move TEST 6+ 4+ cursor:move text TEST 6+ 4+ cursor:text wait TEST 6+ 4+ cursor:wait help TEST 6+ 4+ cursor:help n-resize TEST 6+ 4+ cursor:n-resize ne-resize TEST 6+ 4+ cursor:ne-resize e-resize TEST 6+ 4+ cursor:e-resize se-resize TEST 6+ 4+ cursor:se-resize s-resize TEST 6+ 4+ cursor:s-resize sw-resize TEST 6+ 4+ cursor:sw-resize w-resize TEST 6+ 4+ cursor:w-resize nw-resize TEST 4+ 4+ cursor:nw-resize progress TEST 6+ cursor:progress not-allowed TEST 6+ cursor:not-allowed no-drop TEST 6+ cursor:no-drop vertical-text TEST 6+ cursor:vertical-text all-scroll TEST 6+ cursor:all-scroll col-resize TEST 6+ cursor:col-resize row-resize TEST 6+ cursor:row-resize cursor:url(uri) TEST 6+ cursor:url(uri)

Για να το κάνετε αυτό απλά συμπεριλαμβάνεται τον παρακάτω κώδικά στην ανάρτησή σας :

<span style="cursor: help;">Το κείμενο σας</span><br />

Σημειωση : Αλλάζετε την ιδιότητα  cursor >> help σε cursor: w-resize , cursor:wait η σε ότι εσείς θέλετε


Αυτά προς το παρόν , στην επόμενη ανάρτηση θα αναρτήσω και άλλα  CSS κόλπα...