Neste post, você aprenderá a:

• Esconder a scrollbar sem desativar a rolagem;
• Personalizar a aparência da scrollbar;
• Modificar o comportamento da rolagem;
• Tornar a rolagem mais suave.

1. Como esconder a scrollbar sem desativar o scroll

Se deseja ocultar a scrollbar, mas ainda permitir a rolagem do conteúdo, use as seguintes regras CSS:

Para navegadores modernos (Chrome, Edge, Safari):

.elemento::-webkit-scrollbar {
    display: none;
}

Para Firefox:

.elemento {
    scrollbar-width: none;
}

Para Internet Explorer e Edge antigo:

.elemento {
    -ms-overflow-style: none;
}

Com essas configurações, a barra de rolagem ficará invisível, mas o usuário ainda poderá rolar o conteúdo.

2. Como estilizar e personalizar a scrollbar

Se quiser estilizar a barra de rolagem em navegadores baseados em WebKit (Chrome, Safari, Edge), utilize os seguintes seletores:

.elemento::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.elemento::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.elemento::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.elemento::-webkit-scrollbar-thumb:hover {
    background: #555;
}

Explicação:

• ::-webkit-scrollbar → Define o tamanho da scrollbar.
• ::-webkit-scrollbar-track → Define a área de fundo da scrollbar.
• ::-webkit-scrollbar-thumb → Define o “botão” que o usuário arrasta.
• ::-webkit-scrollbar-thumb:hover → Estiliza a scrollbar ao passar o mouse.

📌 Observação: o Firefox permite personalizar apenas a largura usando scrollbar-width, mas não oferece suporte a cores ou outros estilos avançados.

3. Como fazer a rolagem suave

Caso queira que a rolagem seja mais fluida, adicione este CSS:

html {
    scroll-behavior: smooth;
}

Isso faz com que os links internos da página rolem suavemente até o destino, ao invés de saltar diretamente.

4. Como criar uma scrollbar oculta que aparece ao passar o mouse

Se deseja esconder a scrollbar e mostrá-la apenas quando o usuário passar o mouse sobre o elemento, utilize:

.elemento::-webkit-scrollbar {
    width: 0px;
}

.elemento:hover::-webkit-scrollbar {
    width: 8px;
}

Manipular a scrollbar pode melhorar muito a experiência do usuário, deixando o design mais limpo e elegante. Com essas técnicas, você pode ocultar, personalizar e até tornar a rolagem mais fluida.

Se quiser desennvolver um site de sucesso, com todas as prtemissas para SEO, UX e conversão, entre em contatos com os ratos do desenvolvimento web! 🚀

O post Manipulando a scrollbar com CSS: como esconder, estilizar e mais apareceu primeiro em Pink and Brain.

Com CSS, podemos replicar esse efeito de maneira simples e eficiente utilizando o pseudo-elemento ::first-letter e a propriedade experimental initial-letter.

article p:first-child::first-letter {
  color: hotpink;
  padding: 0 0.3rem;
  margin: 0 0.3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-family: "IBM Plex Mono", monospace;
}

Com isso, a primeira letra ganha destaque, sendo estilizada de forma independente do restante do texto.

Como customizar o tamanho da primeira letra pegando várias linhas por CSS?

Se você deseja criar um drop cap maior, precisa ajustar o tamanho da fonte e o espaçamento. No entanto, apenas aumentar o font-size pode causar problemas de alinhamento. Aqui está uma abordagem usando float:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

drop__caps_p:first-child::first-letter {
  color: black;
  padding: 0 0.3rem;
  margin: 0 0.3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-size: 5rem;
  float: left;
  line-height: 1;
}

Essa solução garante que a letra fique alinhada corretamente com o parágrafo.

Efeito Drop Caps: Como colocar a primeira letra maiúscula no WordPress?

É bem fácil.

1. Primeiro clique no parágrafo que você deseja aplicar o efeito
2. Clique nas 3 bolinhas ao lado de “Tipografia” no bloc de edição no menu a direita do painel;
3. Selecione drop caps em inglês ou letra capitular em português
4. Ative o efeito no “toogle”

Voalá! está pronto e fica muito bacana.

Usando initial-letter

