Os melhores tutoriais “CSS Checkbox Hack” no Tuts+

Hoje vamos discutir a “técnica de hack de caixa de seleção CSS”, uma maneira legal de simular o JavaScript clique evento em elementos CSS. Ao longo do caminho, exploraremos os melhores tutoriais que usam essa técnica e estão disponíveis no Envato Tuts+.

7 Tutoriais CSS “Checkbox Hack”

Agora que sabemos do que se trata o “checkbox hack”, vamos vê-lo em ação através de diferentes exercícios que estão disponíveis no Tuts+!

1. Apresentação de slides CSS pura

Você sabia que pode criar uma apresentação de slides somente CSS?

A demonstração abaixo cobre as etapas necessárias para criar uma apresentação de slides CSS totalmente funcional. Ele vem com muitos dos recursos comuns de apresentação de slides, como navegação por setas, navegação por pontos, navegação por miniaturas e navegação por teclado.

Neste exercício, estamos construindo um alternador de temas. Há uma paleta de cores da qual podemos selecionar o esquema de cores desejado.

3. Componente do interruptor de alternância

Os interruptores de alternância são uma tendência de design popular que todos nós já vimos em algum momento. Seu uso principal é para ajustar as configurações (por exemplo, configurações do telefone). Eles têm dois estados (ligado/desligado), um dos quais é predefinido como botões de rádio.

Este exercício mostra como desenvolver um componente de switch para uma lista de tarefas.

4. Formulário Fora da Tela

O conteúdo fora da tela/oculto é outro padrão de design comum que é usado principalmente em layouts móveis devido ao espaço limitado. Menus de vários níveis, formulários ou outros tipos de informações são movidos para fora da parte visível do site por padrão e aparecem quando o usuário clica em um elemento associado (link, botão etc.).

Este tutorial ensina como criar um formulário de feedback fora da tela.

5. Componente Acordeão

Neste exercício, estamos criando um acordeão responsivo. Nos layouts móveis, ele tem um layout vertical, enquanto nas telas de desktop, um horizontal.

6. Componente de filtragem

Este é um dos meus exercícios favoritos. Aqui estamos abordando uma maneira de construir um componente de filtragem. Muitos casos de teste úteis no mundo real baseados nele!

Neste exercício, estamos aprendendo a criar caixas de seleção e botões de opção personalizados para o WordPress Formulário de contato 7 (CF7) plug-in. CSS para checkboxes pode ser confuso, e o desafio aqui é que não usamos nossa marcação (temos que nos adaptar à marcação produzida pelo plugin), mas fazemos isso com bastante elegância.

Conclusão

Espero que esta lista tenha lhe dado inspiração suficiente para entender o poder da “técnica de hack de caixa de seleção CSS”. Aproveite as demos, leia os tutoriais associados e, por último, mas não menos importante, certifique-se de seguir o Envato Tuts+ no CodePen para canetas mais criativas!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *