Como criar uma interface do usuário do switch usando máscara CSS

No processamento de imagem, mascarando é uma técnica que permite que você esconder uma imagem com outro. Uma máscara é usada para fazer uma parte de uma imagem transparente. Você pode executar o mascaramento usando CSS com a ajuda de propriedades de mascaramento.

Na postagem de hoje, criaremos uma imagem mascarada usando duas imagens PNG e técnicas de mascaramento CSS e permitiremos que os usuários lidem com os dois estados da imagem (dia e noite) com a ajuda de um switch UI.

Por causa de alguns problemas de compatibilidade do navegador - nem todas as propriedades de mascaramento são suportadas em todos os navegadores (a partir de junho de 2016) - mostrarei duas técnicas para adicionar máscaras, um para navegadores baseados em Webkit e outro para o Firefox. Os dois primeiros passos deste tutorial de três etapas são os mesmos para todos os navegadores, mas haverá uma diferença na terceira etapa.

Etapa 1. Criar um Comutador Básico

Como um switch típico tem dois estados com apenas um ativado de cada vez, você pode usar um grupo de botões de rádio de dois para criar os componentes de trabalho do switch. Coloque cada botão de opção nas extremidades esquerda e direita do elemento pai.

Grupos de botões de rádio são criados, dando a cada botão de rádio o mesmo nome atributo. Em um grupo de botões de opção, apenas um botão de opção pode ser verificado de cada vez.

Começamos com os seguintes HTML e CSS:

HTML

CSS

No CSS abaixo, eu usei posicionamento absoluto para colocar os botões de rádio na tela exatamente onde eu quero.

#outerWrapper width: 450px; altura: 90 px; preenchimento: 10px; margem: 100px auto 0 auto; border-radius: 55px; box-shadow: 0 0 10px 6px #EAEBED; fundo: #fff;  #innerWrapper height: 100%; raio de fronteira: 45 px; estouro: oculto; posição: relativa;  .radio width: 90px; altura: 100%; posição: absoluta; margem: 0; opacidade: 0;  #rightRadio direita: 0;  .radio: não (: marcado) cursor: ponteiro;

Eu adicionei o opacidade: 0 regra para o .rádio classe, a fim de esconder os botões de opção. A última regra no bloco de códigos abaixo, cursor: ponteiro; mostra o cursor do ponteiro para o botão de opção desmarcado, para que os usuários saibam em qual botão clicar para alternar o estado do comutador.

Captura de tela da interface do usuário do switch com botões de opção no navegador Chrome

Passo 2. Adicionar Skins ao Switch

Nesta etapa, adicionaremos dois

tags para as duas skins abaixo dos botões de opção em nosso arquivo HTML e uma imagem de fundo para cada capa em nosso CSS.

Eu estou usando "Day" e "Night" como os dois estados da mudança, inspirados por um tiro de Dribbble por Minh Killy Le.

HTML

CSS

#daySkin background-image: url ('day.png');  #nightSkin background-image: url ('night.png');  .skin largura: 100%; altura: 100%; eventos-ponteiro: nenhum; posição: absoluta; margem: 0;

o eventos-ponteiro: nenhum; regra é adicionada às capas para que os eventos de clique no switch possam passar por eles, e alcance os botões de rádio.

Com a propriedade CSS pointer-events você pode definir as circunstâncias sob as quais um elemento gráfico pode ser alvo de eventos do mouse.

Como alternativa para o código acima, dois tags (com imagens de origem) dentro do

tags também podem funcionar. Eles serão o peles para os dois estados de troca.

Captura de tela do switch com skins no chrome

Etapa 3a Adicionar máscara (versão do Webkit)

Para o Chrome e outros navegadores baseados em Webkit, utilizarei o máscara-imagem Propriedade CSS, que - a partir da redação deste post - só funciona com o -webkit prefixo em navegadores Webkit. o máscara-imagem propriedade permite que você especifique a imagem ser usado Enquanto o mascarar.

Em geral, existem dois tipos de mascaramento: luminância e alfa.