Uma alternativa mais moderna é a propriedade initial-letter, que ajusta automaticamente o tamanho da letra e o número de linhas que ela ocupa, simplificando o processo:

drop__caps_p_2:first-child::first-letter {
  color: hotpink;
  padding-right: 8px;
  -webkit-initial-letter: 3;
  initial-letter: 3;
}

Compatibilidade com navegadores / browsers

O suporte para ::first-letter é universal entre os navegadores modernos.A propriedade initial-letter ainda está em fase experimental, sendo suportada apenas em navegadores específicos. Se optar por usá-la, recomendamos envolvê-la em um bloco @supports para evitar problemas em navegadores que não a suportam.

@supports (initial-letter: 3) {
  article p:first-child::first-letter {
    initial-letter: 3;
  }
}

Quando usar Drop Caps?

Drop caps são ideais para:

• Livros ou publicações digitais.
• Postagens de blog com foco em design e narrativa.
• Elementos visuais em páginas de destaque ou introduções de capítulos.
• Diferenciar seu portal de notícias frente ao “padrão” web que acaba não utilizando.

Com essas técnicas, você pode incorporar o charme clássico dos drop caps ao seu design moderno de maneira elegante e funcional!

Gostou da dica? Aqui na Pink and Brain criamos aplicações modernas, diferenciadas, consistentes e focadas em SEO. Venha tomar um café digital e conversar sobvre negócios.

O post Efeito Drop Caps em CSS: primeira letra gigante em parágrafos apareceu primeiro em Pink and Brain.

Vou mostrar uma lista completa de tags HTML e as propriedades CSS obsoletas para você substituir, inclusive trazendo as soluções para atualizar seu código de maneira eficaz. Mantenha seu código sempre atualizado, semântico e diferenciado.

Embora a maioria dos navegadores ainda suporte tags e propriedades obsoletas, não é recomendado utilizá-las, pois é provável que sejam removidas em futuras versões.

Tabela de tags deprecated do HTML

Tabela de propriedades CSS obsoletas deprecated

Exemplos de Atualização de Código

Substituição das tags font e center

<!-- Código obsoleto -->
<font color="#333">Texto exemplo</font>
<center>Conteúdo centralizado</center>

<!-- Código atualizado -->
<span class="text-style">Texto exemplo</span>
<div class="center">Conteúdo centralizado</div>

<style>
	.text-style {
	  font-size: 14px;
	  color: #333;
	}
	
	.center {
	  text-align: center;
	}
</style>

Manter a aplicação atualizada garante compatibilidade, segurança e uma boa experiência do usuário, além de beneficiar diretamente SEO. Utilize este guia para identificar e atualizar tags e atributos obsoletos em seu código, mantendo seu site eficiente e compatível com os padrões atuais.

O post Tags HTML e propriedades CSS deprecated que não são mais utilizados apareceu primeiro em Pink and Brain.

O que é o tal colapso de margins?

O colapso de margens ocorre quando margens verticais de dois elementos adjacentes “se fundem”, criando apenas um único espaço. Em vez de somar as margens, o navegador utiliza a maior delas.

Por exemplo:

• Elemento 1: margin-bottom: 30px;
• Elemento 2: margin-top: 20px;

Você esperaria um espaçamento de 50px entre os dois, certo? Mas o navegador aplica apenas 30px, pois essa é a maior margem entre as duas.

Quando o colapso de margens acontece?

O colapso acontece principalmente quando:

1. Dois elementos adjacentes possuem margens verticais (top/bottom).
2. O elemento filho tem margem e não está separado do pai por padding ou borda.
3. Um elemento está vazio e tem apenas margens verticais.

Como evitar o colapse de margens?

Se você deseja manter as margens separadas, pode usar algumas técnicas:

Adicionar padding ou border

Esses valores interrompem o colapso.

.elemento {
    padding-bottom: 1px; /* Interrompe o colapso */
}

Usar overflow no pai

Configurar overflow: hidden; ou auto no container também evita o colapso.

Usar display diferente de block

Elementos com display: inline-block ou flex não sofrem colapso de margens.

Visualizando na Prática

Crie dois elementos para testar o colapso:

<div class="elemento-1"></div>
<div class="elemento-2"></div>

