📋 Parem de pedir números de endereço, RG e telefone fixo

Foto de Alex Green

Eu já fiz minha Carteira de Identidade Nacional, mas quando vou preencher os cadastros, ainda me pedem número de RG e CPF, então acabo preenchendo o mesmo número nos dois campos. Nos cadastros antigos, ainda estão meus RGs de Goiás ou do DF, o problema é quando preciso comprovar que eu sou eu e a nova identidade não mostra esses números antigos.

🖌 CSS | Personalizando a linha horizontal (hr) com cores e listras

Este post é uma continuação do que escrevi em 2009:

• HTML | Linha horizontal

Isso significa que aqui vamos evoluir nos exemplos e brincar um pouco com gradientes e sombras.

🔡 26 sugestões de fontes sem serifa para seu blog

Atualizado dia 02/10/2017.

Acredito que as melhores fontes para o texto de qualquer site são aquelas sem serifa (sans-serif) e que não são monoespaçadas (monospace) porque são bem legíveis e tornam o texto bastante agradável.

CSS: cor de fundo em degradê

Esse recurso funciona nas versões atuais do Firefox, do Chrome e também no Internet Explorer 11.

🍭 CSS | Barra de rolagem colorida no Google Chrome

Tutorial atualizado dia 14/05/2022.

Este post poderia ter sido publicado mais cedo, só que eu fiquei empolgada testando 1001 peruices com o código e criando exemplos. Adoro barra de rolagem colorida! #prontoconfessei

Backgrounds com textura giz

Tem imagem que dá vontade de ficar o resto da vida colorindo com todas as paletas possíveis. Essa textura de giz é uma delas. Para não dizer que foi tempo perdido, coloco os patterns aqui para você baixar.

Novo avatar e favicon

Este post é só para avisar oficialmente que cansei de escolher a foto menos bizarra e ainda passar horas editando para usar em perfil de rede social. Agora eu sou um quadrado #99cc00.

CSS: sombras em caixas e imagens

Exemplo de regra CSS para colocar sombra em uma caixa com a propriedade box-shadow:

