La última pràctica d'aquest mòdul té com a propòsit fer una ullada al desenvolupament de les especificacions de CSS3, és a dir, el nou estàndard pel que fa als fulls d'estils. Aquesta nova versió presenta característiques molt interessants però algunes d'elles encara no estan implementades (i per tant, no funcionen) a tots els navegadors. Feu les proves següents amb:

• Mozilla Firefox 3.5
• Safari 4.x
• Opera 10

Sense entrar en termes tècnics, aquí teniu un recull de les noves caracterísques del CSS3 que poden resultar d'enorme interès per als dissenyadors:

Al mòdul 5 vàreu treballar una mica amb la representació de les vores dels elements. La propietat border representa el límit de la caixa, que envolta el contingut de l'element. Sovint la vora es mostra com una simple línia, però en realitat és una àrea que pot tenir qualsevol gruix.

La nova versió del CSS incorpora noves funcionalitats per al tractament gràfic de les vores com gradients, vores arrodonides, ombres, etc. Veieu a continuació els següents exemples:

La presència de les cantonades arrodonides produeix un efecte important en el resultat visual de la pàgina. El seu alt valor decoratiu no ha passat per alt als dissenyadors actuals. Fins ara, els dissenyadors i desenvolupadors web han emprat diferents tècniques per representar les cantonades arrodonides. De fet, hi han un bon grapat de tècniques per a tots els gustos (prova d'això és aquesta pàgina), amb imatges o sense, amb javascript o sense.

Amb CSS3 ja teniu disponible una propietat que dóna una resposta clara i simple a aquesta demanda:

• -moz-border-radius per al navegador Mozilla Firefox
• -webkit-border-radius per als navegador que fan ús del motor webkit, com Safari.

Veieu el següent exemple:

.border_rounded {
  background-color: #dfdfdf;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border: 2px solid #8f8f8f;
  padding: 10px;
  width: 350px;
  margin: 0 auto;
  text-align: center;
}

<p class="border_rounded">Això és un exemple de cantonades arrodonides.</p>

Això és un exemple de cantonades arrodonides.

Un altre efecte visual: que la caixa de l'element projecti una ombra. Les propietas que aconsegueixen aquest peculiar efecte són:

• -webkit-box-shadow: per als navegador Safari.
• -moz-box-shadow: per al navegador Mozilla Firefox.

.border_shadow {
  -webkit-box-shadow: 10px 10px 5px #888;
  -moz-box-shadow: 10px 10px 5px #888;
  border: 2px solid #8f8f8f;
  padding: 10px;
  width: 350px;
  margin: 0 auto;
  text-align: center;
}

<p class="border_shadow">Això és un exemple de vores amb ombra projectada.</p>

Això és un exemple de vores amb ombra projectada.

El tractament visual de la tipografia és una part fonamental del disseny d'un lloc web. Si bé és cert que amb CSS2 teniu a disposició diferents solucions per gestionar ampliament la tipografia d'un lloc web, encara hi ha pendent qüestions que la nova versió del CSS intenta donar resposta. Veieu els següents exemples:

Si en un principi la projecció de l'ombra d'un text sembla en un primer moment una solució agosarada, en funció del seu tractament pot oferir resultats estètics interessants, especialment pel que fa a capçaleres o títols. La propietat que permet projectar l'ombra del text és text-shadow. Veieu un primer exemple:

.ombra {
  color: #822; 
  text-shadow: 2px 2px 2px #888; 
  font-size: 15px;
  text-align: center;
}

<p class="ombra">Això és una prova de text amb ombra projectada</p> 

Això és una prova de text amb ombra projectada

Amb imaginació podeu crear efectes visuals com una lluentor (glow) del text:

Això és una prova de text amb lluentor

La tècnica Web Font és la manera més simple de fer ús de qualsevol font en el disseny del lloc web sense passar per tècniques com la que heu vist a la pràctica 4 d'aquest mòdul. Veieu tres exemples de l'ús de la propietat font:

@import "http://www.princexml.com/fonts/larabie/index.css";
 
.webfont { 
  font: 3cm/1 "Rothwell", "Trebuchet MS", sans-serif; 
  color: #f33; 
  word-spacing: 0.08em; text-align: center; 
  font-size: 18px;
  text-align: center;
}

<p class="webfont"> Una mirada al futur? CSS3 </p>

Una mirada al futur? CSS3

Una mirada al futur? CSS3

Una mirada al futur? CSS3