.elemento-1 {
    height: 50px;
    background: blue;
    margin-bottom: 30px;
}

.elemento-2 {
    height: 50px;
    background: red;
    margin-top: 20px;
}

• Resultado esperado: 50px de distância.
• Resultado real: 30px (por conta do colapso).

Agora, adicione um padding ou border a qualquer elemento para resolver:

.elemento-1 {
    height: 50px;
    background: blue;
    margin-bottom: 30px;
    padding-bottom: 1px; /* Previne o colapso */
}

O colapso de margins é um comportamento importante a ser entendido no CSS. Embora possa parecer confuso no início, aprender a lidar com ele ajuda a criar layouts mais previsíveis e consistentes.

Lembre-se: quando se trata de margens verticais, o maior valor sempre vence!

O post Colapso entre margin-top e margin-bottom no CSS apareceu primeiro em Pink and Brain.

Filtros CSS

Os filtros CSS oferecem uma maneira simples e flexível de converter imagens coloridas em preto e branco. Você pode usar o filtro grayscale() para obter esse efeito:

.classe__da_imagem {
    filter: grayscale(100%);
}

Blend Modes

Os blend modes também podem ser usados para transformar imagens coloridas em preto e branco. Experimente o modo de mistura luminosity com uma div de fundo branco ou preto para criar este efeito. Com o mesmo código, apenas alterando a cor de fundo, é possível aplicar outros efeitos interessantes.

<div class="fundo__branco">
    <img decoding="async" class="imagem" src="/img/imagem.webp" alt="Imagem em preto e branco com CSS blend mode">
</div>

.fundo__branco {
    background-color: white; /*Ou preto*/
}

.imagem {
    mix-blend-mode: luminosity;
}

Quando utilizar as técnicas acima para tornar imagens preto e branco?

Antes de aplicar, é importante entender os motivos pelos quais você pode querer usar imagens em preto e branco em seus projetos. Aqui estão algumas razões:

• Estilo clássico: imagens em preto e branco podem adicionar uma sensação de atemporalidade e elegância ao seu design.
• Ênfase na composição: sem a distração das cores, os espectadores podem se concentrar mais na composição e nos detalhes da imagem.
• Dramaticidade: o preto e branco pode criar contrastes dramáticos e evocar emoções fortes.

Criar imagens em preto e branco com CSS é uma maneira eficaz de adicionar estilo e impacto visual aos seus projetos da web. Experimente e divirta-se explorando as possibilidades criativas com CSS.

Fique ligado para mais dicas de ouro para tornar sua aplicação afiada.

O post Como tornar uma imagem preto e branco com CSS: dicas apareceu primeiro em Pink and Brain.

Além disso, a função permite que as propriedades de estilo se ajustem automaticamente a diferentes tamanhos de tela. Com a crescente demanda por sites responsivos e a necessidade de layouts precisos, a função calc() tornou-se uma habilidade importante para qualquer desenvolvedor web.

Funcionalidades Principais

A função calc() permite a combinação de valores numéricos, unidades de medida e operadores matemáticos, facilitando a definição de larguras, alturas, margens, preenchimentos e outras propriedades dimensionais. É especialmente útil na criação de layouts fluidos e adaptáveis a diferentes tamanhos de tela.

Sintaxe Básica

A sintaxe básica da função calc() é simples. Ela permite que você execute cálculos ao especificar os valores de propriedades no CSS. A função pode ser utilizada em qualquer lugar, como comprimento, frequência, ângulo, tempo, porcentagem, número e inteiro.

A sintaxe básica da função calc() é uma expressão matemática que pode incluir operadores matemáticos válidos, como adição, subtração, multiplicação e divisão. Além disso, ela pode conter valores numéricos e outras unidades de medida.

Exemplo básico da sintaxe da função calc():

propriedade: calc(expressão);

Onde:

• Propriedade: é a propriedade CSS à qual a função será aplicada.
• Expressão: é a expressão matemática que deseja-se calcular, utilizando valores, unidades de medida e operadores matemáticos.

Desenvolvimento

