Como criar efeitos de sombras CSS

1. Apresentação: Agora ninguém pode contestar que um bom Drop Shadow pode acentuar seu design e formas sutis e insatisfatórias. Mas usar as configurações padrão na maioria dos construtores de páginas levará a resultados limitados e você soltará sombras parecendo um pouco Samy, no vídeo de hoje, vou mostrar como você poderia muito comece de forma rápida e fácil a criar sombras projetadas mais exclusivas e , muitas vezes, mais avançadas. Normalmente parecem legais, mas na verdade parecem muito mais realistas, interessados, legais. Vamos nos aprofundar e dar uma olhada nos resultados para os quais estamos trabalhando hoje. Então, como estabelecemos, as sombras projetadas podem ser bem legais, mas também são bastante limitadas. Se você estiver usando uma ferramenta como elemental ou qualquer coisa em que esteja usando qualquer uma das configurações predefinidas. Portanto, é bom ter uma maneira mais flexível de fazer essas coisas, além de poder fazer algumas coisas mais avançadas. Deixe-me mostrar rapidamente os três exemplos que vou mostrar no vídeo de hoje, mas existem opções quase ilimitadas nas quais você pode levar isso em qualquer direção que quiser para empilhar efeitos diferentes uns sobre os outros. Tudo é feito por meio do CSS , para que você possa ser tão criativo quanto quiser. Basta começar dando uma olhada em como criamos essa primeira sombra projetada. E isso é realmente o mais simples de todos. Este é um visual mais realista na sombra com uma luz vinda do topo. Temos uma sombra mais longa e você verá que ela cai naturalmente muito bem, mas tenha paciência comigo porque parece muito mais realista. Então, como faríamos isso? O que vamos usar um pouco de CSS personalizado, e também vamos usar um recurso online gratuito que permite que você configure visualmente, ajuste e obtenha tudo da maneira que quiser e , em seguida, simplesmente pegue esse código. No entanto, se você se sentir confortável em fazer isso manualmente, por todos os meios, faça isso. 3. Brumm: Portanto, o primeiro tipo que usaremos é o link AF que estará na descrição. Então você pode verificar isso por si mesmo. Agora, essa é uma ótima maneira de configurar, criar e ajustar visualmente e obter exatamente o tipo de efeito de sombra projetada que você deseja usando esse recurso gratuito. Então temos esse pequeno bloco de código e ele está usando o seletor CSS box shadow. Então você pode ver que há todas as diferentes configurações que estão sendo usadas nesta configuração específica, onde temos todos esses controles no lado direito, que nos permite ajustar e configure isso. Assim, podemos escolher a camada de sombras e isso empilha quantas camadas de sombra existem para criar uma aparência mais realista. Geralmente, quanto mais camadas você tiver, mais realista do que o efeito aparecerá. Como você pode ver, podemos arrastá-los para cima como fazemos. Nossas definições de caixa-sombra aumentam. O mesmo acontece com as camadas reais da nossa sombra. Também podemos ajustar a transparência final para que você possa ver se queremos criar uma sombra muito mais forte, você pode facilmente aumentá-la como acharmos melhor. Agora, obviamente, você não gostaria de enlouquecer com isso. Mas você pode estar usando algo que está em um fundo mais escuro e usar uma transparência mais clara simplesmente não aparece. Então você pode fazer isso. Você também pode reverter isso se quiser reverter o Alfa e você pode ver que apenas vira o sombreamento para a direção oposta. Você pode até ajustar a curva da transparência real que está sendo usada. Você verá que, à medida que ajustamos isso, ele fica mais forte nos locais. Podemos suavizar se quisermos ajustar tudo isso, ajustar sua transparência. Ajuste suas camadas de transparência até obter o efeito exato desejado. Como eu disse, você tem um controle muito bom dentro desses construtores de páginas. E eu uso o Elementor como exemplo, mas há muitos outros criadores de páginas que oferecem essa funcionalidade. Mas eles não vão tão fundo quanto isso nos permite. Depois de fazer isso, você então vai George, distância vertical, que você pode ajustar, você pode ver que podemos aumentar a distância vertical para que possamos fazer parecer que a fonte de luz está mais forte na parte superior e podemos ajustar nossa transparência para torná-la ainda mais forte novamente, aumentar ou diminuir o número de camadas de sombra. Assim, podemos fazer com que isso pareça o mais realista possível. Então, vamos recuar um pouco. Então você tem novamente, a curva que permite ajustar a distância vertical final. Você pode ver à medida que ajustamos que mudamos a aparência real da própria sombra. E você pode ver que temos esse tipo de representação visual desses blocos em segundo plano que é meio que mostrado no outono que vamos criar. É uma sombra muito mais forte na parte inicial, onde eles são muito mais rápidos, caem no final. O mesmo vale para a força final do golpe. Você pode ajustar isso e ver se levarmos isso longe demais, começamos a ter esse efeito de aparência de caixa maluca. Vamos apenas pegar isso de volta para que ainda seja bastante realista. E novamente, você tem sua força azul. Esta é a sua área mais focada no lado direito e a queda vai para o lado esquerdo. E, novamente, podemos ajustar essa curva para criar uma aparência muito mais realista na sombra até ficarmos realmente felizes com isso. Então você finalmente tem, você pode reduzir a propagação lá. Então isso está apertando a sombra para parecer que a luz está mais do topo brilhando para baixo e, portanto, as bordas não estão tão na sombra. Mas a parte do meio é, novamente, como eu disse, você pode controlar e ajustar a transparência de tudo isso para obter um efeito de aparência muito legal. Quando você estiver satisfeito com isso, precisamos assumir isso em nosso construtor de páginas para aplicar isso por meio de CSS. Agora você pode usar isso dentro do seu tema, se quiser. Você só precisa ter certeza de que está usando uma classe ou ID CSS. E então você associa isso ao elemento específico que deseja, seja uma imagem, seja uma caixa, seja o que você quiser definir para aplicá-la. Assim que tivermos isso, vamos pegar esse pequeno bloco de código como copiar isso. Vamos voltar para o elemental. E como eu disse, estou usando apenas este exemplo elementar. Você não precisa acessar a opção CSS personalizado. E você pode ver que eu já tenho as opções dentro disso. Vamos nos livrar disso completamente no momento. Agora, com isso removido, quero aplicar isso à imagem que temos aqui, que é, como você pode ver, foi isso que foi selecionado. Então, o que precisamos fazer quando se trata elementar é começar com seletor. E isso diz apenas dois elementos ou este é o item específico que eu quero segmentar com esse CSS. Agora, como queremos anexar esse estilo à imagem, vamos apenas colocar a tag HTML para imagem, que é IMG. Abra nossos colchetes encaracolados, feche nossos colchetes encaracolados. E agora enviamos o seletor CSS para pegar essa imagem e fazer o que precisamos fazer com ela. Então, com isso no lugar, menos apenas cole esse código lá dentro. Você pode ver que há nossa sombra projetada. Criamos aquele visual mais realista na sombra e o aplicamos especificamente a essa imagem diretamente dentro do elemental. Mas você pode usar as ferramentas que quiser. Você também pode entrar e selecionar itens diferentes e atribuir suas próprias classes CSS. E você provavelmente poderia atribuir isso por meio do seu personalizador real para o seu tema. E então você pode aplicar isso como e quando quiser. Só estou mostrando isso porque quero mostrar como o código interage com o item em si. Então é assim que podemos criar essa sombra de aparência mais realista usando esse recurso online gratuito e o ponto f. Vamos dar uma olhada agora na próxima opção. Então, vamos voltar. E a próxima que queremos é essa opção de sombra projetada mais flexível. Vimos como adicionar isso a uma imagem. Que tal se você quiser realmente configurá-lo no próprio contêiner? Então você pode ver que temos esta seção e queremos aplicar uma sombra projetada nela. Então, aqui dentro, temos um título e um texto. Vamos selecionar essa seção específica. Vamos voltar ao avançado e voltar ao nosso CSS personalizado. Então, fazemos a mesma coisa de novo, vamos fazer seletor. Mas em vez de colocar IMG ou algo parecido para o elemento HTML, vamos deixá-lo em branco. E vamos simplesmente colocá-lo na cinta encaracolada, fechar a cinta encaracolada. Então, agora segmentamos essa seção específica e podemos aplicar o estilo CSS a ela. Então, criei uma pequena variação que criamos antes. Vou copiar isso e vamos voltar e simplesmente colar isso em nossa área selecionada. E você pode ver que existe a nossa sombra projetada aplicada a essa seção. Portanto, você tem uma enorme flexibilidade. Você não está limitado a aplicá-lo apenas a elementos HTML. Você ainda pode aplicá-lo dentro do elemental semelhante a uma ferramenta no próprio contêiner. E deixe que isso envolva vários elementos diferentes, como eu digo neste exemplo, temos o título, temos algum texto embaixo dele. Podemos adicionar qualquer outra coisa que quisermos nisso. Podemos dizer, vamos dar uma passada. Eu não sei. Vamos apenas dizer que vamos colocar uma imagem lá dentro. E vamos apenas escolher uma imagem e colocá-la lá dentro. Lá. Lá vamos nós. Então, se criarmos um pouco de espaço para isso agora, só para termos espaço suficiente para ver, tudo colocará 100 pixels de preenchimento por lá. Você pode ver que nossa sombra projetada está sendo aplicada para contar todo o contêiner. Muito legal. Agora que vimos como fazer isso. 6. Use outra maneira de criar uma sombra: Que tal algo um pouco mais avançado? Você pode ver que temos esse logotipo da ACF. Agora, se eu dissesse que essa sombra projetada faz parte do PNG ou SVG, você provavelmente pensaria que isso soa bastante razoável. No entanto, não é. Tudo é feito por meio de CSS. Então, vamos fazer, vou mostrar como você pode usá-lo. Outro recurso on-line para fazer exatamente isso. E como conseguimos a diferença entre o box-shadow e outro seletor CSS. Então, vamos dar uma olhada nisso a seguir. Então é assim que vamos configurar as coisas. Você pode ver se eu remover esse pequeno pedaço de código, estamos de volta ao que deveríamos começar, que é basicamente um PNG transparente. Se colocarmos um fundo de cor diferente aqui, você verá exatamente o que quero dizer. Então, vamos apenas dizer, lá vamos nós. Aí está o seu PNG transparente. Então, vou colocar um pouco de cor lá para que você possa ver o que estou fazendo. Agora. que precisamos fazer é direcionar essa imagem dentro dessa área. Então, vamos fazer a mesma coisa de novo. Chegaremos ao nosso CSS personalizado. Podemos selecionar essa área. Podemos selecionar isso. Realmente não importa de que maneira você quer fazer isso. Eu vou voltar e vamos selecionar um como fizemos antes. Img, como fizemos antes. Queremos selecionar apenas a imagem e abriremos e fecharemos os colchetes. Então, temos as coisas configuradas. Então, agora vamos usar uma variante um pouco diferente. Vimos box-shadow. Desta vez, vamos usar sombra. A sombra projetada respeita a forma das imagens PNG e SVG. Então é aqui que se você tiver um PNG com transparência ou um logotipo SVG, por exemplo, e quiser aplicar uma sombra projetada. Essa pode ser uma maneira muito legal de fazer isso. Agora vou mostrar um exemplo muito simples, mas eu recomendaria dar uma olhada neste site. Vou soltar um link na descrição, que dá muito mais detalhes sobre o que você pode fazer, como você pode configurar as coisas e todos esses tipos de coisas realmente úteis. Então, o que vamos fazer é pegar um pouco de código que diz que há um filtro sendo aplicado, um filtro CSS. E vamos usar o Drop Shadow e depois temos todas as opções. Então, o deslocamento, a transparência, as cores sendo usadas, todos esses tipos de coisas. Então, vamos apenas copiar isso como fizemos antes. Vamos pular de volta. Temos nosso seleto um centro. Digamos que se você não estiver usando elemental, você pode configurar isso para segmentar aquele item específico com muita facilidade. Então, simplesmente caiu lá dentro e bum, aí está nossa sombra aplicada. Respeitar a forma real da imagem PNG, o conteúdo dela e ignorar a transparência em torno dela. Então, se você quiser, você pode facilmente ajustar o deslocamento. Então, vamos apenas dizer que vamos definir isso como um. E você pode ver que define o deslocamento fará a mesma coisa no próximo valor. Defina isso como dois, e agora teremos um efeito muito mais forte. Podemos ajustar outros valores em etapas. Vamos definir isso como um e você pode ver que agora reduz o azul. Ou podemos definir isso para algo como, digamos, oito. Obtemos um azul muito mais suave, então você pode ajustar os outros valores. Então, podemos dizer que queremos definir isso como um e você pode ver que agora realmente reduzi-lo ou aumentar a transparência, tornando-o muito menos evidente. Você pode ajustá-los, configurá-los, conseguir exatamente o que quiser. Brinque até obter o efeito exato com o qual está feliz. Mas você pode ver que essa é uma ótima maneira de não prejudicar a edição de imagens, mas ainda aplicar coisas como sombras projetadas a elas. Efeito muito legal. E isso é apenas algumas das coisas que você pode fazer com CSS usando esses tipos de técnicas que abordamos hoje. Vou colocar todos os links para todos esses sites diferentes que demonstraram. Então você pode experimentar isso por si mesmo. Agora eu acho que você pode concordar que essas sombras parecem muito mais convincentes do que as padrão do pântano que provavelmente estamos usando para absolutamente. As idades sempre foram até a próxima vez. Cuide-se.