Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

Tutorial de CSS sobre Imagens e Figuras

Neste tutorial de CSS de nosso curso, vamos introduzir a seção sobre Imagens em CSS.

Embora já tenhamos falado no assunto em nosso Tutorial de HTML sobre Imagens, porém o que é possível de fazer em CSS, se comparado somente ao HTML, é até covardia comparar, o CSS simplesmente no permite fazermos que quisermos com as imagens, posição, alinhamento, bordas, espaçamentos e uma série de outras possibilidades.


Imagens em CSS: O Que É Possível Fazer ?


Antes de entrarmos em mais detalhes sobre o uso e manipulação de imagens em CSS, é importante que você tenha lido nossa seção de imagens em HTML:
Tutorial sobre tipos de imagens - JPG, JPEG, GIF e PNG
Tutoria sobre a tag <img> e o atributo src
Tutorial sobre width e height - Largura e Altura de uma imagem
Tutorial sobre align - Como Alinhar Imagens
Tutorial de SEO em Imagens - Atributos alt e title

Se está seguindo nossos tutoriais e o roteiro do curso, já deve estar careca de saber da importância das mídias, principalmente das imagens (figuras, gráficos etc).

É raríssimo entrarmos em algum site que não tenha alguma imagem, e se for um site com um mínimo de profissionalismo, certamente estiliza o layout com CSS.

Nos próximos tutoriais de CSS, vamos nos dedicar a estudar as ferramentas que nos permitem trabalhar com imagens através de códigos em CSS.

Iremos usar a tão importante tag <img> e seus atributos, como o src, width, height, title, alt e caption.
Usaremos a tag <div> para definir melhor nossas imagens, de maneira mais personalizada, nos permitindo estilizar diferentes tipos de imagens, agrupá-las e fazer coisas mais específicas, que não era possíveis serem feitas apenas com HTML.

Vamos entrar em detalhes sobre:

  • papel de fundo de um site, o background 
  • imagens no papel de parede(background-image), 
  • cores no plano de fundo (background-color)
  • quantas vezes as imagens de fundo se repetem (background-repeat)
  • definir a posição das imagens de fundo (background-position)
  • background-attachment
  • tipos de URL (url())
  • como alinhar imagens em CSS
  • etc



Salve as três seguintes imagens, com os nomes 'html.png', 'js.png' e 'php.png', para facilitar seu estudo e porque você deve repetir os códigos em seu computador, pois só olhando e lendo o site, nunca irá aprender ;)
Curso de HTML5 online grátis com certificadoTutorial completo
Apostila para download completa


Imagens, CSS e Direitos Autorais


Já falamos sobre isso quando estávamos estudando HTML e na seção de SEO.
Não vá, de maneira alguma, até o Google Imagens, pesquisar, salvar e usar imagens em seus sites e projetos. Um Webmaster profissional jamais faz isso.

Assim como você está estudando e se dedicando, para trabalhar na criação de sites, existem pessoas que estudam e trabalham para criar imagens.

Para ter um site mais profissional, contrate algum designer, alguém que faça artes gráficas e pessoas do ramo, para criar suas imagens, indicar cores, tons etc.

O motivo disso é simples: geralmente os webmasters não tem muito senso de design.
Os webdevelopers (programadores de aplicativos web e sistemas web) realmente não são bons nessa parte de arte digital, por isso, sempre que puder, trabalhe com outros profissionais.

Caso não possa arcar com essas despesas, existem diversos sites que fornecem imagens, esquema de cores, ícones, botões, bullets para listas e outras dicas de design para seus sites:



E lembre-se: se pegar a imagem de um site que não conhece, poderá ser processado e caso façam denúncias para seu servidor que hospeda seu site, você pode ter seus sites tirados do ar.

Nenhum comentário:

Tutoriais de HTML e CSS