A função calc() pode ser utilizada em diversos contextos, tais como para valores de largura, altura, margens, entre outros. Os desenvolvedores podem portanto alcançar maior controle e precisão na criação de layouts que se adaptam de forma eficaz a diferentes dispositivos e tamanhos de tela.

Exemplos

Definindo largura com porcentagem e pixels:

width: calc(50% - 20px);

Neste caso, a largura do elemento é definida como metade da largura do contêiner, com a subtração de 20 pixels, proporcionando flexibilidade e precisão no dimensionamento.

Calculando margem com porcentagem e rem:

margin: calc(2rem + 5%);

Aqui, a margem do elemento será de 2 rem mais 5% do tamanho do seu contêiner.

Definindo altura com viewport height (vh) e pixels:

height: calc(100vh - 80px);

Neste exemplo, a altura do elemento é estabelecida como igual à altura da janela do navegador menos 80 pixels, garantindo um layout ajustável.

Exemplo de como posicionar um pseudoelemento de grafismo com a função calc()

No exemplo abaixo eu usei a função calc() para colocar o elemento gráfico no topo da <section>, alinhado ao centro.

A função calc() no CSS oferece uma abordagem versátil e eficaz para lidar com layouts responsivos e cálculos dimensionais.

Lembre-se que, emsmo sendo uma técnica bastante difundida e presente em quase todos os sistemas operacionais, é essencial utilizá-la com moderação e considerar a compatibilidade com navegadores mais antigos, se necessário.

O post Função calc() no CSS: como fazer cálculos na folha de estilos apareceu primeiro em Pink and Brain.

Unidade de medida “vh” (viewport height)

Em resumo, a unidade “vh” no CSS representa a porcentagem da altura da viewport, ou seja, a parte visível da janela do navegador. Então, ela é uma unidade de medida relativa à altura do dispositivo do usuário. Por exemplo, 10vh é igual a 10% da altura da viewport.

Unidade de medida “vw” (viewport width)

Para mais contexto, també podemos dizer que a unidade “vw” no CSS, por outro lado, representa a porcentagem da largura da viewport, ou seja, a parte visível da janela do navegador em relação à largura do dispositivo do usuário. Logo, similar ao “vh,” 10vw é igual a 10% da largura da viewport.

Entenda definitivamente vh e vw

• vh: mede em relação à altura da viewport.
• vw: mede em relação à largura da viewport.

Unidade de medida “%” (percentagem)

Em resumo, a unidade “%” é uma medida relativa que se baseia no elemento pai. Por exemplo, quando você aplica “%” a um elemento, ele calcula a porcentagem com base na largura ou altura do elemento pai.

Exemplo da diferença de vh para porcentagem no CSS com um Botão flexível

.button {
  width: 50%; /* 50% da largura do elemento pai */
  height: 5vh; /* 5% da altura da viewport */
}

Principais diferenças de vh para porcentagem “%”

Agora, vou falar sobre as principais diferenças entre as duas unidades:

Referência de medição

• vh: Mede em relação à altura da viewport.
• %: Mede em relação à altura ou largura do elemento pai.

Comportamento responsivo

• vh: Mantém o dimensionamento em relação à altura da viewport, tornando-o útil para elementos que devem permanecer proporcionais à altura da tela.
• %: Ajusta-se com base no elemento pai, tornando-o adequado para layouts que dependem do tamanho do elemento pai.

Uso comum

• vh: Ideal para definir tamanhos de tela de fundo, imagens de capa ou elementos que devem preencher a tela inteira verticalmente.
• %: Usado para layouts responsivos e redimensionáveis, onde as dimensões são relativas ao tamanho do contêiner pai.

Exemplos de uso

Aqui estão alguns exemplos práticos muito utilizados pela web, inclusive em nossos sites que desenvolvemos para ilustrar as diferenças:

Exemplo 1: imagem de fundo

.header {
  height: 100vh; /* Preenche 100% da altura da viewport */
}

Exemplo 2: layout responsivo

.container {
  width: 80%; /* 80% da largura do elemento pai */
}

Depende de você entre usar “vh” ou “%” no CSS. Vai depender muito do comportamento desejado para o dimensionamento de elementos em seu layout.

O uso adequado dessas unidades de medida contribuirá para uma experiência de usuário mais consistente e responsiva em seu site ou aplicativo web, reduzindo drásticamente a quantidade de estilos CSS no seu arquivo.

