Interruptor CSS

O interruptor no CSS é usado para permitir que o usuário escolha entre dois estados: ON e OFF. Também mudamos a mudança para a esquerda ou direita. Esses comutadores podem ser encontrados em nossos sites, aplicativos móveis e software. Os interruptores são utilizados quando precisamos desligar algo ou quando escolhemos sim ou não. Podemos criar interruptores de diferentes formas e tamanhos em CSS.

Exemplo 1:

Desenvolvemos alguns códigos HTML para fazer os interruptores e estilizá -los com CSS. O código do Visual Studio é usado para demonstrar os exemplos apresentados. Como resultado, abrimos o novo arquivo e selecionamos o "html" como o idioma.Isso resulta na produção de um arquivo html. Então, começamos a escrever um código no arquivo que foi criado. Quando terminamos, salvamos o código com o “.Extensão de arquivo html ”. Depois disso, neste código, projetamos um interruptor que indica desativado ou em. Ele nos permite ligar ou desativar o interruptor. Agora, vamos ao código CSS para dar esse interruptor com alguns designs.

Usamos a propriedade "Alinhamento de texto" para o "corpo". Então, todo o corpo do HTML é renderizado no "centro" da página. Também mudamos a “cor” do nosso caminho para “verde”. Então, estilizamos a “alternância”. Fazemos isso usando a “alternância” e as propriedades de estilo. A "posição" desta alternância é definida como "parente". Utilizamos o "bloqueio embutido" como o "tela". Sua "largura" e "altura" foram igualmente definidas como "100px" e "52px", respectivamente. A “cor de fundo” dessa alternância é “vermelha” e seu “radio de fronteira” é “30px”, indicando que suas bordas são curvas.

Em seguida, adicionamos uma "borda" em torno deste botão de alternância com uma largura de "2px" e uma cor "cinza". Depois de modelar isso, usamos o seletor "depois" com esta "alternância". Como todos sabemos, ao usar o seletor "depois" no CSS, devemos ter um "conteúdo."Para definirmos a" posição "deste conteúdo como" absoluto "e a" largura "e" altura "para" 50px "cada. Desta vez, a “cor de fundo” está definida como “cinza”.

Para cada um deles, também definimos o "topo" e o "esquerdo" como "1px". Estamos usando a "transição" neste "0.Alternância de 5s ”. O estilo para a "alternância: depois" está agora completo. Usamos duas propriedades dentro dos aparelhos encaracolados de "P" para estilizar o parágrafo um pouco mais. Acabamos de atualizar a “família da fonte” do parágrafo para “Arial” e usar a propriedade “Fonte-peso” para “ousado”. Quando essa alternância é verificada, alteramos a propriedade "Esquerda" para "49px" para que ela se mova para "49px". Também mudamos sua cor para "verde". Além disso, defina "nenhum" para a "exibição" da "Caixa de seleção".

O interruptor está "desligado" e a cor é "vermelha" nesta captura de tela. Agora, temos uma captura de tela seguinte:

O interruptor está "ligado" e é colorido "verde" na segunda captura de tela. A palavra "desligada" é impressa no lado esquerdo do interruptor. Se queremos desligá -lo, apenas clicamos nele e mudamos para o lado direito.

Exemplo #2:

Neste exemplo, criamos dois interruptores. Estes são diferentes do interruptor anterior que criamos no primeiro exemplo. Fazemos dois interruptores aqui.

Nós estilizamos o corpo utilizando as diferentes propriedades. Definimos o "dimensionamento da caixa" para "caixa de fronteira" e utilizamos a propriedade "font-família" e usamos a fonte "arial" para isso. Também definimos o tamanho como "100%". Usamos o "*" com "depois" e "antes" seletores para que ele selecione todos os elementos e aplique a propriedade fornecida a todos. Nós "herdamos" o "tamanho de caixa". E o "preenchimento" e "margem" estão definidos como "0". Agora, estilizamos o "meio" usando a propriedade "Display" como "flex". Usamos o "centro" para "alinhamento" e "conteúdo justificado". Definimos o tamanho da fonte "1em" para o "topo de preenchimento".

Então, estilizamos o "roqueiro", que é o primeiro interruptor. A "tela" para isso é "Block Inline" e sua "posição" é "relativa". O "tamanho da fonte" para o primeiro interruptor é "2em" e é "ousado" em seu "peso da fonte". O "alinhamento de texto" é se "central" e o "transformação de texto" é definido como "maiúsculas". A “cor” está definida como “cinza”. A "largura" e "altura" são definidas como "7em" e "4em", respectivamente. O "fluxo excessivo" está "escondido". O "fundo da fronteira" é "0.5em ”. E twe definiu a cor "branca" para o tipo "sólido".

