Προσαρμοσμένα γεωμετρικά σχήματα css3. Shapes in CSS: An Introductory Course. Μπλοκ αναφοράς σχημάτων

Γεια σε όλους. Σήμερα θα θίξουμε ένα μάλλον ασυνήθιστο θέμα, δηλαδή το μέλλον του σχεδιασμού ιστοσελίδων, τα σχήματα CSS.

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

Μόνο σε αυτή την περίπτωση, τα στοιχεία μας βοηθούν. Ο δημοφιλής ιστότοπος W3C CSS δημοσίευσε την πρώτη τεκμηρίωση για τα σχήματα. Εδώ είναι αυτή η ανάρτηση στα Αγγλικά CSS Shapes Module Level 1. Αυτή η ενότητα κυκλοφόρησε πρόσφατα στις 20 Ιουνίου. Μέχρι στιγμής αυτή είναι μια έκδοση beta, η οποία περιλαμβάνει σχήματα όπως ορθογώνιο, τρίγωνο, έλλειψη, κύκλο και πολύγωνο.

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

Αρχικά, ας πάρουμε κάποια απλή σήμανση HTML, χάρη στο http://www.webdesignerdepot.com:

Αυτό είναι ένα παράδειγμα κειμένου

Για απολύτως τοποθετημένα στοιχεία, δεν απαιτούνται μηδενικό πλάτος και ύψος.

Συνδυάζοντας όρια, μπορείτε να αποκτήσετε ακόμη τέσσερις τύπους τριγώνων, τα οποία, σε συνδυασμό με αυτά που ήδη αναφέρθηκαν, μας δίνουν οκτώ επιλογές. Ο τύπος τους και ο απαιτούμενος κωδικός δίνονται στον πίνακα. 1.

Τραπέζι 1. Πιθανοί τύποι τριγώνων

Θέα	Στυλ
	περίγραμμα: 20 px στερεά διαφανή. περίγραμμα κορυφής: 20 εικονοστοιχεία σταθερό πράσινο.
	περίγραμμα: 20 px στερεά διαφανή. περίγραμμα-δεξιά: 20px σταθερό πράσινο.
	περίγραμμα: 20 px στερεά διαφανή. περίγραμμα-κάτω: 20 εικονοστοιχεία σταθερό πράσινο.
	περίγραμμα: 20 px στερεά διαφανή. περίγραμμα-αριστερά: 20px σταθερό πράσινο.
	περίγραμμα: 20 px στερεά διαφανή. περίγραμμα κορυφής: 20 εικονοστοιχεία σταθερό πράσινο. περίγραμμα-δεξιά: 20px σταθερό πράσινο.
	περίγραμμα: 20 px στερεά διαφανή. περίγραμμα-δεξιά: 20px σταθερό πράσινο. περίγραμμα-κάτω: 20 εικονοστοιχεία σταθερό πράσινο.
	περίγραμμα: 20 px στερεά διαφανή. περίγραμμα-κάτω: 20 εικονοστοιχεία σταθερό πράσινο. περίγραμμα-αριστερά: 20px σταθερό πράσινο.
	περίγραμμα: 20 px στερεά διαφανή. περίγραμμα-αριστερά: 20px σταθερό πράσινο. περίγραμμα κορυφής: 20 εικονοστοιχεία σταθερό πράσινο.

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

Το τρίγωνο μπορεί να γίνει σε άλλα σχήματα εάν ορίσετε διαφορετικά πάχη περιγράμματος. Έτσι, ο κώδικας για τη δημιουργία του μπλοκ φαίνεται στο Σχ. 4, φαίνεται στο παράδειγμα 2.

Ρύζι. 4. Αιχμηρό τρίγωνο

Παράδειγμα 2. Οξύ τρίγωνο

Χρησιμοποιώντας περίγραμμα παίρνουμε μονόχρωμα τρίγωνα για να δημιουργήσουμε το πλαίσιο που φαίνεται στο Σχ. 5 πρέπει να χρησιμοποιήσετε ένα κόλπο και να βάλετε το ένα στοιχείο πάνω στο άλλο με μια μικρή μετατόπιση. Και πάλι, τα ψευδοστοιχεία :πριν και :μετά θα μας βοηθήσουν εδώ (παράδειγμα 3).

Ρύζι. 5. Κορνίζα με γωνία

Παράδειγμα 3: Επικάλυψη τριγώνου

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

Χρήση Μετασχηματισμού

Χρησιμοποιώντας τον μετασχηματισμό, μπορούμε να περιστρέψουμε ένα τετράγωνο στοιχείο κατά 45º και να πάρουμε έναν ρόμβο από αυτό. Αυτό δεν είναι ακόμη τρίγωνο ως τέτοιο, οπότε αφήνουμε το προεξέχον τμήμα που χρειαζόμαστε σε κοινή θέα και κρύβουμε το υπόλοιπο πίσω από ένα άλλο στοιχείο (παράδειγμα 4).

Παράδειγμα 3: Μετασχηματισμός

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 6.

Ρύζι. 6. Τρίγωνο με σκιά

Διαδικτυακή γεννήτρια CSS3 για τη δημιουργία εντυπωσιακών εφέ γραφικών και τη λήψη του κώδικα CSS τους. Μπορείτε να αλλάξετε ξεχωριστά στυλ για διαφορετικές καταστάσεις όπως :hover, :active κ.λπ. Λαμβάνετε μια διεπαφή για τη δημιουργία πολύπλοκων σκιών, διαβαθμίσεων, εφέ 3D, εφέ κειμένου και πολλά άλλα. Το έργο έχει τη δική του συλλογή εφέ από την οποία μπορείτε να ξεκινήσετε την ανάπτυξή σας. Το υπέροχο με το έργο είναι ότι μπορείτε να πάρετε στυλ για ένα μόνο στοιχείο, όπως μια σκιά ή μια διαβάθμιση.

Όταν επισκεπτόμαστε για πρώτη φορά τον ιστότοπο, μας προσφέρεται να δημιουργήσουμε ένα πρότυπο για ένα πεδίο εισαγωγής, κουμπί, μπλοκ ή να επιλέξουμε ένα έτοιμο πρότυπο από τη συλλογή του έργου. Ας ξεκινήσουμε με κάτι απλό, όπως μια συλλογή από γεωμετρικά σχήματα. Επιλέξτε το σύμβολο Yin-Yang από τη συλλογή και κάντε κλικ στο "Get The Code" στην επάνω δεξιά γωνία:

