Πώς να δημιουργήσετε σχήμα καρδιάς με CSS
Το CSS3 αναδεικνύει τη σκοπιμότητα του τι μπορούμε να χτίσουμε σε ιστότοπους χρησιμοποιώντας μόνο HTML και CSS. Μπορείτε να βρείτε εκπληκτικά παραδείγματα που έχουμε ήδη παρουσιάσει. Αλλά ας μην πάμε πολύ πολύ μπροστά από εμάς, ένα περίπλοκο σχέδιο θα χρειαστεί κώδικες που μπορεί να σας δώσουν πονοκέφαλο.
Αντ 'αυτού, θα δημιουργήσουμε κάτι απλό για να σας βοηθήσουμε κατανοήστε καλύτερα τα σχήματα και την τοποθέτηση με το CSS, πριν προχωρήσετε σε πιο προηγμένα σχέδια. Δεδομένου ότι η ημέρα του Αγίου Βαλεντίνου είναι ακριβώς στη γωνία, ας δημιουργήσουμε μια μορφή καρδιάς χρησιμοποιώντας HTML και CSS.
Τα βασικά
Βασικά, μπορούμε να δημιουργήσουμε ένα νέο σχήμα συνδέοντας ένα ή περισσότερα βασικά σχήματα, όπως ορθογώνια και κύκλους. Αν εξετάσουμε μια μορφή καρδιάς μπορούμε να βρούμε ότι αποτελείται από δύο κύκλους και ένα ορθογώνιο σε συνδυασμό. Τα στοιχεία HTML είναι ουσιαστικά τετράγωνο ή ορθογώνιο. Χάρη στην ακτίνα ακρών CSS3 μπορούμε να μετατρέψουμε εύκολα ένα ορθογώνιο σε έναν κύκλο.
Ξεκινήστε προσθέτοντας ένα Στη συνέχεια, το κάνουμε ένα τετράγωνο καθορίζοντας το πλάτος και το ύψος εξίσου. Επιλέξτε ένα χρώμα φόντου που σας αρέσει. Στη συνέχεια, θα κάνουμε τους κύκλους. Αντί να προσθέσουμε νέα στοιχεία, θα χρησιμοποιήσουμε τα ψευδο-στοιχεία, Μαζί με την πλατεία θα έχουμε ένα αποτέλεσμα σαν αυτό: Μετά από αυτό, δημιουργούμε τον δεύτερο κύκλο με το ψευδο-στοιχείο Τα αποτελέσματα είναι τα εξής: Μπορούμε να συνδυάσουμε αυτά τα δύο ίδια στυλ με την ομαδοποίηση των επιλογέων ψευδο-στοιχείων ως εξής: Ta-da! Έχουμε σχήμα καρδιάς, αν και δεν είναι προς τη σωστή κατεύθυνση ακόμα. Για να το ισιώσει, θα χρησιμοποιήσουμε το CSS3 Transformation. Μετασχηματισμός μπορεί να δοθεί στα κύρια στοιχεία του σχήματος. εδώ, αυτό σημαίνει το τετράγωνο. Όταν μετασχηματιστεί, το ψευδο-στοιχείο θα αλλάξει αυτόματα τη θέση του ακολουθώντας το κύριο στοιχείο. Εδώ θα περιστρέψουμε την καρδιά έτσι φαίνεται “ορθοστασία”. Και αυτό είναι που η καρδιά μας μοιάζει τώρα. Ο πλήρης κώδικας της μορφής καρδιάς παραπάνω έχει ως εξής, σε HTML: Και στο CSS, θα είναι έτσι: Παρατηρήστε ότι ορίσαμε τώρα το άλφα κανάλι του Τώρα που έχουμε μια τέλεια καρδιά, μπορούμε αντικαταστήστε το φόντο σε άλλο χρώμα (π.χ. ροζ ή κόκκινο) με ευκολία. Το μόνο μειονέκτημα εδώ είναι ότι εμείς Δεν ήταν δυνατή η προσθήκη ενός περιγράμματος στο σχήμα που οφείλεται στα στοιβάζονται στοιχεία. Η προσθήκη μιας γραμμής περιγράμματος θα κάνει την καρδιά να φαίνεται παράξενη. Με το CSS3 δημιουργώντας ένα σχήμα όπως το σχήμα καρδιάς είναι τώρα εύκολο να το κάνετε. Η ιδιότητα ακτίνας ακριβείας μας επιτρέπει να να κάνετε στοιχεία ή ακόμα και ένα ψευδο-στοιχείο σε έναν κύκλο. Με το μετασχηματισμό CSS3, μπορούμε περιστρέψτε ή μετακινήστε τις συντεταγμένες του αντικειμένου Με ευκολία. Είστε περιορισμένοι μόνο από τη δημιουργικότητα και τη φαντασία σας!
.σχήμα καρδιάς θέση: σχετική? πλάτος: 200px; ύψος: 200px; Χρώμα φόντου: rgba (250.184,66, 0.8);
:πριν και :μετά. Ρυθμίσαμε πρώτα το :πριν ψευδο-στοιχεία ως τον πρώτο μας κύκλο. Κάνουμε το τετράγωνο με ίσο μέγεθος στο πλάτος και στο ύψος όπως ακριβώς κάναμε και με το div. Τότε το μετατρέπουμε σε κύκλο δίνοντάς του ακτίνα ακρών 50% και το βάζουμε στην αριστερή πλευρά της πλατείας. .σχήμα καρδιάς: πριν από θέση: απόλυτο; κάτω: 0px; αριστερά: -100px; πλάτος: 200px; ύψος: 200px; Περιεχόμενο: "· -webkit-ακτίνα-ακτίνα: 50% · -γραμμή-ακτίνα-ακτίνα: 50% · ακτίνα-ακτίνα: 50% , 0,8) ·
:μετά με τα ίδια στυλ με τον πρώτο κύκλο που δημιουργήσαμε. Στη συνέχεια, το τοποθετούμε και στην κορυφή της πλατείας. .σχήμα καρδιάς: μετά από θέση: απόλυτη; κορυφή: -100px; δεξιά: 0px; πλάτος: 200px; ύψος: 200px; Περιεχόμενο: "· -webkit-ακτίνα-ακτίνα: 50% · -γραμμή-ακτίνα-ακτίνα: 50% · ακτίνα-ακτίνα: 50% , 0,8) ·
.σχήμα καρδιάς: πριν,. σχήμα καρδιάς: μετά από θέση: απόλυτο; πλάτος: 200px; ύψος: 200px; Περιεχόμενο: "· -webkit-ακτίνα-ακτίνα: 50% · -γραμμή-ακτίνα-ακτίνα: 50% · ακτίνα-ακτίνα: 50% , 0.8) ·. Σχήμα καρδιάς: πριν από την κάτω: 0px · αριστερά: -100px · σχήμα σχήματος καρδιάς: μετά από το top: -100px · right: 0px;
.σχήμα καρδιάς -webkit-μετασχηματισμός: περιστροφή (45deg); -moz-transform: περιστρέψτε (45deg); -ms-μετασχηματισμός: περιστροφή (45deg); -o-μετασχηματισμός: περιστροφή (45deg); μετασχηματισμός: περιστροφή (45deg);
Το αποτέλεσμα:
.σχήμα καρδιάς θέση: σχετική? πλάτος: 200px; ύψος: 200px; -webkit-transform: περιστρέψτε (45deg); -moz-transform: περιστρέψτε (45deg); -ms-μετασχηματισμός: περιστροφή (45deg); -o-μετασχηματισμός: περιστροφή (45deg); μετασχηματισμός: περιστροφή (45deg); Χρώμα υποβάθρου: rgba (250, 184, 66, 1). . σχήμα καρδιάς: πριν,. σχήμα καρδιάς: μετά από θέση: απόλυτο; πλάτος: 200px; ύψος: 200px; Περιεχόμενο: "· -webkit-ακτίνα-ακτίνα: 50% · -γραμμή-ακτίνα-ακτίνα: 50% · ακτίνα-ακτίνα: 50% , 1);. Σχήμα καρδιάς: πριν από το κάτω: 0px · αριστερά: -100px;. Σχήμα σχήματος καρδιάς: μετά από το top: -100px · right: 0px;
rgba (250, 184, 66, 1) στο φόντο στο 1 για να αφαιρέσετε τη διαφάνεια. Τώρα αυτό δείχνει η Καρδιά μας.
συμπέρασμα
