Então você está fazendo o seu primeiro web app e descobre que problema com rolagem é algo que você nunca imaginou que teria. Fique tranquilo, essa não é a primeira vez que isso acontece com alguém. Há dois anos, quando desenvolvia um web app que utilizaria intensamente vários tipos de gestos, tive um grande problema. E consegui achar a solução no iScroll.
Essa é uma ferramenta madura, que há seis anos vem sendo melhorada. E o melhor de tudo é que ela não trabalha só a questão da rolagem, mas também outros gestos como zoom, tap e snap. Também é possível configurar vários eventos, o indicador de rolagem, além de várias outras opções. Tudo está disponível no site oficial e na breve documentação disponível na página deles no GitHub.
Continue reading iScroll – Otimizando o uso de gestos em web apps →
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 →
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! →
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 →
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? →
Depois que assumi meu papel como professor, me pego frequentemente tentando criar formulas mágicas para ensinar. Geralmente eu me baseio naquilo que foi mais difícil de aprender, seja por mim ou por ex-alunos. É como se eu quisesse poupar as pessoas do sofrimento que passei para encaixotar algum conceito ou acertar alguma prática.
Você já viveu algo parecido? Criou alguma fórmula mágica para decorar alguma coisa?
Veja o caso do 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.
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 →
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?
Continue reading Estilos em cascata – Cascading Styles →
HTML, CSS e JS em posts curtos.
You must be logged in to post a comment.