Σκεφτείτε έξω από το κουτί με σχήμα CSS

Το CSS βασίζεται σε ένα μοντέλο κουτιού. Εάν έχετε μια εικόνα που είναι ένας κύκλος στον οποίο θέλετε να τυλίξετε κείμενο, θα τυλίξει γύρω από το πλαίσιο οριοθέτησης των εικόνων.

Σχήμα-έξω

Μια νέα ιδιότητα CSS που ονομάζεται σχήμα-έξω σάς επιτρέπει να τυλίγετε κείμενο που ανταποκρίνεται στο σχήμα της εικόνας σας.

Τι είναι το σχήμα έξω

Το σχήμα-έξω είναι μια νέα ιδιότητα CSS που αλλάζει το σχήμα των αντικειμένων που είναι τυλιγμένα. Αντί να περιορίζεται σε ένα ορθογώνιο πλαίσιο οριοθέτησης γύρω από την εικόνα, το σχήμα-έξω μας επιτρέπει να διαμορφώνουμε περιεχόμενο ώστε να ταιριάζει στην εικόνα.

Δείτε πώς το MDN περιγράφει το σχήμα-έξω:

Η ιδιότητα σχήματος εκτός CSS χρησιμοποιεί τιμές σχήματος για να ορίσει την περιοχή πλωτήρα για ένα πλωτήρα και θα προκαλέσει το ενσωματωμένο περιεχόμενο να τυλίξει γύρω από το σχήμα αντί του πλαισίου οριοθέτησης του πλωτήρα.

Η πιο σημαντική απομάκρυνση από αυτήν την περιγραφή είναι ότι αυτή η νέα ιδιότητα ισχύει για εικόνες που χρησιμοποιούν float. Η ιδιότητα σχήματος εκτός CSS ελέγχει τον τρόπο με τον οποίο το κείμενο τυλίγεται γύρω από οποιαδήποτε αιωρούμενη εικόνα. Το κείμενο που είναι τυλιγμένο μπορεί να έχει σχήμα κύκλου, έλλειψης, ορθογωνίου ή πολυγώνου.

Χρήση εξωτερικού σχήματος

Η ιδιότητα σχήματος έξω παίρνει ένα "βασικό σχήμα" και εφαρμόζει μια συνάρτηση σχήματος σε αυτήν. Η λειτουργία σχήματος χρησιμοποιείται για να αλλάξει το σχήμα της περιοχής πλωτήρα του σχήματος. Η ιδιότητα σχήματος εξωτερικού CSS παρέχει λειτουργικότητα για τη δημιουργία αυτών των λειτουργιών σχήματος:

  • κύκλος
  • έλλειψη
  • πολύγωνο
  • ορθογώνιο παραλληλόγραμμο
  • url

Η εικόνα μπορεί να τοποθετηθεί με αυτές τις τιμές. Οι τιμές προσαρτώνται στο τέλος:

  • πλαίσιο περιθωρίου
  • κουτί
  • περίγραμμα-κουτί

Η εικόνα πρέπει να έχει εγγενείς διαστάσεις. Πρέπει να ορίσετε το ύψος και το πλάτος του στοιχείου. Αυτό θα χρησιμοποιηθεί από τη λειτουργία σχήματος για να δημιουργήσει ένα σύστημα συντεταγμένων που χρησιμοποιείται κατά την αναδίπλωση κειμένου γύρω από την εικόνα.

Κύκλος

Το Circle () είναι μία από τις λειτουργικές τιμές που παρέχονται με σχήμα έξω. Η πλήρης σημείωση για τον κύκλο () είναι κύκλος (r στο cx cy) όπου r είναι η ακτίνα του κύκλου και cx και cy είναι οι συντεταγμένες για το κέντρο του κύκλου. Εάν τα παραλείψετε, το κέντρο της εικόνας θα χρησιμοποιηθεί ως προεπιλεγμένες τιμές.

Ακολουθεί ένα παράδειγμα χρήσης σχήματος-εξωτερικού σε κύκλο:

.circle { height: 200px; width: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: circle(); shape-outside: circle();}

Ελλειψη

Η έλλειψη είναι μια παραλλαγή του κύκλου όπου το αντικείμενο επιμηκύνεται είτε στον οριζόντιο είτε στον κάθετο άξονα. Η πλήρης σημείωση για την έλλειψη () είναι έλλειψη (rx ry σε cx cy) όπου rx και ry είναι οι ακτίνες για την έλλειψη και cx και cy είναι οι συντεταγμένες για το κέντρο της έλλειψης.

Ακολουθεί ένα παράδειγμα χρήσης σχήματος-εξωτερικού στην έλλειψη:

.ellipse { width: 100px; height: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: ellipse(50px 100px at 50% 50%); shape-outside: ellipse(50px 100px at 50% 50%);}

Πολύγωνο

Η λειτουργία πολυγώνου παρέχει απεριόριστο εύρος σχημάτων. Η πλήρης σημείωση για το πολύγωνο () είναι πολύγωνο (x1 y1, x2 y2,…)όπου κάθε ζεύγος καθορίζει τις συντεταγμένες xy για μια κορυφή του πολυγώνου. Για να χρησιμοποιήσετε τη συνάρτηση πολυγώνου () πρέπει να καθορίσετε τουλάχιστον 3 ζεύγη κορυφής.

Το πολύγωνο χρησιμοποιείται με μια διαδρομή κλιπ. Η ιδιότητα CSS-path δημιουργεί μια περιοχή αποκοπής που καθορίζει ποιο τμήμα ενός στοιχείου πρέπει να εμφανίζεται. Εμφανίζεται οτιδήποτε μέσα στην περιοχή, ενώ εκείνοι που βρίσκονται έξω είναι κρυμμένοι.

Ακολουθεί ένα παράδειγμα χρήσης σχήματος-εξωτερικού για τη δημιουργία δύο τριγώνων σχημάτων και το κείμενο ρέει μεταξύ τους:

.leftTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}.rightTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 0 5px 25px; float: right; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}

Υποστήριξη προγράμματος περιήγησης

Το σχήμα CSS εξωτερικά υποστηρίζεται κυρίως από τα Chrome, Opera και Safari.

Αποκτήστε τον κωδικό

Ο κωδικός για όλα τα παραδείγματα μπορεί να βρεθεί στο github repo εδώ.

Περισσότερα άρθρα

Ευχαριστώ που διαβάσατε το άρθρο μου. Αν σας αρέσει, κάντε κλικ στο εικονίδιο χειροκρότησης παρακάτω, ώστε άλλοι να βρουν το άρθρο. Ακολουθούν μερικά από τα άρθρα μου που μπορεί να σας ενδιαφέρουν:

Εδώ είναι 5 διατάξεις που μπορείτε να κάνετε με το FlexBox

Πρώτη αναζήτηση στο JavaScript

Μοτίβα Instantiation σε JavaScript