Poderia dizer que as pessoas que definem como será o CSS adorariam ser seus melhores amigos. Eles inventam muitas coisas bacanas que tornam o seu dia-a-dia de front-end muito mais legal. E uma dessas coisas super bacanas do CSS é o tal do pseudo-elemento. Continue reading CSS – Pseudo-elementos ::before e ::after
Category Archives: CSS
Cascading Style Sheets
CSS – Controlando a posição com botões. Sem JS!
Nesse exemplo é apresentada uma técnica que permite que um elemento tenha os valores de propriedades incrementados ou decrementados utilizando botões. É claro, sem JavaScript.
Continue reading CSS – Controlando a posição com botões. Sem JS!
Curtiu?
CSS – Positioning
Position
A propriedade position trabalha com quatro valores: static (padrão), relative, absolute e fixed. Cada valor permite uma forma diferente de posicionar o elemento. E, dependendo do valor utilizado, outras cinco propriedades podem ser utilizadas em conjunto com position. São elas: top, right, bottom, left e z-index.
Essas outras cinco propriedades não funcionam com position: static. Ou seja, o position deverá ser relative, absolute ou fixed para que essas propriedades façam efeito sobre o posicionamento do elemento. Você vai ver mais sobre elas no decorrer da leitura.
Continue reading CSS – Positioning
Curtiu?
CSS – Contadores, você conhece esse recurso?
Você conhece o OL, não é? O que é que ele faz?
- Listas
- Ordenadas
Pois bem. Você sabia, que é possível utilizar esse recurso de contagem em outros elementos? Talvez você tenha até pensando em alterar o valor da propriedade display para list-item e com isso conseguir uma contagem em cada elemento.
Continue reading CSS – Contadores, você conhece esse recurso?
Curtiu?
Nunca mais confunda o que significa ODD e EVEN.
Sabe a pseudo-classe :nth-child do CSS? Ela aceita vários valores, não é? ODD e EVEN são dois deles. Essas duas palavrinhas representam elementos ímpares e pares. Mas é muito fácil confundir qual delas significa ímpar ou par.
Para facilitar decorei assim:
ODD tem três letras, então significa ÍMPAR.
EVEN tem quatro, então é PAR.
Pronto. Aprendi!
Estão confusos?
Vejam um exemplo de como aplicar ODD e EVEN no CSS.
Curtiu?
Criando uma tabela zebrada com nth-child
A pseudo-classe :nth-child é ótima! E, como você sabe, existem vários valores possíveis para ela. Vamos focar no ODD e EVEN. Que significa o quê? Elementos ímpares e pares.
Então vamos fazer uma tabela zebrada utilizando :nth-child.
Continue reading Criando uma tabela zebrada com nth-child
Curtiu?
Estilos em cascata – Cascading Styles
CSS é uma das três tecnologias que fazem as páginas aparecem bem na sua frente. E essas três letrinhas CSS significam Cascading Style Sheets. Em português pode-se chamar de Folhas de estilo em cascata.
Mas, peraí, DC, o que danado significa isso?
You must be logged in to post a comment.