Θα μας εμφανιστεί έτοιμο CSS για τρέχουσα ανάπτυξη, καθώς και ένα παράδειγμα κώδικα HTML. Στη συλλογή έργων υπάρχουν περισσότερα από 20 πρότυπα για διάφορα σχήματα CSS και, φυσικά, μπορείτε να δημιουργήσετε τα δικά σας.

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

ιστοσελίδα - wow είναι 3D!

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

cool κουμπί ιστοσελίδα

Οι πρόσθετες λειτουργίες περιλαμβάνουν την αποθήκευση της πολιτείας σας στην τοπική αποθήκευση του προγράμματος περιήγησης. Εάν κλείσετε κατά λάθος την καρτέλα, τότε την επόμενη φορά που θα αποκτήσετε πρόσβαση στον ιστότοπο, όλες οι αλλαγές σας θα παραμείνουν μαζί σας.

Όταν χρησιμοποιείτε προσαρμοσμένες γραμματοσειρές με τις γραμματοσειρές Google, το EnjoyCSS τις προσθέτει αυτόματα στο παράδειγμα HTML. Στην περίπτωσή μου για κείμενο και κουμπί μοιάζει με αυτό:

Το τελικό CSS είναι αρκετά ογκώδες, οπότε το παρουσιάζω μόνο στο τέλος του άρθρου:

Γιν-γιανγκ (
float:αριστερά;
πλάτος: 96 px;
ύψος: 48 px;
θέση: σχετική;
περίγραμμα: 2px στερεό #f81;
περίγραμμα-κάτω-πλάτος: 50 εικονοστοιχεία;
-webkit-border-radius: 100%;
ακτίνα συνόρων: 100%;
χρώμα: rgba(0,0,0,1);
-o-text-overflow: κλιπ;
κείμενο-υπερχείλιση: κλιπ;
-webkit-transform: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1) ;
μετασχηματισμός: rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1) ;
μετασχηματισμός-προέλευση: 50% 50% 0;

Γιν-γιανγκ::πριν (
πλάτος: 12 px;
ύψος: 12px;
θέση: απόλυτη;
περιεχόμενο: "";
κορυφή: 50%;
αριστερά: 0;
περίγραμμα: 18px συμπαγές #f81;
-webkit-border-radius: 100%;
ακτίνα συνόρων: 100%;
γραμματοσειρά: κανονική κανονική κανονική 100%/κανονική Arial, Helvetica, sans-serif;
χρώμα: rgba(0,0,0,1);
-o-text-overflow: κλιπ;
κείμενο-υπερχείλιση: κλιπ;
φόντο: rgba(255,255,255,1);
text-shadow: κανένας;

-webkit-transform-origin: 50% 50% 0;
μετασχηματισμός-προέλευση: 50% 50% 0;
}

Γιν-γιανγκ::μετά (
πλάτος: 12 px;
ύψος: 12px;
θέση: απόλυτη;
περιεχόμενο: "";
κορυφή: 50%;
αριστερά: 50%;
περίγραμμα: 18px στερεό rgba(255,255,255,1);
-webkit-border-radius: 100%;
ακτίνα συνόρων: 100%;
γραμματοσειρά: κανονική κανονική κανονική 100%/κανονική Arial, Helvetica, sans-serif;
χρώμα: rgba(0,0,0,1);
-o-text-overflow: κλιπ;
κείμενο-υπερχείλιση: κλιπ;
φόντο: #f81;
text-shadow: κανένας;
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
transform: scaleX(1) scaleY(1) scaleZ(1) ;
-webkit-transform-origin: 50% 50% 0;
μετασχηματισμός-προέλευση: 50% 50% 0;
}

Enjoy-css-3dtext (
δρομέας: δείκτης;
σύνορο: κανένα;
γραμματοσειρά: κανονική κανονική κανονική 72px/κανονική "Passero One", Helvetica, sans-serif;
χρώμα: rgba(255,255,255,1);
text-align: κέντρο;
-o-text-overflow: κλιπ;
κείμενο-υπερχείλιση: κλιπ;
text-shadow: 0 1px 0 rgb(204.204.204) , 0 2px 0 rgb(201.201.201) , 0 3px 0 rgb(187.187.187) , 0 4px 0 rgb(rgb)8501.8 0,170, 170) , 0 6px 1px rgba (0 ,0,0,0,0980392) , 0 0 5px rgba(0,0,0,0,0980392) , 0 1px 3px rgba(0,0,0,0,298039) , 0 3px 5px rgba(0,0,0,0,0,0,0,298039) ) , 0 5px 10px rgba(0,0,0,0,247059) , 0 10px 10px rgba(0,0,0,0,2) , 0 20px 20px rgba(0,0,0,0,0,14902) ;
-webkit-transition: όλα τα 300ms cubic-bezier(0,42, 0, 0,58, 1);
-moz-transition: όλα τα 300ms cubic-bezier(0,42, 0, 0,58, 1);
-o-transition: όλα τα 300ms cubic-bezier(0,42, 0, 0,58, 1);
μετάβαση: όλα τα 300ms cubic-bezier(0,42, 0, 0,58, 1);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
transform: scaleX(1) scaleY(1) scaleZ(1) ;
-webkit-transform-origin: 50% 50% 0;
μετασχηματισμός-προέλευση: 50% 50% 0;
}

Enjoy-css-3dtext:hover (
χρώμα: rgba(169,214,169,1);
text-shadow: 0 1px 0 rgba(255,255,255,1) , 0 2px 0 rgba(255,255,255,1) , 0 3px 0 rgba(255,255,255,1) , 0 4rga ,25,5,50 0 rgba (255.255.255 ,1) , 0 6px 1px rgba(0,0,0,0,0980392) , 0 0 5px rgba(0,0,0,0,0980392) , 0 1px 3px rgba(0,0,0,0,2980039px rgba) (0,0,0,0,2) , 0 -5px 10px rgba(0,0,0,0,247059) , 0 -7px 10px rgba(0,0,0,0,2) , 0 -15px 20px rgba(0,0, 0,0,14902) ;
-webkit-transition: όλα τα 200ms cubic-bezier(0,42, 0, 0,58, 1) 10ms;
-moz-transition: όλα τα 200ms cubic-bezier(0,42, 0, 0,58, 1) 10ms;
-o-transition: όλα τα 200ms cubic-bezier(0,42, 0, 0,58, 1) 10ms;
μετάβαση: όλα τα 200 ms cubic-bezier (0,42, 0, 0,58, 1) 10ms;
}

