Líderes
Conteúdo Popular
Exibindo conteúdo com a maior reputação em 06-02-2019 em %
-
Antes de começarmos este tutorial, clique aqui para conferir como é uma imagem com efeito parallax. Agora vamos começar. 1º – Crie a estrutura HTML Neste exemplo faremos o efeito de parallax em uma imagem que está junto com o texto, então dentro da div onde ficará o conteúdo de sua página crie uma nova div com uma classe que será nosso parallax, neste exemplo a chamaremos de ‘parallax’ mesmo. 1 2 3 4 5 6 7 8 9 <!DOCTYPE html> <html> <body> <div class="conteudoTuto"> <div class="parallax"></div> </div> </body> </html> Após isso pode colocar o restante do conteúdo de sua página tranquilamente, a única div que precisávamos criar é esta. 2º – Criar o efeito com css Após ter criado a div responsável por exibir a imagem, temos que criar o css para mostrar a mesma. Primeiramente defina a imagem que escolheu para ser o background de nossa div, logo em seguida defina a altura que essa div terá, como nossa imagem agora é um background ela precisa ter um tamanho definido. Agora vem o passo chave para criar o nosso efeito, adicione a propriedade ‘background-attachment’ como ‘fixed’, é aqui que a mágica acontece, a imagem ficará fica no fundo e o restante do conteúdo passará por cima dela criando nosso efeito de parallax, mas ainda não acabou, mas algumas propriedades precisam ser acrescentadas. Agora que ela está fixa, precisamos posiciona-la e redimensiona-la para que tudo fique certo. 01 02 03 04 05 06 07 08 09 10 11 12 13 .parallax { /* Coloque a imagem a ser usada como background */ background-image: url("img/img.jpg"); /* Defina uma altura para a visão que o usuário terá da imagem */ min-height: 350px; /* defina o background como fixo e posicione a imagem */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } Pronto, o parallax está pronto, você pode criar vários em sua página, basta atribuir uma nova imagem a uma nova classe e acrescenta-la a uma div.1 ponto
-
Clique aqui e veja o que vai aprender a fazer, então chega de enrolação e vamos lá. 1. Personalizar a barra de rolagem Neste exemplo vamos alterar a largura e a altura de nossa barra de rolagem, além de trocar a cor do fundo e também da própria barra. Confira abaixo. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 /* personalizar a barra em geral, aqui estou definindo 10px de largura para a barra vertical e 10px de altura para a barra horizontal */ ::-webkit-scrollbar { width:10px; height: 10px; } /* aqui é para personalizar o fundo da barra, neste caso estou colocando um fundo cinza escuro*/ ::-webkit-scrollbar-track { background:#333; } /* aqui é a alça da barra, que demonstra a altura que você está na página estou colocando uma cor azul clara nela*/ ::-webkit-scrollbar-thumb { background: #2e9dd8; } 2. Degrade na barra de rolagem Também é possível adicionar degrade em sua barra de rolagem, para isso, ao invés de colocar uma cor chapada, basta utilizar a propriedade ‘linear-gradient’ e definir quais as cores que você deseja usar, mas tem mais uma coisinha que precisa ser alterada. Se você apenas substituir a cor chapada pelo gradiente, a barra de rolagem terá seu degrade na vertical também sendo para barras horizontais é necessário ter um degrade na horizontal, então para isso basta dizer que para barras horizontais você deseja um novo degrade, assim como no código abaixo. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 /* degrade para a barra vertical */ ::-webkit-scrollbar-thumb { background: #2e9dd8; background: -moz-linear-gradient(top, #333333 0%, #3f69b1 25%, #2e9dd8 50%, #3f69b1 76%, #333333 100%); background: -webkit-linear-gradient(top, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%); background: linear-gradient(to bottom, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 ); } /* degrade para a barra horizontal com a direção do degrade alterada */ ::-webkit-scrollbar-thumb:horizontal { background: #2e9dd8; background: -moz-linear-gradient(left, #333333 0%, #3f69b1 25%, #2e9dd8 50%, #3f69b1 76%, #333333 100%); background: -webkit-linear-gradient(left, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%); background: linear-gradient(to right, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 ); } 3. Barra de rolagem personalizada apenas em uma div em específico Para personalizar sua barra de rolagem em determinados lugares sem mexer na barra do site em si, basta dizer qual o elemento que você quer que ela seja estilizada, confira. 01 02 03 04 05 06 07 08 09 10 11 12 .scroll::-webkit-scrollbar { width:10px; height: 10px; } .scroll::-webkit-scrollbar-track { background:#333; } .scroll::-webkit-scrollbar-thumb { background: #2e9dd8; } Bom é isso, é assim que se personaliza a barra de rolagem, simples, não é? Espero que tenham gostado, até a próxima.1 ponto
-
No tutorial mostrarei como utilizar a ferramenta geradora de texturas do Adobe Illustrator, como exemplo utilizarei um chã de aço para a criação, abaixo a imagem que usei no tutorial caso queira utilizar, porém não será necessário o uso, pois utilizarei somente as cores. Utilizei esta textura como referência A textura ficará totalmente dinâmica e você poderá utilizar em qualquer projeto, espero que goste, acompanhe o tutorial no vídeo abaixo.1 ponto
-
Quem nunca ouviu aquela música na rádio ou em algum lugar mas não soube identificar o nome ou o cantor, apenas algumas palavras da letra ou o ritmo. Pois bem, existem várias ferramentas na internet, como o Midomi, Shazam e muitas outras que são utilizadas para identificar músicas apenas pelo ritmo ou algumas palavras da letra. Mas agora é possível identificar músicas de uma forma bem mais fácil, direto do seu Android sem nenhum programa. Se você possui a partir da versão 6.0 Marshmallow ou 7.0 Nougat do Android está ferramenta está disponível para você no Google Assist. Basta apenas estar conectado a uma rede Wi-Fi ou de dados móveis para que o procedimento funcione corretamente. Os passos são bem simples: Na tela inicial do Android clique no ícone do microfone e aguarde até o assistente identificar que você está ouvindo uma música. Assim que o aplicativo identificar que você está ouvindo uma música, o ícone de nota musical irá aparecer, basta clicar dele e aproximar o microfone do aparelho do local de onde o som está vindo. O aplicativo irá ouvir e assim que obter um resultado o nome da música será apresentado. Daí é só buscar pela música e curtir o som.1 ponto
-
Neste tutorial irei ensinar como fazer isso, clique aqui uma demonstração do efeito. Agora vamos começar e aprender como fazer, vamos lá. 1. Estrutura HTML Pense no seguinte, neste exemplo tanto a imagem quanto o conteúdo oculto devem estar dentro de uma única div, para que quando passar o mouse sobre essa div o conteúdo oculto apareça, então é isso que paremos. Primeiro crie a div que receberá todo o conteúdo, neste exemplo vamos chama-la de ‘caixaImg’, agora dentro dela coloque a imagem que deseja e em seguida crie uma nova div que terá todo o conteúdo oculto dentro dela e coloque nela uma classe para podermos estilizar, chamarei ela de ‘sobreposicao’. Confira abaixo o código completo da estrutura HTML. 1 2 3 4 5 6 7 <div class="caixaImg"> <img src="img/img.jpg" alt="Imagem" class="imagem"> <div class="sobreposicao"> <div class="texto">Conteúdo aqui</div> </div> </div> 2. Estilizar a div principal Para começar precisamos definir a nossa div que contém a classe ‘caixaImg’ como posição relativa, isso é importante para podermos posicionar corretamente o conteúdo oculto, aqui também vamos definir width de 50% e display = inline-block mas é apenas para alinhamento mesmo, não é necessário. 1 2 3 4 5 6 /* div que irá mostrar a imagem, dentro dela terá a imagem e o conteúdo oculto*/ .caixaImg { position: relative; width: 50%; display: inline-block; } 3. Estilizar a imagem Uma coisa muito importante é colocar a imagem com o tamanho completo da div principal, para que não tenha o risco de ela acabar ficando menor ou maior do que o conteúdo oculto, confira o código. 1 2 3 4 5 6 /* deixar a imagem do tamanho da div*/ .imagem { display: block; width: 100%; height: auto; } 4. Posicionando e estilizando o conteúdo oculto Para que o conteúdo oculto seja sobreposto a imagem, precisamos definir sua posição como absoluta, assim ele ficará ‘ligado’ a nossa div principal, além disso precisamos fazer com que ele fique do tamanho da imagem que é o mesmo tamanho da nossa div principal então para deixar do tamanho certo a já posicionar ela no devido lugar basta definirmos as propriedades “top, bottom, left e right = 0” e assim terminamos essas duas etapas. Vamos também definir uma cor de fundo e um transition para melhorar o efeito e é claro o mais importante, definir sua opacidade como 0 para que possamos ver a imagem primeiramente. Código completo deste passo. 01 02 03 04 05 06 07 08 09 10 11 /*conteudo oculto*/ .sobreposicao { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: .5s ease; background-color: #008CBA; } 5. Mostrar conteúdo oculto com o passar do mouse Beleza, já posicionamos o conteúdo e todo o resto agora precisamos fazer esse conteúdo aparecer quando passar o mouse sobre a imagem, mas na verdade vamos fazer essa ação do mouse na nossa div principal, mas a impressão fica sendo que aparece quando passamos o mouse na imagem, basta colocar sua opacidade = 1. Confira. 1 2 3 4 /* exibir o conteudo oculto*/ .caixaImg:hover .sobreposicao { opacity: 1; } 6º – Estilizando o texto oculto Neste exemplo existe um texto dentro da nossa div oculta, então vamos editar ele. Que tal centraliza-lo vertical e horizontalmente? Para isso basta definir sua posição como absoluta e definir as propriedades top e left = 50%, mas ainda não vai ficar centralizado, já que left = 50% faz nosso conteúdo começar a partir da metade de nossa div e não é isso que queremos, para arrumar sua posição e deixa-lo exatamente no centro basta usar a propriedade translate e definir (x,y) como -50%, confira abaixo. 01 02 03 04 05 06 07 08 09 10 11 12 /* estilização do texto oculto*/ .texto { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } É isso aí, está pronto, agora você já pode espalhar imagens com conteúdo oculto por todo o seu site, divirta-se.1 ponto
Líderes está configurado para São Paulo/GMT-03:00
-
Tutoriais
-
