Deprecated: Assigning the return value of new by reference is deprecated in /membri2/asbruff/flatpress/comments.php on line 213
TheJoe » CSS e la proprietà "outline"
2010
Mar
8

CSS e la proprietà “outline”


Deprecated: Non-static method StringParser_Node::destroyNode() should not be called statically, assuming $this from incompatible context in /membri2/asbruff/flatpress/fp-plugins/bbcode/inc/stringparser.class.php on line 358

w3c_home.png Come molti sapranno i CSS3 non sono ancora stati completamente implementati dai browser, non ce ne serviremo nella prima parte di questa breve guida. Già implementata dalla specifica CSS2 era la proprietà “outline”. Vediamone un esempio:

p.test {
    border: 1px solid #000000;
    outline: 3px solid #6374AB;
    width: 20em;
}

Queste poche righe impongono la creazione di un bordo nero di un pixel attorno al paragrafo, e di un outline (esterno al bordo) di colore “#6374ab”di tre pixel. Inoltre specifica la larghezza del paragrafo. Il risultato è il seguente:

outline_css.jpg

Ma cosa dovremmo fare se ci servisse un effetto outline applicato ai contorni delle parole? In questo caso dovremmo servirci dei CSS3, che come già detto sono lacunosi di implementazione e non sono ancora standard, ma visto che si tratta solo di un effetto grafico applicato al testo è sufficiente prestare un po’ di attenzione perché continui a leggersi il contenuto.

La tecnica di quì sotto forse non sarà delle più “ortodosse”, ma sicuramente risolve il problema. Con i CSS3 è possibile creare una o più ombreggiature al testo, e se ne creassimo otto differenti (tutti i punti cardinali e gli intermedi) avremmo risolto la questione. Un’ombra a nord, una a nord-est, una ad est, ecc. L’immagine seguente è una piccola spiegazione di ciò che voglio ottenere:

outline_lettera.jpg

L’unica regola da applicare è “text-shadow”, disponibile solo nella terza versione CSS.

p.outlined_text {
    font-size:20px;
    text-shadow:
    red 1px 1px 0px,
    red -1px -1px 0px,
    red 1px 0px 0px,
    red -1px 0px 0px,
    red 0px 1px 0px,
    red 0px -1px 0px,
    red 1px -1px 0px,
    red -1px 1px 0px;
}

E questo è risultato:

outlined_text.jpg


Strict Standards: Only variables should be passed by reference in /membri2/asbruff/flatpress/fp-includes/core/core.fpdb.class.php on line 268

Deprecated: Non-static method StringParser_Node::destroyNode() should not be called statically, assuming $this from incompatible context in /membri2/asbruff/flatpress/fp-plugins/bbcode/inc/stringparser.class.php on line 358

Calendario

  • March 2010
    SunMonTueWedThuFriSat
     123456
    78910111213
    14151617181920
    21222324252627
    28293031 

Strict Standards: Only variables should be passed by reference in /membri2/asbruff/flatpress/fp-includes/core/core.fpdb.class.php on line 256

Tags

  Nokia     Firefox     Javascript     SivamDesign.com     StyleShout.com     ChromeOS     Social Network     Distribuzioni     Tech     Blog     Pure|dyne     Mencoder     SongBird     mac4lin     Dyne|bolic     Mac OS X     Html     AspirOne     Gnome     Fotoxx     WebArchive     Hydrogen     Audio     Grafica     TrueCrypt     Ubuntu     VHosting     Stampa     Software     hoster     SplitToning     Meebo     htaccess     Global menu     Audacity     Flatpress     Sourceforge     Ardour     Pidgin     Video     Alien         Sicurezza     Xfce4     Google     Ajax     Gimp     GoogleBuzz     HowTo     Gmail     Linutop     Tilda     Aruba     Prey     Youtube     Css     OpenVZ     GoogleVideo     Linux     Linux4one     MPD     rSync     Samba     Shell     Symbian     Web     Open Source     Tips     GnomeMusicPlayerClient     Brushes     Fedora     Jack     Tutorial     Php     CentOS     Siti     Netbook  

Admin area