Recentemente, eu estava dando uma olhada no Google Plus porque eles implementam alguns efeitos incríveis. Abri o console e vi a seguinte mensagem:
AVISO!
O uso desse console pode permitir que os invasores se façam passar pelo senhor e roubem suas informações usando um ataque chamado Self-XSS.
Não insira ou cole códigos que o senhor não entende.
Não fiquei surpreso ao ver essa mensagem, mas o que notei foi que o texto era vermelho e o fundo era amarelo. O texto era até um pouco maior. Como eles fizeram isso? Com muita facilidade:
console.log("%c%s",
"color: red; background: yellow; font-size: 24px;",
"WARNING!");
O primeiro argumento é a ordem do estilo e da mensagem, o segundo é o conjunto de estilos e o último é a mensagem desejada.
Por que o senhor gostaria de usar isso? Se isso o ajudar a identificar as informações de depuração mais facilmente no console, o senhor pode considerar chamar mais atenção para algumas mensagens!
Gradientes CSS
Com CSS border-radiusNo artigo anterior, mostrei aos senhores como o CSS pode preencher a lacuna entre o design e o desenvolvimento, adicionando cantos arredondados aos elementos. Os gradientes CSS são outra etapa nessa direção. Agora que os gradientes CSS são compatíveis com o Internet Explorer 8+, Firefox, Safari e Chrome…
Demonstrações favoritas de Chris Coyier no CodePen
David me perguntou se eu gostaria de fazer um guest post escolhendo algumas das minhas canetas favoritas do CodePen. É uma tarefa difícil! São tantas! Mas consegui escolher algumas que me surpreenderam nos últimos meses. Se o senhor…
MooTools: Set Style Per Media (Definir estilo por mídia)
Aposto que um dos métodos mais usados do MooTools é o
setStyle()que permite que o senhor defina declarações de estilo CSS para um elemento. Uma das limitações do métodosetStyle()é que ele define o estilo específico para todas as mídias.