anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Modal: uma janela para o CSS3

capa do post

Mas sabemos que com os recursos atuais de programação podemos fazer algo igualmente funcional e muito mais gracioso. Com o advento do HTML5 e CSS3, podemos utilizar transições, fundos em gradiente e incluir eventos com facilidade para criar Janelas Modais.

Mas o que são janelas Modais, afinal?

Apesar do nome estranho, você já deve ter visto uma janela Modal. Elas estão presentes em vários sites e, para quem não a conhece pelo nome, explico: é aquela janela que fica em evidência escurecendo o resto da página ao clicarmos em um link, por exemplo. E que desaparece em um efeito de fade ao clicarmos fora dela.

Eu imagino que você, caro leitor, do momento em que leu o título deste post até agora, deve estar achando minha descrição muito pobre, e você está certo. É difícil descrever algo assim. Como a maioria dos estudantes de web é muito” visual”, vocês podem ver aqui os arquivos do tutorial em funcionamento (é necessário um registro no 4shared caso não possuam) e tirar as suas dúvidas.

Satisfeitos? Agora que sabem o que é uma janela Modal, acho que estão interessados em saber como criar uma. Oferecerei um tutorial com uma técnica extremamente simples e funcional. Vamos à parte prática? Vocês vão precisar de:

– Um programa editor de códigos HTML e CSS, como o Notepad++, simples e gratuito (e que você pode baixar aqui); ou o imbatível e ultra profissional Dreamweaver, (que você pode experimentar por 30 dias ao baixar diretamente do site da Adobe, após fazer um pequeno registro);

– Um navegador moderno como o Google Chrome, Firefox, Opera… NÃO, o Internet Explorer não fará parte dessa lista porque ainda não reconhece a maior parte dos códigos do CSS3 que você verá aqui (alô dona Microsoft!…)

Por onde começar?

O que vamos fazer é usar transição CSS3, opacidade, evento de mouse e propriedades de fundo gradiente para criar uma caixa simples e funcional. Mas iniciaremos com o HTML, é claro, pois ele é a base de toda página web. O primeiro passo para a criação de nossa janela será uma marcação simples, como você pode ver a seguir. Crie uma pasta para guardar os arquivos que você vai criar neste tutorial , abra seu editor de códigos favorito e dentro das já conhecidas tags HTML <body> e </body>, escreva o seguinte:

Início do HTML

Salve com o nome que desejar e na extensão .html (sempre indico que seja index.html, para não perder o costume, ainda que seja um teste, mas você pode usar o nome que desejar).

Como pode ver, temos apenas um simples link que diz “Abra a janela Modal” e uma div que chamaremos de modal colocada logo abaixo do link. Na mesma linha, já invocamos uma classe chamada “janelaModal” (que criaremos em instantes em nosso CSS). O ID servirá um gancho para abrir a janela Modal, e iremos inserir um estilo nela usando a classe janelaModal

Em seguida, vamos adicionar uma nova tag Div que irá conter todo o texto de nossa janela Modal. Dentro desta Div teremos um link para fechar a janela que criamos. Vamos inserir um título simples, com alguns parágrafos de texto abaixo dela. Sua marcação HTML deverá ficar assim:

html completo

Colocando estilo

Vamos começar a escrever a nossa folha de Estilos para torar nossa janela realmente atraente e funcional. Abra um novo documento e, nele primeiramente vamos criar as classes principais de nossa janela:

classe janelaModal

O código aqui é muito simples. Colocamos uma posição fixa em nossa janela Modal, para que se mova se você rolar a página para baixo. Nós também definimos as nossas margens superior, inferior, direita e esquerda para 0 para que o nosso fundo escuro possa abranger todo o tamanho do monitor.

Como vamos querer que o fundo ao redor da janela escureça quando ela é aberta, definimos o fundo para preto, e mudamos um pouco a opacidade. Também certificamos de que a nossa janela Modal fique acima de tudo, isso é definido através da propriedade z-index.

Por fim, estabelecemos uma boa transição para a nossa janela modal ao aparecer na tela e esconder a janela quando não é clicada, definindo sua exibição para None

Você pode não estar completamente familiarizado com a propriedade pointer-events, mas através dela você pode controlar quais elementos devem ou não receber um click do mouse. Vamos configurá-la para a nossa classe janelaModal porque não desejamos que o link seja clicável até que a pseudo classe target seja acionada.

Aparência e Funcionalidade

Agora vamos adicionar a nossa pseudo classe target , bem como o estilo da nossa Janela Modal. Veja o código a seguir:

