CSS3 border-image

VN:F [1.9.22_1171]
Rating: 5.0/5 (3 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
15/05/2012 από
thePrince

Το border-image είναι μια συλλογή από κανόνες CSS3 που -παρόλο που η κοινότητα δεν ασχολείται ιδιαίτερα με αυτούς- μπορούν να δώσουν λύσεις σε διάφορα designs που απλώς δεν μπορούν να υλοποιηθούν με άλλο τρόπο! Διαβάστε παρακάτω λίγες σημειώσεις και ένα παράδειγμα.

Στο παράδειγμα που ανέφερα λοιπόν, υπάρχουν 3 διαφορετικού μεγέθους κουμπιά (επιστροφής σε αυτό το άρθρο, μην τυχόν και μου φύγετε…) που χρησιμοποιούν το ίδιο ακριβώς γραφικό: . Αυτό υλοποιείται με κανόνες border-image και μπορείτε να διαβάσετε περισσότερα στα επίσημα (draft) specs, μια ανάλυση στο sitepoint και μερικά ακόμα παραδείγματα στο css-tricks.com. Ορίστε τα CSS του δικού μου παραδείγματος και ακολουθούν οι σημειώσεις μου:

a.bi {
	border-width:9px 16px 12px 22px;
-webkit-border-image:url(bg.png) 9 16 12 22 stretch;
   -moz-border-image:url(bg.png) 9 16 12 22 stretch;
     -o-border-image:url(bg.png) 9 16 12 22 stretch;
	border-image:url(bg.png) 9 16 12 22 fill stretch;
}
<!--[if IE]><style>
a.bi {
	behavior:url(PIE.htc);
}
</style><![endif]-->

Κατ’ αρχάς, προσέξτε πως η W3C σύνταξη έχει ένα keyword παραπάνω από τις browser specific γραμμές· το fill. Το fill καθορίζει τη συμπεριφορά του μεσαίου κομματιού του γραφικού, αυτού που περισσεύει από το «κόψιμο» που ορίσαμε με τα 4 νούμερα border-image-slice (9 16 12 22). Τα specs ορίζουν πως αν δεν υπάρχει αυτό το keyword, το κομμάτι που περισσεύει θα πρέπει να είναι «τρύπιο». Οι περισσότεροι browsers δεν χρησιμοποιούν αυτό το keyword, κάποιοι μάλιστα αγνοούν όλο τον κανόνα αν υπάρχει το fill! Επίσης, το γραφικό που επέλεξα δεν είναι ακριβώς κατάλληλο για την 3η περίπτωση όπου μεγαλώνει το ύψος αλλά βοηθάει για να δείτε τη λειτουργία stretch καλύτερα.

  • Ο Firefox (12.0) χρησιμοποιεί τη σύνταξη -moz-border-image:url(bg.png) 9 16 12 22 stretch. Χρησιμοποιεί την μεσαία φέτα σα να υπήρχε το keyword fill ενώ αν το γράψουμε, θα ακυρώσει όλο το στυλ.
  • Ο Chrome (18.0.1025.168) χρησιμοποιεί είτε τον κανόνα -webkit- είτε τον standard, ανάλογα με την προτεραιότητα. Στο συγκεκριμένο παράδειγμα, η standard σύνταξη είναι εκείνη που έχει προτεραιότητα, αφού είναι ο τελευταίος στη σειρά κανόνας. Το fill κάνει αυτό που θα έπρεπε· αν το αφαιρέσω, το μεσαίο κομμάτι θα είναι διάφανο. Μπορώ να το προσθέσω στον κανόνα -webkit- αλλά δεν θα αλλάξει κάτι αφού ο Chrome, σε αυτή την περίπτωση (-webkit-), χρησιμοποιεί το κεντρικό κομμάτι σα να υπήρχε το fill ήδη.
  • Ο Safari (5.1.5) χρησιμοποιεί τον κανόνα -webkit- και αγνοεί το fill, γεμίζοντας το κενό με το μεσαίο slice.
  • Ο Opera (11.62) χρησιμοποιεί τον κανόνα -o- αλλά, αν προστεθεί το fill, το στυλ αγνοείται.
  • Ο Internet Explorer (9, 8, 7) … δεν υποστηρίζει καθόλου το border-image αλλά μπορούμε να χρησιμοποιήσουμε το CSS3PIE! Αν διαβάσετε το σχετικό documentation (το διαβάσατε, έτσι δεν είναι;) θα δείτε πως χρησιμοποιείται η standard shortcut σύνταξη (όπως στο demo) ενώ το fill είναι απαραίτητο. Δεν αποκλείεται να προκύψουν παρενέργειες από την χρήση του PIE, τις οποίες θα πρέπει να αντιμετωπίσετε με διαφορετικό τρόπο κάθε φορά, είτε δοκιμάζοντας κάτι από τα known issues, είτε δίνοντας εντελώς διαφορετικά στυλ — που στη συγκεκριμένη περίπτωση είναι μάλλον δύσκολο αλλά όχι αδύνατο!










Σχόλια

zeoz
15 May 2012


πολυ καλο αρθρο 🙂 thanx !!!


prince.gr
16 May 2012


Thanks zeoz! Οφείλω να συμπληρώσω μερικά links όμως, όπως το http://border-image.com (online generator) και τη σχετική σελίδα στο http://www.css3files.com/border/, ελπίζοντας να γίνει πιο κατανοητή η λειτουργία. Δυστυχώς, ακόμα δεν έχω βρει αν θα υποστηριχθεί σε IE 10 διότι, αν δεν, δεν βλέπω να προχωράει, αφού δεν θα υπάρχει δυνατότητα fallback.


Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.