Κουμπί ανατροφοδότησης (
οθόνη: inline-block;
float: αριστερά;
θέση: σχετική;
δρομέας: δείκτης;
περιθώριο: 0 2% 0 0;
padding: 12px 22px;
υπερχείλιση: κρυφό;
σύνορο: κανένα;
γραμματοσειρά: κανονική κανονική έντονη γραφή 1,6em/κανονική "Syncopate", Helvetica, sans-serif;
χρώμα: #ecf0f1;
-o-text-overflow: κλιπ;
κείμενο-υπερχείλιση: κλιπ;


-webkit-
background-origin: padding-box;
φόντο-κλιπ: πλαίσιο-πλαίσιο;
Μέγεθος φόντου: auto auto;
-webkit-box-shadow: 0 10px 0 0 rgba(178,49,49,1) ;
box-shadow: 0 10px 0 0 rgba(178,49,49,1) ;
text-shadow: 0 0 0 rgb(196,80,78) , 1px 1px 0 rgb(196,80,78) , 2px 2px 0 rgb(196,80,78) , 3px 3px 0 rgb(196, ) , 4px 4px 0 rgb(196,80,78) , 5px 5px 0 rgb(196,80,78) , 6px 6px 0 rgb(196,80,78) , 7px 7px 0 rgb(196,80,78) 8 px 8px 0 rgb(196,80,78) , 9px 9px 0 rgb(196,80,78) , 10px 10px 0 rgb(196,80,78) , 11px 11px 0 rgb(196,80,78) 0 rgb(196,80,78) , 13px 13px 0 rgb(196,80,78) , 14px 14px 0 rgb(196,80,78) , 15px 15px 0 rgb(196,80,80px 0 rgb(196,80,80px 0 rgb) (196,80,78) , 17 px 17px 0 rgb(196,80,78) , 18px 18px 0 rgb(196,80,78) , 19px 19px 0 rgb(196,80,70,78px 2px06, rgb) ,80,78) , 21px 21px 0 rgb(196,80,78) , 22px 22px 0 rgb(196,80,78) , 23px 23px 0 rgb(196,80,78) , 80,78px1,60,24px rgb ) ,78) , 25px 25px 0 rgb(196,80,78) , 26px 26px 0 rgb(196,80,78) , 27px 27px 0 rgb(196,80,78) , 80px , 28px 78) ), 29px 29px 0 rgb(196,80,78) , 30px 30px 0 rgb(196,80,78) , 31px 31px 0 rgb(196,80,78) , 30px 30px , 32px ) , 33px 33px 0 rgb(196,80,78) , 34px 34px 0 rgb(196,80,78) , 35px 35px 0 rgb(196,80,78) , 36px 09,7,36px 09,36px 37px 37px 0 rgb(196,80,78) , 38px 38px 0 rgb(196,80,78) , 39px 39px 0 rgb(196,80,78) , 40px 40px rgb (190px ) 0 rgb (196,80,78) , 42px 42px 0 rgb(196,80,78) , 43px 43px 0 rgb(196,80,78) , 44px 44px 0 rgb(196,80,80px 0 rgb) (196 ,80,78) , 46 εικονοστοιχεία 46 εικονοστοιχεία 0 rgb(196,80,78) , 47 εικονοστοιχεία 47 εικονοστοιχεία 0 rgb(196,80,78) , 48 εικονοστοιχεία 48 εικονοστοιχεία 0 rgb(196,80,19,78 px 196,80,19,78 px 10x ) ,80) ,78,0,980392) , 2 εικονοστοιχεία 2 εικονοστοιχεία 0 rgba (196,80,78,0,960784) , 3 εικονοστοιχεία 0 rgba (196,80,78,0,941176) , 4px 190,60 px ) , 5px 5px 0 rgba(196,80,78,0,901961) , 6px 6px 0 rgba(196,80,78,0,882353) , 7px 7px 0 rgba(196,80,78,74p 6, 80,78 , 0,843137 , 9 px 0 rgba (196,80,78,0,819608) , 10 px 0 rgba (196,80,78,0,8) , 11 px 0,78 , rgba . 12 εικονοστοιχεία 12 px 0 rgba (196,80,78,0,760784) , 13px 13px 0 rgba(196,80,78,0,741176) , 14px 14px 0 rgba(196,80,718,59p 96,80 ,78,0,70196 1 , 16px 16px 0 rgba(196,80,78,0,682353) , 17px 0 rgba(196,80,78,0,658824) , 189,60px 216), 19 εικονοστοιχεία 19 px 0 rgba ( 196 ,80,78,0,619608) , 20 px 20 px 0 rgba (196,80,78,0,6) , 21 px 21 px 0 rgba (196,80,78,29,29, 29,50 p 80, 78,0,560784) , 23 εικονοστοιχεία 23 εικονοστοιχεία 0 rgba (196,80,78,0,541176) , 24 εικονοστοιχεία 24 εικονοστοιχεία 0 rgba (196,80,78,0,521569) , 25 x 809,89, 25 px ) , 26 px 26 px 0 rgba(196, 80 ,78,0,478431) , 27px 27px 0 rgba(196,80,78,0,458824) , 28px 28px 0 rgba(196,80,78,0,6x1,292 p ,78, 0. 419608) , 30 εικονοστοιχεία 30 εικονοστοιχεία 0 rgba (196,80,78,0,4) , 31 εικονοστοιχεία 31 εικονοστοιχεία 0 rgba (196,80,78,0,380392) , 32 εικονοστοιχεία 32 εικονοστοιχεία 0 ,80,3,7,7 3 εικονοστοιχεία 0 (196 ,80,78,0,341176) , 34 px 34 px 0 rgba (196,80,78,0,317647) , 35 px 0 rgba (196,80,78,0,298039) 298039 , 37,60 px 843 1) , 37px 37px 0 rgba(196,80,78,0,258824) , 38px 38px 0 rgba(196,80,78,0,239216) , 39px 39px 0 rgba(194,08). 0 rgba(19 6 , 80,78,0,2), 41px 41px 0 RGBA (196,80,78,0,180392), 42px 42px 0 RGBA (196,80,78,0,156863), 43px 43px 0 RGBA (196,80,78,0,137255), 44px 44px 0 rgba(196,80,78,0,117647) , 45px 45px 0 rgba(196,80,78,0,0980392) , 46px 46px 0 rgba(178,47,08p 0 rgba(196,80 , 78,0,0588235) , 48px 48px 0 rgba(196,80,78,0,0392157) , 50px 50px 0 rgba(196,80,78,0) ;
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) ;
transform: scaleX(1) scaleY(1) scaleZ(1) ;
-webkit-transform-origin: 50% 50% 0;
μετασχηματισμός-προέλευση: 50% 50% 0;
}