Em mascaramento de luminância, a parte escura da imagem da máscara oculta a imagem que está mascarando: a parte mais escura está na imagem da máscara, quanto mais oculto essa porção é na imagem que está sendo mascarada.
Em mascaramento alfa, a parte transparente da imagem de máscara oculta a imagem que está mascarando: quanto mais transparente estiver uma parte da imagem da máscara, mais oculta essa parte da imagem que está sendo mascarada.

No Chrome (a partir da versão 51.0.2704.103, Win10), apenas o alpha parece funcionar atualmente.

Em CSS, alfa e luminância são os valores do tipo de máscara propriedade.

Aqui está o CSS que adiciona uma máscara para imagens de fundo em navegadores Webkit:

CSS

#nightSkin background-image: url ('night.png'); tipo de máscara: alfa; / * círculo transparente com a parte restante opaca * / -webkit-mask-image: gradiente radial (círculo a 45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px) ;  / * Quando dia de pele selecionado * / #leftRadio: verificado ~ # nightSkin mask-type: alpha; / * círculo opaco com a parte restante transparente * / -webkit-mask-image: gradiente radial (círculo a 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px) ;

Eu usei o -webkit-mask-image propriedade para criar a imagem inicial da máscara. Seu valor usa o gradiente radial () Função CSS usada para criar uma imagem a partir de uma forma predefinida, um gradiente radial e o centro do gradiente.

Para a pele da noite, criei um círculo transparente e tornei a parte restante do recipiente opaca. Para a pele do dia, eu fiz o oposto: criei um círculo opaco com o gradiente radial () função, e fez a parte restante transparente.

Embora ainda não seja suportado em navegadores Webkit, eu adicionei o tipo de máscara propriedade para o CSS para referência futura.

Captura de tela do interruptor com a pele da noite selecionada

Captura de tela do interruptor com a capa do dia selecionada

Como você pode ver acima, a borda do círculo não é muito lisa. Para esconda as arestas, adicione um

depois das peles na forma de um círculo (mesmo tamanho do círculo de máscara) com uma sombra de caixa. A sombra irá esconder as arestas da máscara circular.

HTML

CSS

#switchBtnOutline width: 90px; altura: 100%; raio de fronteira: 45 px; box-shadow: 0 0 2px 2px inserção cinza, 0 0 10px cinza; eventos-ponteiro: nenhum; posição: absoluta; margem: 0;  / * Coloque #switchBtnOutline na extremidade direita quando a skin do dia estiver selecionada * / #leftRadio: checked ~ # switchBtnOutline right: 0;

Captura de ecrã do interruptor com as arestas ásperas do círculo de máscara escondidas

Etapa 3b. Adicionar máscara (versão do Firefox)

o máscara-imagem Propriedade CSS é realmente um propriedade de longhand, e é parte da propriedade abreviada mascarar que permite especificar a imagem a ser usada como uma máscara também. Enquanto máscara-imagem ainda não é suportado no Firefox, mascarar é.

Apesar de mascarar propriedade deve aceitar uma imagem criada com o gradiente radial () Função CSS como um valor, assim como o máscara-imagem propriedade fez, não há suporte para isso no Firefox ainda.

Então, ao invés de um gradiente radial () imagem, vamos usar uma imagem SVG como a imagem da máscara com o tipo de máscara luminância.

A imagem SVG acima parece uma combinação de retângulo branco e um círculo preto. Adicione isto e outro com um retângulo preto e um círculo branco como máscaras para o HTML que usamos na versão do Webkit.

Imagem SVG (retângulo branco e círculo preto para a máscara)

HTML

Substitua (ou combine com) o código CSS para #nightSkin nós usamos na versão do Webkit com o seguinte código. E pronto.

Agora temos duas imagens de máscara diferentes (gradiente CSS e SVG), dois tipos diferentes de máscara (Alpha e Luminance) e suporte para Webkit e Firefox.

CSS

#nightSkin background-image: url ('night.png'); tipo de máscara: luminância; mask: url (#leftSwitchMask);  #leftRadio: verificado ~ # nightSkin tipo de máscara: luminância; mask: url (#rightSwitchMask);

Confira a demonstração

Demonstração
Fonte de download

Como criar um ponto de restauração do sistema no Windows 7

Como criar um ponto de restauração do sistema manualmente no XP

Como criar uma senha forte (e lembrar disso)