Curso de Web Design | Como Criar uma Galeria de Imagens - Parte 02: O Css3
Dando continuidade a série sobre como criar uma galeria de imagens com html5, css3 e javascript começando do zero, Nesta vídeo segunda aula estarei criando os estilos css3 que definirão o visual da galeria.
Caso não tenha visto a primeira aula da série te convido a ver neste momento esta aula antes de ver o vídeo abaixo, pois é nela que ensino como criar o código html5 que verá feito no vídeo desta 2ª aula.
Como Criar uma Galeria de Imagens – Parte 02: O Css3
Na vídeo aula anterior, mostrei como é rápido e fácil criar a estrutura html do projeto, claro que, foi fácil, pois já tinha criado a proposta visual no affinity designer (programa de ilustração vetorial), caso tivesse ido diretamente para as linguagens sem fazer um rascunho antes, seria mais complicado.
Recomendo que, preste bastante atenção no processo de criação de estilos, pois isso te ajudará a percebe como que convertemos o visual que vemos no software vetorial em código css3, que estarão nos projetos web (sites, blogs, ecommerces).
Quer Baixar os Arquivos Html5, Css3 com os Códigos e as Imagens usadas nesta Aula?
Se você quer fazer o download das imagens usadas na aula, juntamente com os arquivos html e css que criei durante a vídeo aula, basta digitar o teu e-mail no campo abaixo e clicar no botão e baixará o arquivo .zip com os arquivo.
Quer Criar Estilos Css3 com Facilidade para seus Sites e Aplicativos Web?
No curso do Zero a WebDesigner com Guilherme, você aprendará a trabalhar com css3 de maneira fluída, natural.
Ao longo das aulas você aprenderá como funciona a sintaxe do css, como utilizar os seus atributos e valores do jeito certo, respeitando as regras e pensando como um desenvolvedor web.
E, como o objetivo é te ajudar a sair do zero e se tornar um(a) webdesigner com muitas competências, além do css3, aprenderá também html5, javascript, php e mysql. Clique Aqui e Veja o Que o Curso tem a Te Oferecer!
Css3 Interativo: Como Criar Interação com Usuário com Hover!
No html5 você consegue criar interação com usuário através dos links de navegação utilizando a tag a (anchor), não é único elemento html que permite isso, mas é, com certeza, o mais utilizado.
Já no css3 a interação é normalmente feita através do estados do mouse, como mouse over e active link.
Over no inglês significa sobre, ou seja, mouse over é colocar o mouse sobre um elemento. Já active significa ativo, sendo assim, quando você ativar um elemento, o efeito ocorrerá. Uma observação aqui, é que o active é para ser aplicado em links (tag a).
Contudo, no css3 não temos o estado over, mas sim hover. Hover no inglês significa pairar. E, qual a diferença?
Over é mais voltado para algo que está em cima de outra coisa, em boa parte dos casos tendo contato, já hover é para algo que também está acima, porém, sem contato.
No css a diferença é que, se você falar over em vez de hover, o efeito não ocorrerá, pois como css é uma linguagem com regras, uma letra fora do contexto e a coisa não funciona.
Como Aumentar o Tamanho das tags Html5 com Css3?
Definir as dimensões (altura e largura) das tags html é algo tranquilo, já que com o atributo width (largura) define-se a largura e com height, a altura.
Todavia estes não são os únicos atributos css que podem ser recorridos para esta tarefa. Claro, são os mais comuns, mas não os únicos.
Além dos atributos width e height temos também os atributo transform o qual recebe valores diferentes, e aqui vou enfatizar o valor scale e o matrix.
Como Alterar Dimensões com Atributo “Transform: Scale” do Css3?
O atributo transform nos permite controlar a tag através de um efeito de transformação, o que diferente dos atributos width e height.
Ao modificar altura e largura da tag html com os atributos css width e height, mexemos na sua relação com os demais elementos, podendo assim puxar ou empurrar as tags próxima. Já com atributo transform, isso não acontece.
Com o atributo transform alteramos o visual e não a estrutura, ao ver a vídeo aula você entenderá melhor.
No momento que criamos o código “transform: scale(1.7)” dizemos que visualmente, não estruturalmente, a tag aumentará em 70% na horizontal (largura) e na vertical (altura).
Na vídeo mostro o uso do “transform: scale()” para aumentar largura e altura simultaneamente, mas você poderia usar “transform: scaleX()” para aumentar só na largura e “tranform: scaleY()” para alterar só a altura. Porém, como os valores seriam os mesmos para ambas as direções, preferi usar só scale().
Como Modificar Dimensões com “Transform: Matrix”?
Além, do scale e suas variações, temos também o transform matrix(), o qual é muito interessante, pois usamos uma matriz, neste caso um vetor, pois quando se tem uma matriz de uma dimensão o seu nome é vetor, para modificar a tag html.
Um ponto interessante de se usar o matrix é que em vez de apenas modificarmos apenas a escala, podemos alterar escala, inclinação e posição.
A função matrix do atributo transform recebe os seguintes valores e necessa ordem: largura, inclinação no eixo y, inclinação no eixo x, altura, trasladação horizontal e transladação vertical.
No começo é um pouco chatinho entender como ele funciona, porém, uma vez que se acostuma é bem legal, tanto que caso já conheça o efeito transition do css, já deve imaginar que dá para brincar bastante com o matrix.
Projeto Completo: Veja Todas as Aulas da Série Como Criar uma Galeria de Imagens!
Como de praxe, além, de artigos individuais sobre cada vídeo aula do projeto, já tenho um artigo único com todos os vídeos postados, lembrando, que um artigo não exclui o outro, pois em cada post que lanço aqui no portal, procuro falar coisas que ainda não falei. Clique Aqui e Veja Todos os Vídeos do Projeto sobre como criar uma galeria de imagens!
Tem Dúvidas? Deixe um comentário!
Espero que tenha gostado da vídeo aula acima e se está curtindo o conteúdo postado aqui no portal, deixe um comentário, um like, compartilhe com seus amigos, pois isso ajuda a divulgar o meu trabalho. Desejo-lhe um bom, estudo e qualquer dúvida é só comentar.
Quer Ser um Desenvolvedor Front-End e Back-End?
Está querendo estudar desenvolvimento web para se tornar um programador/desenvolvedor back-end e front-end te convido a conhecer o meu curso sobre Desenvolvimento Web, aonde Ensino como Trabalhar com Html5, Css3, Javascript, Php e Sql (MySQL e MariaDB) para criar projetos para Web como Sites e Aplicativos Web. Atualmente o curso possui mais de 31 Horas de Aulas em Vídeo e mais de 100 Vídeos Aulas prontas. Clique Aqui e Venha conhecer o Curso!