classe hover

Com o uso da pseudo classe target, quando o link é clicado nossa janela Modal será exibida. Nós também usamos as propriedades de pointer-events, de modo que quando passamos o mouse sobre o link ele estará ativo.

A partir daí, inserimos estilo em nossa tag div definindo a largura e a posição, e usando nossas margens  para centraliza-la na página. Em seguida, adicionamos um pouco mais de beleza, criando uma margem interna com o padding, uma border radius para os cantos redondos e um gradiente de branco ao cinza escuro para o fundo. Salve o documento na mesma pasta onde salvou o documento HTML , com um nome como Estilo.css. Em seguida, volte até o código do documento HTML  e insira o link da folha de estilos entre as tags <head> e </head> do documento html com esta linha a seguir:

<link href=”estilo.css” rel=”stylesheet” type=”text/css” />

Salve o HTML e abra o documento no navegador. Você verá a janela Modal já em funcionamento ao clicar no link:

Link no navegador

modal incompleta

Fechando a janela

Agora que colocamos estilo e a tornamos funcional, precisamos deixar o nosso botão de fechar com uma boa aparência. Usando CSS3 e HTML5 podemos criar botões que parecem  imagens, mas que não verdade, não são. Volte ao editor de códigos e complemente a folha de estilos CSS com o código abaixo:

classe fechar

Para o nosso botão de fechar nós definimos uma cor de fundo e posicionamos o texto usando text-align e line-height. Então posicionamos o botão usando position:absolute, definindo as propriedades superior e direita. Mas como vamos fazer um círculo e adicionar alguma profundidade? Definindo border:radius para 12 e adicionando uma pequena sombra. Então, para adicionar algum comportamento visível para a ação do usuário, mudamos a cor do fundo para um azul claro ao passar o mouse sobre ele (você pode fazer outro experimentos, como aumentar o tamanho do círculo, das letras ou invertendo cores, solte sua imaginação, não deixe  de experimentar coisas!). Salve e veja o resultado no browser:

Modal final

Como você já deve ter percebido, o grande destaque desta técnica é o uso puro de HTML5 e CSS3. E por que esse é um detalhe tão significativo? Janelas Modais em JavaScript são algo que qualquer novato pode criar, já que existem centenas de exemplos e scripts prontos para serem usados. Embora estatísticas mostrem que apenas 2% das pessoas em todo o mundo navegam sem JavaScript, o uso dessa linguagem não é um problema. No entanto, se observar com atenção, irá perceber que usamos somente três linhas de código para criar nossa animação! Se você comparar com qualquer biblioteca de animação JavaScript, ficará chocado ao ver o quanto o nosso código é minimizado. Isto leva a uma outra razão, que é ter um código mais limpo, algo importantíssimo nos dias de hoje.

Se isso ainda não convenceu, é bom lembra-lo também que HTML5 e CSS3 são o futuro. Todo mundo está trabalhando para implementá-los em seus projetos e usando-os você já ajuda a perpetuar a sua adoção, ao mesmo tempo que  garante que não ficará para trás em termos de conhecimento. Você recebe um código mais limpo, você não precisa se preocupar com bibliotecas JavaScript e você tem uma enorme quantidade de web designers e desenvolvedores que estão prontos para ajudar com qualquer problema que possa ter, porque eles estão animados para aprender mais sobre essas linguagens. HTML5 e CSS3 estão aí para ajudar a forma como as páginas web são exibidas e acessadas, então não há nenhuma razão para não usá-las.

Quando usar

Caixas Modais são particularmente úteis quando usadas para formulários de login e registro. Ele cria uma experiência simplificada para o usuário, e pode realmente causar uma boa impressão em seus visitantes.

Exemplo login

Outra excelente uso de janelas Modais é exibir imagens ou vídeos (comumente conhecidas como lightboxes). Ela permite ao usuário visualizar o conteúdo de seu site sem sair da página, aprofundando sua experiência de navegação.

Exemplo lightbox

Você está animado com as possibilidades do HTML5 e CSS3? Será que o JavaScript vai cair em desuso com essas novas-velhas linguagens? Dê a sua opinião nos comentários abaixo e não esqueça de compartilhar o blog do Web design com seus amigos de curso e também com aqueles que gostam ou que trabalham nessa área. Também conto com sua ajuda para dar sugestões para os próximos posts! Um forte abraço e até a próxima! 

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.

  • Rodrigo Bastos da Silva

    Muito bom o tutorial. Mas como faço modal com imagem, igual a esse que você usa no seu texto?