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

Γιάννης Ευσταθίου | Web Professional, 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 χωρίς την χρήση γραφικών.

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

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