diff options
Diffstat (limited to 'files/it/web/css')
10 files changed, 197 insertions, 16 deletions
diff --git a/files/it/web/css/background-repeat/index.html b/files/it/web/css/background-repeat/index.html index b8d0a25fd7..f020f8dbe1 100644 --- a/files/it/web/css/background-repeat/index.html +++ b/files/it/web/css/background-repeat/index.html @@ -96,7 +96,7 @@ div { /* Multiple images */ .five { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), - url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); + url(https://developer.mozilla.org/static/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; diff --git a/files/it/web/css/selettore_figli_diretti/index.html b/files/it/web/css/child_combinator/index.html index cf2903dbc9..0a7db4d019 100644 --- a/files/it/web/css/selettore_figli_diretti/index.html +++ b/files/it/web/css/child_combinator/index.html @@ -1,10 +1,11 @@ --- title: Selettore di Figli Diretti -slug: Web/CSS/selettore_figli_diretti +slug: Web/CSS/Child_combinator tags: - compinatori css - selettore di figli diretti translation_of: Web/CSS/Child_combinator +original_slug: Web/CSS/selettore_figli_diretti --- <div>{{CSSRef("Selectors")}}</div> diff --git a/files/it/web/css/cursor/usare_valori_url_per_la_proprietà_cursor/index.html b/files/it/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index 772fa80e13..d475f40ea1 100644 --- a/files/it/web/css/cursor/usare_valori_url_per_la_proprietà_cursor/index.html +++ b/files/it/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -1,12 +1,13 @@ --- title: Usare valori URL per la proprietà cursor -slug: Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor +slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property tags: - CSS - CSS_2.1 - Sviluppo_Web - Tutte_le_categorie translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +original_slug: Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor --- <p> </p> <p><a href="it/Gecko">Gecko</a> 1.8 (<a href="it/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0) supportano l'uso di valori URL per la <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">proprietà cursor CSS2</a>. che permette di specificare immagini arbitrarie da usare come puntatori del mouse..</p> diff --git a/files/it/web/css/css_columns/using_multi-column_layouts/index.html b/files/it/web/css/css_columns/using_multi-column_layouts/index.html new file mode 100644 index 0000000000..413605bf13 --- /dev/null +++ b/files/it/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,68 @@ +--- +title: Le Colonne nei CSS3 +slug: Web/CSS/CSS_Columns/Using_multi-column_layouts +tags: + - CSS + - CSS_3 + - Tutte_le_categorie +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +original_slug: Le_Colonne_nei_CSS3 +--- +<p> +</p> +<h3 id="Introduzione" name="Introduzione"> Introduzione </h3> +<p>Testi con righe troppo lunghe non sono facilmente leggibili; se ci vuole troppo tempo per muovere l'occhio dalla fine di una riga all'inizio della successiva, si tende a perdere traccia della linea corrente. Perciò, per ottimizzare l'utilizzo di schermi particolarmente larghi, gli autori devono affidarsi a colonne di testo multiple, posizionate l'una accanto all'altra, come nei quotidiani. Sfortunatamente questo è impossibile da gestire con CSS e HTML, senza imporre a priori la fine di una colonna, restringere pesantemente i marcatori utilizzabili o usare script particolarmente complicati. +</p><p><a class="external" href="http://www.w3.org/TR/css3-multicol/">Una specifica CSS3 preliminare</a> suggerisce l'utilizzo di alcune nuove proprietà CSS per implementare questa funzionalità. Da Firefox 1.5 sono state implementate alcune di queste proprietà, in modo da ottenere il comportamento descritto nella bozza preliminare (con una eccezione descritta sotto). +</p><p>Il <a class="external" href="http://weblogs.mozillazine.org/roc/">blog di Robert O'Callahan</a> utilizza le colonne CSS; provatele con Firefox 1.5 o successivi. +</p> +<h3 id="Usare_le_colonne" name="Usare_le_colonne"> Usare le colonne </h3> +<h4 id="Numero_di_colonne_e_Larghezza" name="Numero_di_colonne_e_Larghezza"> Numero di colonne e Larghezza </h4> +<p>Due sono le proprietà CSS che controllano se devono essere utilizzate le colonne e quante: <code>-moz-column-count</code> and <code>-moz-column-width</code>. +</p><p><code>-moz-column-count</code> imposta il numero di colonne. Per esempio, +</p> +<pre><div style="-moz-column-count:2">In preparation for the release of Mozilla +Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific +Daylight Time (UTC -0700). After this point, no more checkins will be accepted +for Firefox 1.5 Beta 1, which is set for release on Thursday.</div> +</pre> +<p>Mostrerà il contenuto in due colonne (se state usando Firefox 1.5 o successivi): +</p> +<div style="">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div> +<p><code>-moz-column-width</code> imposta la larghezza minima della colonna. Se <code>-moz-column-count</code> non viene impostato, il browser cercherà di posizionare quante più colonne possibili nella larghezza disponibile. +</p> +<pre><div style="-moz-column-width:20em;">In preparation for the release of Mozilla +Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific +Daylight Time (UTC -0700). After this point, no more checkins will be accepted +for Firefox 1.5 Beta 1, which is set for release on Thursday.</div> +</pre> +<p>diventa: +</p> +<div style="-moz-column-width: 20em;">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div> +<p>Maggiori dettagli sono descritti nella <a class="external" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">Bozza preliminare CSS3</a>. +</p><p>In un blocco multi-colonna, il contenuto viene automaticamente fatto scorrere da una colonna in quella successiva secondo quanto necessario. Tutte le funzionalità HTML, CSS e DOM, come la modifica e la stampa, sono supportate dalla modalità a colonne. +</p> +<h4 id="Bilanciamento_dell.27altezza" name="Bilanciamento_dell.27altezza"> Bilanciamento dell'altezza </h4> +<p>La bozza preliminare CSS3 specifica che l'altezza delle colonne deve essere bilanciata: cioè, il browser imposterà automaticamente la massima altezza delle colonne, tale che il contenuto in ogni colonna abbia altezza approssimativamente uguale. Firefox lo fa. +</p><p>Tuttavia, in alcune situazione può essere utile impostare esplicitamente la massima altezza delle colonne, e quindi riempire tante colonne quante sono necessarie, partendo dalla prima e andando verso destra. Per esempio, gli articoli su <a class=" external" href="http://iht.com/" rel="freelink">http://iht.com/</a> lo fanno (però usando uno script). Quindi si estende la specifica preliminare in modo che, se la proprietà CSS <code>height</code> è impostata per un blocco multicolonna, ad ogni colonna sarà permesso di crescere al massimo sino a quel valore di altezza, dopo di che una nuova colonna dovrà essere aggiunta. Questo metodo risulta anche molto più efficiente nel definire il layout. +</p> +<h4 id="Distanza_tra_colonne" name="Distanza_tra_colonne"> Distanza tra colonne </h4> +<p>Normalmente ciascuna colonna è adiacente all'altra, ma di solito il risultato non è ottimale. E' possibile utilizzare la proprietà CSS padding tra le colonne per migliorare il risultato finale, oppure più semplicemente basta utilizzare la proprietà <code>-moz-column-gap</code> con il bloccomulticolonna: +</p> +<pre><div style="-moz-column-width:20em; -moz-column-gap:2em;">In preparation for +the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight +at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins +will be accepted for Firefox 1.5 Beta 1, which is set for release on +Thursday.</div> +</pre> +<div style="-moz-column-width: 20em;">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div> +<h4 id="Degradazione" name="Degradazione"> Degradazione </h4> +<p>Le proprietà -moz-column saranno semplicemente ignorate da browser che non supportano le colonne. Perciò è relativamente semplice creare un layout che mostri una singola colonna nei browser che non supportano questa funzionalità e che risulti invece multicolonna su Firefox 1.5 e successivi. +</p> +<h3 id="Conclusione" name="Conclusione"> Conclusione </h3> +<p>Le colonne in CSS3 sono una nuova primitiva di layout che aiuterà gli sviluppatori Web a fare un uso migliore dello spazio sullo schermo. Gli sviluppatori più creativi troveranno molti modi di usarli, specialmente con la caratteristica di bilanciamento dell'altezza. +</p><p><br> +</p> +<h3 id="Riferimenti_Addizionali" name="Riferimenti_Addizionali"> Riferimenti Addizionali </h3> +<ul><li> <a class=" external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a> +</li></ul> +{{ languages( { "en": "en/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }} diff --git a/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/it/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index e03a676320..8908feb99c 100644 --- a/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html +++ b/files/it/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -1,8 +1,9 @@ --- title: Using CSS flexible boxes -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes --- <div>{{CSSRef}}</div> diff --git a/files/it/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/it/web/css/css_lists_and_counters/consistent_list_indentation/index.html new file mode 100644 index 0000000000..0a8f6374a2 --- /dev/null +++ b/files/it/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -0,0 +1,107 @@ +--- +title: Indentazione corretta delle liste +slug: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +tags: + - CSS + - Tutte_le_categorie +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +original_slug: Indentazione_corretta_delle_liste +--- +<p> </p> + +<p><span class="comment">Summary: Trying to change the indentation of lists with CSS is trickier than it looks, but only because CSS-conformant browsers took different paths to default indentation. Find out how to get them all in line.</span></p> + +<p>Una delle più frequenti modifiche allo stile delle liste, è la distanza di indentazione, cioè la distanza alla quale i vari punti sono spostati rispetto al bordo. Questa modifica è spesso causa di frustrazione, perchè ciò che funziona in un browser spesso non ha lo stesso effetto in un altro. Per esempio se si dichiarano liste senza margine sinistro, in Explorer si osserva uno spostamento, mentre nei browser basati su Gecko nessuno.</p> + +<p>Per compredere questo fenomeno, e sorpattutto come evitare il problema, è necessario esaminare in dettaglio come sono costruite le liste.</p> + +<h3 id="Costruire_una_lista" name="Costruire_una_lista">Costruire una lista</h3> + +<p>Prima di tutto, si consideri un singolo elemento di una lista, senza marcatore (tipicamente il "puntino" che lo precede), che non è ancora parte della lista stessa. Fluttua da solo nel vuoto, senza nessun attributo, come mostrato in Figura 1.</p> + +<p><img alt="Figure 1"></p> + +<p>Il bordo punteggiato rosso rappresenta i limiti esterni dell'area dei contenuti dell'elemento della lista. Si ricordi che, in questo momento, l'elemento della lista non ha ne' bordi ne' rientri (padding). Se si aggiungono due altri elementi alla lista, si ottiene il risultato di Figura 2. add two more list items, we get a result like that shown in Figure 2.</p> + +<p><img alt="Figure 2"></p> + +<p>Adesso inseriamo questi elementi nell'elemento padre; per questo esempiop useremo una lista non ordinata (cioè <code><ul></code>). Secondo il modello a scatole dei CSS (CSS box model), l'area occupata da ciascun elemento della lista, deve essere visualizzata all'interno dell'area dei contenuti dell'elemento padre. E poichè l'elemento padre non ha ancora ne' bordi ne' rientri, si ottiene il risultato di Figura 3.</p> + +<p><img alt="Figure 3"></p> + +<p>Il bordo punteggiato blu mostra i bordi dell'area dei contenuti dell'elemento <code><ul></code>, che non avendo rientri finisce per avvolgere i tre elementi della lista senza lasciare spazi.</p> + +<p>Adesso aggiungiamo i marcatori degli elementi, che nel caso di una lista non ordinata sono tipicamente dei "puntini" circolari, come mostrato in Figura 4.</p> + +<p><img alt="Figure 4"></p> + +<p>Visivamente i marcatori sono all'esterno dell'area dei contenuti di <code><ul></code>, ma questo non è molto importante. Il punto chiave è che i marcatori sono all'esterno del riquadro principale degli elementi <code><li></code>, non di <code><ul></code>. Sono da considerare una sorta di appendici agli elementi della lista, appese all'esterno dell'area degli elementi <code><li></code>, ma ad essi collegate.</p> + +<p>Questa è la ragione per cui, in ogni browser eccetto Internet Explorer, i marcatori sono posizionati all'esterno del bordo eventualmente impostato per gli elementi <code><li></code>. Si assume che il valore di <code>list-style-position</code> sia <code>outside</code>, perchè se viene cambiato in <code>inside</code>, i marcatori sono spostati all'interno dei riquadri degli elementi <code><li></code>, proprio come se fossero la primissima parte del loro contenuto.</p> + +<h3 id="Indentare_due_volte" name="Indentare_due_volte">Indentare due volte</h3> + +<p>Quindi come appare tutto ciò in un documento? Al momento, si ha una situazione analoga a questi stili:</p> + +<pre>ul, li {margin-left: 0; padding-left: 0;}</pre> + +<p>Se avessimo messo questa lista così come è, in un documento, non ci sarebbe stato nessuna apparente indentazione ed i marcatori sarebbero probabilmente finiti all'esterno del bordo sinistro del browser. Per evitare tutto ciò ed avere l'indentazione, ci sono solamente tre opzioni disponibili per gli sviluppatori.</p> + +<ol> + <li>Dare a ciascun elemento <code><li></code> un margine sinistro.</li> + <li>Dare all'elemento <code><ul></code> un margine sinistro.</li> + <li>Dare all'elemento <code><ul></code> un rientro (padding) sinistro.</li> +</ol> + +<p>Di fatto nessuno sembra aver usato la prima opzione. La seconda opzione è stata utilizzata da Internet Explorer e da Opera. La terza è stata adottata da Gecko e da tutti i browser basati su tale motore.</p> + +<p>Concentriamoci sulle due opzioni usate. In Internet Explorer e Opera, le liste sono indentate imponendo un margine sinistro di 40 pixel sull'elemento <code><ul></code>. Se si applica un colore di sfondo a <code><ul></code> lasciando inalterati i bordi, si ottiene il risultato di Figura 5.</p> + +<p><img alt="Figure 5"></p> + +<p>Gecko da parte sua impone un rientro (padding) di 40 pixel per l'elemento <code><ul></code>, per cui visualizzando la lista con lo stesso identico stile usato per la precedente figura, si ottiene il risultato di Figura 6.</p> + +<p><img alt="Figure 6"></p> + +<p>Come è possibile notare, i marcatori rimangono attaccati agli elementi <code><li></code>, ovunque essi siano. La differenza è interamente nello stile di <code><ul></code>, per cui è possibile notare le differenze solo con un colore di sfondo per <code><ul></code>.</p> + +<h3 id="Trovare_la_consistenza" name="Trovare_la_consistenza">Trovare la consistenza</h3> + +<p>Tirando le fila di quanto detto: se si desidera una visualizzazione omogenea e consistente delle liste su Gecko, Internet Explore e Opera, occorre impostare a <strong>entrambi</strong> i margini ed i rientri sinistri degli elementi <code><ul></code>. Possiamo invece ignorare gli elementi <code><li></code>. Se si desidera riprodurre la visualizzazione di default in Netscape 6.x, occorre scrivere:</p> + +<pre>ul {margin-left: 0; padding-left: 40px;}</pre> + +<p>Se invece siamo interessati a seguire ilmodello di Explorer/Opera:</p> + +<pre>ul {margin-left: 40px; padding-left: 0;}</pre> + +<p>Ovviamente, è possibile modifcare i valori utilizzati secondo le proprie necessità, anche in unità di misura diverse dal pixel, come <code>1.25em</code>. Se invece si desidera non avere nessuna indentazione, occorre impostare a zero margine e rientro:</p> + +<pre>ul {margin-left: 0; padding-left: 0;}</pre> + +<p>Si ricordi comunque, che facendo così si hanno i "puntini" appesi all'esterno della lista e del relativo elemento padre, per cui se l'elemento padre è il <code>body</code>, è molto probabile che i "puntini" finiscano all'esterno della finestra del browser, quindi non visibili.</p> + +<h3 id="Conclusione" name="Conclusione">Conclusione</h3> + +<p>In conclusione, nessuno dei browser mezionati in questo articolo fa la cosa giusta o quella sbagliata su come disegnano le liste. Utilizzano stili differenti, ed è questo che crea problemi. Tuttavia assicurandosi di impostare sia margine che rientro sinistro delle liste, si ottiene un risultato di indentazione delle liste quanto più possibile omogeneo tra i vari browser.</p> + +<h3 id="Raccomandazioni" name="Raccomandazioni">Raccomandazioni</h3> + +<ul> + <li>Quando si altera l'indentazione delle liste, assicurarsi di impostare sia margine che rientro (padding)</li> +</ul> + +<p> </p> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author(s): Eric A. Meyer, Netscape Communications</li> + <li>Last Updated Date: Published 30 Aug 2002</li> + <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Note: This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> + +<p>{{ languages( { "fr": "fr/Indentation_homog\u00e8ne_des_listes" } ) }}</p> diff --git a/files/it/web/css/-moz-font-language-override/index.html b/files/it/web/css/font-language-override/index.html index 069e77cfe1..769d7404ce 100644 --- a/files/it/web/css/-moz-font-language-override/index.html +++ b/files/it/web/css/font-language-override/index.html @@ -1,7 +1,8 @@ --- title: '-moz-font-language-override' -slug: Web/CSS/-moz-font-language-override +slug: Web/CSS/font-language-override translation_of: Web/CSS/font-language-override translation_of_original: Web/CSS/-moz-font-language-override +original_slug: Web/CSS/-moz-font-language-override --- <h2 id="*_html_body_div_p_font-Zawgyi-One_!_important">* , html, body, div, p { font-Zawgyi-One ! important; }</h2> diff --git a/files/it/web/css/ricette_layout/index.html b/files/it/web/css/layout_cookbook/index.html index bbdee7472e..da70d9d7b4 100644 --- a/files/it/web/css/ricette_layout/index.html +++ b/files/it/web/css/layout_cookbook/index.html @@ -1,7 +1,8 @@ --- title: Ricette per layout in CSS -slug: Web/CSS/Ricette_layout +slug: Web/CSS/Layout_cookbook translation_of: Web/CSS/Layout_cookbook +original_slug: Web/CSS/Ricette_layout --- <div>{{CSSRef}}</div> diff --git a/files/it/web/css/guida_di_riferimento_ai_css/index.html b/files/it/web/css/reference/index.html index c97a962ac6..466cff2f4c 100644 --- a/files/it/web/css/guida_di_riferimento_ai_css/index.html +++ b/files/it/web/css/reference/index.html @@ -1,12 +1,13 @@ --- title: Guida di riferimento ai CSS -slug: Web/CSS/Guida_di_riferimento_ai_CSS +slug: Web/CSS/Reference tags: - CSS - Overview - Reference - - 'l10n:priority' + - l10n:priority translation_of: Web/CSS/Reference +original_slug: Web/CSS/Guida_di_riferimento_ai_CSS --- <div>{{CSSRef}}</div> diff --git a/files/it/web/css/transition-timing-function/index.html b/files/it/web/css/transition-timing-function/index.html index c99e5f5678..0362f60e1d 100644 --- a/files/it/web/css/transition-timing-function/index.html +++ b/files/it/web/css/transition-timing-function/index.html @@ -50,7 +50,7 @@ transition-timing-function: inherit <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: ease</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -113,7 +113,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_easein" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: ease-in</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -176,7 +176,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_easeout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: ease-out</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -239,7 +239,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_easeinout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: ease-in-out</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -303,7 +303,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: linear</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -366,7 +366,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_stepstart" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: step-start</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -429,7 +429,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: step-end</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -492,7 +492,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: steps(4, end)</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> |