Quando você coloca algo – digamos, uma folha de papel comum – em uma pasta manilha, uma parte dessa coisa pode aparecer um pouco fora da pasta. O mesmo tipo de coisa com uma carteira e cartões de crédito. Os cartões saem apenas um pouquinho para que você possa ter uma visão rápida de quais cartões você está carregando.
Eu chamo esse tipo de coisa de “fenda”. Uma fenda é onde criamos a ilusão de uma abertura através da qual podemos provocar um elemento visual espreitando dela. E podemos fazer isso em CSS!
A parte crucial do design é a sombra, que é o que dá a sugestão visual de haver uma fenda. Depois, há a tampa para a fenda que fornece espaço para que o elemento exibido espreite por baixo.
Aqui está o que vamos fazer juntos:
Vamos começar com a criação da sombra
Você pode se surpreender que a sombra no exemplo não seja criada com uma sombra CSS real, como box-shadow ou um drop-shadow() filtro. Em vez disso, a sombra é um elemento separado em si mesmo, escuro e desfocado. Isso é importante para tornar o design mais adaptável, tanto em seus estados padrão quanto animados.
A capa é o outro elemento do design. A capa é o que chamo de elemento que se sobrepõe à sombra. Aqui está uma figura que descreve como a sombra e a cobertura se unem.
A sombra é feita a partir de um pequeno retângulo vertical que tem um fundo gradiente. O gradiente é mais escuro no meio. Então, quando o elemento está desfocado, ele cria uma sombra mais escura no meio; portanto, mais dimensional.
Agora, a metade esquerda da sombra recriada é coberta com um retângulo na parte superior, com a mesma cor do plano de fundo de seu contêiner.
Tanto a capa quanto a sombra são então movidas para a esquerda levemente para que pareçam estar em camadas
Trabalhando na capa
Para que a capa se misture com o plano de fundo do design, a cor do plano de fundo é herdada do elemento que a contém. Alternativamente, você também pode tentar misturar a capa ao fundo usando padrões como Máscaras CSS e modos de mistura, dependendo de suas escolhas e requisitos de design.
Para aprender algumas noções básicas sobre como esses padrões podem ser aplicados, você pode consultar estes artigos: Sarah Drasner's “Mascaramento versus recorte: quando usar cada um” fornece um excelente primer em máscaras. Eu também escrevi sobre modos de mesclagem CSS neste artigo onde você pode se aprofundar no assunto.
No código-fonte do meu exemplo, você notará que alinhei e empilhei os elementos dentro do
O que CSS Grid também me permite fazer é definir todos os três divs para que estejam todos na largura total no
main > div {
grid-area: 1 / 1;
}Isso faz com que tudo empilhe um em cima do outro. Normalmente, trabalhamos duro para evitar cobrir elementos com outros elementos em uma grade. Mas este exemplo depende disso. eu dei o .slit-cover na largura de 50% que revela naturalmente a imagem abaixo dela. A partir daí, estabeleci um transform nele que o move 50% na direção negativa, mais a pequena quantidade que eu mudei a sombra antes (25px) para garantir que isso também seja revelado.
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}E aí temos que! Uma fenda de aparência bastante natural que imita algo espreitando de uma pasta, carteira ou qualquer outra coisa.
Há mais maneiras de fazer isso! Por um lado, o Flexbox pode fazer com que os elementos se alinhem em uma linha e se alinhem no centro assim. Há muitas maneiras de colocar as coisas lado a lado. E talvez você tenha uma maneira de usar o box-shadow propriedade, drop-shadow() filtrar, ou mesmo Filtros SVG para obter o mesmo tipo de efeito de sombra que realmente vende a ilusão.
E você pode riffar totalmente nisso para obter sua própria aparência. Por exemplo, tente trocar a posição da sombra e da imagem. Ou brinque com as combinações de cores e altere o blur() filtro valor. A forma da capa e a sombra também podem ser ajustadas — aposto que você pode criar uma sombra curva em vez de reta e compartilhar conosco nos comentários!
