Olá pessoal!
Certamente, alguns de vocês notaram que sites diferentes usam quase o mesmo tipo de sombra em blocos, painéis de navegação e outros contêineres, mais ou menos alguns pixels na direção da transparência. Analisei vários sites populares, tanto nossos quanto estrangeiros, e tentei coletar o mais próximo possível os parâmetros das sombras usadas em uma grande coleção ou biblioteca. Para quem é mais conveniente. Espero que alguém venha a calhar.
O principal objetivo do projeto é facilitar o trabalho de web designers e desenvolvedores iniciantes na criação de um design agradável e moderno. Talvez designers experientes desenhem para si mesmos algo interessante desse desenvolvimento.
A biblioteca será conveniente para aqueles que ainda não tiveram tempo de se aprofundar no layout, mas desejam criar belas sombras em botões, blocos etc. Assim, você pode simplificar o trabalho com blocos e reduzir o tempo para selecionar sombras css no gerador.
Box-shadows.css
Box-shadows.css é uma coleção de sombras simples e agradáveis de css (box-shadow) para seus projetos. A classe principal usa a classe
.bShadow simples. Agora, a coleção inclui mais de 50 opções relevantes para sombras com um número, além de três classes separadas
.bShadow ,
.bShadow-light e
.bShadow-inset . Eles são ótimos para uso em tabelas, para o conteúdo de páginas iniciais, contêineres, navegação e outros blocos do seu site.
Suprimindo várias perguntas, explicarei imediatamente por que os números são usados, e não nomes ou classes como
bShadow-01040-00 .
A coleção não usa nomes independentes, como é feito no animate.css, pois para este projeto é um pouco inaceitável. A sombra dos blocos aumenta gradualmente, com vários desvios e, devido à sequência de números, você pode escolher a melhor opção para si mesmo, sem memorizar nomes individuais. Isso simplifica bastante o trabalho com a coleção.
A coleção possui
vários outros recursos , por exemplo, o uso de
efeitos de
foco , com alternância suave entre as sombras.
Funções adicionais
O site do projeto é visualmente simples, mas possui funções suficientes para personalizar completamente e selecionar as classes e estilos necessários. O site está escrito em inglês, mas para aqueles que ainda não são fluentes nesse idioma, há uma mudança para o russo.
Seleção de sombra
O site possui uma função de visualização na qual você pode especificar a cor do plano de fundo e o contêiner do site para selecionar mais sombras. A seleção de sombras e classes é realizada escolhendo opções ou passando o mouse sobre os blocos. O resultado é exibido como uma sombra do contêiner do site principal.
Gerador de arquivo Min.css
O site também possui
um gerador de arquivos box-shadows.min.css com instruções que permitem ao usuário criar seu próprio arquivo, consistindo apenas nas classes que ele seleciona. Isso ajudará a reduzir a carga no site se o seu projeto usar menos de duas ou três sombras.
Gerador de caixa-sombra CSS
Você pode usar o
gerador de sombra de caixa css clássico para complementar sua coleção com seus próprios estilos. Ao clicar no botão Salvar e adicionar próximo, você pode criar um número infinito de classes. As primeiras classes geradas e subsequentes recebem um número de série que não faz parte da coleção. Você pode copiar os estilos resultantes e colar no CSS raiz ou no arquivo box-shadows criado no site.
min.css .
Tente experimentar. Este é um trabalho realmente interessante.
Agora, o desenvolvimento está em desenvolvimento e um conjunto de 200 estrelas no GitHub, para um link para o cdnjs. Desejo-lhe um uso agradável e sucesso criativo. Se você tiver sugestões, comentários ou sugestões para melhorar o projeto, escreva nos comentários.
GitHub ·
Site