🖌 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.

Blogando na aula do Mapa

Isso foi postado muito depois de ter sido escrito, mas o Blogger tem um recurso safadinho que permite colocar a data e a hora que eu quiser no post, então coloquei a data e a hora em que escrevi isso.

Queria ter mais tempo para estudar o que gosto, trabalhar no que gosto, conviver com quem eu gosto. Estou com a sensação estranha de que estou vendo a vida passar. É só a sensação porque na prática é diferente.

Estou com um péssimo pressentimento no meu trabalho, parece que não tenho função definida. Na minha carteira de trabalho sou Web Designer, mas na prática sou mais uma auxiliar-de-qualquer-coisa: digitação, clipagem, revisão de textos, pesquisas, webdesign… Estão me tratando como se eu fosse uma estagiária. Humilhante!

Estou fazendo uma disciplina específica super-ultra-mega-power chata para o concurso do Mapa. Só fiz inscrição nesse concurso porque não tinha grana para me inscrever no concurso da câmara federal (que tem algumas vagas para jornalistas) e já tinha ganho o cursinho de um primo que foi pro exterior.

A aula está tão interessante e divertida que trouxe várias revistas, um livro e mesmo assim não agüentei de tédio: peguei papel e lápis para blogar, mesmo longe da web.

O que quero é fazer um curso de web no Senai. Em junho termina meu cursinho e vou emendar com algum curso realmente interessante e com conhecimentos que eu possa utilizar a curto prazo. Também estou com vontade de fazer outra graduação, só que dessa vez tecnológica e na área de informática. O problema é que para tudo isso preciso de dinheiro e, como já disse, estou com um péssimo pressentimento no meu emprego maluco. Também há uma vontade reprimida de fazer pós-graduação em Marketing e/ou Assessoria, mas a mensalidade é maior que o meu salário, só vai rolar quando eu tiver um emprego decente ou passar em um concurso.

O que preciso muito mesmo também é de um computador próprio para estudar, de preferência um notebook. Nem falo em Internet ainda porque na casa da minha tia é complicado…

Pelo MSN meu pai deixa no ar a possibilidade de vir morar em Brasília com a Herica…