Mr. Webmaster Menu
  • Home
  • Cerca
  • Didattica
    • A
    • Android
    • Apache
    • Apple
    • ASP
    • ASP.Net
    • C
    • Cloud
    • CMS
    • CSS
    • D
    • Database
    • E
    • Editor
    • G
    • Grafica
    • H
    • Hosting
    • HTML
    • J
    • Java
    • Javascript
    • jQuery
    • L
    • Leggi e Fisco
    • Linux
    • M
    • Mobile
    • MySQL
    • N
    • NET Framework
    • P
    • Photoshop
    • PHP
    • Primi Passi
    • Programmazione
    • R
    • Reti
    • Ruby
    • S
    • Sicurezza
    • Social Media
    • SQL
    • W
    • Web Design
    • Web Marketing
    • Web Server
    • Windows
    • WordPress
    • X
    • XML
    • Di tendenza
    • Android Studio
    • Bootstrap
    • Cookie Law
    • Hosting Wordpress
    • Node.js
    • Registrazione Domini
  • Download
    • Software
    • Script
    • Plugin CMS
    • Flash Movies
    • Sound Loops
    • Templates
    • Web Grafica
    • Font Gratis
  • Risorse
    • SEO Tools
    • WebApps
  • News
  • Blog
  • Forum
  • Network
    • Toolset.it
    • SiteMarket.it
    • Codalo.it
  • Corsi on-line
Mr. Webmaster → CSS → Articoli → Testo in verticale con i CSS

Testo in verticale con i CSS

  • CommentaScrivi un commento
  • ForumDiscuti sul forum
  • PrecedenteUn preload per le immagini con i CSS
  • SuccessivoBox con effetto ombra realizzato con i CSS
  • Pubblicato il
  • 18/09/2008
  • Autore
  • Luca Ruggiero

Grazie ai CSS abbiamo la possibilità di scrivere testo in verticale semplicemente applicando una semplice stilizzazione all'elemento testuale a cui vogliamo applicare detto effetto.

L'utilità di un simile espediente è da considerarsi più funzionale che stilistica: volendo creare un elemento ad effetto col testo in verticale, conviene sempre avvalersi di un'immagine... tuttavia non mi si fraintenda! L'effetto testo verticale mediante i CSS in determinate circostanze è molto utile.
L'effetto in questione, ad esempio, è particolarmente utile nella creazione di report a colonna dove è possibile risparmiare parecchio spazio ed ottenere risultati visivamente più chiari ed immediati.

A tal fine utilizzeremo la proprietà writing-mode che, purtroppo, è disponibile dalla versione CSS3 dei fogli di stile.

La proprietà CSS writing-mode dispone di due valori:

  • tb-rl - scrive il testo "sotto-sopra";
  • lr-tb - scrive il testo in verticale.
Vediamo un esempio di quel che intendiamo ottenere:
Quanto spazio guadagnato!

Alla proprietà writing-mode va associato anche un filter:

filter: flipv fliph;
Vediamo un esempio di codice completo:
<style type="text/css">
td
{
    text-align: center;
    font-size: 11px;
    font-family: verdana;
}
td.verticale
{
    writing-mode: tb-rl;
    filter: flipv fliph;
}
</style>

<table border="1">
<tr>
<td class="verticale"><b>Valore 1</b></td>
<td class="verticale"><b>Valore 2</b></td>
<td class="verticale"><b>Valore 3</b></td>
<td class="verticale"><b>Valore 4</b></td>
<td class="verticale"><b>Valore 5</b></td>
</tr>
<tr>
<td>1</td>
<td>0</td>
<td>2</td>
<td>2</td>
<td>5</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>0</td>
<td>2</td>
<td>4</td>
<td>4</td>
</tr>
</table>
Associamo la classe "verticale" alle sole celle che devono avere tale effetto.

Naviga tra i contenuti

←Un preload per le immagini con i CSS
→Box con effetto ombra realizzato con i CSS
Sponsor

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
  • Facebook
  • Twitter
  • Google+
  • YouTube
  • App Android
  • App iOS
  • Feed RSS
Frequenta i nostri corsi
  • Corso CSSCorso CSS
    Stilizzare siti Web coi CSS e CSS3. A partire da 39 €
  • Corso HTMLCorso HTML
    Il linguaggio di markup delle pagine web. A partire da 29 €
  • Corso Webmaster AvanzatoCorso Webmaster Avanzato
    Diventa un Webmaster professionista. A partire da 49 €
Vedi anche...
  • Griglie in puro CSS: creare tabelle senza il tag <table> di HTML
  • Effetto slidein, slideup, fadein e fadeout in puro CSS
  • Transizioni al mouseout coi CSS3
  • CSS: la proprietà position
  • CSS: le proprietà display e visibility
Guide
  • Guida CSS
  • Guida CSS3
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2018 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: info legali / privacy / cookie
Altro: extra / sondaggi / sitemap