10 Regole CSS3 che ogni web designer dovrebbe conoscere

Eccovi dieci regole CSS che ogni web designer dovrebbe conoscere

@media

1
2
3
@media screen and (max-width: 960px) {
...
}

La regola media permette di specificare il layout di stampa del sito ed è anche alla base della creazione di pagine web responsive usando come attributo del campo media min-width si specificano le regole da applicare al sito quando è visualizzato su un display di determinate dimensioni.

Background-size

1
2
3
4
body {
  background: url(image.jpg) no-repeat;
  background-size: 100%;
}

Permette di riempire con un’immagine il 100% del body nel caso dell’esempio.

@font-face

1
2
3
4
@font-face {
  font-family: Blackout;
  src: url("assests/blackout.ttf") format("truetype");
}

Permette di scegliere con facilità  i font da usare all’interno delle pagine selezionandoli manualmente da risorse gratuite o via google WebFonts o Typekit.

margin 0 auto;

1
2
3
#container {
  margin: 0 auto;
}

Serve a centrare qualsiasi blocco all’interno del blocco che a sua volta lo contiene.

Overflow:hidden

1
2
3
.container {
  overflow: hidden;
}

Un modo semplice per nascondere i contenuti che escono fuori da .container .

.clearfix

1
2
3
4
5
6
7
8
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

Fa lo stesso lavoro di overflow : hidden quando quest’ultimo non funziona

Color: rgba();

1
2
3
.btn {
  color: rgba(0,0,0,0.5);
}

Con rbga si può impostare il colore di un elemento compresa la sua componente alpha che ne determina la trasparenza.

Input [type:”text”]

1
2
3
input[type="text"] {
  width: 200px;
}

Serve per modificare gli stili applicati ai campi delle form.

Trasform: rotate(30deg)

1
2
3
.title {
  transform: rotate(30deg);
}

Trasform permette di effettuare trasformazioni senza utilizzare javascript.

outline:none;

1
2
3
A {
  outline:none;
}

Permette di eliminare gli outline attorno agli elementi che preferisci.

Ref. http://line25.com/articles/10-css-rules-every-web-designer-should-know

---