Κουμπί ανατροφοδότησης:hover (
text-align: κέντρο;
φόντο: -webkit-linear-gradient(-90deg, #ce6161 0, #ef6664 100%);
φόντο: -moz-linear-gradient(180deg, #ce6161 0, #ef6664 100%);
φόντο: linear-gradient(180deg, #ce6161 0, #ef6664 100%);
φόντο-θέση: 50% 50%;
background-origin: padding-box;
-webkit-background-clip: border-box;
φόντο-κλιπ: πλαίσιο-πλαίσιο;
-webkit-background-size: auto auto;
Μέγεθος φόντου: auto auto;
}

Κουμπί ανατροφοδότησης: ενεργό (
κορυφή: 5px;
φόντο: -webkit-linear-gradient(-90deg, #ff8583 0, #ff5350 100%);
φόντο: -moz-linear-gradient(180deg, #ff8583 0, #ff5350 100%);
φόντο: linear-gradient(180deg, #ff8583 0, #ff5350 100%);
φόντο-θέση: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
φόντο-κλιπ: πλαίσιο-πλαίσιο;
-webkit-background-size: auto auto;
Μέγεθος φόντου: auto auto;
-webkit-box-shadow: 0 5px 0 0 rgba(178,49,49,1) ;
box-shadow: 0 5px 0 0 rgba(178,49,49,1) ;

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

Η νέα προδιαγραφή CSS για σχήματα αλλάζει το status quo. Παρουσιάστηκε από την Adobe στα μέσα του 2012 και στοχεύει να δώσει στους σχεδιαστές ιστοσελίδων τη δυνατότητα να αλλάζουν τη ροή περιεχομένου μέσα και γύρω από σχετικά πολύπλοκα σχήματα—κάτι που δεν μπορούσαμε να επιτύχουμε πριν, ακόμη και χρησιμοποιώντας JavaScript.

Για παράδειγμα, παρατηρήστε πώς το κείμενο τυλίγεται γύρω από τις στρογγυλές εικόνες στο παρακάτω σχέδιο. Χωρίς Shapes, το κείμενο θα είχε ορθογώνιο σχήμα—αποβάλλοντας μια λεπτή τεχνική που οδηγεί το σχέδιο στο επόμενο επίπεδο.

Παρατηρήστε πώς το κείμενο παίρνει στρογγυλεμένο σχήμα γύρω από τις άκρες της πλάκας σε αυτό το παράδειγμα. Χρησιμοποιώντας σχήματα CSS, μπορούμε να δημιουργήσουμε ένα παρόμοιο σχέδιο για μια ιστοσελίδα.

Ας ρίξουμε μια πιο προσεκτική ματιά στο πώς λειτουργούν τα σχήματα και πώς μπορείτε να αρχίσετε να τα χρησιμοποιείτε.

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

Τα σχήματα CSS υποστηρίζονται προς το παρόν μόνο στο Webkit Nightly και στο Chrome Canary, αλλά η ενότητα επιπέδου 1 έχει φτάσει σε κατάσταση υποψήφιας πρότασης, επομένως οι ιδιότητες και η σύνταξη που ορίζονται στην προδιαγραφή είναι αρκετά σταθερές. Δεν θα περάσει πολύς καιρός πριν αρχίσουν να τα υποστηρίζουν άλλα προγράμματα περιήγησης. Αυτό το επίπεδο εστιάζει σε εκείνες τις ιδιότητες των Σχημάτων που αλλάζουν τη ροή του περιεχομένου γύρω από το σχήμα. Ειδικότερα, επικεντρώνεται στην ιδιότητα του σχήματος έξω και σε συναφή.

Σε συνδυασμό με άλλες πιο πρόσφατες δυνατότητες όπως Crop and Mask, CSS Filters και Collage and Merge, τα CSS Shapes θα μας επιτρέψουν να δημιουργήσουμε πιο περίπλοκα, εξελιγμένα σχέδια χωρίς να χρειάζεται να καταφύγουμε σε προγράμματα επεξεργασίας εικόνας όπως το Photoshop και το InDesign.

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

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

Για να χρησιμοποιήσετε τα σχήματα CSS στο Chrome Canary σήμερα, πρέπει να ενεργοποιήσετε το πλαίσιο ελέγχου που καθιστά διαθέσιμες τις πειραματικές λειτουργίες.

Δημιουργία σχημάτων CSS

Μπορείτε να εφαρμόσετε ένα σχήμα σε ένα στοιχείο χρησιμοποιώντας τις ιδιότητες Σχήματα. Μεταβιβάζετε τη συνάρτηση σχήματος ως τιμή στην ιδιότητα σχήματος. Η συνάρτηση σχήματος είναι το τμήμα του κώδικα όπου μεταβιβάζετε παραμέτρους που καθορίζουν το σχήμα που θέλετε να εφαρμόσετε σε ένα στοιχείο.

Τα σχήματα μπορούν να δημιουργηθούν χρησιμοποιώντας μία από τις ακόλουθες λειτουργίες:

Κάθε σχήμα ορίζεται από ένα σύνολο σημείων. Ορισμένες συναρτήσεις δέχονται σημεία ως παραμέτρους. άλλοι παίρνουν παραμέτρους μετατόπισης, αλλά όλοι καταλήγουν να σχεδιάζουν τα σχήματα στο στοιχείο ως ένα σύνολο σημείων. Θα περιηγηθούμε στις παραμέτρους για καθεμία από αυτές τις συναρτήσεις με παραδείγματα.

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

Τα παρακάτω σχήματα παίρνουν τις παραπάνω συναρτήσεις ως τιμές:

shape-outside: κάνει το περιεχόμενο να τυλίγεται γύρω από το σχήμα (εξωτερικά)

shape-inside: το περιεχόμενο παίρνει το σχήμα του σχήματος από μέσα

Μπορείτε να χρησιμοποιήσετε την ιδιότητα shape-outside σε συνδυασμό με το shape-margin για να προσθέσετε ένα εξωτερικό περιθώριο γύρω από ένα σχήμα, το οποίο θα απομακρύνει το περιεχόμενο από το σχήμα, αφήνοντας κενό μεταξύ τους. Ακριβώς όπως το shape-outside αποκτά μια ιδιότητα shape-margin, το shape-inside αποκτά μια ιδιότητα shape-padding, η οποία προσθέτει padding.

Χρησιμοποιώντας ιδιότητες σχήματος ή συνάρτησης, η δήλωση ενός στοιχείου σχήματος μπορεί να γίνει με μία μόνο γραμμή κώδικα CSS:

Στοιχείο (σχήμα-έξω: κύκλος(); /* το περιεχόμενο θα τυλιχτεί γύρω από τον κύκλο που δίνεται στο στοιχείο */)

Στοιχείο ( shape-outside: url(path/to/image-with-shape.png); )

Στοιχείο (σχήμα - έξω : url ( μονοπάτι / προς / εικόνα - με - σχήμα . png ) ;)

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

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

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

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

Στοιχείο ( float: αριστερά; ύψος: 10em; πλάτος: 15em; σχήμα-έξω: κύκλος(); )

Στοιχείο (float : αριστερά , ύψος : 10em , πλάτος : 15em , σχήμα - εξωτερικό : κύκλος ( ) ; )

Ωστόσο, η ρύθμιση ενός στοιχείου σε ένα συγκεκριμένο μέγεθος δεν επηρεάζει την απόκρισή του (θα μιλήσουμε για αυτό αργότερα). Δεδομένου ότι κάθε σχήμα ορίζεται ως ένα σύνολο σημείων που βρίσκονται χρησιμοποιώντας ένα ζεύγος συντεταγμένων, η αλλαγή των συντεταγμένων ενός σημείου θα επηρεάσει άμεσα το δημιουργημένο σχήμα. Για παράδειγμα, το παρακάτω σχήμα δείχνει ένα εξάγωνο που μπορεί να δημιουργηθεί χρησιμοποιώντας τη συνάρτηση πολύγωνο(). Το σχήμα αποτελείται από έξι σημεία. Η αλλαγή της οριζόντιας συντεταγμένης της πορτοκαλί κουκκίδας θα αλλάξει το τελικό σχήμα και θα επηρεάσει επίσης την τοποθέτηση του περιεχομένου μέσα/έξω από οποιοδήποτε στοιχείο στο οποίο εφαρμόζεται το σχήμα.

Εάν ένα στοιχείο είναι αιωρούμενο και ευθυγραμμισμένο δεξιά και έχει ένα σχήμα που εφαρμόζεται σε αυτό, το περιεχόμενο στα αριστερά του θα αλλάξει τη θέση του όταν αλλάξει μια από τις συντεταγμένες του πορτοκαλί σημείου μέσα στη συνάρτηση πολύγωνο().

Μπλοκ αναφοράς σχημάτων

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

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

σχήμα-έξω: κύκλος (250 εικονοστοιχεία σε 50% 50%) κουτί padding;

shape-out: κύκλος (250px στο 50% 50%) padding-box ;

Η λέξη-κλειδί padding-box σε αυτόν τον κανόνα ορίζει την εφαρμογή του σχήματος και τον περιορισμό του padding box (η περιοχή padding). Η συνάρτηση κύκλος() καθορίζει τον κύκλο, τις διαστάσεις του και την τοποθέτησή του σε σχέση με το στοιχείο.

Καθορισμός σχημάτων με χρήση συναρτήσεων

Θα ξεκινήσουμε τυλίγοντας ενημερωτικό κείμενο γύρω από μια στρογγυλή εικόνα του avatar του χρήστη, όπως ακριβώς για ένα προφίλ χρήστη ή κριτική.

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

Θα χρησιμοποιήσουμε τη συνάρτηση circle() για να εφαρμόσουμε ένα κυκλικό σχήμα στην εικόνα προφίλ χρησιμοποιώντας την ακόλουθη σήμανση:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci;

Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.

< img src = "//api.randomuser.me/0.3.2/portraits/men/7.jpg" alt = "εικόνα προφίλ" / > !}< p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci;< / p > < p >Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.< / p >

Μπορείτε να ρωτήσετε: "Γιατί δεν μπορούμε να χρησιμοποιήσουμε την ακτίνα περιγράμματος για να στρογγυλοποιήσουμε την εικόνα;" Απάντηση: Η ιδιότητα border-radius δεν επηρεάζει την τοποθέτηση περιεχομένου εντός ή εκτός του στοιχείου στο οποίο εφαρμόζεται. Επηρεάζει μόνο τα όρια ή το φόντο του στοιχείου. Το φόντο είναι περικομμένο σε στρογγυλεμένες γωνίες, αυτό είναι όλο. Το περιεχόμενο μέσα στο στοιχείο θα παραμείνει ορθογώνιο και το περιεχόμενο έξω από το στοιχείο θα συμπεριφέρεται σαν να παρέμενε ορθογώνιο.

Θα χρησιμοποιήσουμε την ιδιότητα border-radius για να κάνουμε μια εικόνα στρογγυλή - αυτό κάνουμε για να στρογγυλοποιήσουμε εικόνες ή άλλα στοιχεία σε μια σελίδα:

img (float : αριστερά , πλάτος : 150 px , ύψος : 150 px , περίγραμμα - ακτίνα : 50 % , περιθώριο - δεξιά : 15 px ; )

Χωρίς σχήματα CSS, το κείμενο βλέπει την εικόνα ως τετράγωνο και τυλίγεται γύρω από ένα τετράγωνο σχήμα και όχι ένα στρογγυλό.

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

img ( float: αριστερά; πλάτος: 150 px; ύψος: 150 px; περίγραμμα-ακτίνα: 50%; shape-outside: κύκλος(); shape-margin: 15px; )

img (float: αριστερά; πλάτος: 150 px; ύψος: 150 px; περίγραμμα - ακτίνα: 50%; σχήμα - εξωτερικό: κύκλος () ; σχήμα - περιθώριο: 15 px;)

Με αυτόν τον κωδικό, το κείμενο θα μπορεί να «δει» το κυκλικό σχήμα που εφαρμόζεται στην εικόνα και θα τυλίγεται γύρω του, όπως φαίνεται στο πρώτο στιγμιότυπο οθόνης. (Μπορείτε να δείτε το αποτέλεσμα.) Σε προγράμματα περιήγησης που δεν υποστηρίζουν σχήματα, θα μοιάζει με τη δεύτερη εικόνα.

Μπορείτε να χρησιμοποιήσετε τη συνάρτηση κύκλου() ως έχει ή να της μεταβιβάσετε παραμέτρους. Εδώ είναι η επίσημη σύνταξή του:

κύκλος() = κύκλος([ ]; ? [στο< position > ] ? )

Τα ερωτηματικά υποδεικνύουν ότι αυτές οι παράμετροι είναι προαιρετικές και μπορούν να παραλειφθούν. Αυτές οι παράμετροι που παραλείπετε θα λάβουν τις προεπιλεγμένες τιμές τους. Όταν χρησιμοποιείτε το circle() ως έχει, αντί να καθορίζετε απευθείας τη θέση, το προεπιλεγμένο κέντρο του κύκλου θα βρίσκεται στο κέντρο του στοιχείου στο οποίο το εφαρμόζετε.

Μπορείτε να ορίσετε την ακτίνα ενός κύκλου χρησιμοποιώντας οποιεσδήποτε μονάδες μήκους (px, em, pt, κ.λπ.) Μπορείτε επίσης να ορίσετε την ακτίνα χρησιμοποιώντας παραμέτρους χρησιμοποιώντας την πλησιέστερη ή την πιο απομακρυσμένη πλευρά, αλλά η πλησιέστερη πλευρά είναι η προεπιλογή Το πρόγραμμα περιήγησης θα πάρει την απόσταση από το κέντρο του στοιχείου στην πλησιέστερη πλευρά ως την ακτίνα, η πιο μακρινή πλευρά χρησιμοποιεί την απόσταση από το κέντρο προς την μακρινή πλευρά.

σχήμα-έξω: κύκλος (πιο απομακρυσμένη πλευρά στο 25% 25%). Το /* ορίζει έναν κύκλο του οποίου η ακτίνα είναι η μισή της μεγαλύτερης πλευράς, που βρίσκεται σε συντεταγμένες 25% 25% στο σύστημα συντεταγμένων του στοιχείου */ shape-inside: κύκλος(250px στα 500px 300px); /* ορίζει έναν κύκλο του οποίου το κέντρο είναι 500 px οριζόντια και 300 px κάθετα, με ακτίνα 250 px */

Η συνάρτηση ellipse() λειτουργεί ακριβώς όπως ο κύκλος(), με το ίδιο σύνολο τιμών, με τη διαφορά ότι αντί για μια παράμετρο ακτίνας, χρειάζονται δύο: μία ακτίνα στον άξονα x, μία στον άξονα y.

ellipse() = έλλειψη ([ (2)]; ? [στο< position > ] ? )

Η συνάρτηση inset() δεν σχετίζεται άμεσα με κύκλο ή έλλειψη, χρησιμοποιείται για τη δημιουργία ορθογώνιων σχημάτων μέσα σε ένα στοιχείο. Δεδομένου ότι τα στοιχεία είναι ήδη ορθογώνια, δεν το χρειαζόμαστε για να δημιουργήσουμε ορθογώνια. Αντίθετα, η inset() μπορεί να μας βοηθήσει να δημιουργήσουμε στρογγυλεμένα ορθογώνια έτσι ώστε το περιεχόμενο να τυλίγεται γύρω από τις στρογγυλεμένες γωνίες.

Η συνάρτηση inset() λαμβάνει μία έως τέσσερις παραμέτρους μετατόπισης, οι οποίες καθορίζουν μια μετατόπιση σε σχέση με τις άκρες του πλαισίου αναφοράς, η οποία καθορίζει τη θέση του ορθογωνίου μέσα στο στοιχείο. Οι στρογγυλεμένες γωνίες καθορίζονται με τον ίδιο ακριβώς τρόπο όπως η ακτίνα περιγράμματος, χρησιμοποιώντας μία από τις τέσσερις τιμές, σε συνδυασμό με τη στρογγυλή λέξη-κλειδί.

inset() = inset(offset(1,4) ?)

inset() = inset(offset(1, 4)[στρογγυλός< border - radius > ] ? )

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

Στοιχείο ( float: αριστερά, πλάτος: 250 px, ύψος: 150 px, σχήμα-εξωτερικό: ένθετο (0 px στρογγυλό 100 px) πλαίσιο περιγράμματος, )

Στοιχείο (float: αριστερά; πλάτος: 250 px; ύψος: 150 px; σχήμα - εξωτερικό: ένθετο (0px στρογγυλό 100 px) πλαίσιο-πλαίσιο;)

Η τελική συνάρτηση Shapes είναι το polygon(), η οποία ορίζει πιο σύνθετα διφορούμενα σχήματα χρησιμοποιώντας οποιοδήποτε αριθμό σημείων. Η συνάρτηση δέχεται ένα σύνολο ζευγών συντεταγμένων, όπου κάθε ζεύγος ορίζει τη θέση ενός σημείου.

Στο παρακάτω παράδειγμα, η αιωρούμενη εικόνα τοποθετείται στη δεξιά άκρη, καταλαμβάνοντας όλο το ύψος της οθόνης και χρησιμοποιώντας μονάδες θυρών προβολής. Θέλουμε το κείμενο στα αριστερά να τυλίγεται γύρω από την κλεψύδρα μέσα στην εικόνα και χρησιμοποιούμε τη συνάρτηση πολύγωνο() για να ορίσουμε ένα προσαρμοσμένο σχήμα για την εικόνα.

Ο κώδικας CSS για την παραπάνω εικόνα μοιάζει με αυτό:

img.right ( float: δεξιά; ύψος: 100vh; πλάτος: calc(100vh + 100vh/4); shape-outside: πολύγωνο(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60 %, 45% 40%);

img. δεξιά ( float : δεξιά , ύψος : 100vh , πλάτος : calc (100vh + 100vh / 4 ) , σχήμα - εξωτερικό : πολύγωνο (40% 0 , 100% 0 , 100% 100% , 40% 100% , 4 ) 45% 40%) ;

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

Για να αναπαραστήσουμε οπτικά το δημιουργημένο πολύγωνο, πρέπει να "περικόψουμε" τα μέρη της εικόνας έξω από το σχήμα. Η ιδιότητα clip-path από την προδιαγραφή CSS Masking Module θα μας βοηθήσει σε αυτό.

Η ιδιότητα clip-path δέχεται τις ίδιες συναρτήσεις και τιμές σχήματος με την ιδιότητα σχήματος. Αν περάσουμε το ίδιο πολυγωνικό σχήμα που χρησιμοποιήσαμε για την ιδιότητα shape-outside στην ιδιότητα clip-path, θα περικόψει το τμήμα της εικόνας έξω από το σχήμα.

img.right ( float: δεξιά; ύψος: 100vh; πλάτος: calc(100vh + 100vh/4); shape-outside: πολύγωνο(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60 %, 45% 40%). 45% 40% ;

img. δεξιά ( float : δεξιά , ύψος : 100vh , πλάτος : calc (100vh + 100vh / 4 ) , σχήμα - εξωτερικό : πολύγωνο (40% 0 , 100% 0 , 100% 100% , 40% 100% , 4 ) 45% 40%); /* περικοπή της εικόνας κατά μήκος του περιγράμματος του σχήματος */διαδρομή κλιπ: πολύγωνο (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); )

Το αποτέλεσμα μοιάζει με αυτό:

Η ιδιότητα clip-path υποστηρίζεται αυτήν τη στιγμή μαζί με προθέματα, π.χ. θα λειτουργεί στον Chrome με το πρόθεμα –webkit- να έχει προστεθεί. Μπορείτε να δείτε το demo.

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

Η συνάρτηση πολύγωνο() δέχεται επίσης μια προαιρετική λέξη-κλειδί padding, η οποία μπορεί να είναι είτε μη μηδενική είτε άρτια. Καθορίζει πώς θα συμπεριφέρονται οι τεμνόμενες περιοχές εντός του πολυγώνου. Ελέγξτε την ιδιότητα συμπλήρωσης κανόνα SVG για λεπτομέρειες.

Ορισμός σχήματος χρησιμοποιώντας εικόνα

Για να ορίσετε ένα σχήμα χρησιμοποιώντας μια εικόνα, η εικόνα πρέπει να έχει ένα κανάλι άλφα από το οποίο το πρόγραμμα περιήγησης θα εξαγάγει την εικόνα.

Ένα σχήμα ορίζεται από pixel των οποίων η τιμή άλφα είναι πάνω από ένα συγκεκριμένο όριο. Η προεπιλεγμένη τιμή κατωφλίου είναι o.o (πλήρως διαφανής) ή μπορείτε να την ορίσετε απευθείας χρησιμοποιώντας την ιδιότητα shape-image-threshold. Έτσι, οποιοδήποτε αδιαφανές εικονοστοιχείο μπορεί να χρησιμοποιηθεί ως μέρος του σχήματος που ορίζεται από την εικόνα.

Ένα μελλοντικό επίπεδο Σχημάτων CSS μπορεί να επιτρέψει την εναλλαγή για χρήση δεδομένων φωτεινότητας εικόνας αντί του καναλιού άλφα. Εάν συμβεί αυτό, το όριο σχήματος-εικόνας θα επεκταθεί για να συμπεριλάβει το όριο είτε για τη φωτεινότητα είτε για το κανάλι άλφα, ανάλογα με την κατάσταση του διακόπτη.

Χρησιμοποιούμε την ακόλουθη εικόνα για να ορίσουμε το σχήμα του στοιχείου και να αναδιπλώσουμε το κείμενο γύρω από αυτό:

) ; σχήμα - περιθώριο : 15 px ; σχήμα - εικόνα - κατώφλι : 0,5 ; Ιστορικό: #009966 url(path/to/background-image.jpg); mask-image: url(leaf.png); )

Φυσικά, εάν εφαρμόσετε φόντο σε ένα στοιχείο, το φόντο θα πρέπει να περικοπεί έξω από το συγκεκριμένο σχήμα. Η ιδιότητα mask-image (με τα κατάλληλα προθέματα) από τη μονάδα Masks μπορεί να βοηθήσει σε αυτό, καθώς η ιδιότητα clip-path δεν λαμβάνει το κανάλι άλφα ως τιμή. Το αποτέλεσμα μοιάζει με αυτό:

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

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

Σχήματα CSS σε Responsive Design

Μπορούν τα σχήματα CSS να είναι κατάλληλα για αποκριτικό σχεδιασμό; Η τρέχουσα προδιαγραφή για το shape-outside περιλαμβάνει αυτό το σημείο επειδή επιτρέπει σε ένα στοιχείο να μετρηθεί είτε σε ποσοστιαίες μονάδες είτε σε μονάδες μήκους και τα σημεία που καθορίζουν το σχήμα (παράμετροι συνάρτησης σχήματος) μπορούν επίσης να καθοριστούν σε ποσοστά. Αυτό σημαίνει ότι ένα στοιχείο με ένα δεδομένο σχήμα-εξωτερικό μπορεί να αποκρίνεται πλήρως, όπως και κάθε αιωρούμενο στοιχείο με καθορισμένο ποσοστό μεγέθους.

Η ιδιότητα shape-inside δεν αποκρίνεται ακόμη, αλλά αυτό συμβαίνει επειδή έχει μετακινηθεί σε μια ενότητα επιπέδου 2. Πολλοί από τους τρέχοντες περιορισμούς του θα εξαφανιστούν στο επόμενο επίπεδο.

Εργαλεία για τη δημιουργία Σχημάτων

Η δημιουργία σύνθετων σχημάτων με χρήση συναρτήσεων μπορεί να είναι μια χρονοβόρα εργασία, ειδικά εάν δημιουργείτε ένα σχήμα με πολλά σημεία και συντεταγμένες χρησιμοποιώντας το πολύγωνο(). Ευτυχώς, η ομάδα της πλατφόρμας web της Adobe εργάζεται για την παραγωγή διαδραστικών εργαλείων για να κάνει αυτή τη διαδικασία πολύ πιο εύκολη. Ο Bear Travis δημιούργησε μια συλλογή από Εργαλεία δημιουργίας σχήματος που μας επιτρέπει να δημιουργούμε οπτικά πολυγωνικά σχήματα. Το εργαλείο δημιουργεί μια συνάρτηση σχήματος. Αυτό μπορεί να είναι χρήσιμο, αλλά έχει τους περιορισμούς του εάν θέλετε να δημιουργήσετε ένα σχήμα με βάση μια συγκεκριμένη εικόνα, επειδή το εργαλείο δεν παρέχει τέτοια επιλογή.

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

Επεξεργαστείτε ένα πολυγωνικό σχήμα απευθείας στο πρόγραμμα περιήγησης χρησιμοποιώντας τη λειτουργία προεπισκόπησης στις αγκύλες. Η ηχογράφηση έγινε από τον Razvan Caliman.

Αυτό το εργαλείο θα γίνει απαραίτητο καθώς διευκολύνει τη δημιουργία, την επεξεργασία και τον εντοπισμό σφαλμάτων των σχημάτων. Razvan Caliman, ο οποίος εξηγεί πώς να ανοίξετε το πρόγραμμα επεξεργασίας σχημάτων στο Brackets και να αρχίσετε να το χρησιμοποιείτε.

Το μέλλον: Εξαιρέσεις CSS

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

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

Νέο Επίπεδο Φιγούρων

Η τρέχουσα προδιαγραφή CSS Shapes είναι μόνο το πρώτο βήμα. Σύντομα, τα νέα χαρακτηριστικά θα μας δώσουν περισσότερο έλεγχο στη δημιουργία και τη ροή του περιεχομένου, διευκολύνοντας μας να μετατρέψουμε τις μακέτες σε ζωντανά σχέδια με λίγες μόνο γραμμές κώδικα. Από σήμερα, οι επεξεργαστές προδιαγραφών επικεντρώνονται στην ολοκλήρωση του shape-out και ενδέχεται να δείτε την υποστήριξη CSS Shapes σε περισσότερα προγράμματα περιήγησης μέχρι το τέλος του 2014.

Μπορείτε να χρησιμοποιήσετε τα Shapes σήμερα ως μέρος μιας στρατηγικής προοδευτικής βελτίωσης, γνωρίζοντας ότι έχουν μια αποδεκτή αντικατάσταση σε προγράμματα περιήγησης που δεν υποστηρίζουν. Πρόσφατα άρχισα να τα χρησιμοποιώ στον ιστότοπό μου και η αντικατάσταση φαίνεται αρκετά αποδεκτή. Για πιο σύνθετα σχέδια, μπορείτε να χρησιμοποιήσετε ένα σενάριο για να ελέγξετε για υποστήριξη προγράμματος περιήγησης και να παρέχετε οποιαδήποτε αντικατάσταση εάν δεν υπάρχει υποστήριξη. Μπορείτε επίσης να χρησιμοποιήσετε δοκιμές Modernizr με αυτό το σενάριο για να ελέγξετε αν υποστηρίζεται η ιδιότητα shape-outside ή να ανεβάσετε τη δική σας έκδοση που περιλαμβάνει αυτήν τη δοκιμή.

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

Καθώς οι διατάξεις σελίδων γίνονται πιο περίπλοκες, οι προγραμματιστές χρειάζονται πρόσβαση σε περισσότερες μονάδες μέτρησης για να ζωντανέψουν τα σχέδια. Εκτός από τα συνηθισμένα ποσοστά, em και rem και pixel, υπάρχουν νεότερες μονάδες μέτρησης vw και vh και οι συγγενείς τους vmin και vmax, που παρέχουν πιο ισχυρούς τρόπους δημιουργίας σχεδίασης με απόκριση που μπορεί συχνά να βοηθήσει στην εξάλειψη της χρήσης του @media σημεία μετάβασης.

Προχωρώντας πέρα ​​από τη χρήση ποσοστών

Οι παραδοσιακές μονάδες CSS δημιουργούν τα ακόλουθα προβλήματα στο σχεδιασμό ιστοσελίδων:

• Η ποσοστιαία μονάδα μέτρησης δεν λειτουργεί πάντα όπως αναμένεται. Οι προγραμματιστές πρέπει να έχουν κατά νου το padding κατά τον καθορισμό μεγέθους στοιχείων. Δεν πρέπει να χρησιμοποιείτε τη μονάδα ποσοστού για να ορίσετε το ύψος του στοιχείου σώματος. Το μέγεθος γραμματοσειράς σημειογραφίας: 50% ορίζει το μέγεθος του κειμένου στο μισό του τυπικού του μεγέθους, αντί να δημιουργεί μια σχέση μεταξύ του μεγέθους του κειμένου και του μεγέθους του στοιχείου που το περιέχει.
• Είναι σχεδόν αδύνατο να δημιουργήσετε τέλεια σχήματα για διαφορετικά μεγέθη παραθύρων του προγράμματος περιήγησης. Είναι πολύ δύσκολο να διασφαλιστεί ότι ένα στοιχείο είναι απόλυτα τετράγωνο και ταυτόχρονα προσαρμοστικό.

Οι μονάδες μέτρησης vw και vh λύνουν σε μεγάλο βαθμό όλα αυτά τα προβλήματα.

Διατήρηση ιδανικών αναλογιών

Χρησιμοποιώντας μονάδες vw και vh είναι πολύ εύκολο να δημιουργήσετε τέλεια σχήματα σε ιστοσελίδες. Αυτές οι μονάδες μπορούν να χρησιμοποιηθούν για τον ορισμό τιμών μεγέθους για σχεδόν όλες τις ιδιότητες CSS. Επομένως, εάν πρέπει να δημιουργήσετε ένα στοιχείο που, σε οποιοδήποτε μέγεθος του παραθύρου του προγράμματος περιήγησης, καταλαμβάνει το 20% του πλάτους του και παραμένει τετράγωνο, πρέπει να ορίσετε τις ίδιες τιμές για τις ιδιότητες πλάτους και ύψους, χρησιμοποιώντας τη μονάδα vw:

Div.twentysquare ( φόντο : # 999 ; πλάτος: 20vw; ύψος: 20vw; )

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

Χρησιμοποιώντας την ίδια μέθοδο, μπορείτε εύκολα να δημιουργήσετε ένα ορθογώνιο του οποίου το ύψος είναι διπλάσιο του πλάτους του σε οποιοδήποτε μέγεθος παραθύρου προγράμματος περιήγησης:

Div.onetworect (πλάτος: 20vw; ύψος: 40vw;)

Το να δώσετε στο banner σας την ιδανική αναλογία διαστάσεων είναι πολύ εύκολο με τον ακόλουθο κώδικα CSS:

Div.goldenrect (πλάτος: 100vw; ύψος: 61,8vw; φόντο: κόκκινο;)

Για να κλιμακώσετε βέλτιστα το κείμενο σε ένα προσαρμοστικό μπλοκ, που καταλαμβάνει ολόκληρο τον χώρο που του παρέχεται, χωρισμένο σε γραμμές, απλά πρέπει να ορίσετε το μέγεθος της γραμματοσειράς σε μονάδες vw.

Μετάφραση – Αίθουσα εφημεριών