Jak tworzyć kształt serca za pomocą CSS
CSS3 zwiększa wykonalność tego, co możemy zbudować na stronach internetowych za pomocą HTML i CSS. Możesz znaleźć niesamowite przykłady, które wcześniej opisaliśmy. Ale nie przesadzajmy zbyt daleko, skomplikowany projekt będzie wymagał kodów, które mogą przyprawić o ból głowy.
Zamiast tego stworzymy coś prostego, aby ci pomóc najpierw zrozumieć kształty i pozycjonowanie za pomocą CSS, przed wyruszeniem w bardziej zaawansowane projekty. Ponieważ Walentynki są tuż za rogiem, stwórzmy kształt serca za pomocą HTML i CSS.
Podstawy
Zasadniczo możemy utworzyć nowy kształt, łącząc jeden lub więcej podstawowych kształtów, takich jak prostokąty i okręgi. Jeśli zbadamy kształt serca, możemy stwierdzić, że składa się on z dwa koła i prostokąt połączone. Elementy HTML są zasadniczo kwadratem lub prostokątem. Dzięki promieniowi granicznemu CSS3 możemy łatwo przekształcić prostokąt w okrąg.
Zacznij od dodania Następnie robimy to kwadratem, określając jednakowo szerokość i wysokość. Wybierz kolor tła, który lubisz. Następnie utworzymy kręgi. Zamiast dodawać nowe elementy, użyjemy pseudoelementów, Wraz z kwadratem otrzymamy taki wynik: Następnie tworzymy drugi okrąg z pseudoelementem Wyniki są następujące: Możemy połączyć te dwa style, grupując selektory pseudoelementów w następujący sposób: Ta-da! Mamy kształt serca, chociaż nie jest to jeszcze właściwy kierunek. Aby to wyprostować, użyjemy CSS3 Transformation. Transformację można nadać głównym elementom kształtu; tutaj oznacza to plac. Po transformacji pseudoelement automatycznie zmieni swoją pozycję po głównym elemencie. Tutaj obrócimy serce, aby było widoczne “na stojąco”. I tak właśnie wygląda nasze serce. Pełny kod kształtu serca jest następujący, w HTML: W naszym CSS będzie tak: Zauważ, że teraz ustawiliśmy kanał alfa Teraz, kiedy mamy doskonały kształt serca, możemy zamień tło na inny kolor (np. różowy lub czerwony) z łatwością. Jedynym minusem jest to, że my nie można dodać obramowania do kształtu dzięki stosom elementów. Dodanie linii granicznej sprawi, że serce będzie wyglądać dziwnie. Dzięki CSS3 tworzenie kształtu w kształcie serca jest teraz łatwe do wykonania. Właściwość border-radius pozwala nam tworzyć elementy lub nawet pseudoelement w krąg. Dzięki transformacji CSS3 możemy obróć lub przesuń współrzędne obiektu łatwo. Jesteś ograniczony tylko swoją kreatywnością i wyobraźnią!
.kształt serca pozycja: względna; szerokość: 200px; wysokość: 200px; kolor tła: rgba (250,184,66, 0,8);
:przed i :po. Najpierw ustawiliśmy :przed pseudoelementy jako nasz pierwszy krąg. Robimy to kwadratem o równej wielkości na szerokości i wysokości, tak jak w przypadku div. Następnie przekształcamy go w okrąg, nadając mu promień granicy 50% i umieszczamy go po lewej stronie kwadratu. .kształt serca: przed pozycja: absolutna; bottom: 0px; left: -100px; szerokość: 200px; wysokość: 200px; treść: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: rgba (250,184,66 , 0,8);
:po z tymi samymi stylami co pierwszy okrąg, który stworzyliśmy. Następnie ustawiamy go także na szczycie kwadratu. .kształt serca: po pozycja: absolutna; top: -100px; right: 0px; szerokość: 200px; wysokość: 200px; treść: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: rgba (250,184,66 , 0,8);
.heart-shape: before, .heart-shape: after position: absolute; szerokość: 200px; wysokość: 200px; treść: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: rgba (250,184,66 , 0.8); .heart-shape: before bottom: 0px; left: -100px; .heart-shape: after top: -100px; right: 0px;
.heart-shape -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotate (45deg); -o-transform: rotate (45deg); transform: rotate (45deg);
Wynik:
.kształt serca pozycja: względna; szerokość: 200px; wysokość: 200px; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotate (45deg); -o-transform: rotate (45deg); transform: rotate (45deg); kolor tła: rgba (250,184,66, 1); .heart-shape: before, .heart-shape: after position: absolute; szerokość: 200px; wysokość: 200px; treść: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: rgba (250,184,66 , 1); .heart-shape: before bottom: 0px; left: -100px; .heart-shape: after top: -100px; right: 0px;
rgba (250,184,66, 1) w tle do 1 usunąć przezroczystość. Oto, jak wygląda nasze Serce.
Wniosek
