Przełącz przycisk CSS

Projektanci stron internetowych konfrontują się z różnorodnymi przeszkodami, ilekroć chodzi o opracowanie responsywnej strony internetowej. Wybór spośród przycisków przełączających, pola wyboru lub przyciski opcji wydaje się być jednym z takich problemów. I odwrotnie, korzystanie z przycisków przełączania jest znacznie preferowaną opcją. Przełącznik/przycisk to funkcja projektowania, która umożliwia zmianę między dwoma alternatywnymi trybami. Na przykład możesz skorzystać z przełącznika, aby zapewnić odpowiedź „tak lub nie” na zapytanie.

Za pomocą znaczników HTML nie ma prostej metody konstruowania przycisku przełączania. Aby skonstruować przycisk przełącznika, musimy zastosować styl CSS.

Tworzenie przycisku przełączania:

Chociaż nie ma natywnego znacznika HTML do konstruowania przycisku przełącznika, możesz użyć pola wyboru, a następnie zmienić go za pomocą CSS do konstruowania przycisku przełączania. W tym celu użyjemy elementu „Wejście” z pole wyboru atrybutu, aby zbudować „pole wyboru”.

Element zapewnia interaktywne elementy sterujące przeznaczone do formularzy internetowych, które otrzymują informacje od użytkowników. W zależności od rodzaju funkcji element może być w kilku rodzajach. Atrybut „id” w elemencie wejściowym odnosi się do konkretnego arkusza stylów. Przedmiot z określonym identyfikatorem może być również przez to modyfikowany.

Pole wyboru ma bardzo mały obszar klikalny, ale przełącznik wymaga większego obszaru. Tak więc, aby powiększyć obszar interaktywny, załącz go do znacznika etykiet. W „etykiecie” umieść znacznik „rozpiętości”, aby później zrobić suwak z CSS. W HTML tag jest stosowany w celu zwiększenia wydajności operatorów kursorów. Kontrola jest przełączana, gdy osoba uderza w dane w elemencie.

Poniżej znajduje się kod CSS, aby zmienić element etykiety wewnątrz tego skryptu, element etykiety przełącznika jest również podłączony do elementu pole wyboru HTML za pomocą jego identyfikatora. Naciskając etykietę pola wyboru, możesz ją zaznaczyć lub odrzucić.

Powyższy fragment utworzy proste pole wyboru.

Teraz użyjemy stylu CSS, aby nadać wygląd przycisku przełączania. Informacje o projektowaniu strony internetowej (CSS) są dostarczane za pomocą atrybutu. Tag opisuje sposób, w jaki komponenty HTML powinny wyświetlać się w przeglądarce. Weź element etykiety i dostosuj jego szerokość, wysokość, pozycję, kolor tła, promień graniczny i inne właściwości. Atrybut szerokości CSS określa szerokość domeny treści obiektu. Wysokość elementu jest określana przez atrybut wysokości. Atrybut promocki granicznej nadaje zewnętrznej krawędzi granicznej zaokrąglony wygląd. Możesz zbudować okrągłe zakątki z pojedynczym promieniem lub eliptycznymi narożnikami z dwoma promieniami.

Zastosowanie właściwości CSS „Wyświetlacz: inline-block”, wytyczne projektowe można dodać do określonych komponentów HTML. Pozycja elementu z atrybutem „Pozycja: względna;” jest w stosunku do jego domyślnej pozycji. Względnie pozycjonowany element zmieniłby się z domyślnego umieszczenia po zmodyfikowaniu właściwości lewej, górnej, dolnej lub prawej. Sprawimy, że wyglądamy jak obszarze klikalne, nadając mu kursor wskaźnika i zaciemniając pole wyboru „Kursor: wskaźnik”.

Możesz użyć właściwości kursor CSS, aby wskazać rodzaj kursora, który powinien zobaczyć użytkownik. Konieczna jest szerokość i wysokość obiektu etykiety, ponieważ definiują prawdziwy region przycisku przełączania. Użyj „Display: Brak”, aby standardowe pole wyboru były niewidoczne. Ta właściwość służy do ukrywania i ujawnienia bytów bez ich usuwania i wymiany. Chociaż nadal jest obecny w kodzie źródłowym, powiązany element nie przechwytuje luki.

Teraz mamy obszar klikalny wyświetlany na ekranie wyjściowym.

