Obs. Se você só quer o código pronto, pule para o final do post. Ou acesse o link do JSFiddle.
As vezes precisamos encontrar formas de destacar elementos na tela (coachmark). Isso é muito útil principalmente quando você está tratando de pequenos tutoriais, afim de ajudar os usuários. Convém, também, entregar soluções simples e esteticamente elegantes para que ajudem no relacionamento com a ferramenta.
Faz algum tempo, um cliente meu quis criar um modo tutorial em seu sistema. Esse tutorial não deveria permitir que outras áreas da tela fossem clicadas até que a pessoa confirmasse que compreendeu. Como designer, lembrei que, anos atrás, no Android, a Google usava uma espécie de spotlight, mas não vi nada a respeito para websites. E, também, eu precisava que fosse dinâmico. Então eu resolvi usar meus conhecimentos de CSS3 e Javascript para usar essa ideia. E é disso que eu falarei neste tutorial.
Apesar de eu ter usado originalmente jQuery, para compartilhar com todos, resolvi fazer uma versão com Javascript puro, de forma que você poderá adicionar a qualquer aplicação web que você já tenha.
Dessa forma, se já não tiver, teu projeto deve possuir um container principal que é pai de todos os elementos, mas abaixo do <body>. Se não houver, o crie, é até uma questão lógica de organização para evitar problemas futuros. Veja um código de exemplo:
A div container vai ser justamente o elemento que iremos clippar. Para ajudar em nosso exemplo, vamos criar um form básico dentro do container, ficando assim:
Para finalizar nosso HTML, vamos colocar a caixa de mensagens. Repare que no código abaixo a caixa de mensagem vai ter uma div chamada spacer. O objetivo dessa div vai ser adicionar o espaço do elemento referência, para que o código funcione também em dispositivos móveis e ela deverá ficar fora do container da aplicação. Mais à frente isso vai ficar mais bem explicado.
Agora que o HTML está pronto, vamos para o CSS inicial. A primeira fase é estabelecer todo comportamento da div que estamos usando como container. Também precisamos adicionar uma cor ao plano de fundo, que vai ser a cor que usaremos como base para a área em lowlight.
A animação ficará a cargo do recurso transition do CSS3. Importante ressaltar que uma animação criada por CSS é mais leve e possui melhor frequência do que uma criada pelo Javascript. Isso porque o navegador tenta usar a renderização da GPU nesses casos. Dessa forma, vamos aplicar o parâmetro transition para aplicar o efeito.
O parâmetro position como absolute, com suas larguras e alturas mínimas marcados como 100% servirão para emular o comportamento do body. Isso só é necessário porque alguns sistemas costumam ter áreas menores do que a primeira dobra do navegador. Nesse caso, apenas, é necessário aplicar esses três parâmetros.
Já para o CSS do bloco de mensagem, você pode fazer algo do jeito que preferir. Apenas é importante lembrar que esse bloco deverá ficar com positionabsolute, ou fixed, dependendo de como for sua aplicação, para que possa se encaixar no local correto.
Criando as Funções Javascript
Agora basta que a gente crie as funções de aparecer e desaparecer o spotlight. Originalmente eu havia usado jQuery, pois ele possui soluções rápidas e funcionais como o offset nativo e outerWidth, mas com uma pesquisa rápida conseguir adaptar, apesar do código ter ficado um pouquinho maior.
O código consiste em 4 blocos:
Capturar largura e posição em relação ao document, do objeto referência (que será passado como parâmetro), fazendo os cálculos apropriados para adição do círculo. Você irá reparar que é usado como base o raio e não o diâmetro, pois é a referência do parâmetro clip-path;
Adicionar o clip ao container;
Adicionar os textos da mensagem a partir dos parâmetros passados;
Aplicar os estilos com os novos parâmetros. O timeout que precede a adição da classe show da mensagem existe para que o texto apareça após a transição do spotlight.
Por fim, basta adicionar uma função que restaure as configurações originais dos estilos e textos.
Como sempre, deixei o código completo para você testar ou copiar. No caso, o código está no jsfiddle e você pode visualizar abaixo:
Se você gostou da publicação, curta e compartilhe esta página com o maior número de pessoas. Aproveite e curta nossa página do Facebook.
ATUALIZAÇÃO: Que tal experimentar uma versão com blur, usando o html2canvas? Obs. É meio pesado. Dê preferência a usar em projetos para desktop.
Quem está estudando para ser designer, precisa estudar um assunto muito importante: Tipografia. E, por muitas vezes, precisa criar a própria família tipográfica, ou seja, como criar fontes. Além disso, podemos usar uma tipografia personalizada como ícones, tornando o site ou o sistema, desenvolvido em HTML5, ainda mais leve e bonito.
Este tutorial visa ajudar você com o processo técnico de converter os símbolos e criar sua própria fonte OTF, TTF, SVG, etc. Também um pequeno resumo de como implementar sua fonte em CSS3 para funcionar como ícone.
Para começar, você vai precisar instalar o Inkscape em seu computador. Baixe a versão mais recente do aplicativo Inkscape. Ele está disponível para Windows, Linux e Mac. Caso você use o MacOSX, será necessário instalar o XQuartz.
Você vai precisar também de algum programa para desenho vetorial, pode usar qualquer um de sua preferência, como o Illustrator, CorelDRAW ou o próprio Inkscape.
Crie seu símbolo para cada caractere
Primeiramente, é necessário criar os glifos. Você pode utilizar o Illustrator ou qualquer outro programa de ilustrações vetoriais. Exporte o arquivo no formato SVG. Você pode, se quiser, colocar todas as ilustrações no mesmo arquivo. Os desenhos não deverão ter contornos, somente preenchimento e devem ser compostos somente de preto.
Anexando Glifos aos Caracteres no Inkscape
No Inkscape, selecione File>New>fontforge_glyph. Essa opção adiciona as predefinições necessárias para criação coerente da família tipografica.
Com o documento criado, importe os glifos (File>Import) criado anteriormente por você. Caso você tenha feito todos os glifos no mesmo arquivo, o Inkscape irá importar todos agrupados na organização que foi salvo.
Quando o arquivo é importado, ele vem agrupado e com algumas configurações que o Inkscape não reconhece corretamente. Siga os passos abaixo para não haver erros e incompatibilidades:
Selecione o objeto, clique com o botão direito e escolha Ungroup. Faça isso quantas vezes for necessário até o objeto estar totalmente desagrupado;
Ainda com o objeto selecionado, vá no menu Path>Combine;
Em seguida vá no menu Path>Union;
Essas ações são necessárias para que o glifo se torne um unico objeto e possa ser anexado corretamente ao caractere escolhido.
O próximo passo é abrir a tela de edição de fontes. Selecione o menu Text>SVG Font Editor.
Será aberto o painel SVG Font Editor, que permite você criar uma fonte no formato SVG (interpretado pela maioria dos smartphones). A primeira coisa a se fazer é criar um nome e família para a fonte. No painel de edição de fonte, e com a guia GLOBAL SETTINGS ativada, clique no botão New. Em seguida, clique duas vezes no nome que foi gerado para que possa modificar e colocar o nome que você quiser.
Agora, ainda no mesmo painel, abra a guia GLYPH e clique no botão Add Glyph, ele irá criar uma nova linha na tabela Glyph name/Matching string. Você deve dar dois cliques no nome criado para editar o nome. Ao lado, você deve dar dois cliques no espaço vazio (logo abaixo de Matching String) e você descobrirá (sim, está escondido) que você pode editar esse campo. Simplesmente digite a letra a qual você quer assimilar o glifo.
No exemplo a seguir, assimilei o meu glifo de Editar a letra “e” minúscula. Vale salientar que você pode vincular a qualquer caractere que deseja, inclusive caracteres especiais como #,ø,®,†, etc.
Por fim, selecione o objeto (ou grupo) que você quer vincular ao caractere e clique no botão Get curves from selection. Para verificar se foi adicionado corretamente, digite, em Preview Text, o caractere que deseja verificar.
ATENÇÃO: Caso o ícone não apareça no Preview Text corretamente, como aparecer pequeno ou simplesmente não aparecer, você deve repetir os passos acima de Ungroup, Combine e Union do objeto. Provavelmente o objeto não foi preparado corretamente e por isso não relacionou como deveria.
Salve o arquivo normalmente. No formato padrão de SVG do Inkscape.
Transformando a fonte SVG em OTF ou TTF
O arquivo SVG está pronto. Agora precisamos converter para uma fonte usável pelo sistema operacional. Há muitos sites que fazem essa conversão.
O que recomendo que faça a conversão é o FreeFontConverter. Basta importar o seu arquivo SVG, escolher o formato (Aconselho OTF, primeiramente, que tem melhor acabamento) e depois clicar em convert. Ele fará o download automaticamente da fonte.
ATENÇÃO: Caso dê erro durante a conversão, você pode tentar salvar o arquivo em SVG Optmized, no Inskscape.
Você pode ver que a fonte pode ser instalada normalmente no seu sistema operacional.
Usando a fonte personalizada em CSS e usando-a como ícone
Para preparar um pacote com sua fonte personalizada, para ser usada em um site, o site FontSquirrel disponibiliza o WebfontGenerator. Para usá-lo basta enviar a sua fonte em OTF ou TTF, concorde com os termos e gere o kit.
Feito o download, está na hora de incorporamos a fonte no seu CSS. Para isso, basta você copiar as fonts que foram geradas no kit para uma pasta font (ou outra de sua preferência) no seu site e chamar via CSS.
E basta adicionar a tag Button com a classe determinada:
<button class=”editar”> </button>
ATENÇÃO (iOS): Devido a padrões do iOS, o ícone só vai aparecer se tiver uma cor de fundo (devido ao webkit-appearance), se você quiser, entretanto, usar a cor padrão, utilize o CSS abaixo:
button{ background-color: buttonface; }
Abaixo, você pode ver o exemplo usado no vídeo (no topo do post), que tem uma forma um pouco diferente de usar.
Qualquer dúvida, deixe um comentário, mande uma mensagem no skype ou por email. Siga @velhobit no Twitter e curta nossa página no Facebook.
Uma dúvida foi postada no grupo de Design e Programação de nossa página, lá no Facebook, hoje. Essa pergunta era referente a como selecionar de uma linha de uma tabela HTML?
Para tal, basta usar um pouco de Javascript e CSS.
Montando a Tabela
Vamos montar, para testar, uma tabela simples, respeitando a semântica HTML básica. Vamos aproveitar para colocar logo um botão, que vai ser por onde podemos visualizar os dados da linha selecionada:
Para sermos mais justos, vamos fazer o exemplo usando Javascript puro. No nosso exemplo, vamos contemplar a opção de selecionar uma única linha ou mais de uma linha, opção determinada apenas por um parâmetro. Ainda vamos ver como manipular os dados.
Inicialmente, precisamos capturar a tabela e adicionar, à ação de clique, uma função que adicione ou remova a classe de seleção:
var tabela = document.getElementById("minhaTabela");
var linhas = tabela.getElementsByTagName("tr");
for(var i = 0; i < linhas.length; i++){
var linha = linhas[i];
linha.addEventListener("click", function(){
//Adicionar ao atual
selLinha(this, false); //Selecione apenas um
//selLinha(this, true); //Selecione quantos quiser
});
}
A função selLinha() vai ser responsável por adicionar ou remover a class “selecionado” do nó. Passamos também um parâmetro que vai determinar se poderá selecionar mais que uma linha ou apenas uma. O primeiro laço, caso múltiplos seja falso, irá apenas desmarcar todos as linhas antes de marcar a linha clicada.
/**
Caso passe true, você pode selecionar multiplas linhas.
Caso passe false, você só pode selecionar uma linha por vez.
**/
function selLinha(linha, multiplos){
if(!multiplos){
var linhas = linha.parentElement.getElementsByTagName("tr");
for(var i = 0; i < linhas.length; i++){
var linha_ = linhas[i];
linha_.classList.remove("selecionado");
}
}
linha.classList.toggle("selecionado");
}
Agora vamos adicionar uma função ao clique do botão para que a gente possa visualizar os dados selecionados. Para isso, iremos justamente capturar apenas as linhas que tiverem a class “selecionado” e, através de um laço, vamos concatenar os valores dentro dos nós <td> da(s) linha(s) selecionada(s).
/**
Exemplo de como capturar os dados
**/
var btnVisualizar = document.getElementById("visualizarDados");
btnVisualizar.addEventListener("click", function(){
var selecionados = tabela.getElementsByClassName("selecionado");
//Verificar se eestá selecionado
if(selecionados.length < 1){
alert("Selecione pelo menos uma linha");
return false;
}
var dados = "";
for(var i = 0; i < selecionados.length; i++){
var selecionado = selecionados[i];
selecionado = selecionado.getElementsByTagName("td");
dados += "ID: " + selecionado[0].innerHTML + " - Nome: " + selecionado[1].innerHTML + " - Idade: " + selecionado[2].innerHTML + "\n";
}
alert(dados);
});
Vamos Testar?
ID
Nome
Idade
01
Rodrigo
33
02
Taynara
21
03
Raveny
22
04
Sérgio
51
05
Alice
20
No entanto, se você preferir ver todo código completo, acesse o JsFiddle incorporado abaixo:
Disclaimer: If you are coming from an english or international chat/group, please roll to jsfiddle at the end of this post and get all comments and explanations in english or access jsfiddle link.
Bibliotecas de gráficos existem aos montes. A maioria pesada e com poucas (ou complexas) opções de personalização. De modo que, pensei, será que é possível usar a animação do CSS para criar um gráfico leve? Como exercício, talvez eu pudesse desenvolver uma solução de gráfico radial que pudesse funcionar bem. Esse questionamento veio a partir da pergunta de uma pessoa, em um grupo, que queria criar um loading infinito com CSS.
Criando o CSS
Para poder criar a animação do load, pensei em diversas formas que já são usadas como solução, como o gradient ou gambiarras com contornos, mas eles não usam realmente o conceito da animação do raio a partir do centro. Para resolver, pensei em apelar para a trigonometria. Dividi então o círculo em 4 triângulos retângulos.
A partir daí podemos considerar a animação a partir de cada dos vértices da hipotenusa, se abrindo do raio, formando o triângulo retângulo, como no exemplo abaixo:
OK, conseguimos criar os triângulos com o clip-path do CSS. Graças ao ele podemos colocar caminhos de uma imagem a partir de vértices. Mas como colocar isso nos 4 triângulos? Não faria o menor sentido colocar os triângulos um do lado do outro. Como fazer então para utilizar um caminho completo para dar o efeito de transição radial?
Para isso, basta fazermos um cálculo simples. Quantos vértices seriam necessários para criar um polígono que dê a volta? Bem, basta contarmos o vértices do quadrado (4) mais um ao centro que define os triângulos e mais um para fechar a animação. Ou seja, precisamos de um hexagono.
Agora basta manipular os vértices do hexagono para se comportar similar ao triângulo retângulo, levando os pontos do vértice, em fila, sempre ao próximo ponto do quadrado.
Basta colocar agora a animação como linear, para evitar as pausas (o padrão possui um ease) e adicionar um elemento acima com um overflow: false e um border-radius: 50%, de forma a ficar realmente circular:
Controlando com Javascript
Podemos fazer um jeitinho para que o Javascript controle a animação. Para isso, podemos usar algumas propriedades que controlam a animação. Em especial, vamos poder pausar e continuar a animação, através do parâmetro animationPlayState.
O código completo está disponível pelo jsFiddle. O código está todo comentado e pode ser testado diretamente abaixo:
0%
Obs. Não use filtro blur ou muitas sombras se quiser compatibilidade com o Safari iOS.
Provavelmente, esta não é a melhor solução para criação de um gráfico radial. Mas é interessante vermos que podemos desenvolver novas soluções, e mais leves, a partir de tecnologias mais recentes. Se você gostou, compartilhe, se tem alguma dúvida, comente. Aproveite para curtir nossa página do Facebook e entrar no grupo, através do link abaixo.
Todos sabemos que transições são importantes para diminuir a sensação de repentinidade para o usuário e preparar o cérebro para, aos poucos, compreender a nova informação.
Porém, o transition do CSS3 não funciona uniformemente com todos os parâmetros. Quem nunca quis que um elemento HTML em tela sumisse aos poucos?
O mais comum é utilizar o bom e velho display: none;, porém este simplesmente não funciona ao aplicar um transition. Usemos a lógica de que a passagem de um bloco para um nada não é uma transição. No CSS, uma transição inicialmente precisa ser um comando baseado em números.
Como usar o CSS para fazer a transição de um objeto sumir?
Para realizar esta ação, vamos usar um pequeno truque. Ao invés de simplesmente não mostrar o objeto, vamos desativar sua propriedade de ser manipulável com o mouse ou toque. Para isso podemos usar a propriedade pointer-events, ficando:
Para fazer o objeto desaparecer vamos usar um pouco de JavaScript apenas para adicionar ou remover a classe CSS da div:
function ocultar(){
var element = document.getElementById("idDaDiv");
element.classList.add("hide");
}
function mostrar(){
var element = document.getElementById("idDaDiv");
element.classList.remove("hide");
}
Vamos testar?
Mas e se você quiser que ele também não ocupe um espaço? Pois pode ficar um buraco perturbador. Nesse caso você pode modificar a altura do elemento para poder aproveitar melhor esse espaço. Todavia, a propriedade height não é animável (talvez por possuir uma propriedade auto). Para esse caso, você precisa usar o max-heightpara realizar esta animação.
Lembre-se que para evitar que o conteúdo seja mostrado independente da div que você vai aplicar a transição, será necessário colocar a propriedade overflowcomo hidden. Também é importante salientar que a propriedade max-height só é animável caso você use as medidas fixas em pixels. Como ele determina apenas o tamanho máximo, não vai influenciar se você colocar um tamanho maior que o esperado, o que se torna funcional também para responsividade.
Vamos Testar?
Se acredita que essa dica de CSS é útil para mais alguém, compartilhe e curta esta página!
Designers e desenvolvedores constantemente precisam debugar seus sistemas para encontrar erros ou relatar informações para outros desenvolvedores da equipe. Para otimizar o trabalho do profissional web, o Console do navegador de sua preferência permite adicionar diversas opções e comandos.
Se você digitar apenas console, no Console, você poderá ver a gama de Métodos que o Objeto tem disponível.
Neste tutorial, mostraremos alguns métodos e como utilizá-los de forma a permitir uma finalização que ajude o designer e desenvolvedor a obter respostas mais ideais para o problema. Você pode testar os comandos aqui mesmo, basta pressionar CTRL+SHIFT+I, ou simplesmente clicar com o botão direito e inspecionar elemento. Ao clicar na aba console, você poderá digitar os comandos e visualizar os resultados.
O método log é o mais básico e permite que você adicione uma
console.log("Oi Mundo");
Porém o simples log de texto não necessariamente pode ser o ideal. Você pode, se assim precisar, adicionar alguma informação visual para que o log seja lido de forma mais intuitiva. Para isso, basta usar uma string de formato %c e instruções CSS. O exemplo abaixo, colocará o texto branco, negrito e com sombra:
Passando para um ponto mais sério, você também pode visualizar no console objetos diferentes de Strings. É possível, por exemplo, visualizar um objeto JSON, o que é algo muito funcional para visualizar o resultado de métodos AJAX.
console.log({teste: 'texto de teste', valor: 22})
No caso de você colocar um JSON ou um array, você poderá estender e visualizar os detalhes desse objeto.
Erros e Alertas
Além do log, o Console também tem objetos que servem como point-breaks para testes e validações. Os métodos error() e warn() permite que você adicione informações de forma mais relevante e alertiva. Esses dois métodos também permitem usar a string de formato %c .
Você deve notar que, ao lado da linha onde é demonstrada o alerta/erro, há uma palavra anonymous, entre parênteses. Essa informação define qual o método relacionado com a origem do erro. Por exemplo, se o erro ou alerta ocorrer dentro de um método, será mostrado o método onde ocorreu o erro.
var teste = function(){console.error("Oi")};
teste();
Essa informação é extremamente útil para auxiliar o desenvolvedor a saber qual a origem do problema.
Identação
Outra opção muito útil para definir detalhes no log é a identação. Na verdade, é uma organização em grupo e subgrupos das informações. Dessa forma, o desenvolvedor pode apresentar dados mais organizados para o testador.
O método table() permite você mostrar informações de dados em uma tabela. Ele é um método muito útil para ler objetos, JSON e vetores. De forma automática, esse método irá reconhecer os dados e organizá-los nessa tabela. Se por acaso você passar um array, as chaves mostradas serão apenas os índices numéricos.
O cálculo de tempo é fundamental para medir performance. O método time() permite usar uma etiqueta para poder iniciar e finalizar uma contagem de tempo. Para isso, basta seguir o exemplo abaixo:
console.time("calcularTempo");
for(var i; i < 100; i++){
}
console.timeEnd("calcularTempo");
Esse tempo será calculado baseado no tempo que a máquina cliente demora para realizar determinada ação, por isso, esse valor pode variar de computador para computador.
Strings de Substituição
Além do %c, usado para CSS, você pode usar outras Strings com objetivos específicos.
String
Descrição
%o or %O
Exibe o objeto e permite você visualizar o objeto ao clicar nele.
%d or %i
Exibe um inteiro.
%s
Apenas uma string.
%f
Exibe um ponto flutuante
Dependendo do navegador (como o Firefox), você pode ter opções adicionais de máscara quanto aos valores. Para saber os detalhes, você precisa verificar na documentação do navegador, mas são muito similares as Strings usadas no console em C e no Java.
Por exemplo:
console.log("O valor da compra de %d %s é de %f, com os dados %o", 3,'carros',38500.30,{'carro':'fusca'});
Concluindo
O uso apropriado do console do navegador pode ajudar os desenvolvedores a fazerem testes e obterem resultados mais fiéis destes. Além disso, pode exibir mensagens importantes para alertar um usuário leigo a não mexer nessas opções (como faz o Facebook). De qualquer forma, o conhecimento das opções do console são fundamentais para qualquer profissional web que trabalha com front-end.
Quem trabalha com sites, principalmente com blogs, deve-se focar muito na facilidade da leitura. Por isso, resolvemos separar para vocês algumas dicas para quem trabalhar com templates ou blogs otimizarem seus textos de forma a ficar melhor para o leitor.
1 – Tamanhos de Fontes, Espaçamentos e Entre Linhas
Uma das coisas mais irritantes em blogs e sites de notícia é a forma como as vezes eles comprimem as fontes para poder encaixar mais anúncios. Esses textos acabam por ser cansativos de ler e, por conta disso, vale a pena investir um pouco de tempo e cuidado para melhorar essa leitura.
Cada família tipográfica possui seu próprio espaçamento e tamanho, por isso, as medidas podem variar de acordo com a que você escolher usar. Muitos sites utilizam tamanhos de 12px com line-height normal. Apesar de caber mais informações dessa forma, isso causa uma péssima experiência.
No geral, devemos aumentar o espaçamento entre-linhas e manter um bom tamanho de fonte.
Obs. É importante declarar a metatag para o escalonamento, em seu <header>:
O importante é que se caso você queira aumentar ou diminuir a fonte, por algum motivo, você deve proporcionalmente alterar também o line-height.
Em algumas tipografias, pode ser necessário diminuir ou aumentar o letter-spacing. Essa propriedade indica o espaçamento entre as letras. Sites que usam uma tipografia serifada pode se beneficiar, em alguns casos, do aumento do letter-spacing. O contrário para algumas famílias sem serifa e scripts.
Não há problemas em usar frações ou unidades de medida quebradas. Ao contrário, geralmente esses pequenos pontos o ajudam a fazer a tipografia melhor.
Para testar com mais facilidade, você pode usar o console do Google Chrome (botão direito e inspecionar elemento), mudando os valores em tempo real.
2 – Justificação de Texto e Separação Silábica
Sabemos que em desktops e laptops, temos espaço horizontal sobrando. Tanto que restringimos o espaço da leitura para evitar ficar linhas muito longas. Por conta disso, não utilizamos textos justificados para essas mídias.
Porém, dispositivos móveis, como tablets e smartphones, a coisa muda de figura. Estamos acostumados a ler textos justificados em ambientes que estão a certa distância e pouco espaço horizontal, por uma questão organizacional da própria vista. Com o CSS3, e adoção de certas propriedades pelos principais navegadores para dispositivos móveis, podemos adicionar separação silábica na justificação, deixando o texto mais simples de ler e sem espaçamentos perturbadores entre as palavras.
Para isso, basta adicionar, através de media-queries:
/**Apenas em Dispositivos Móveis**/
only screen
and (-webkit-min-device-pixel-ratio: 1)
and (max-device-width: 640px)
and (min-device-width: 320px),
screen and (max-width: 600px){
.post p{
text-align: justify;
-webkit-hyphens: auto; /**Chrome/Android**/
-moz-hyphens: auto; /**Firefox**/
-ms-hyphens: auto; /**Edge**/
hyphens: auto; /**Outros**/
}
}
Obs. Algumas versões do Android não são compatíveis com o hyphens. Então verifique se vale a pena para você de acordo com seu público.
3 – Tipografias Especiais (WebFonts)
A maioria das tipografias funcionam de forma razoável, mas você pode querer personalizar para se adequar mais ao seu blog, site ou sistema.
A forma mais barata e simples de fazer isso é através do site Google WebFonts. Lá você pode encontrar as fonts de forma bem simples e implementar facilmente em seu código.
Basta escolher uma font desejada e clicar no +, no canto superior direito do bloco específico.
Uma vez escolhida a(s) font(s) desejada(s), basta você clicar na janela que abre na parte inferior e seguir as instruções. Basicamente, você deve adicionar a tag de <script> em seu <header>. Uma vez feito isso, basta chamar a font-family, no CSS, no modo que está no exemplo.
Obs. É recomendável que você vá na aba Customize (Personalizar) para que você desmarque as fonts não desejadas. Lembre-se que quanto maior a quantidade de variações, mais pesado vai ser para abrir seu site.
Outra opção, que segue mais ou menos a mesma lógica do Google Webfonts é o Adobe Typekit. O Adobe Typekit está disponível para todos os usuários pagantes da suite Adobe. Ele pode ser acessado simplesmente abrindo janela do CreativeCloud, no Mac ou Windows, e clicando no botão Gerenciar fontes.
Ao fazer isso, o usuário é automaticamente encaminhado para o site do Typekit da Adobe, onde ele pode criar um novo Webkit. Nele você pode criar ou manipular um kit já existente.
Caso você clique em + Create new kit, você será direcionado a um popup com as instruções para você preencher seu site ou IP para trabalhar com a tipografia. Esse cadastro é necessário pois você tem um número limitado de kits que você pode aplicar em sua conta da Adobe.
Uma vez confirmado, o site te encaminhará para a página onde você receberá a tag <link> que você deverá colocar em seu <header>. Uma vez feito isso, você já pode começar a escolher as fonts que vai usar na página. Por fim, você pode visualizar a forma de aplicação e demais opções no menu no canto esquerdo. Ao finalizar, lembre-se de clicar no botão PUBLISH, pois só então ele ficará disponível no seu site.
Agora, se você já tem uma font legal ou a encontrou em um site como o DaFont, você pode utilizá-la também em seu site ou blog. Para preparar um pacote com sua fonte personalizada, para ser usada em um site, o site FontSquirrel disponibiliza o WebfontGenerator. Para usá-lo basta enviar a sua fonte em OTF ou TTF, concorde com os termos e gere o kit.
Feito o download, está na hora de incorporamos a fonte no seu CSS. Para isso, basta você copiar as fonts que foram geradas no kit para uma pasta font (ou outra de sua preferência), em seu site. Caso esteja usando o WordPress, coloque dentro da pasta dos eu tema. Em seguida, é só chamar via CSS.
@font-face {
font-family: "minhafonteregular";
src: url("fonts/minhafonte-webfont.eot");
src: url("fonts/minhafonte-webfont.eot?#iefix") format("embedded-opentype"),
url("fonts/minhafonte-webfont.woff") format("woff"),
url("fonts/minhafonte-webfont.ttf") format("truetype"),
url("fonts/minhafonte-webfont.svg#minhafonteregular") format("svg");
font-weight: normal; /**Você vai precisar especificar o weight para cada espessura de font diferente**/
font-style: normal;
}
Para usar onde você quiser, basta chamar o font-family, através do nome que você determinou no font-face.
Evite contrastes de cores. Nunca deixe o branco sobre preto ou vice-versa, use tons cinzas ou ton sur ton. Altos contrastes pode deixar a leitura mais cansativa.
Evite cores intensas. Não use cores berrantes na tipografia. Se precisar destacar algo opte sempre por algo mais pastel ou sereno.
Abuse dos espaçamentos. Tome cuidado ao deixar imagens muito próximas do texto, principalmente de anúncios, para não confundir. Lembre-se, a boa tipografia não é definida pelo espaço em que ela ocupa, mas pelo espaço entre ela.
Então, o que achou dessas três dicas? Gostaria de outras dicas como essa? Então compartilhe com quem você acha que se interesse e deixe um comentário.
O final do ano é o momento perfeito para aprender CSS com efeitos divertidos para o Ano Novo. Graças aos navegadores modernos, podemos fazer animações e efeitos interessantes e divertidos de forma leve e funcional. Que tal fazer um efeito neon divertido e interessante sem nenhum framework?
ATENÇÃO: Devido a quantidade de código e efeitos nesta página, pode apresentar lentidão se você for testar os exemplos abaixo em dispositivos móveis mais antigos (e até alguns mais recentes). Se você fizer o uso comedido, você não encontrará esse tipo de problemas.
Adicionando a Logo SVG
Para poder funcionar de forma leve, precisamos que a imagem que vamos adicionar seja em SVG. Dessa forma podemos manipular seus parâmetros de forma simples e adicionar efeitos.
Vários programas permitem exportar os objetos em SVG. Inkscape (que é de código aberto e gratuito), Illustrator ou CorelDRAW, todos eles possuem uma área de exportação específica.
No Illustrator, você pode usar a opção Exportar para Telas. Importante salientar que, para ficar com um melhor acabamento, coloque apenas contornos, sem preenchimento no objeto.
Opção de Exportar para Telas, no Adobe Illustrator CC
O resultado será um arquivo de extensão SVG. O interessante é que você pode abrir esse arquivo em qualquer editor de texto e ver os detalhes. Você deverá guardar esse arquivo para uso posterior no HTML.
Montando o HTML
Uma vez criado o SVG, precisamos montar o HTML. Para isso, basta criar a área e organizar as classes e ids de forma apropriada, ficando:
Em seguida, vamos colocar o SVG acima do h1. Para isso, basta copiar o código gerado acima do SVG. Em seguida, adicione a classe específica que vamos usar no CSS e mude (caso necessário) para uma id mais fácil de compreender.
Porém, para ficar mais legal, devemos usar uma tipografia mais apropriada. No Google Fonts podemos encontrar tipografias interessantes, com cantos arredondados, que nos darão resultados mais interessantes.
Uma vez escolhida a fonte, clique no Select this Font (no Google Fonts) e ele vai dar um código similar a este abaixo, que você deverá colocar dentro do header do seu HTML.
Neste momento precisamos pensar em instâncias. O Neon pode estar ligado ou desligado. Por isso, precisamos pensar nos objetos das duas formas.
Leia os comentários no código para entender o seu funcionamento.
<style>
/*
Configuração do container
onde ficará os Neons
*/
.area_neon{
background-color: #0F0F0F;
font-family: 'Nunito', sans-serif;
left: 0;
right: 0;
bottom: 0;
top: 0;
padding: 20px;
padding-top: 40px;
position: absolute;
}
/*
Base do Neon apagado (TEXTO).
Iremos simular um efeito as lâmpadas
de neon apagadas.
*/
.area_neon h1.neon{
font-weight: 400;
font-size: 7em;
/**
O filtro BLUR deve ser mantido em 0, porque
iremos usa-lo quando ligado.
Para a animação de transição funcionar
corretamente, ele precisa ser declarado
mesmo desligado.
**/
filter: blur(0);
/**
Para simular a lâmpada, colocaremos um
contorno bem suave, para delimitar o
objeto, porém com o fundo
quase transparente
**/
-webkit-text-stroke: 1px rgba(255,255,255,0.1);
color: rgba(255,255,255,0.1);
/**
O TextShadow e o BackgroundClip
irá servir para colocar um efeito de
profundidade no objeto
**/
text-shadow: -5px 5px 5px black;
-webkit-background-clip: text;
/**
O Transition é responsável por
adicionar uma sensação de animação
entre os eventos.
**/
transition: all ease 1s;
}
/**Texto com o Neon Ligado**/
.area_neon h1.neon.on{
/**
Será fundametal o desfoque para dar
a sensação de luminosidade.
**/
filter: blur(1px);
/**
Um objeto com luz precisa possuir seu
centro branco, caso contrário, vai dar
a sensação de que está apenas com um
sombreamento e não com luz.
Por isso, devemos manter a cor branca,
que vai representar o centro luminoso,
e a borda da cor que desejamos usar.
O TextShadow será a luminosidade do
ambiente vinda da luz do Neon.
O contorno e a sombra deverão ser
da cor que você escolher para o neon,
mas a cor do texto deverá ser sempre
branca.
**/
color: white;
-webkit-text-stroke: 1px #00FFB3;
text-shadow: 0 0 5px #CCFFF7, 0 0 200px #00FFDB;
-webkit-background-clip: none;
}
/**
O neon para a imagem SVG terá que ser
um pouco diferente, mas podemos
manter a mesma lógica.
**/
.area_neon svg.neon_img{
width: 50%;
margin: 0 auto;
/**
Ao invés de usarmos color, usaremos
o parâmetro FILL para poder determinar a cor
do objeto e o STROKE para a borda.
Porém usaremos as mesmas lógicas
usadas no Texto
**/
fill: rgba(255,255,255,0.1);
stroke: rgba(255,255,255,0.1);
filter: blur(0) drop-shadow(-5px 5px 5px black);
/**
Usaremos o drop-shadow aplicado no filter,
para poder ter o efeito similar ao do texto.
**/
transition: all ease 1s;
}
/**SVG com o neon Ligado**/
.area_neon svg.neon_img.on{
/**
Aqui aplicamos a mesma lógica usada
no texto, porém adaptada para o tipo de objeto.
**/
fill: white;
stroke: #F0FF00;
filter: blur(1px) drop-shadow(0 0 10px #F0FF00) drop-shadow(0 0 200px #F0FF00) ;
}
</style>
Ligando o Neon
Vamos usar o Javascript puro para ligarmos a luz. Tudo o que precisamos é adicionar on ao parâmetro classe das tags HTML correspondentes.
Para isso vamos criar a função turnOn():
<script>
function turnOn(){
var texto = document.getElementById("texto_neon");
texto.className = texto.className.concat(" on");
var imagem = document.getElementById("img_neon");
imagem.setAttribute("class", imagem.getAttribute("class").concat(" on"));
//Repare que temos que usar setAttribute no SVG. Isso porque o SVG não possui o mesmo comportamento de uma tag HTML comum
}
</script>
