Contente
- 01. Prepare-se
- 02. Conclua o HTML
- 03. Explore as variáveis Sass
- 04. Ajuste o estilo do corpo
- 05. Defina o estilo dos títulos das seções
- 06. Faça os CTAs se destacarem
- 07. Defina o plano de fundo e as telas do contêiner
- 08. Adicionar imagens de fundo
- 09. Adicione transições e efeitos de foco
- 10. Mova para o JavaScript
- 11. Adicionar e remover uma classe
- 12. Torne-o responsivo
Sua página de destino é um elemento crucial no layout do seu site. É a primeira oportunidade real que você tem para apresentar seu negócio, ou o produto que você vende, então seu design é fundamental. As páginas de destino são projetadas com um único objetivo focado, conhecido como call to action (CTA). O uso de cores e imagens para complementar as frases de chamariz e a experiência do usuário é imprescindível.
- Veja o CodePen de trabalho para este tutorial
Neste tutorial, veremos como criar uma página de destino envolvente para uma marca de moda fictícia. Ele será centralizado em torno de um design de tela dividida com imagens grandes e transições animadas que acontecem ao passar o mouse.Esta página terá dois botões de call-to-action claros e usaremos HTML, Sass para estilização e um toque de JavaScript básico que usa a sintaxe ES6 (lembre-se de ter certeza de que sua hospedagem na web é adequada às necessidades do seu site). Muito complexo? Crie um site sem a necessidade de código, experimente um construtor de sites simples.
01. Prepare-se
Se você estiver usando CodePen, certifique-se de que o CSS esteja definido como 'SCSS' nas configurações da caneta. Você pode fazer essa alteração clicando na guia de configurações, escolher 'CSS' e alterar o pré-processador CSS para SCSS nas opções suspensas.
Então podemos começar a adicionar em nosso HTML. Vamos envolver uma seção chamada 'esquerda' e uma seção chamada 'direita' dentro de uma classe de contêiner, com ambas as seções recebendo uma classe de 'tela'.
div> seção> / seção> seção> / seção> / div>
02. Conclua o HTML
Para finalizar nosso HTML, adicionaremos um título para cada seção usando um h1 marcação. Abaixo disso, precisaremos adicionar um botão, que levaria a outra página se este fosse um projeto do mundo real. Vamos dar a isso uma aula de botão para manter as coisas simples e agradáveis.
div> section> h1> Moda Masculina / h1> botão> a href = "#"> Saiba mais / a> / button> / section> section> h1> Moda Feminina / h1> button> a href = "#"> Aprenda Mais / a> botão /> / seção>
03. Explore as variáveis Sass
A única coisa que todos nós amamos no Sass é o uso de variáveis. Mesmo que as variáveis CSS nativas estejam recebendo mais suporte, manteremos as coisas seguras usando Sass. Vamos colocá-los no topo do nosso .scss, e você pode escolher as cores que quiser, mas usando rgba os valores nos darão mais flexibilidade.
/ * * Variáveis * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0,7); $ pairar com o botão esquerdo: rgba (94, 226, 247, 0,7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ pairar com o botão direito: rgba (255, 140, 219, 0,7); $ hover-largura: 75%; $ largura pequena: 25%; $ animateSpeed: 1000ms;
04. Ajuste o estilo do corpo
Em primeiro lugar, limparemos todo o preenchimento e margem padrão do corpo e, em seguida, definiremos a família da fonte como Open Sans. Isso afetará apenas o botão, então não importa muito qual fonte usamos. Então vamos definir a largura e altura para 100% e certifique-se de que tudo o que transbordar no eixo X seja ocultado.
html, corpo {preenchimento: 0; margem: 0; família de fontes: 'Open Sans', sans-serif; largura: 100%; altura: 100%; overflow-x: oculto; }
05. Defina o estilo dos títulos das seções
É hora de escolher uma fonte do Google para os títulos das seções - escolhemos Playfair Display. Então usando translateX podemos ter certeza de que os títulos das seções estão sempre centralizados no eixo X.
h1 {tamanho da fonte: 5 rem; cor: #fff; posição: absoluta; esquerda: 50%; topo: 20%; transform: translateX (-50%); espaço em branco: nowrap; família de fontes: 'Playfair Display', serif; }
06. Faça os CTAs se destacarem
Nossos botões funcionarão como nossas frases de chamariz, portanto, precisam ser grandes, arrojados e posicionados onde sejam fáceis de clicar. Ambos os botões terão uma borda branca e um efeito de transição interessante. Os estilos padrão para ambos os botões serão os mesmos, no entanto, mudaremos suas cores ao passar o mouse.
.button {display: block; posição: absoluta; esquerda: 50%; topo: 50%; altura: 2,6 rem; padding-top: 1.2rem; largura: 15rem; alinhamento de texto: centro; cor branca; borda: 3px sólido #fff; raio da borda: 4px; peso da fonte: 600; transformação de texto: maiúsculas; decoração de texto: nenhum; transform: translateX (-50%); transição: all .2s;
Os botões principais terão um efeito de foco simples e agradável e usaremos as variáveis Sass que especificamos para a cor, que será uma cor semelhante ao fundo da página.
.screen.left .button: hover {background-color: $ left-button-hover; border-color: $ left-button-hover; } .screen.right .button: hover {background-color: $ right-button-hover; border-color: $ right-button-hover;
07. Defina o plano de fundo e as telas do contêiner
A classe contêiner atuará como nosso wrapper de página e definiremos a posição dela como relativa, simplesmente porque queremos posicionar as telas em um posicionamento absoluto. Daremos ao contêiner uma cor de fundo padrão, mas é claro que isso não será visto porque definiremos cores diferentes para os dois fundos de tela.
.contêiner {posição: relativo; largura: 100%; altura: 100%; fundo: $ container-BgColor; .screen {posição: absoluta; largura: 50%; altura: 100%; estouro: oculto; }}
08. Adicionar imagens de fundo
As seções esquerda e direita exibirão uma imagem, e você pode encontrar imagens livres de royalties de sites como Unsplash, Pixabay ou Pexels (que usei neste tutorial). Para tornar as coisas mais fáceis, usei um serviço gratuito de hospedagem e compartilhamento de imagens chamado imgbb, ao qual podemos criar um link em nosso CSS.
.screen.left {left: 0; fundo: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) centralizado sem repetição; tamanho do fundo: capa; &: antes de {posição: absoluto; contente: ""; largura: 100%; altura: 100%; fundo: $ left-bgColor; }}
O lado direito da página também exibirá uma imagem de fundo usando imgbb, e definiremos a cor de fundo como rosa. Novamente, definimos o tamanho do fundo para cobrir. Isso nos permitirá cobrir todo o elemento que o contém, que em nosso caso é o .tela aula.
.screen.right {right: 0; plano de fundo: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) centralizado sem repetição; tamanho do fundo: capa; &: antes de {posição: absoluto; contente: ""; largura: 100%; altura: 100%; fundo: $ right-bgColor; }}
09. Adicione transições e efeitos de foco
A velocidade da animação para o nosso efeito de foco em ambas as telas será controlada por uma transição que mantém o valor de nossa variável $ animateSpeed, que é 1000 ms (um segundo). Em seguida, terminaremos dando um atenuação à animação, que é uma suavização de entrada e saída que nos ajudará a obter uma animação mais suave.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {transaction: $ animateSpeed all Easy-in-out; }
O que queremos que aconteça agora é que, quando você passar o mouse sobre a tela esquerda, haverá uma classe adicionada a essa seção usando JavaScript (que escreveremos em uma etapa posterior). Quando esta classe for adicionada, a tela será esticada para qualquer largura da variável que especificamos - que será 75%, e então o lado direito será definido para a variável de largura menor (25%).
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; }. mover para a esquerda. direita: antes de {z-index: 2; }
Isso funciona exatamente da mesma forma que o lado esquerdo, onde uma nova classe será adicionada ao passar o mouse usando JavaScript, e a tela direita será esticada de acordo. Também precisamos ter certeza de que z-index está configurado para 2 para que o botão CTA fique mais proeminente.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .esquerda: antes de {z-index: 2; }
10. Mova para o JavaScript
Estaremos usando um toque de JavaScript vanilla para nos ajudar a adicionar e remover classes CSS e também usaremos alguns dos novos recursos do ES6. A primeira coisa que precisamos fazer é declarar algumas variáveis constantes.
Porque estaremos usando documento mais de uma vez, definiremos uma variável constante chamada doc e armazenar o documento dentro dele para que possamos manter a palavra 'documento' agradável e curta.
const doc = documento;
Agora precisamos definir mais três constantes que irão armazenar o .direito, .deixou e .recipiente seletores. A razão de estarmos usando constantes é porque sabemos que não queremos alterar o valor delas, então, usar constantes faz sentido. Com eles agora definidos, podemos prosseguir e adicionar alguns eventos de mouse a eles.
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); const container = doc.querySelector (". container");
Usando o deixou variável constante declarada na última etapa, agora podemos adicionar um ouvinte de evento a ela. Este evento será o mouseenter evento e em vez de usar uma função de retorno de chamada, usaremos outro recurso ES6 chamado Funções de seta ’(() =>).
// adiciona uma classe ao elemento do contêiner em hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");});
11. Adicionar e remover uma classe
Na última etapa, nosso ouvinte de evento adicionou um mouseenter evento que tem como alvo a classe do contêiner principal e adiciona uma nova classe chamada pairar à esquerda para o elemento de seção esquerdo. Com este chamado adicionado, agora precisamos removê-lo quando pairarmos sobre ele. Faremos isso usando o deixar rato evento e o .remover() método.
// remove a classe que foi adicionada em hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Até agora fizemos tudo na tela esquerda. Agora vamos terminar o JavaScript e adicionar e remover classes nos elementos da seção certa. Novamente, usamos a sintaxe da função de seta aqui para manter tudo com uma boa aparência e organizado.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Torne-o responsivo
Nenhum projeto - não importa quão grande ou pequeno - deve evitar ser responsivo. Portanto, nesta etapa, adicionaremos algumas consultas de mídia ao nosso CSS e tornaremos este pequeno projeto o mais adaptável possível aos dispositivos móveis. Vale a pena conferir o CodePen original para ver como isso funciona.
@mídia (largura máxima: 800px) {h1 {tamanho da fonte: 2rem; } .button {width: 12rem; }
Certificamo-nos de que, quando a largura de nossa página cai para 800 px, a fonte e os botões reduzem o tamanho. Portanto, para finalizar, queremos direcionar a altura também e garantir que nossos botões se movam para baixo na página quando a altura da página ficar abaixo de 700 px.
@media (altura máxima: 700px) {.button {top: 70%; }}
Quer salvar suas páginas? Exporte-os como PDFs e salve-os em um armazenamento seguro em nuvem.
Evento de web design Gerar Londres retorna em 19-21 de setembro de 2018, oferecendo uma agenda lotada de palestrantes líderes do setor, um dia inteiro de workshops e oportunidades valiosas de networking - não perca. Obtenha seu tíquete do Generate agora.
Este artigo foi publicado originalmente na revista net edição 305. Inscreva-se agora.
