2Απρ

Διπλό border σε εικόνα με χρήση CSS.

, 2 Απριλίου 2008 | WEB DESIGN - AUTHORING | 0 Σχόλια

Στα πλαίσια καλύτερης εκμάθησης και συχνότερης χρήσης των CSS το Webdesignblog θα δημοσιεύει άρθρα που θα εξηγούν τους τρόπους να αποφεύγετε επιπλέον γραφικά και γενικότερα πως να εφαρμόζετε καλύτερα στησίματα (layout) με valid και semantic markup στις ιστοσελίδες που σχεδιάζετε.

Η μέθοδος

Με την χρήση CSS θα μπορέσουμε να εμφανίσουμε διπλό border σε εικόνα που επιθυμούμε να προβάλουμε στην ιστοσελίδας μας.

1. Πρώτο βήμα: προσθέτουμε border property 2px με το χρώμα επιλογής μας στο img– tag.

img{
border:2px solid #72a143;
}

2. Δεύτερο βήμα: προσθέτουμε padding property 1px και ορίζουμε ένα κίτρινο χρώμα στο background.

img{
border:2px solid #72a143;
padding:1px;
background:#fffeda5
;
}

Το αποτέλεσμα:

Οπτικά έχουμε “διπλό” border χωρίς την χρήση γραφικών.

double border image
Πηγή πληροφορίας: cssglobe

ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Διπλό border σε εικόνα με χρήση CSS. γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.

Σχολιάστε

Back to top

Recent comments

  • Πολυ καλο αθρο πραγματικα!

    Η σωστή αρχιτεκτονική ενός website και τα οφέλη της
  • Πολύ χρήσιμη η λίστα με τα online tools. Ο επιτυχημένος σχεδιασμός μιας ιστοσελίδας βοηθά σε δύο κατευθύνσεις. Η πρώτη είναι ότι βελτιώνει την εμπειρία του επισκέπτη της ιστοσελίδας με συνέπεια ο τελευταίος να βλέπει περισσότερες σελίδες και να μένει περισσότερο χρόνο σε αυτή. Η δεύτερη είναι ότι επειδή ακριβώς βελτιώνονται τα στατιστικά στοιχεία της ιστοσελίδας, όπως το bounce rate, ο μέσος χρόνος παραμονής στην ιστοσελίδα και ο αριθμός των σελίδων ανά επίσκεψη, βελτιώνεται και η κατάταξη της ιστοσελίδας στα οργανικά αποτελέσματα της Google.

    10+1 Χρήσιμα website και on line tools

Latest From Twitter