O post Diferença entre usar vh, vw e porcentagem (%) no CSS apareceu primeiro em Pink and Brain.

Vamos entender na prática quais são as propriedades de texto para estilização via CSS com exemplos práticos.

Introdução às propriedades de texto no CSS

As propriedades de texto em CSS permitem aos desenvolvedores definir e ajustar diversos aspectos visuais do texto em uma página web. Essas propriedades são fundamentais para criar uma experiência de leitura agradável e acessível, adaptando-se a diferentes dispositivos e tamanhos de tela.

Fonte e texto

Fonte

A propriedade font-family define a fonte utilizada para o texto. É possível especificar uma lista de fontes, separadas por vírgulas, na ordem de preferência. Caso a primeira fonte não esteja disponível, o navegador tentará utilizar a próxima fonte da lista.

p {
  font-family: Arial, sans-serif;
}

Neste exemplo, o navegador tentará utilizar a fonte Arial. Caso ela não esteja disponível, será utilizada uma fonte sans-serif genérica como fallback.

Tamanho da fonte

A propriedade font-size define o tamanho da fonte utilizada. O tamanho pode ser especificado em pixels, ems, rems, porcentagem, entre outros.

p {
  font-size: 16px;
}

Tamanhos de fonte entre 16px e 18px são recomendados para garantir legibilidade em textos comuns.

Peso da fonte

A propriedade font-weight define a espessura da fonte utilizada. Valores numéricos ou palavras-chave como bold (negrito) ou normal (padrão) podem ser utilizados.

p {
  font-weight: bold;
}

Nem todas as fontes possuem variações de peso disponíveis, ntão é importante testar as opções.

Estilo da fonte

A propriedade font-style define o estilo da fonte, como itálico ou normal.

p {
  font-style: italic;
}

Nem todas as fontes suportam variações de estilo, então é importante verificar a compatibilidade.

Cores e Fundos

Cor do texto

A propriedade color é usada para definir a cor do texto de um elemento. A cor pode ser especificada por nome, código hexadecimal, RGB, HSL, entre outras.

p {
  color: #333333;
}

Escolher uma cor com bom contraste com o fundo é fundamental para garantir a legibilidade e a acessibilidade.

Fundo do texto

A propriedade background-color define a cor de fundo de um elemento.

p {
  background-color: #f0f0f0;
}

Além de cores sólidas, é possível usar imagens como fundo utilizando a propriedade background-image.

p {
  background-image: url('background.png');
}

Espaçamento e alinhamento

Espaçamento entre Letras

A propriedade letter-spacing controla o espaço entre as letras do texto.

p {
  letter-spacing: 2px;
}

Valores positivos aumentam o espaçamento, enquanto valores negativos o diminuem.

Espaçamento entre Linhas

A propriedade line-height controla o espaçamento entre as linhas de um texto.

p {
  line-height: 1.5rem;
}

Um valor de 1.5 vezes o tamanho da fonte é comum para melhorar a legibilidade.

Alinhamento do texto

A propriedade text-align controla o alinhamento do texto dentro do elemento pai.

p {
  text-align: center;
}

Valores possíveis incluem left, right, center e justify.

Exemplos de Uso

Aqui está um exemplo completo de CSS que estiliza um parágrafo:

/* Estilo para parágrafo */
.paragrafo__exemplo_css{
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  color: #333333;
  background-color: tomato;
  letter-spacing: 1px;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 20px;
}

Exemplo de texto com as propriedades CSS acima causando estilização no texto escrito nesse parágrafo.

Dominar as propriedades de texto em CSS é fundamental para a estilização eficaz de páginas web. Com este guia, você está pronto para criar designs impressionantes e garantir uma experiência de usuário excepcional. Experimente e explore todas as possibilidades do CSS para tornar suas páginas ainda mais cativantes e acessíveis.

Por fim, se você deseja se aprofundar mais nas propriedades de texto e outras funcionalidades do CSS, considere explorar recursos adicionais, como a documentação oficial do CSS.

O post Propriedades de texto para estilização via CSS: exemplos apareceu primeiro em Pink and Brain.