Kreatore.it

Sviluppo applicativi Lamp

Bordi ed ombre con i css3

Scritto da: | Categorie: ,

Per ottenere alcuni effetti che fino a qualche anno fa si raggiungevano solo con l’uso delle immagini, oggi è possibile utilizzare alcune caratteristiche dei CSS3.
Purtroppo queste caratteristiche non sono tutte completamente supportate dai Browser e non tutte sono implementate nella stesso modo.

Alcuni li accettano cosi come sono, altri richiedono un prefisso, solitamente viene utilizzato il prefisso moz per Mozilla , il prefisso webkit per Chrome e per Safari
Internet Explorer non accetta proprio il text-shadow, mentre Opera è il browser che si comporta meglio di tutti accettando tutte le caratteristiche.

Text-shadow: ombre ai testi

L’ombreggiatura dei testi come indicato dal w3School è accettato da tutti i browser tranne che Internet Explorer.

Il codice da utilizzare è:
h1{ text-shadow: 3px 3px 5px #000; }
ed i valori stanno ad indicare:

  • lo scostamento a destra dell’ombra
  • lo scostamento in basso dell’ombra
  • il margine di sfumatura dell’ombra
  • il colore da utilizzare dell’ombra

L’esempio: Testo ombreggiato

Box-shadow: le ombre ai box

E per box si intendono tutti quegli elementi che hanno un box model fisso: leggasi con display block

il codice da utilizzare è praticamente identico a quello per l’ombreggiatura dei testi, anche se in questo caso bisogna tener conto dei prefissi per i singoli browser.

Ipotizzando un semplice titolo:

<h4 class="ombra">Il titolo ombreggiato</h4>
h4.ombra{
-webkit-box-shadow: 10px 10px 5px #888888; /*Safari*/
-moz-box-shadow: 10px 10px 5px #888888; /*Mozilla*/
box-shadow: 10px 10px 5px #888888;
}

anche in questo caso i valori stanno ad indicare:

  • lo scostamento a destra dell’ombra
  • lo scostamento in basso dell’ombra
  • il margine di sfumatura dell’ombra
  • il colore da utilizzare dell’ombra

Un esempio di box-shadow applicato ad un paragrafo

Border-radius: angoli arrotondati senza javascript

Un interessante sistema per creare dei box con angoli arrotondati. Più che la box in se, l’effetto viene applicato al bordo del box anche se questo, non è dichiarato

Il codice da utilizzare in questo caso è semplice ed applicato ad un paragrafo avremo il risultato seguente:

<p class="radius">Arrotondato</p>
<p class="radiusangle">Arrotondato ad angoli</p>
p.radius{
border:2px solid #f00;
background:#fcc;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
p.radiusangle{
border:2px solid #f00;
background:#fcc;
border-radius:15px 0px 15px 0px;
-moz-border-radius:15px 0px 15px 0px;
-webkit-border-radius:15px 0px 15px 0px;
}

innanzitutto dichiariamo il bordo, quindi l’angolo di smusso.

Un esempio di border-radius applicato ad un paragrafo

Anche per questa caratteristica è necessario inserire il prefisso per i browser Mozilla,Safari e Chrome

Tags: , , ,

Articoli Simili

Cerca per tag

admin, ajax, android, apache, app, audio, backup, beta, blog, bordi, browser, caffè, calcolo, calibre, categorie, cd, chrome, clienti, cloud, cms, condivisione, css3, csv, database, debian, desktop, download, drive, driver, dump, e-reader, evolution, file, firefox, flash, font, foto, freelance, funzioni, gd, gedit, gimp, htc, html5, iexplorer, immagini, indirizzo, inkscape, internet, ip, iphone, java, javascript, jquery, kivy, kv, less, lettura, link, linux, live, mac, macchina, mail, menu, mobile, mod, mp3, mysql, nautilus, network, newsletter, ombra, open office, opera, os, paypal, pdf, picasa, plugin, python, safari, skype, smartphone, smf, ssh, stampante, tabs, tag, tastiera, terminale, test, testo, textile, textpattern, theme, ubuntu, usb, video, web editor, website, windows, wysiwyg, xfce4, youtube

Cerca per categoria

© 2011 Kreatore.it :: Sito web realizzato da Marco Casalegno

TXP | Admin | Home | Back to Top

Tutte le informazioni e le immagini sono rilasciate sotto licenza secondo la Creative Commons License 2.0.