tutorial da Galeria de Vinil ദ്ദി

Oi, aqui é a Claire!

Esse é o meu segundo tutorial, eu já adianto que nunca fui muito boa em programação, na verdade nunca estudei sobre isso, eu sou apenas muito boa em qualquer coisa que me proponho a fazer com capricho e perfeição. O Spacehey é recheado de falantes de inglês e isso torna a maioria dos blogs não muito inclusivos para os outros idiomas, para os brasileiros por exemplo, infelizmente não são todos que falam ou entendem inglês perfeitamente e quando buscamos entender algo em outro idioma é como aprender duas coisas ao mesmo tempo. É cansativo para mim, imagino como seja para os outros.

Vamos lá então? 

Toca uma música aí!

Se estamos falando sobre os vinis decorativos que vocês podem achar por quase todo o Spacehey. Você está no lugar certo. Esses são os meus vinis e as modificações dele respeitam as bordas da minha caixa de informações, além de serem menores que a maioria, talvez com esse tutorial vocês consigam colocar do tamanho que os agrade mais!

Quero deixar claro que eu não peço pelos créditos no seu perfil caso usem meu modelo, eu só ficaria feliz com um "usando" nos comentários e os "kudos" para que o tutorial pudesse chegar em mais brasileiros. Por fim, vamos lá!! Espero ajudar.

Aprendendo a ser estiloso - Tutorial 1

Para iniciar vamos entender que um <style> é uma tag HTML usada para definir os estilos do CSS (visuais das páginas da web). O HTML monta a estrutura e o CSS controla a aparência. Se você quer montar a galeria de vinis, vai precisar do CSS para definir sua aparência (fonte, tamanho, espaçamento...) e o <style> é uma das formas de fazer com que o CSS interaja diretamente com o HTML.

Dito isso. O nosso HTML começará com <style> adicionaremos todos os códigos de estrutura e aparência e então vamos pular uma linha no final de todos esses ajustes para terminar com </style>

Legal?!

E depois? - Tutorial 2

Para começarmos com um quadro totalmente em branco usaremos
#vinyl-gallery * {

     all: unset;

}

Esse * é um seletor universal, ele seleciona todos os elementos.

O comando all: unset garante que os elementos da #vinyl-gallery sejam removidos, trazendo uma tela totalmente vazia dentro desse modelo para que você molde como desejar. Nunca esqueça de fechar as chaves } no final de cada código. São importantes para o bom funcionamento de cada tópico.

Em seguida
#vinyl-gallery {

     overflow: hidden!important;

}

Isso irá aplicar todos os estilos do container principal. Define largura, altura, entre outros. Vamos dar um foco especial para o overflow: hidden esse "comando" permite que o conteúdo não extrapole o container, desse jeito ele fica bem compacto, mas te impede de colocar muitos vinis...

Nesse modelo que estou mostrando com o overflow: hidden, talvez caibam apenas 23 ou menos vinis dentro do container. Caso não queiram apenas apaguem essa opção inteira do código.

!important força o HTML a colocar a opção como prioridade independente das demais opções.

O próximo é
#vinyl-gallery .vinyl {

     perspective: 500px;

}

Esse é apenas um exemplo, mas também é importante, ele é o seletor que afeta os elementos div (divisor) com a classe vinyl dentro do vinyl-gallery. Ele muda individualmente a aparência dos itens dentro da galeria.

O próximo irá mudar o estilo do vinil apenas quando o cursor passar por cima deste, sem precisar de cliques.
#vinyl-gallery .vinyl:hover {

     width: 140px!important;

}

Podemos definir o estilo da imagem do vinil com
#vinyl-gallery img {

     all: unset!important;

}

Os comandos da galeria sempre começam com um padrão de estrutura, por isso é sempre importante lembrar de adicionar o código all: unset!important algumas vezes.

Esse próximo comando afetará a imagem quando o cursor passar por ela.
#vinyl-gallery .vinyl:hover img {

}

Trará destaque.

O seletor a seguir afeta os elementos span com a classe título.
#vinyl-gallery .title {

     opacity: 0
     pointer-events: none;

}

Enquanto o comando opacity: 0 mantém o texto escondido até que possa ser visto quando o usuário passar com o cursor por cima do vinil. E o pointer-events: none irá impedir que o texto entre em conflito com o cursor.

E para finalizar as caixas da galeria de vinis, esse comando reage com o texto quando o cursor passa pelo vinil, fará o título reaparecer (já que o fizemos ficar invisível).

#vinyl-gallery .vinyl:hover .title {

opacity: 1;

}

Servidos? - Tutorial 3

Estamos na reta final! Esse comando cria um container, lembram de quando eu mencionei "div"?

<div id="vinyl-gallery">

Ele irá criar o container principal das imagens da galeria de vinis. O id="vinyl-gallery" é um identificador único que vai permitir aplicar estilos com CSS.

<div class="vinyl">

Cada disco de vinil é separado por uma div, assim que criarmos essa classe todos eles compartilharão do mesmo comportamento.

<img src="url">

Esse eu já havia explicado em um blog antigo! Esse é um simples código que permite que uma imagem seja adicionada, como ele está dentro de um div com id então ao colocar o URL ficará tudo certinho.

Lembrando que a imagem precisa ser pública e seu link não pode estar quebrado.

<span class="title">texto</span>

Uma span serve para muitas coisas, marcar palavras no texto por exemplo, mas essa está em uma classe "title", ou seja, ela irá definir o título do vinil. A classe irá manter a configuração correta que adicionamos antes.

A estrutura completa ficaria assim:

<div id="vinyl-gallery">
  <div class="vinyl">
    <img src="URL DA SUA IMAGEM"/>
    <span class="title">texto</span>
  </div>

É preciso ser adicionados 23 ou menos desses, por causa do limite overflow: hidden!important; mas se você não quiser utilizar essa opção pode ir adicionando conforme a tela do seu navegador permitir KKKKKKKKKKKK

*Claire drop the mic*

Foi isso! Ajudei em alguma coisa? Eu sei que nem todo mundo gosta de coisas picadas assim, e é claro que eu vou deixar o código completo fixado nos comentários, essa é apenas um tutorial sobre como o HTML e o CSS desse layout funcionam!

Gostou? Me diz aí em baixo!
Não esqueça dos Kudos,
eu vou ficar feliz em saber que gostaram!