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

Παρασκευή, Νοεμβρίου 27

1

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 :

ΕμφάνισηΜεταβλητές Τεστ NSIEΠαράδειγμα
cursor-sampledefaultTEST6+4+cursor:default
cursor-samplecrosshairTEST6+4+cursor:crosshair
cursor-samplehandTEST4+cursor:hand
cursor-samplepointerTEST6+cursor:pointer
cursor-sampleCross browserTEST4+cursor:pointer;cursor:hand
cursor-samplemoveTEST6+4+cursor:move
cursor-sampletextTEST6+4+cursor:text
cursor-samplewaitTEST6+4+cursor:wait
cursor-samplehelpTEST6+4+cursor:help
cursor-samplen-resizeTEST6+4+cursor:n-resize
cursor-samplene-resizeTEST6+4+cursor:ne-resize
cursor-samplee-resizeTEST6+4+cursor:e-resize
cursor-samplese-resizeTEST6+4+cursor:se-resize
cursor-samples-resizeTEST6+4+cursor:s-resize
cursor-samplesw-resizeTEST6+4+cursor:sw-resize
cursor-samplew-resizeTEST6+4+cursor:w-resize
cursor-samplenw-resizeTEST4+4+cursor:nw-resize

cursor-sample
progressTEST6+cursor:progress

cursor-sample
not-allowedTEST6+cursor:not-allowed

cursor-sample
no-dropTEST6+cursor:no-drop

cursor-sample
vertical-textTEST6+cursor:vertical-text

cursor-sample
all-scrollTEST6+cursor:all-scroll

cursor-sample
col-resizeTEST6+cursor:col-resize

cursor-sample
row-resizeTEST6+cursor:row-resize

cursor-sample
cursor:url(uri)TEST
6+cursor:url(uri)



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



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


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

1 :

Στέλλα είπε...

Καλησπέρα, έχω μια ερώτηση:  θέλω στο blog  μου να αναρτήσω φωτογραφίες, οι οποίες θέλω να είναι ταξινομημένες σε ομάδες (ή ετικέτες???). Έχεις ιδέα για το πώς θα γίνει αυτό???

Ευχαριστώ!

 

© 2010 Bloggertrics

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

ΑΡΧΙΚΗ| Sitemap| Posts RSS