Geralmente programadores que estão iniciando o aprendizado em HTML e CSS procuram projetos para realizar e aprimorar seus conhecimentos. No vídeo abaixo demonstramos a criação de uma tela de login, sem usar conteúdo avançado de HTML e CSS e sem muito uso de cores e fontes estilizadas, ideal para quem está aprendendo. Assista o vídeo […]
Tela de login completa com HTML e CSS Read More »
Um efeito muito usado em programas de edição de imagem e vetorização é adicionar imagem dentro de textos ou objetos. Hoje vamos mostrar como fazer esse efeito para web usando apenas CSS. O CSS foi evoluindo muito nos últimos anos, e foram acrescentadas muitas propriedades que ajudam muito no desenvolvimento e no design dos elementos
Como criar textos com gradiente e imagem com CSS Read More »
Neste post vamos ensinar duas formas de adiciona borda (stroke) em texto usando CSS, a primeira forma é nativa foi criada para essa função, a segunda forma é adptando a opção de sombra para que o texto fique com a borda. Vídeo de demonstração: Primeira forma Text-stroke A propriedade CSS especifica a largura e a
2 Formas de colocar borda em texto com CSS Read More »
Neste post vamos ensinar como suavizar a barra de rolagem usando apenas CSS. Muito usada em página Onepage, onde concentra todo o conteúdo em uma única página. Vídeo demonstrativo: Para suavizar a barra de rolagem, basta adicionar o código scroll-behavior: smooth ao elemento html do seu site para permitir que o efeito seja criado. Vale
Suavizando scroll usando apenas CSS Read More »
Adicione scroll-behavior: smooth ao elemento <html> para permitir a rolagem suave para toda a página. NOTA: Também é possível adicioná-lo a um elemento / recipiente de rolagem específico. Confira o exemplo funcionando: See the Pen Como criar barra de rolagem suave by Cupcom Codes (@cupcomcodes) on CodePen. Espero ter ajudado, sugestões e críticas deixe ai
Como criar rolagem suave no HTML Read More »
A pseudo-class :focus do css é aplicada quando o usuário clica com o mouse ou usa o teclado, um exemplo é um botão ou um formulário. Resetar o focus do seu site pode ser muito prejudicial para acessibilidade do mesmo, pois dificulta para usuários com necessidades especiais, pois evita que os elementos seja identificados por
Como editar o focus com CSS Read More »
Neste post vamos ensinar como limitar a quantidade de textos usando CSS, sem nenhum uso de Javascript para essa função, é uma função bem simples, conhecida por front-ends avançados. Em algumas situações essa função do CSS ajuda muito, em outras quando queremos esconder todos os dados que existe naquela linha, requer o uso de Java
Como limitar a quantidade de texto com CSS Read More »
Neste post vamos ensinar como limitar quantidade de linhas usando CSS, sem nenhum uso de Java script para essa função, é uma função bem simples, conhecida por front-ends avançados. Em algumas situações essa função do CSS ajuda muito, em outras quando queremos esconder todos os dados que existe naquela linha, requer o uso de Java
Como limitar a quantidade de linhas usando CSS Read More »
Os seletores CSS são usados para “encontrar” (ou selecionar) os elementos HTML que você deseja estilizar. O seletor de id CSS O seletor de id usa o atributo id de um elemento HTML para selecionar um elemento específico. O id de um elemento é único dentro de uma página, então o seletor de id é
Variáveis CSS são entidades definidas por desenvolvedores, contendo valores específicos para serem reutilizados ao longo da folha de estilo. São configuradas usando esta notação (ex: –cor-principal: black; ) e são acessadas usando a funcão var() (ex: color: var(–cor-principal); ). Uso básico No exemplo anterior foram declaradas duas variáveis dentro do seletor :root, que é a