CSS Half Circle

Arkusz stylów kaskadowych odgrywa ważną rolę w projektowaniu i dodawaniu efektów do zawartości HTML. Wraz z tagami HTML, CSS jest niezbędnym znacznikiem do utworzenia dowolnej strony internetowej albo statycznej lub dynamicznej. Ponadto wszystkie niestandardowe witryny, które widzimy w Internecie, są opracowywane za pomocą HTML i jego budulcowego bloku CSS. Ten styl może być różnych typów albo wbudowany, wewnętrzny lub zewnętrzny. Ale w tym artykule będziemy śledzić styl wewnętrzny. Półokrąganie zostanie utworzone i zostanie zaprojektowane przez śledzenie kawałka HTML i CSS. Użytkownik musi być świadomy podstaw tagów otwierających i zamykania HTML, a także deklaracji CSS według klas i identyfikatorów. Dzięki temu łatwiej jest zrozumieć stworzenie koła.

Implementacja Half Circle

Stosowana jest prosta sekwencja implementacji tagów HTML i. Otwórz edytor tekstu i użyj następującego kodu, aby narysować pół koła na stronie internetowej. Do implementacji pół okręgu w HTML i CSS użyliśmy wewnętrznych CSS zadeklarowanych wewnątrz znacznika za pomocą znaczników otwierających i zamykania. Zacznij od znaczników HTML, otwórz znacznik głowy. Następnie w pierwszym kroku podaliśmy tytuł na stronie. Ta nazwa tytułu pojawi się na górze zakładki w przeglądarce w momencie wykonania. Po zamknięciu tagu tytułowego zadeklarujemy tag stylu. Najpierw zadeklarujemy margines i wyściółkę kształtu.

Różnica B/W margines i wyściółka

Margines to przestrzeń wokół obiektu, który chcesz stworzyć. Ta właściwość jest używana do regulacji obiektu na stronie, do poruszania się po lewej lub prawej stronie itp. Jest to przezroczysty obszar, który nie ma koloru tła. Margines otacza kształt ze wszystkich 4 stron.

Wyściółka to część obecna między utworzonym obiektem a zawartością wewnątrz obiektu. Ta zawartość może być kształtem, tekstem itp. Właściwość wyściółka określa, jak obiekt zagląda do pojemnika. Ten pojemnik zawiera również kolor tła. Zwiększenie lub zmniejszenie wielkości wyściółki wpływa na wielkość zawartości w niej.

Tak więc, tutaj wewnątrz kodu stylu, zadeklarowaliśmy zarówno margines, jak i wyściółkę jako 0. Oznacza to, że ręcznie użyjemy kodów dostosowania, deklarując wysokość i szerokość właściwości kształtu. Konieczne jest zadeklarowanie tych właściwości jako 0 zamiast wyeliminowania ich z kodu, ponieważ jest on uważany za automatycznie, jeśli nie jest zadeklarowany jako zero.

*
Margines: 0;
Wyściółka: 0;

Trzecia właściwość związana z kształtem jest biały kolor tła. To jest domyślny kolor. Jeśli o tym nie wspomnisz, zawsze będzie biały. Następnie użyjemy stylizacji div. Div jest pojemnikiem, który zawiera niektóre elementy w nim. Nie ma żadnego wpływu na układ ani treść, dopóki nie dostarczymy mu żadnego stylu. Tutaj zastosowaliśmy duży efekt dla kontenera Div. Wszystkie efekty kształtu są stosowane do kontenera Div do regulacji. Pozycja pojemnika jest traktowana jako absolutna.

Dwie podstawowe właściwości kształtu to lokalizacja i kierunek kształtu. Aby dostosować kształt, użyjemy górnych i lewych atrybutów. „Top” decyduje o odległości kształtu od górnej granicy strony internetowej. Lewa część pokazuje odległość kształtu od lewej granicy strony. Obie nieruchomości są przyjmowane w procent.

TOP: 20%;
Po lewej: 10%;

Funkcja transformacji to potężna właściwość używana do obracania, wypaczenia, zgięcia lub tłumaczenia obiektu. Jedną z najczęściej używanych funkcji jest funkcja „Tłumacz”, która służy do przeniesienia obiektu z jednego miejsca do drugiego. Tworząc pół koła, użyliśmy dwóch wartości przemieszczenia z lewej i górnej części procentowej. Wzięliśmy obie wartości ze znakiem ujemnym dla korekty.

Transform: Tłumacz (-50%, -50%)

Teraz użyjemy pewnych efektów na kształcie, tworząc nieruchomość, taką jak jej wysokość i szerokość. Obie właściwości są pobierane w pikselach.

Wysokość: 100px;
Szerokość: 200px;

Jaka jest właściwość granicy i dlaczego jest używana?

Promień graniczny jest kręgosłupem tworzenia koła lub półkola w HTML. Ta właściwość odgrywa istotną rolę w obrocie krawędzi granicy obiektu. Gra z granicą i odwrócenie ich w kierunku centrum sprawia, że ​​idealne koło. Parametry mogą mieć 4 wartości. Właściwość zagradzanego przez granicę służy do podania wartości promienia granicy. 4 wartości to właściwości długości, procentowe, początkowe i dziedziczne.

Te 4 wartości są określone w określonej kolejności w celu utworzenia promienia granicy:

• Lewy górny
• W prawym górnym rogu
• Prawy dolny
• Na dole po lewej

Promień graniczny może zawierać wszystkie te wartości lub dostosowany, usuwając dowolną wartość. Jeśli wartość dolnej lewej zostanie usunięta, wartością będzie wartość górnej prawej kształtu.

RADIUS BERDER: 150px 150px 0 0;

Aby zrobić pół koła, wzięliśmy 2 wartości jako 150px, a pozostałe dwa są zadeklarowane jako zero. Jeśli weźmiemy wszystkie wartości, takie jak 150 lub dowolna inna liczba bliżej. Po tym wyrównaniu promienia przypisaliśmy kolor do czerwonego kształtu. Teraz zamkniemy sekcję stylu i sekcję głów.

W części ciała kodu deklarujemy Div, tylko otwór i znaczniki zamykające Div są tutaj używane. Cała stylizacja jest zadeklarowana w części stylu CSS.

Teraz zapiszymy kod w edytorze tekstu. Upewnij się, że utworzony plik musi zostać zapisany z nazwą o rozszerzeniu HTML. Na przykład próbka.HTML to plik, nad którym pracujemy.

Aby wykonać plik tekstowy, otwórz plik, wybierając opcję „Open-with” i wybierając dowolną wybraną przeglądarkę. W ten sposób ikona pliku zostanie zastąpiona ikoną przeglądarki.

Zobaczysz, że powstaje pół koła z czerwonym kolorem i wykonane są te same wyrównania, które zadeklarowaliśmy.

Wniosek

Wdrożenie pół koła w CSS jest przeprowadzane przez krótkie wprowadzenie do HTML i CSS. Prosty edytor tekstu i przeglądarka są odpowiedzialne za wykonanie tagów HTML i CSS w pliku. W tym celu wykorzystaliśmy wewnętrzne CSS. Ponadto zdefiniowana jest również ważna właściwość CSS, która jest promacją graniczną. Postępując zgodnie z tą funkcją, powstaje okrąg, musimy tylko dostosować niektóre jego wartości. Wszystkie efekty są zadeklarowane w sekcji CSS, sekcja ciała zawiera tylko pojemnik Div.