Curso de Design Responsivo Aula 04 Criando sistema de Grid CSS3 automático com 12 colunas

Nessa vídeo aula vamos aprender como criar um sistema de Grids CSS3 automático com 12 colunas utilizando um seletor CSS3 avançado. Trabalhar com seletores CSS é extremamente interessante. No inicio as coisas podem parecer complexas, mas de fato, é muito divertido quando você inicia seu desenvolvimento e vê as coisas tomando forma na sua frente e as infinitas possibilidades que os seletores nos oferecem.

Para o desenvolvimento do nosso sistema de Grids CSS3 automáticas vamos utilizar unicamente o seletor CSS de atributo como mostrado no exemplo abaixo.

elemento[atributo*=”valor”]

O valor do atributo deve conter a palavra que você escolher, neste caso, “valor”, em qualquer parte. Início, meio, ou fim.

p[class*="bobrinha-"]{
  background:black
}
p[class*="bobrinha-"]:hover{
  color:white
}

HTML

<p class="bobrinha-cursos">Parágrafo com seletor</p>

Com base no exemplo de utilização do seletor de atribuição onde o atributo pode conter uma palavra que escolhermos no inicio meio ou fim, podemos então nos beneficiar e criar nosso próprio sistema de Grids CSS3 utilizando Media Queries.

Código desenvolvido na vídeo aula

[class*='caixa-'] {
    width: 100%;
    float: left;
    min-height: 1px
}
.caixa {
    position: relative;
    margin: 15px
}
@media screen and (min-width:320px){
    .caixa-p-1 {width: 8.33333%}
    .caixa-p-2 {width: 16.66667%}
    .caixa-p-3 {width: 25%}
    .caixa-p-4 {width: 33.33333%}
    .caixa-p-5 {width: 41.66667%}
    .caixa-p-6 {width: 50%}
    .caixa-p-7 {width: 58.33333%}
    .caixa-p-8 {width: 66.66667%}
    .caixa-p-9 {width: 75%}
    .caixa-p-10 {width: 83.33333%}
    .caixa-p-11 {width: 91.66667%}
    .caixa-p-12 {width: 100%}
}
@media screen and (min-width:640px){
    .caixa-m-1 {width: 8.33333%}
    .caixa-m-2 {width: 16.66667%}
    .caixa-m-3 {width: 25%}
    .caixa-m-4 {width: 33.33333%}
    .caixa-m-5 {width: 41.66667%}
    .caixa-m-6 {width: 50%}
    .caixa-m-7 {width: 58.33333%}
    .caixa-m-8 {width: 66.66667%}
    .caixa-m-9 {width: 75%}
    .caixa-m-10 {width: 83.33333%}
    .caixa-m-11 {width: 91.66667%}
    .caixa-m-12 {width: 100%}
}
@media screen and (min-width:960px){
    .caixa-g-1 {width: 8.33333%}
    .caixa-g-2 {width: 16.66667%}
    .caixa-g-3 {width: 25%}
    .caixa-g-4 {width: 33.33333%}
    .caixa-g-5 {width: 41.66667%}
    .caixa-g-6 {width: 50%}
    .caixa-g-7 {width: 58.33333%}
    .caixa-g-8 {width: 66.66667%}
    .caixa-g-9 {width: 75%}
    .caixa-g-10 {width: 83.33333%}
    .caixa-g-11 {width: 91.66667%}
    .caixa-g-12 {width: 100%}
}

Para utilizarmos nosso sistema de Grids basta chamarmos as classes que criamos onde quisermos a largura de cada caixa vai variar de acordo com a largura da tela

Exemplo de utilização

<div class="caixa-g-3  caixa-m-6">
     <div class="caixa">
            Grid 
    </div> 
</div>

No exemplo acima temos 4 caixas em resolução mínima de 960px, 2 caixas em resolução mínima de 640px e 1 caixa em resoluções menores.

A maioria das tags que utilizamos em nosso desenvolvimento tem algum atributo qualquer.

<a href="http://www.bobrinha.com">Bobrinha</a>
<span class="meu_span">Span</span>

No trecho acima eu tenho dois atributos que podem ser utilizados com os seletores CSS de atributo: href e class. Então use sua criatividade e divirtam-se com os seletores de atributos eles são fantásticos e podem fazer coisas incríveis.



Hospedagem Profissional de Sites