„Wewnętrzny przycisk” musi być teraz zbudowany po zakończeniu „zewnętrznej powłoki”. Teraz wykorzystamy element „rozpiętości” do utworzenia suwaka. Jest używany do układania obiektów poprzez łączenie ich razem. Jeśli zamierzasz podkreślić określone zdanie lub kawałek materiału, możesz go stylizować, owijając go w elementem Span, nadając mu etykietę klasową, a następnie wybierając to z wartościami funkcji. Przypisz go absolutne, na górze i lewe miejsca, aby umieścić go na temat komponentu etykiet. Podaj ten element „rozpiętości” z „szerokością” i „wysokością”, którą ustawiłeś dla elementu etykiet. Zrobimy teraz okrągły uchwyt suwaka, używając pseudoklasy. Ta klasa z atrybutem treści jest powszechnie wykonywana w celu dodania materiału stylistycznego do elementu.

Po wykonaniu wyżej wspomnianego kodu na przełączniku generowana jest okrągły suwak.

Z zarówno „pudełka zewnętrznego”, jak i „wewnętrznego przycisku”, wszystko to pozostanie, aby obsłużyć przełączanie. Możemy również dołączyć nasz atrybut „przejściowy”, który spowoduje, że okrąg porusza się od prawej do lewej po kliknięciu. „Transform: tłumacz (n);”, właściwość jest odpowiedzialna za rzeczywisty ruch: przesunie pseudoelement określoną ilość pikseli obok osi x. Użyliśmy świeżego identyfikatora dla pseudoelementu „:: przed” i atrybutu „przejścia” do bieżącego identyfikatora suwaka. Atrybut „:: przed” generuje pierwsze dziecko elementu docelowego jako pseudoelement. Aby pomieścić przejście od lewej do prawej, po prostu dołączyliśmy atrybut „Translatex” do powieści pseudoelement.

W ostatecznym wyjściu wymyśliliśmy działający przycisk przełączający.

Dodawanie tekstu na przycisku przełączania:

Jak na poprzedniej ilustracji, wykonaliśmy prosty przycisk przełączający bez tekstu. Aby dodać tekst do przycisku przełączania, po prostu wkładamy w niego dodatkowy komponent HTML i zaprojektujemy go z arkuszem stylów, aby utworzyć go jako etykietę.

Wykorzystamy pseudoklkę do konstruowania etykiet wyświetlanych lub wyłączania tekstu na podstawie statusu przycisku przełączania. Możemy użyć właściwości danych, aby uwzględnić dowolne atrybuty danych na elementach HTML. W trybie OFF naprawimy krycie do 0, a dla trybu ON; dostosujemy to do 1. Atrybut krycia w CSS jest wykorzystywany do wskazania widoczności obiektu. Krótko mówiąc, opisuje przejrzystość obrazu.

Powyższy kod włączy i wyłącza tekst przycisku przełączania.

Przycisk przełącz po kliknięciu:

Przycisk przełączania po kliknięciu:

Przycisk przełącz z granicą:

Możemy również dodać granice do przycisku przełączania, który właśnie utworzyliśmy powyżej z tekstem. W poniższym fragmencie kodu ustawiliśmy wszystkie niezbędne elementy do generowania i wyświetlania obramowania dla kontenera przycisku przełączania, a także dla wewnętrznej okrągłej piłki. Oprócz tego musimy również umieścić kolor granicy. W naszym przykładzie ustawiliśmy go na #2196f3, który jest heksadecimalnym kodem kolorów do zastosowania koloru cyjan-niebieskiego.

Możesz zobaczyć, jak granice pojawiają się w wynikającym z tego przycisku.

Wniosek:

Uczenie się CSS podczas dążenia do zostania programistą jest podstawowym wymogiem. W tym artykule omówiliśmy przełącznik CSS. Pierwsza część tego fragmentu zawiera wprowadzenie do przełączania przycisków w CSS, a następnie opracowaliśmy z praktycznym skryptem CSS przykładem tworzenia przełącznika przełącznika. Następnie wstawiliśmy tekst do przycisku przełączania. W ostatniej części pokazaliśmy, jak dodać granicę do przycisku przełączania. Do wdrożenia przykładów kodu wykorzystaliśmy wysublimowaną edytor tekstu.