-
Nens.
User deleted
Creare un riquadro per gli avatar nelle discussioni
Un semplice metodo per guarnire gli avatar nelle discussioni tramite dei riquadri personalizzabili
[Anteprima]
Una semplice guida alla creazione di riquadri attorno agli avatar nei post. Gli effetti possono essere combinati e migliorati, se ci sono problemi è sufficiente chiedere supporto
E' presente un'anteprima dell'effetto ottenuto a destra del codice e in seguito una breve analisi al codice da modificare.
InstallazioneCITAZIONEEffetto BaseCODICE.details img[alt="Avatar"] {background: #XXXXXX; padding: XXpx}.
Analizzando il codice:- background: XXXXXX; al posto delle X va inserito il codice esadecimale del colore che volete come sfondo
- padding: XXpx al posto delle X vanno inseriti i pixel che determineranno la larghezza del riquadro
CITAZIONE.details img[alt="Avatar"] {background: #XXXXXX; padding: XXpx; border: XXpx solid #XXXXXX}.
Piccola variazione con bordo colorato:
Analizzando il codice:- border: XXpx solid #XXXXXX
- XXpx al posto delle X inserire il numero di pixel che determinerà la larghezza del bordo
- #XXXXXX al posto delle X inserire il colore esadecimale che avrà il bordo
CITAZIONE.details img[alt="Avatar"] {background: #XXXXXX; padding: XXpx; border-top-left-radius: XXpx XXpx; border-top-right-radius: XXpx XXpx; border-bottom-left-radius: XXpx XXpx; border-bottom-right-radius: XXpx XXpx;}.
Bordi arrotondati:
Analizzando il codice:- border-top-left-radius: XXpx XXpx; al posto delle X va inserito il numero di pixel che determinerà la curvatura del bordo superiore-sinistro. Per renderla omogenea ripetere lo stesso valore
- border-top-right-radius: XXpx XXpx; al posto delle X va inserito il numero di pixel che determinerà la curvatura del bordo superiore-destro. Per renderla omogenea ripetere lo stesso valore
- border-bottom-left-radius: XXpx XXpx; al posto delle X va inserito il numero di pixel che determinerà la curvatura del bordo inferiore-sinistro. Per renderla omogenea ripetere lo stesso valore
- border-bottom-right-radius: XXpx XXpx; al posto delle X va inserito il numero di pixel che determinerà la curvatura del bordo inferiore-destro. Per renderla omogenea ripetere lo stesso valore
CITAZIONE.details img[alt="Avatar"] {background: #XXXXXX; padding: XXpx; box-shadow: XXpx XXpx XXpx #XXXXXX;}.
Effetto Base:
Analizzando il codice:- box-shadow: 0px 0px XXpx #XXXXXX
- XXpx al posto delle X va inserito il numero di pixel che determinerà la grandezza della sfumatura
- #XXXXXX al posto delle X inserire il colore esadecimale che avrà il bordo
Credits
Il ForumFree Magazine non pretende crediti obbligatori con link e banner da inserirsi sul vostro forum. Tuttavia, dal momento che il codice ha richiesto uno sforzo non indifferente, chiunque volesse inserirli può trovarli qui di seguito (è fatto invece severo divieto di rimuovere i crediti presenti nel codice):HTML<a href="http://ffmagazine.forumfree.it/?t=56883877">Creare un riquadro per gli avatar nelle discussioni</a> creato da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=5649561">Nens</a>
E' possibile, come indicato nei termini di utilizzo, ridistribuire questa guida sui vostri forum lasciandone inalterati integrità e contenuti/crediti ed inserendo il seguente codice in fondo al messaggio:HTML<div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><a title="Creare un riquadro per gli avatar nelle discussioni" href="http://ffmagazine.forumfree.it/?t=56883877"><b>Creare un riquadro per gli avatar nelle discussioni</b></a>
Realizzata da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=5649561">Nens</a> del <a title="Forumfree Magazine - Stai al passo con Forumfree!" href="http://ffmagazine.forumfree.it/"><b>ForumFree Magazine</b></a>.
Guida rilasciata sotto una <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Licenza Creative Commons 3.0</a>.</div>Creare un riquadro per gli avatar nelle discussioni
Realizzata da Nens del ForumFree Magazine.
Guida rilasciata sotto una Licenza Creative Commons 3.0.
Edited by Paralizer - 9/10/2017, 17:00
. -
~SackBoy¬.
User deleted
Utilissimo 
. -
»CooLÐrifT™.
User deleted
Grazie, utilissima guida 
. -
.darko.
User deleted
Guida carina e semplice da capire. L'ho sempre trovato un effetto molto bello e professionale se usato con un criterio. . -
.
Bella guida , bravo Nens. . -
Delta.
User deleted
@~MasterPro~ ™: https://ffmagazine.forumfree.it/?t=56902231 . -
Yamkò.
User deleted
Era ora,che ci fosse una guida vera e propria,ora basta misteri ehhe.Potresti mettere anche per il bordo trasparente ? . -
crezì.
User deleted
Si potrebbe mettere un " ombra" alla base del riquadro? . -
.darko.
User deleted
Basta aggiungere:CODICEbox-shadow: Xpx Xpx Xpx #hex. -
crezì.
User deleted
Grazie! . -
.Dante..
User deleted
Grazie mille per questo utilissimo tutorial! . -
Zekrom10.
User deleted
bravo davvero un bel script! . -
"Drakuun".
User deleted
Come è stato fatto il bordo avatar su questo forum?
non riesco a farlo
. -
.
È stato fatto con border-radius,box-shadowelinear-gradient, almeno credo. In pratica io ero riuscito a farne una simile così:CITAZIONE/* CORNICE AVATAR */
.details img[alt="Avatar"] {background: linear-gradient(#FFF,#DDD); padding: 5px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; border-bottom-right-radius: 5px 5px; box-shadow: 0 0 5px #171717}SPOILER (clicca per visualizzare)Facendoci caso, bisognerebbe mettere duebox-shadow. :/. -
"Drakuun".
User deleted
Ah ecco come mai non veniva! grazie mille! .
Creare un riquadro per gli avatar nelle discussioni |
