Switch CSS TOLGGL
Exemplo 1
Escreveremos algum código HTML para criar e modelar comutadores de alternância no CSS. Para demonstrar os exemplos dados, estamos usando o código do Visual Studio. Como resultado, abriremos o novo arquivo e escolheremos o idioma "HTML", que se segue ao criar um arquivo HTML. Então começamos a escrever o código no arquivo criado aqui. Temos que salvar este código quando terminar, e o ““.A extensão do arquivo html ”é adicionada automaticamente ao nome do arquivo. Também criamos algum texto que queremos apresentar em negrito, por isso estamos usando “”E escreva a linha dentro desses“”Abrindo e fechando tags. Depois disso, criaremos um interruptor de alternância aqui neste código que representa fora ou em. Isso nos permitirá desligar ou no interruptor. Agora, estamos nos movendo em direção ao código CSS para dar algum estilo a este interruptor de alternância.
Primeiro, alinhamos todos os elementos do corpo usando "alinhamento de texto" ao "centro" e aplicamos essa propriedade ao "corpo."Então, mude a" cor "do cabeçalho para" verde "para torná -lo atraente. Agora, temos que estilizar a “alternância.”Usamos“ alternamos ”e depois usamos as propriedades de estilo aqui. A “exibição” que estamos usando aqui é “Block Inline.”Também definimos sua“ largura ”e“ altura ”para“ 100px ”e“ 52px ”, respectivamente. A “cor de fundo” desta alternância é "vermelha" e seu "radiato de fronteira" é "30px", então suas bordas são curvas.
Então também definimos uma "borda" em torno deste botão de alternância da largura "2px" no tipo "sólido" e também na cor "cinza". Depois de estilizar isso, usaremos o seletor "depois" com essa "alternância" e, como sabemos que devemos ter "conteúdo" quando usamos esse seletor "depois" no CSS. Após esse conteúdo, estamos definindo sua "posição" aqui como "absoluto" e a "largura" e "altura" é "50px" cada. Desta vez, a “cor de fundo” é “cinza."Nós também definimos seu" topo "e" esquerda "para" 1px "para cada um deles. Estamos aplicando a "transição" nesta alternância de "0.5s ”. O estilo para a “alternância: depois” é concluído aqui, e nós iremos estilizar um pouco o parágrafo usando duas propriedades dentro dos aparelhos encaracolados de “P.”
Nós apenas mudamos sua “família de fontes” para “argelino” e depois “ousado” este parágrafo usando a propriedade “Fonte-peso”. Estamos definindo a “esquerda” como “45px”, para que ele mova “45px” quando essa alternância é verificada. E sua cor muda para “verde."Além disso, defina esta" exibição "da" caixa de seleção "como" nenhum.”
Também mostramos esse interruptor na saída abaixo e, na primeira saída, você pode ver que temos duas possibilidades aqui neste interruptor. Nesta captura de tela, o interruptor está "desligado" e sua cor é "vermelho.”
Na segunda captura de tela, esse interruptor está "ligado" e é "verde" em cores. O off está escrito no lado direito do interruptor; portanto, se quisermos desligar esse interruptor, clique neste interruptor para movê -lo para o lado direito para desligar esse interruptor.
Exemplo 2
No segundo exemplo, criaremos dois interruptores diferentes. Criamos dois switches, um switch é chamado "Subscribe" e o outro interruptor é chamado "Newsletter" aqui. Então vamos estilizar esses comutadores no arquivo CSS.
Estamos estilizando o "corpo" do HTML, então definimos sua "margem" e "preenchimento" para "0", e a cor de fundo para isso é "preta", como aqui, "#151515" é o código para o preto."Estamos definindo o div, chamado" Center ", para o centro" absoluto "" posição ", para que todos os elementos dentro desta div renderizem no" centro "da página. O "topo" e o "fundo" do centro de posição absoluto são definidos como "50px" para cada um, e depois usamos a propriedade "Transform Translate" para "(-50px, -50px)".
Quando usamos tudo isso, todos os elementos são definidos no centro vertical e horizontalmente. Em seguida, estilizamos a “entrada [type = caixa de seleção]” usando isso. A "margem" que usamos para isso é "10px" e "relativa" em "posição."A" largura "desta caixa de seleção é" 120px "e também" 40px "em sua altura. Também definimos sua "comparação de webkit" para "nenhum."Estamos usando seu" fundo "na forma" linear-gradiente ". O "esboço" para isso também é "nenhum" e, para fazer suas bordas curvas, estamos usando a propriedade "Radio de fronteira" aqui e defina-a como "20px". Aplicamos a “Shadow Box” e definimos seu valor como “0 0 4px”. Em seguida, estilizamos a caixa de seleção quando é verificada e definimos seu "fundo" como "Gradiente linear", que é "0DEG" e "Orange."Usamos a mesma" shadow de caixa "aqui que usamos acima, e isso é para o" enésimo do tipo (1) ". O "enésimo do tipo" é um seletor para selecionar um ou mais elementos. Também estilizamos a caixa de seleção verificada para o "Nth of-Type (2)" e definimos seu "fundo" para o "gradiente linear" de "0DEG" e "azul.”Também estilizamos a caixa de seleção quando não é verificada. Então, aqui, usamos o seletor "antes", e o seletor "depois" ou "antes" deve ter um "conteúdo."A" posição "que definimos aqui é" absoluta "e seu" top "é" 0 "e também o mesmo para a" esquerda."É" 80px "em sua" largura "e" 40px "em" altura."Nós novamente usamos o" gradiente linear "para o" fundo."Desta vez, usamos a cor" preta "e" cinza ". Também usamos a propriedade "Transform" e "escalamos" para x, y como "0.98, 0.96 ”. Definimos sua propriedade de “transição” para “0.5s ”. A "esquerda" está definida como "40px" antes de ser verificada. Também usamos o seletor "depois" e também estilizamos isso.
Dentro desta seleção "depois", primeiro definimos o "conteúdo" e sua "posição" como "absoluto."Seus conjuntos" top "como" 50% - 2px "e" esquerda "é" 70px ". Também definimos sua "largura" e "altura" para "4px" cada. Definimos seu "fundo" e usamos "gradiente linear" aqui novamente. Os "50%" do "Radio da fronteira" são aplicados aqui, então suas bordas aparecem em forma de curva. A propriedade "transição" também está definida como "0.5s ”, que é usado para controlar uma velocidade de animação de 0.5seg. No seletor "After", o "esquerda" está definido como "110px".
Queremos estilizar os títulos usando "H1" e usar algumas propriedades aqui. A "margem" é "0" e o "preenchimento" também é "0". Usamos o "Sans-serif" "font-família" para esses títulos. Além disso, alinhe esses títulos ao “centro."A fonte" cor "desses títulos é" branca "e" 16px "em tamanho. Também definimos o “preenchimento” superior e inferior para “15px” e “0px” para a esquerda e direita. Usamos o "Case superior" para que o texto dos títulos seja convertido para a mancha, e o "espaçamento de cartas" é "4px" para todos os títulos.
Fornecemos duas capturas de tela aqui como a saída. A primeira saída é exibida antes da verificação da chave de alternância e a segunda captura de tela é quando verificamos os dois interruptores de alternância.
Conclusão
Apresentamos este guia para explicar o interruptor de alternância no CSS e como projetar e estilizar o interruptor de alternância no CSS. Discutimos que usamos o interruptor de alternância quando queremos escolher entre ligado/desligado e sim/não. Exploramos dois códigos aqui e explicamos todas as propriedades que usamos em nossos códigos em detalhes. Depois de experimentar os códigos deste guia, você aprenderá facilmente como esses interruptores funcionam no CSS e como você projetará interruptores em seu site ou projetos.