Τριπλό 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

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

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

Η εταιρεία μας εξειδικεύεται στην κατασκευή ιστοσελίδων και eShop. Εξυπηρετούμε την ευρύτερη περιοχή της Θέρμης στη Θεσσαλονίκη αλλά και πελάτες μας σε ολόκληρη την Ελλάδα. Όλες οι ιστοσελίδες μας είναι responsive, ακολουθώντας τις πιο σύγχρονες τεχνικές σχεδίασης.

Πλατεία Παραμάνα 10, Θέρμη, Θεσσαλονίκη
2310 32 71 91

 Greek Site English Site

copyright 2020 © i-xperts.gr