👩🏽‍💻 CSS | Combinando outline e border

Foto de Medhat Ayad no Pexels

Recentemente, estive me atualizando sobre outline, que em português tem sido traduzido como contorno. O contorno é uma linha que não ocupa espaço e está além da borda. Uma moldura, se pensarmos num quadro. Quando usamos as duas propriedades, a gente vê uma borda em volta da borda.

🖥️ Neocities é o museu da internet dos anos 2000, só que hoje

pomelo.lol: site proibido para quem tem epilepsia fotossensível

Fiquei encantada quando descobri o Neocities, uma hospedagem gratuita de sites que incentiva os usuários a fazerem as páginas "na unha", digitando cada caractere de código, como fazíamos antigamente. O resultado: sites pessoais parecidos com os que tínhamos nos anos 2000.

👩🏽‍💻 CSS | Um pouco mais sobre text-decoration e text-underline

Fiquei 17 anos sem me atualizar sobre text-decoration. Em 2008, fiz um post sobre o uso dessa propriedade em links que é exatamente o que eu sabia até semana passada.

👩🏽‍💻 CSS | Enfeitando com text-emphasis

Correção feita no dia 21/04/2025.

Enfeite seu texto com flores e borboletas, mas só se quiser. Foto de Pixabay.

Ainda sobre a minha diversão com CSS, estive experimentando a propriedade text-emphasis, que é uma forma de destacar caracteres adicionando OUTRO caractere acima ou abaixo de cada caractere do texto.

👩🏽‍💻 CSS | Barra de rolagem colorida com scrollbar-color

Foto de Alexander Grey

As barras de rolagem dos navegadores estão cada vez mais cinzas e discretas, mas eu não faço questão nenhuma de que seja assim. Gosto de barras de rolagem coloridas e bem visíveis.

🔗 Encurtadores de links que morreram e ficaram

Foto de Anete Lusina

A Google avisou que, no dia 25 de agosto de 2025, os links encurtados com goo.gl deixarão de funcionar, logo não abrirão mais as páginas para os quais estavam direcionados.

🔗 Crie um link curto para seu WhatsApp com abre.ai e bit.ly

Você já sabe como criar um link para o seu WhatsApp, mas o endereço é longo e, para a maioria das pessoas, difícil de decorar.

🔗 Tutorial - Todos os seus links de graça no Linktree

Atualizado dia 21 de dezembro de 2019.

Qual link eu coloco na minha bio do Instagram? Esse é um dilema comum pra quem quer divulgar site, YouTube, Twitter, Linkedin, portfólio… por isso muitas pessoas físicas e jurídicas estão usando o Linktree: uma única página onde você pode colocar todos os seus links.

👩🏽‍💻 Blogger | Meta tags para exibir cards no Twitter

Nos últimos meses eu estava irritada porque os summary cards de todos os meus blogs do Blogger pararam de funcionar no Twitter. Isso dava mais trabalho na hora de divulgar porque eu também tinha que subir uma imagem para o post no Twitter aparecer devidamente ilustrado.

🎶 HTML | Player de rádio web com <audio> e <video>

Se você já sabe criar um player de áudio com HTML puro, não há nenhum grande mistério aqui.

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

🔊 Audima: os visitantes do seu site podem ouvir os posts

Estou apaixonada por esse recurso que deixou todos os meus milhares de posts audíveis com um simples código. Provavelmente você já viu, neste ou em outro site, o player com o texto Ouça este conteúdo.

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

⌨️ Resumão de HTML 5 em um infográfico

O Matt Banner me mandou por e-mail esse resumão de HTML 5 fácil de memorizar e consultar. Ele ofereceu para eu colocar aqui no blog para os leitores do Meu Tédio. Missão dada, missão cumprida.

Dropbox não vai mais renderizar HTML

Se você tem arquivos .htm e .html hospedados no Dropbox, eles deixarão de ser exibidos como páginas web e passarão a ser arquivos comuns disponíveis para download. Isso vai acontecer a partir do dia 03/10/2016.

🗣 Facebook | Código para mostrar link do autor em publicações de blog

Imagem: www.artmixweb.com.br

Não sei em que planeta eu estava, mas só agora descobri a linha de código que gera um link para a página do autor quando um determinado artigo é postado no Facebook.

Dica rápida: manter número de telefone inteiro na mesma linha de texto

A situação é a seguinte:

• Você precisa digitar um número de telefone no meio de uma mensagem de texto - Facebook, Twitter, WhatsApp, e-mail, blog…
• Você quer evitar quebra de linha no meio do número do telefone, de forma que o número comece em uma linha e termine em outra.
• Você quer manter a divisão para facilitar o entendimento.

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 com ::webkit-scrollbar

Tutorial atualizado dia 14/05/2022.

Aqui temos um exemplo de barra de rolagem (scrollbar) colorida que deve funcionar no Google Chrome e em outros navegadores desktop que usam webkit.

14/04/2025 | Para um método mais atual e que funciona em todos os navegadores, use scrollbar-color.

[Blogger] Link permanente do post na primeira imagem

Como muitos já notaram, a primeira imagem de cada post deste blog é linkada para o link permanente do próprio artigo. Mas isso não é nenhum recurso especial ou script. Eu linko manualmente a cada postagem.