Differenze tra le versioni di "Aiuto:Manuale di stile/Avanzato"

In realtà esistono molti altri modi per richiamare il modulo Css, per cui si rimanda al [[Modulo:Css|modulo stesso]].

 

Per questioni di efficienza alcuni gradienti possono essere aggiunti tramite classi CSS:

* '''Solo''' gradienti con lo schema a uno/due colori descritto all'inizio della [[#gradienti|sezione sui gradienti]].

{{fiorepkmn|076|Golem|Roccia|Distruzione|3|15}}

|- class="roundy flex-xs flex-row flex-wrap flex-main-stretch flex-items-center" style="margin: 0.5ex 0; padding: 0.3ex;"

| class="min-width-xs-50" style="padding: 0.3ex;" | 9<div class="text-small visible-xs">Cerchi</div>

{{fiorepkmn|169|Crobat|Veleno||Nessuna|4}}

# Aggiungere la classe <code>block-''xx''</code> (laddove <code>''xx''</code> è il breakpoint a cui la riga della tabella non è più una riga) al wrapper di mini sprite e nome, e <code>style="padding-left: 0.3em;"</code> (<code>0.3em</code> è la larghezza di un <code>&amp;nbsp;</code>) allo <code>span</code> che wrappa il nome. Questo sistema la parte mobile. Ciò che serve è fare in modo che lo <code>span</code> contenente il nome non si allarghi ad occupare tutto lo spazio disponibile. Dato che il meccanismo è basato sui <code>flex</code>, basta fare in modo che il parent non sia più un <code>flex</code> al breakpoint desiderato per disattivare i comportamenti <code>flex</code> dei figli. Il <code>padding</code> laterale serve a separare il nome dal mini sprite, e di nuovo, se il tutto non è già centrato così, aggiungere la classe CSS <code>text-center</code> sistema la situazione.<br />'''NOTA''': se il nome va a capo da mobile, è probabilmente perché hai usato un <code>div</code> al posto di uno <code>span</code>. L'uso di un elemento <code>inline</code> o <code>inline-block</code> è fondamentale, poiché in assenza di un parent <code>flex</code> gli elementi <code>block</code> occupano l'intera riga.

 

 

{{pagine di aiuto}}