Pular para o conteúdo principal

Postagens

Mostrando postagens de 2017

Diminuir o Menu fixo no Scroll.

O menu fixo pode ser uma boa solução de UX Design, esse tipo permite que o usuário navegue entre as principais páginas do site a qualquer momento durante a navegação, mas dependendo do tamanho do menu fixo isso pode ser um problema. Pensando nisso muitos sites usam um técnica que diminuem o tamanho de logo, fonte e até ocultam alguns elementos assim a barra fica menor e o usuário ainda pode usar o menu.  Podemos fazer isso utilizando o Jquery. <script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script> Primeiro , defina o estilo da sua barra, ou copie o exemplo abaixo. <style> body{margin: 0; height: 1300px;} nav{ background-color: #8BC34A; display: flex; justify-content: space-around; align-items: center; position: fixed; top:10px; height: 120px; width: 100%; transition: all 0.6s; } .logo{ fon

Criando um botão scrollTop.

ScrollTop. Possuir no site um botão que ajuda voltar ao topo da pagina com mais facilidade, agrada muito os usuários mas nem todos os sites tem esse botão de scrollTop . Antes de iniciar o desenvolvimento desse botão coloque em seu projeto o arquivo do Jquery . Definir o estilo do seu botão. Fique a vontade para estilizar na forma que mais o agrada, ou utilize o exemplo abaixo. <style> .btn { border:0; background-color: black; color:#fff; padding:1rem; font-size: 1rem; position: fixed; bottom:1rem; right: 1rem; } </style> Botão <button class="btn">Subir</button> Vamos ao código para controlar o botão. Primeiro , coloque em uma variável a class referente ao botão. var subir = $('.btn'); Segundo , vamos colocar a " Var" com o nome de subir e chamar o evento de click. subir.on('click', function(){ }) Terceiro , animar o Body e o HTML para isso passamos dois paramentos que se

CSS Hover animate.

Imagem
Em algum momento você já teve a necessidade de criar uma animação ou algum efeito em uma imagem ao passar o mouse. Para facilitar o trabalho o Hover Animate criou um pequeno arquivo CSS que atende essa necessidade. É recomendado que junto ao Hover Animate seja utilizado algum framework para tornar o teu site responsivo. OBS: o estilo e cores tanto de letra quanto de botão é de responsabilidade sua. Confira. https://diegomoralesnavarro.github.io/-hover-animate.github.io/dist/index.html

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 -->