.sombra {box-shadow:5px 10px 15px 6px #880088 inset;}

Tipos de listas numeradas com CSS

Para aprender a fazer listas numeradas, visite primeiro o post Como criar listas numeradas. Aqui vou mostrar apenas 19 opções de numeração que temos em CSS usando a propriedade list-style-type.

Mudar cor de negrito, itálico e demais elementos

Fonte: Jonan Macedo

Este é um post para quem está começando a aprender CSS e quer saber como mudar as cores das palavras destacadas usando a folha de estilos.

Crie imagens para background on-line

Mesmo quem não desenha pode criar backgrounds patterns (imagens de fundo lado a lado) bonitos e inéditos. Selecionei quatro sites com os quais podemos gerar as mais variadas imagens. Eles são tão fáceis de usar que dispensam tutoriais. Aproveitei para criar alguns exemplos que você pode baixar gratuitamente.

🍨 Tabela Candy Colors em RGB

As candy colors (cores de doce) não são tão apagadas quanto os tons pastéis nem tão chamativas quanto as cores vibrantes. Têm esse nome porque lembram guloseimas como sorvete, chiclete, suspiro, maria-mole, jujuba, amendoim colorido e tantos outros.

O novo editor de templates do Blogger: minhas considerações

Na última semana a comunidade de usuários Blogger comemorou, com razão, o novo editor de templates do Draft Blogger, cujo link no menu Layout se chama Designer do Modelo.

Apesar de facilitar bastante para todos nós, sem dúvida os blogueiros leigos nas linguagens de formatação são os mais beneficiados. Coisas que antes eram bastante complicadas, como mudar a largura do template e/ou das colunas, agora podem ser feitas com apenas alguns cliques.

[Indisponível] Semana Blogger Templates do Insight

Este é um post sobre templates para Blogger.

Eu sou uma péssima designer, por isso faço questão de ter excelentes parceiros que compensam isso, um deles é o Insight, que realizou de 19 a 25 de outubro de 2009 a Semana Blogger Templates.

Como criar tabelas

Muitas pessoas se enganam e acham que tableless é desenvolver sites sem usar tabela alguma. Traduzindo, tableless significa menos tabelas e não ausência de tabelas.

Como colocar sombra no texto

Conheço a propriedade text-shadow desde que me entendo por aprendiz de CSS, mas só agora o seu uso é viável por estar funcionando bem nos navegadores modernos que buscam ser fiéis aos padrões W3C.

Apesar de ainda não funcionar no Internet Explorer, os usuários dos navegadores Chrome, Firefox, Opera e Safari já se beneficiam desse recurso, que é cada vez mais utilizado em webdesign.

🎨 Como usar as cores em RGB

Personalizar as cores de muitos dos códigos disponibilizados neste blog exige o entendimento das cores RGB ou o acesso à tabela de cores para acessar esses códigos.

👩‍💻 HTML | Elementos inline que mudam o texto

Atualizado dia 24 de maio de 2018.

Melhore seu blog com simplicidade…

Já escrevi aqui sobre a diferença entre block e inline. Neste post vou dar exemplos com as tags inline, que são muito úteis na edição de qualquer texto HTML, inclusive blogs:

Negrito

Código:

Com a tag b o texto fica <b>negrito</b>.

Ou ainda:

Com a tag strong o texto fica <strong>negrito</strong>.

Resultado:

Com a tag b o texto fica negrito.

Citação*

Código:

Com a tag q o texto fica <q>entre aspas</q>.

Resultado:

Com a tag q o texto fica entre aspas.

Itálico

Código:

Com a tag cite o texto fica <cite>itálico</cite>.

Com a tag em o texto fica <em>itálico</em>.

Com a tag i o texto fica <i>itálico</i>.

Com a tag var o texto fica <var>itálico</var>.

Com a tag dfn* o texto fica <dfn>itálico</dfn>.

Resultado:

Com a tag i o texto fica itálico.

* <dfn> não funciona no Chrome, nem no Safari.

Riscado

Código:

Com a tag del o texto fica <del>riscado</del>.

Com a tag s o texto fica <s>riscado</s>.

Resultado:

Com a tag s o texto fica riscado.

Sublinhado

Códigos:

Com a tag ins o texto fica <ins>sublinhado</ins>.

Com a tag u o texto fica <u>sublinhado</u>.

Resultado:

Com a tag u o texto fica sublinhado.

Monoespaçado

Com a tag code (código) o texto fica <code>monoespaçado</code>.

Com a tag code (código) o texto fica monoespaçado.

Com a tag kbd (keyboard - teclado) o texto fica <kbd>monoespaçado</kbd>.

Com a tag kbd (keyboard - teclado) o texto fica monoespaçado.

Com a tag samp (exemplo) o texto fica <samp>monoespaçado</samp>.

Com a tag samp (exemplo) o texto fica monoespaçado.

Tamanho do texto

Códigos:

Com a tag small o texto fica <small>menor</small> do que estava antes.

Com a tag big o texto fica <big>maior</big> do que estava antes.

Resultado:

Com a tag small o texto fica menor do que estava antes.

Com a tag big o texto fica maior do que estava antes.

Nível do texto

Código:

Com a tag sub o texto fica _{um nível abaixo} do que estava antes.

Com a tag sup o texto fica ^{um nível acima} do que estava antes.

Resultado:

Com a tag sub o texto fica _{um nível abaixo} do que estava antes.

Com a tag sup o texto fica ^{um nível acima} do que estava antes.

Sentido do texto

Código:

Com a tag bdo dir="ltr" o texto fica <bdo dir="ltr">da esquerda para a direita</bdo>.

Com a tag bdo dir="rtl" o texto fica <bdo dir="rtl">da direita para a esquerda</bdo>.

Resultado:

Com bdo dir="ltr" o texto fica da esquerda para a direita.

Com bdo dir="rtl" o texto fica da direita para a esquerda.

<bdo dir="rtl"> inverte o texto para nós, ocidentais, que escrevemos da esquerda para a direita, enquanto <bdo dir="ltr"> serve para inverter textos árabes e hebraicos, por exemplo, que são escritos da direita para a esquerda.

Fonte, cor e tamanho

Código:

A tag font <font color="#ff00ff" size="4" face="comic sans ms">muda cor, tamanho e fonte</font> sem precisar de CSS.

Resultado:

A tag font muda cor, tamanho e fonte sem precisar de CSS.

---

Apesar de modificarem o texto sem precisar de CSS, todas essas tags podem ser personalizadas na folha de estilos de seu blog ou site para que fiquem do seu jeito.

🖼️ CSS: aprendendo a usar bordas

Foto de Mike B no Pexels

Aprender a usar bordas em CSS é um passo imprescindível para deixar a aparência do blog do seu jeito e sem depender de templates prontos. Se forem bem utilizadas elas conseguem deixar o leiaute bonito, leve e sem necessitar de muitas imagens.

Novo logo do twitterfeed

Não sei se é exatamente um novo logo ou o primeiro, já que antes o twitterfeed usava uma montagem com o logo do Twitter.