Pular para o conteúdo principal

Postagens

CSS3 – Criando animações com @keyframes + hover.

Estrutura do @keyframes. Com o @keyframes podemos definir o início e fim da animação, possibilitando várias combinações. Podemos montar de duas formas sendo com from e to , ou por porcentagem 10% e 100% . @keyframes anim {     from {font-size: 10px;}     to {font-size: 50px;} } From é o inicio da animação, e to é o fim da animação. @keyframes anim {     10% {font-size: 10px;}     40% {font-size: 20px;}     80% {font-size: 10px;}     100% {font-size: 40px;} } Usando porcentagem podemos criar etapas mais específicas, fazendo ficar maior depois menor e no final maior novamente, entre outras formas. Chamar a animação. Após o nome @keyframes vem o nome da sua animação, esse nome vamos usar para chamar a animação. .anim {   animation-duration: 1s;   animation-name: anim; <!-- nome -->   animation-fill-mode: both; } Observe que usamos o mesmo nome tanto na chamada da class e na função css . Usando a anima

JavaScript – Usando .length

Usando .length A propriedade length retorna o número de unidade ou tamanho de código muito utilizado em Arrays e S tring s, Antes de iniciar coloque no final do seu código HTML a seguinte tag. <script type="text/javascript"> // seu código  </script> Modo simples, descobrindo o valor de caracteres dentro da String . JS var caracteres = "Descobrindo" document.getElementById("resultado1").innerHTML = caracteres.length; HTML <p id=" resultado1"></p> Ativando por botão. JS  totalCaracteres = () =>{  var texto = "Descobrindo a quantidade de caracteres deste texto .";  document.getElementById("resultado2").innerHTML = "Este texto contém " +  texto.length; } HTML <button onclick="totalCaracteres()">Try it</button> <p id=" resultado2">0</p> Pegando o valor da um Array , neste exemplo

JQuery - Efeitos Mostrar/Ocultar.

Efeitos Mostrar/Ocultar Existem varias formas de  mostrar e ocultar um conteúdo, com um ou vários botões de acordo com a necessidade. Para utilizar o Jquery é necessário baixar o arquivo javascript ou utilizar o CDN do Jquery. Coloque o seguinte CDN logo abaixo da Tag <body> do código HTML . <script  src="https://code.jquery.com/jquery-3.2.1.js"   integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="   crossorigin="anonymous"> </script> Efeitos utilizando hide(), show() e toggle(). Hide: Esconder o conteúdo. Show: Mostrar o conteúdo. Toggle: Mostrar e esconder o conteúdo de modo alternado. Efeitos utilizando fadeIn(), fadeOut, fadeToggle e fadeTo(). FadeIn: Esconder o conteúdo. fadeOut: Mostrar o conteúdo. FadeToggle: Mostrar e esconder o conteúdo de modo alternado. fadeTo: Tornar visível ou invisível configurado pela opacidade (valor entre 0,0 e 1,0) nesse caso o conteúdo não fica e

CSS3 – Criando um sistema de grid

Criando um sistema de grid. Ter um site responsivo é muito importante, um site que é responsivo consegue se reconfigurar automaticamente de acordo com o tamanho e tipo de dispositivo que o visitante estiver utilizado. O sistema de grid permite que o site seja responsivo, muitas páginas da web são baseadas em Grid, isso significa que a página é dividida em colunas e assim fica mais fácil para colocar o elemento na página. Muitas vezes o sistema de grid possui 12 colunas, sendo que o tamanho total da tela sempre é 100% não importando o dispositivo usado. Para funcionar o sistema de grid é necessário uma <meta> tag conhecida como viewport , esteja colocada acima da tag <title> . <meta name="viewport" content="width=device-width, initial-scale=1.0"> width=device-widthparte: Define a largura da página, para acompanhar mudança da largura do dispositivo (que irá variar dependendo do dispositivo). A initial-scale=1.0: Define o nível d

CSS3 – Usando o seletor nth-child

Usando o seletor nth-child ( ) O seletor nth-child( ) é usado para marcar determinado local ou linha, possibilitando aplicar vários estilos no local escolhido. Este seletor costuma ser usando em tabela , lista , parágrafo , spam e outros . Dentro do ( ) vão estar as instruções podendo ser em nome ou número possibilitando fazer diversas combinações para atender sua necessidade.  Exemplo de seletores nth-child(odd): Representa as linhas impares “modo simples e não permite maiores alterações”. nth-child(even): Representa as linhas Pares “modo simples e não permite maiores alterações”. nth-child(3): Representa o número da linha que deseja aplicar o estilo e sem repetição. nth-child(2n): Representa as linha que deseja aplicar o estilo, neste caso existe repetição, nth-child(2n+1): Representa a linhas impares, o 2n é a sequência de um sim e um não e o +1 representa a linha que vai iniciar. nth-child(0n+4): Representa que não foi escolhida um sequencia 0n,

HTML5 – Semântica

Semântica O HTML5 oferece vários elementos semântico para definir diferentes partes em seu código, permitindo que um motor de busca identifique cada área da página a partir de suas Tags específicas. Tags HTML5 para estruturar a página Tag header: Define um cabeçalho de uma página. Tag nav: Define links de navegação como por exemplo um simples menu. Tag figure: Define que dentro contem imagem. Tag main: Definir o conteúdo principal da página ou da aplicação “ usar somente uma vez por pagina”. Tag section: Define uma seção em um documento. Tag article: Define um artigo e deve ser algo independente como uma postagem em um blog ou comentário. Tag aside: Define um conteúdo secundário de uma página, como um menu lateral ou um banner de anunciantes. Tag details: Especifica detalhes adicionais que o usuário pode exibir ou ocultar sob demanda. Tag footer: Define um rodapé de uma página. Exemplo da estrutura. <header> <!-- Inicio -->