CSS Hexagon
Sześciokąt to matematyczny, geometryczny kształt zwany wielokątem o 6 krawędzi. Aby zaprojektować sześciokąt, użyjemy HTML i CSS."
CSS
CSS to głównie trzy typy. Każdy typ zależy od lokalizacji jego deklaracji. Jeden jest wbudowany, który jest zapisany w tagach HTML. Drugi jest wewnętrzny, napisany w części głowicy tagów HTML. Podczas gdy trzeci to zewnętrzny CSS, który jest zadeklarowany poza kodem HTML i plikiem HTML w innym pliku z rozszerzeniem CSS. Pójdziemy z wewnętrznym CSS w projektowaniu sześciokątnym. Tagi otwierające i zamykające dla wewnętrznych CSS to:
Narzędzia
Podstawowymi narzędziami używanymi do tworzenia prostej statycznej strony są edytor tekstu i dowolna przeglądarka. Możesz użyć dowolnego edytora tekstu, ale w tym artykule używamy prostej domyślnej edytora tekstu i chromu jako przeglądarki. W edytorze piszemy kod HTML lub tagi i wykonujemy ten plik w przeglądarce.
Warunek wstępny
Nie ma pewnych warunków dotyczących jakiegokolwiek narzędzia lub oprogramowania. Ale użytkownik musi mieć pewną wiedzę na temat tagów HTML, ponieważ podstawy są wymagane przy budowie sześciokąta i zaprojektowaniu go. Tagi HTML zawierają dwie główne części, głowę i ciało.
Podczas gdy niektóre inne tagi zostaną wyjaśnione kodem w momencie wdrożenia.
Wdrożenie Hexagon
W przypadku implementacji otwórz notatnik i uruchom kod HTML. W części głowy użyliśmy nazwy tytułu jako sześciokąta; To pojawi się na karcie. Kierując się w stronę wewnętrznych CSS. Wewnątrz stylu stworzyliśmy wyjaśnienie klasy sześciokątnej.
W CSS, głównie w stylizacji wewnętrznej i zewnętrznej, aby kod był krótki i łatwo zrozumiały, korzystamy z identyfikatorów i klas. Tutaj pojawia się pytanie, jak te zajęcia i identyfikatory działają. Wszystkie funkcje i efekty, które chcemy zastosować do dowolnego obiektu, który tworzymy, są wymienione w klasie lub ciała identyfikatora. Dostęp do tych identyfikatorów i klas za pomocą ich nazwisk wewnątrz znaczników, w których chcemy zastosować dowolny efekt. Więc tutaj stworzyliśmy identyfikator sześciokąta w stylu. Ten identyfikator zostanie zastosowany w momencie tworzenia sześciokątu. Wewnątrz ciała sześciokątnego zadeklarowaliśmy miejsce, w którym można narysować kształt; W tym celu użyliśmy dwóch funkcji, jedna to góra, a druga to po lewej stronie. „Góra” decyduje o odległości od góry do kształtu. A lewa decyduje o odległości od lewej granicy do kształtu. Można go zapisać w procentach lub w dowolnej innej jednostce.
TOP: 20;
Po lewej: 10%;
Krańcowa granica jest ustawiona jako auto. W ten sposób położenie kształtu jest ustawione. Teraz zastosujemy kolor do kształtu. To jest kolor tła. Wybraliśmy magenta.
Kolor tła: magenta;
Heksagon wielokąta powstaje w wyniku zawierania zakrętów lub zakrzywionych punktów. Aby zakrzywili punkty, dodamy funkcję promienia granicy, aby była gładko zakrzywiona zamiast szorstkich krawędzi.
RADIUS BRAVES: 10px;
Tutaj wartość jest zapisana w jednostce Pixels. Teraz zdecydujemy się nadać kształt, wysokość i szerokość. Te dwie funkcje są blokiem składowym do tworzenia i stylizacji kształtu. Każdy kształt lub dowolny tekst jest zawsze zalecany do napisania lub narysowania w określonym polu. To pudełko pomaga w bardzo łatwo rozstrzygnięcie obiektu. Więc zadeklarowaliśmy tutaj pudełko graniczne.
CSS | Pseudo Elements/Class Propert
Ta właściwość służy do obracania linii kształtu w 60 stopniach, tworząc idealny sześciokąt. Pseudoelement CSS jest rodzajem stylizacji, która służy do stylizowania określonej części elementu. Na przykład stylizuje pierwszą linię kształtu. Cała te zawartość jest stosowana przed i po zawartości kształtu. Możemy zastosować dowolną funkcję w ten sposób.
Treść i granica to niektóre wbudowane funkcje pseudo właściwości. Wszystkie inne cechy wysokości, szerokości i koloru są takie same, jak opisaliśmy w prostym opisie sześciokąta.
Teraz wszystkie powyższe funkcje są zadeklarowane jako dwie części, które należy zastosować w celu utworzenia sześciokąta.
.Hexagon: przed
Transform: Rotate (60Deg);
Podobna funkcja dotyczy pozostałej części sześciokąta; Wszystkie kształty są tworzone przy użyciu określonego kątu dla wielokąta 60 stopni są tworzone między każdą dwiema alternatywnymi liniami.
Styl i znaczniki głowy są teraz zamknięte. Upewnij się, że wszystkie otworzyłeś wszystkie tagi muszą być zamknięte, aby je zastosować w kodzie; W przeciwnym razie niektóre efekty mogą zostać utracone. Teraz prowadzą do części ciała.
Tutaj użyliśmy prostego nagłówka tekstu, aby napisać wiersz. Ten styl jest przykładem stylizacji wbudowanej.
< body style = "text-align : left"<
Dostaliśmy wyrównanie do tekstu do wyświetlenia po lewej stronie strony internetowej i biorąc pod uwagę kolor czcionki jako czarny.
Po tekście zadeklarujemy kod kształtu sześciokąta. Div jest pojemnikiem jak stół w HTML. Który służy do zawierania obiektów w prostej pozycji. Wewnątrz ciała DIV klasa CSS i nazwa identyfikatora są zadeklarowane jako zastosowanie wszystkich cech na pojemniku DIV w kształcie. Zamknij wszystkie otwarte tagi, ja.mi., Div, ciało i html.
Zapisujemy plik notatnika za pomocą „.rozszerzenie html ”, aby utworzyć stronę internetową. Ten plik jest zapisywany jako „próbka.html.”Tak więc, używając tego rozszerzenia, ikona pliku zostanie ustawiona jako ikona domyślnej przeglądarki.
Po uruchomieniu pliku w przeglądarce wyświetli on stronę internetową o nagłówku i kształcie sześciokątny po lewej stronie strony.
Wniosek
Schemat sześciokąta powstaje przy użyciu HTML osadzonego z kaskadowym arkuszem stylów. Na początku mówimy o podstawach HTML. A rodzaje CSS są również wyjaśnione w celu wyeliminowania jakiejkolwiek dwuznaczności w odniesieniu do typów CSS. Wymieniono dwa podstawowe narzędzia, które są niezbędne do tworzenia i wykonywania tagów HTML i CSS. Przykład sześciokątny jest zaimplementowany i wyjaśniony linią po linii z kodem i jego użyciem. Unikalny sposób tworzenia kształtu jest wyjaśniany przez pseudoelementową właściwość CSS. Ostatecznie pokazaliśmy statyczną stronę internetową, która jest utworzona w wyniku zdefiniowanego kodu.