Introdução A propriedade border radius é utilizada para arredondar os cantos de um elemento HTML com o CSS. Utilizando esta propriedade é possível arredondar todos os cantos de uma vez, o elemento todo, ou então um canto por vez. Com o border radius da para criar círculos, retângulos com bordas arredondadas, balões de conversa como …
Introdução As variáveis CSS são utilizadas para definir um valor que poderá ser utilizado em todo o site ou sistema. Imagine que você está desenvolvendo algo que tem uma paleta de cores padrão, e em todo lugar precisa colocar as mesmas cores. Isso pode ser trabalhoso, com o tempo acaba até decorando o hexadecimal da …
Introdução As pseudo-classes são utilizadas para definir o estado especial de um elemento. Por exemplo, em um formulário, quando um determinado campo está selecionado, é possível indicar de uma forma visual, colocando um foco nesse elemento. E para dar esse foco é possível alterar o estilo, para deixar esse campo diferente dos demais. E para …
Introdução O dialog é um elemento CSS utilizado para criar caixas de diálogo, pop ups ou modais. Pode ser muito útil para passar alguma informação relevante ao usuário. Em outro post, mostrei como criar um modal com HTML e CSS, e neste caso irei mostrar como criar nativamente utilizando o elemento dialog. Sobre o elemento …
Introdução Os formulários estão presentes em quase toda página ou sistema web. Tendo isso em vista, é importante saber como estilizar, fazer validações, máscaras de campos, melhorar acessibilidade e entre outros. Todos esses itens podem deixar o seu formulário melhor e mais profissional. Nesse post você vai ver como criar e estilizar um formulário com …
Introdução Propriedades shorthand são utilizadas no CSS para que com uma única propriedade você consiga definir o valor de múltiplas propriedades. Na prática isso significa que com apenas uma propriedade, você pode fazer o que faria com 3 ou mais. E com isso você pode ganhar produtividade no seu desenvolvimento, visto que com menos código, …
Propriedades shorthand CSS, escreva menos código Read More »
Introdução O tooltip é uma explicação breve ou dica sobre alguma funcionalidade específica. Eu costumo utilizar bastante em botões, normalmente botões que só tem o ícone, coloco um tooltip para indicar a ação do botão. Por exemplo, um botão que só tem um X, costumo colocar a explicação “fechar”. E dessa forma indica ao usuário …
Introdução Essas dicas de CSS podem te ajudar no dia a dia, são pequenos códigos mas que fazem a diferença. A primeira dica eu utilizo bastante, porém as outras dependem da situação que estiver trabalhando. Sem enrolação, vamos para as dicas. Centralizar conteúdo Antigamente tinha poucas formas de fazer, porém atualmente tem algumas formas a …
Introdução Modal é uma janela que abre sobre o conteúdo da página, seu intuito é indicar alguma informação ou aviso ao usuário. Como um exemplo prático, é comum abrir uma caixa de confirmação quando um usuário vai excluir algum registro do sistema, é um aviso para garantir que o usuário tem certeza da ação que …
Introdução Nesse post veja como criar um encurtador de links como bit.ly e outros somente com HTML, CSS e Javascript. Você vai ver como colocar os elementos na tela, estilizar elementos com CSS, utilizar API Fetch do Javascript, selecionar elementos e entre outras dicas. Criar projetos é sempre muito bom para treinar alguma linguagem que …
O position relative e absolute é um assunto que gera muitas dúvidas para quem está aprendendo CSS. Por isso resolvi escrever este post para poder sanar essas dúvidas e mostrar como os posicionamentos funcionam. Propriedade Position Essa propriedade do CSS define qual será o posicionamento de um elemento referente ao documento HTML. Ou seja, como …
Introdução O card é um elemento que pode ser criado com HTML e CSS e pode ter diversos casos de uso. Podem ser utilizados em dashboards, para exibir dados informativos, em e-commerce também tem um uso bem comum, que são os cards para expor os dados de um produto e entre outros diversos locais que …