Então, vem o "Rocker-small", que é o segundo botão. Para isso, definimos o “tamanho da fonte” para “0.75em "e sua" margem "em" 1em ". Utilizamos o seletor "antes" com o nosso primeiro interruptor "roqueiro". E coloque o "conteúdo" porque é obrigatório ao usar o seletor "antes" e "depois". Então, definimos sua "posição" como "absoluta". Seu "top" está definido como "0.5em ”. A “esquerda”, “direita” e “inferior” estão todos definidos como “0”. Seu "fundo" é "cinza", a "borda" é "branca", a largura é "0.5em "e" sólido "no tipo. A “parte inferior-borda” é “0”.

Agora, usamos a “entrada de roqueiro”. Para isso, definimos a "opacidade", "largura" e "altura" para "0". Agora, estilizamos o "Switch-Left" e "Switch-Right" no mesmo aparelho encaracolado. Definimos seu "cursor" para "ponteiro" e a "posição" é "absoluta". A “exibição” que definimos é “flex”. O "Align-Item" e o "Conteúdo da Justify" são ambos definidos para o "centro". A "altura" que definimos aqui é "2.5em ”e a“ largura ”é“ 3em ”. Devemos definir a "transição" para "0.2s ”.

Agora, usamos separadamente a “esquerda-esquerda” e “switch-right” na qual usamos a propriedade “transform”. Para isso, primeiro definimos a "altura", "largura", "esquerda" e "inferior" para "2.4em ”,“ 2.75em ”,“ 0.85em ”e“ 0.4em ”, respectivamente. Adicionamos a “cor de fundo” a “#DDD”. E usamos a propriedade "Transform" e "giramos" para "15deg" e "distorcendo" para "15deg". Agora, temos a “troca-direita” e projetamos isso definindo a propriedade “direita” para “0.5em "e defina seu" fundo "como" 0 ". O "fundo" está definido como "vermelho". No fundo "vermelho", definimos a propriedade "branca" para a fonte "cor". Usamos o seletor "antes" com "Switch-left" e "Switch-Right". Então, para este seletor "antes", usamos o "conteúdo". Sua "posição" está definida como "absoluta".

Então também definimos sua "largura", "altura" e "inferior". A “cor de fundo” aqui é “#ccc” e usamos a propriedade “Transform” e “Skewy (-65deg)”. Agora, definimos a propriedade "esquerda" para "-0.4em ”dentro usando o seletor“ antes ”com o“ Switch-Left ”. Também usamos o seletor "antes" com o "Switch-Right" separadamente e definimos a propriedade "direita" para "-0.375em ”. Sua "cor de fundo" é "transparente" e usamos o "transformado" para "cito" para "65deg".

Agora, criamos um efeito quando é "verificado". A “cor de fundo” é “transparente” e sua largura quando é verificada é definida como “3.0833EM ”. Em seguida, usamos "verificado" com "switch-left" e "switch-right". Nós projetamos ou estilo adicionando a “cor de fundo” e a fonte “cor” e configurando-as como “#DDD” e “#888”. Aqui, os seletores "inferior" e "correto" estão definidos como "0.4em ”e“ 0.8em ”. Em seguida, usamos as perrotias "transformadas" e "girando" e "distorcem" para "-15deg" para ambos. Usamos o Propert "Checked" com "Switch-Left" e "Switch-Right". E use o seletor "antes" dentro dos aparelhos encaracolados e defina sua "cor de fundo" como "#cccc". Em seguida, definimos a “cor” da fonte como “branca” quando é verificada e “cinza” antes de ser verificada.

A saída renderiza dois interruptores: o primeiro interruptor está ligado/desligado e o segundo interruptor tem sim/não. Na primeira imagem, você pode ver que o primeiro interruptor está "ligado" e sua cor é "verde" enquanto o segundo interruptor está no "não" e sua cor é "vermelha".

Na segunda imagem, verificamos o primeiro interruptor para "OFF" e a segunda mudança para "sim". Então, o primeiro interruptor parece "desligado" e "vermelho". O segundo interruptor é "sim" desta vez, e parece "verde".

Conclusão

Criamos este tutorial para mostrar o que é uma mudança e como projetar e estilizar uma mudança no CSS. Como afirmado anteriormente, o interruptor é usado para escolher entre ligado e desligado, bem como sim/não. Vimos os dois exemplos diferentes até agora e passamos por todas as propriedades. Depois de experimentar os códigos deste tutorial, você poderá entender como os switches funcionam no CSS e como construir interruptores para seu site ou projetos com facilidade.