Introdução
Neste laboratório, exploraremos os fundamentos da programação CSS e aprenderemos a criar páginas web visualmente atraentes. Através de uma série de exercícios e desafios, você obterá experiência prática com seletores, propriedades e valores CSS, tornando-se proficiente na estilização de elementos HTML. Ao final do laboratório, você terá as habilidades e o conhecimento para criar layouts web bonitos e responsivos.
Cartão Isométrico (Isometric Card)
index.html e style.css já foram fornecidos na VM.
Para criar um cartão isométrico, use transform com rotateX() e rotateZ() juntamente com um box-shadow. Você também pode adicionar uma transition para animar o cartão e criar um efeito de elevação quando o usuário passa o mouse sobre ele.
Aqui está um trecho de código de exemplo:
<div class="isometric-card"></div>
.isometric-card {
margin: 0 auto;
transform: rotateX(51deg) rotateZ(43deg);
transform-style: preserve-3d;
background-color: #fcfcfc;
will-change: transform;
width: 240px;
height: 320px;
border-radius: 2rem;
box-shadow:
1px 1px 0 1px #f9f9fb,
-1px 0 28px 0 rgba(34, 33, 81, 0.01),
28px 28px 28px 0 rgba(34, 33, 81, 0.25);
transition:
transform 0.4s ease-in-out,
box-shadow 0.3s ease-in-out;
}
.isometric-card:hover {
transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
box-shadow:
1px 1px 0 1px #f9f9fb,
-1px 0 28px 0 rgba(34, 33, 81, 0.01),
54px 54px 28px -10px rgba(34, 33, 81, 0.15);
}
Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.
Resumo
Parabéns! Você concluiu o laboratório do Cartão Isométrico. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.