Para esse tutorial, na parte de JavaScript, iremos utilizar só a linguagem, sem adotar framework ou biblioteca, primeiro porque o script será pequeno, e segundo porque sempre interessante desacoplar sua aplicação de framework, e de quebra aprendemos coisas novas, nesse caso, recursos do ES6 ou ECMAScript 2015. Vamos seguir a premissa de separar as responsabilidade: HTML … Ler mais
Olá a todos! Neste artigo, vou mostrar um efeito bem interessante, que seria criar um botão estilo interruptor, onde mostrar como OFF e ON, quando você clica, utilizando o CSS3. Aparência do botão será assim: Vamos começar pelo HTML: Criamos uma div.switch que engloba o nosso botão, e dentro da div, temos input, pra fazer … Ler mais
O tooltip ou “dica de contexto” é usado basicamente quando você deseja mostrar informações adicionais ou explicativa a um elemento. Nesse tutorial, mostrarei um forma de criar um efeito tooltip usando CSS3. Eu tenho uma video aula mostrando como fazer o efeito usando jQuery. Mas neste com CSS3 vamos fazer um pouco diferente. A idéia … Ler mais
Uma “One Page” consiste em que todas as páginas de um site estariam na mesma página, estariam separadas só por seções. Existem umas formas de navegação e muitas vezes utilizando javascript para fazer animações que seria de transição dessas páginas. Podemos fazer algumas animações usando CSS 3, trabalhando transition e a pseudo classe :target. A … Ler mais
No tutorial Brincando com os Seletores CSS3, mostrei como criar um sistema de abas, apenas com CSS3. Nesse tutorial, vamos criar um efeito sanfona, utilizando os mesmos princípios, apenas acrescentando um efeito para incrementar. Vamos ao html: Vamos ver os elementos do nosso HTML: Temos um elemento que irá todos itens da sanfona (.accordions) Cada … Ler mais
Uma das formas de você consegue aprender, é tentando fazer algo. Muitas vezes ficamos presos a teoria, sem tentar fazer a prática, e com isso dificulta visualizar como as coisas funcionam. Nesse tutorial vamos ver alguns seletores do CSS 3. Serão basicamente esses: [atributo ^=valor] => Com esse você informa que deseja selecionar qualquer atributo … Ler mais
Nesse tutorial, vou ensinar com criar um menu drop down ou submenu como 3 níveis (podendo aumentar para mais níveis). Então vamos lá. Primeira coisa é criar o html, e com isso iremos utilizar uma lista não ordenada, porque o menu nada mais é do que uma lista de links. Mas nesse caso, quando quero … Ler mais