Você levou um tempo para aprender e dominar CSS. E provavelmente é justo dizer que você é um codificador proficiente agora. Ótimo!
Mas entender como codificar bem com CSS não necessariamente o torna fluente nas últimas tendências de web design. A menos que você tenha tempo livre ilimitado para ler todos os principais blogs de web design e WordPress toda semana, não há como esperar razoavelmente ficar por dentro da porta giratória contínua de tendências ou saber como executá-las usando CSS.
Trechos de CSS são úteis nesse sentido. Esses pequenos pedaços de código ajudarão você a adicionar CSS (e alguns recursos novos realmente legais) ao seu site WordPress de forma rápida e eficiente.
No entanto, caçar esses snippets não é uma tarefa fácil se você não sabe o que está procurando ou em quais recursos online pode confiar. Neste artigo, vou fornecer os 7 melhores recursos para rastrear snippets CSS e aplicar novos recursos divertidos ao seu site WordPress.
Os benefícios de usar snippets CSS no WordPress
Se você não usa snippets CSS para desenvolver no WordPress, veja por que você deve começar:
Economia de tempo
Você provavelmente já encontrou maneiras de melhorar seu fluxo de trabalho CSS e escrever código CSS mais limpo para economizar tempo ao criar sites WordPress. Os snippets CSS só aumentarão essa eficiência.
Consistência
Consistência é um benefício inerente ao uso de folhas de estilo em cascata. Elas permitem que você crie um estilo para certos elementos em seu site e, então, aplique a regra universalmente com o mínimo de esforço.
Capacidades expandidas
Pode haver momentos em que você decida usar um snippet CSS para limpar o código em estilos de rotina. No entanto, a verdadeira beleza de usar um snippet de código é que ele lhe dá a capacidade de adicionar algo realmente inovador ao seu site que você talvez não fosse capaz de fazer sozinho.
Melhorias de SEO
Ao usar snippets bem codificados que contribuem para a experiência do usuário, você reduzirá as taxas de rejeição, aumentará o tempo gasto no seu site e melhorará o SEO do seu site. O CSS é geralmente compatível com várias plataformas e navegadores, o que levará a uma classificação geral de pesquisa melhorada.
Redução de largura de banda
Não há absolutamente nada de errado em usar plugins para obter funcionalidade de ponta ou adicionar recursos de design mais modernos ao seu site. No entanto, com cada novo plugin que você adiciona ao WordPress, mais energia será drenada do seu servidor. Se você puder encontrar snippets CSS que o ajudem a atingir os mesmos objetivos, então por que não usá-los?
Inspiração
Há também o fator inspiração. Explorar recursos de snippets CSS não é ótimo apenas para aprender a usar CSS ou encurtar o tempo que leva para codificar. Também é uma boa oportunidade para encontrar inspiração para seus designs que você talvez não conhecesse.
Mas, novamente, quem tem tempo para ficar horas a fio procurando na web por novas maneiras legais de desenvolvedores usarem CSS? (Você não.) Continue lendo para descobrir onde encontrar instantaneamente esses snippets de CSS que mudam o jogo.
7 melhores sites para encontrar snippets CSS
Embora snippets CSS possam não ajudar você a criar sites inteiros do zero (afinal, o objetivo é aplicar estilos diferentes ao seu HTML, não estabelecer uma base), eles economizarão seu tempo e energia.
CódigoMyUI
CodeMyUI é um repositório muito legal para snippets CSS. Você pode ver no topo da página que o foco principal deles são os elementos da UI sobre os quais costumamos gastar tanto tempo falando (por exemplo, menus, botões, imagens). No entanto, faça uma busca por “snippets CSS” e você verá que este site cobre uma gama muito maior de animações e recursos do que apenas esses elementos gerais.
Aqui está um bom exemplo de algo que você encontraria neste site: um fidget spinner loader . Considerando o quão populares esses brinquedos são agora, isso seria uma adição legal ao seu site se você precisa de uma animação de transição de página .
Há também esse snippet de trilha de navegação que oferece mais versatilidade na forma como você estiliza sua navegação de trilha de navegação .
E aqui está um snippet de hover que vale a pena dar uma olhada. Você verá que ele aplica um efeito hover “inteligente” às suas caixas ou blocos, por meio do qual eles viram com base na direção em que o cursor passa sobre eles.
Teclado de código
Se você está procurando um site onde você pode encontrar snippets CSS de outros desenvolvedores web e também contribuir com os seus, o Codepad é um bom lugar para conferir. É fácil de pesquisar (certifique-se de usar os Playgrounds para que você possa ter uma prévia da animação/estilo real) e também inclui snippets para JavaScript, PHP, HTML e mais.
O snippet de transição de login/cadastro é particularmente interessante. À primeira vista, parece ser apenas um snippet para um formulário de contato curto. No entanto, observe o que acontece com os campos do formulário quando você clica entre as guias “Entrar”, “Inscrever-se” e “Redefinir”.
A seta para baixo saltitante é outra animação sutil, mas que certamente aliviará a confusão dos seus usuários enquanto eles navegam pelo seu site.
Caneta de código
Temos certeza de que todos vocês já estão familiarizados com o CodePen . Afinal, esse “ambiente de desenvolvimento social” é um ótimo lugar para encontrar novos códigos e trabalhar para aperfeiçoar o seu próprio. Se você está procurando por uma codificação CSS realmente de ponta, este site não vai te decepcionar.
Tome, por exemplo, este slider de depoimentos . O conteúdo gerado pelo usuário é uma grande parte do web design agora, então este snippet seria útil de se ter.
Este trecho de animação de rótulo é muito sutil, mas definitivamente deixaria um impacto duradouro em qualquer um que goste do elemento surpresa .
E para sites que têm dados ou informações importantes para compartilhar, sempre há um trecho como este que faz vários elementos da interface do usuário se destacarem .
CSS Deck
CSS Deck
CSSDeck é uma boa escolha se você não quiser classificar snippets para outras linguagens de codificação. Embora você possa encontrar snippets aqui que combinam CSS e HTML ou CSS e JavaScript, o foco principal é sempre fornecer aos usuários um código focado em CSS.
Aqui está um exemplo do que um desses snippets faz para dar mais vida ao seu menu de navegação . Há uma série de opções para brincar também, então você não fica relegado a usar uma animação padrão.
Para sites que apresentam eventos ou permitem que os clientes marquem compromissos pelo site, este snippet de ícone de calendário seria divertido de usar. O ícone balança apenas o suficiente para chamar a atenção para ele.
Desejando que a animação do seu menu de hambúrguer tivesse um pouco mais de drama? Este trecho de menu circular pode ser a inspiração que você precisa.
Fluxo CSS
O CSSFlow é conhecido por mais do que apenas ser um provedor de snippets CSS. Este site também tem kits de UI disponíveis para ajudar você a simplificar e otimizar o design dos elementos básicos de UI no seu site WordPress. É um ótimo golpe duplo se você estiver procurando por assistência em design e animação.
Ao criar aplicativos e sites de produtividade, você pode querer criar listas de tarefas para que os usuários aproveitem. Este snippet é simples na execução, mas ainda adiciona uma pitada extra de classe.
Aqui está outro tipo de snippet do tipo ligado/desligado que dará aos seus visitantes outro motivo para interagir ativamente com seu site por meio de um simples botão de alternância .
Truques CSS
O site CSS-Tricks é incrivelmente bem organizado, o que o torna um bom site para marcar quando você estiver se sentindo aventureiro e quiser explorar outros tipos de snippets disponíveis. Você encontrará tudo aqui, desde transições de animação até a configuração de regras sobre como lidar com o comprimento do texto.
Para qualquer um que tenha um mascote que gostaria de animar enquanto os visitantes passam o mouse sobre ele no site, esse trecho de cabeça balançando pode ser legal para testar.
Se você estiver com dificuldades para tornar o texto do seu site responsivo, este snippet CSS de tipografia fluida será útil.
Pequenos Trechos
Pequenos Trechos
Embora o LittleSnippets se autodenomine um blog inspirador, há alguns snippets CSS muito práticos aqui. Especificamente, este site parece se concentrar em coletar snippets que ajudam os desenvolvedores a aplicar efeitos de animação sutis a imagens e botões.
Por exemplo, esse efeito de foco de imagem funcionaria bem em sites de portfólio, bem como em sites de notícias e mídia.
Aqui está um exemplo de como um dos efeitos de hover de botão funciona. É um pequeno movimento e alteração do design e ainda assim um que vai chamar a atenção dos seus visitantes.
Encerrando
Como você pode ver nos sites acima, há uma abundância de snippets CSS por aí, só esperando para serem pegos e usados. Seja algo tão sutil quanto preencher a borda de um botão ou algo mais aprofundado como uma animação de transição de página, os snippets CSS dão a você a capacidade de aplicar novos recursos ao seu site WordPress de forma rápida e fácil, sem suar a camisa.
0 comentários