Τριπλό border με χρήση CSS3

04 Φεβ
2011
από τον/την Praxitelis Ikonomidisκατηγορία: Χρήσιμα Άρθρα

Κι όμως είναι εφικτό να δημιουργήσουμε αυτό το όμορφο εφέ, χωρίς τη χρήση εικόνας, απλά και μόνο με τη χρήση css. Πιο συγκεκριμένα με την χρήση της ιδιότητας :before και :after. Ας το δούμε στην πράξη:

Δημιουργούμε ένα div με id box

<div id="box">Κείμενο</div> 

Το CSS για το box:

#box {  
background: #f4f4f4;  
border: 1px solid #bbbbbb;  
width: 200px;  
height: 200px;  
margin: 60px auto;  
position: relative;
}

Σημειώστε ότι το position:relative είναι σημαντικό. Στη συνέχεια χρησιμοποιούμε την ιδιότητα :before και :after ως εξής:

#box:before {  
border: 1px solid white;  
content: '';  
width: 198px;  
height: 198px;  
position: absolute;  
}

To ύψος (height) και το πλάτος (width) πρέπει να είναι 200 px μείων 2 (το border δεξιά και αριστερά)

 

#box:after {  
content: '';  
position: absolute;  
width: 196px;  
height: 196px;  
border: 1px solid #bbbbbb;  
left: 1px; top: 1px;  
}

Ομοίως το ύψος και το πλάτος έχει ακόμα μία μείωση των δύο pixel. Η τελευταία παράμετρος διορθώνει το κεντράρισμα του δεύτερου (εσωτερικού) border.

Ετικέτες:
Praxitelis Ikonomidis

Σχετικά με τον συντάκτη

Praxitelis Ikonomidis

Προγραμματιστής και επιχειρησιακός σύμβουλος για θέματα πληροφορικής. 17+ χρόνια εμπειρίας σε τεχνολογίες σχεδίασης ιστοσελίδων και κατασκευής e-shop. Ο ιδανικός συνεργάτης σας σε θέματα Internet - web!

Κατασκευή Ιστοσελίδων

Η εταιρεία μας εξειδικεύεται στην κατασκευή ιστοσελίδων και eShop. Διαθέτουμε 16+ χρόνια εμπειρίας στην δημιουργία ιστοσελίδων φιλικών προς τις μηχανές αναζήτησης (SEO friendly). Όλες οι ιστοσελίδες μας είναι responsive, ακολουθώντας τις πιο σύγχρονες τεχνικές σχεδίασης.
Τεχνολογίες Σχεδίασης

copyright 2018 © i-xperts.gr