The Elder Scrolls Forum - ESO, Skyrim, Oblivion, Morrowind & GDR

Codici Html!, Lista di codici html che vi possono essere utili!

« Older   Newer »
  Share  
~The Andre Scrolls MM~
view post Posted on 12/3/2013, 20:53




Ragazzi ho pensato di aprire questo topic per postare vari codici html che possono servirvi! Se ne avete da inserire scriveteli qui sotto e io editerò il messaggio per inserirli!

Ecco una lista:

-Per mettere il testo in corsivo
CODICE
<i>Testo prova</i>

esempio: Testo prova


-Per mettere il testo in grassetto
CODICE
<b>Testo prova</b>

esempio: Testo prova


-Per sottolineare il testo
CODICE
<u>Testo prova</u>

esempio: Testo prova


-Per barrare il testo
CODICE
<del>Testo prova</del>

esempio: Testo prova


-Per colorare le scritte (titolo, provenienza, messaggi, ecc.)
CODICE
<font color="codice colore">



-Per colorare una scritta
CODICE
[color=QUI INSERITE IL COLORE CHE VOLETE IN INGLESE]Testo prova[/color]

esempio: Testo prova


-Per nascondere una parte del profilo (titolo personalizzato, messaggi e provenienza)
CODICE
<div style="display: none"><div></div>



-Per inserire un'immagine nel profilo (sostituire xx con le dimensioni che si vogliono)
CODICE
<img src=indirizzo immagine width="XX" height="XX">



-Inserire una tabella per gli interessi
CODICE
<tr><td class="title2" colspan="2"<br><align="center">TITOLO VOLUTO</td></tr><tr><td valign="top" width="30%"><b></b></td><td></td></tr><td ="" valign="top"><b><br>SOTTOTITOLO VOLUTO</td><td><br> TESTO VOLUTO<br></td></tr



-Testo come apice
CODICE
Testo <sup>prova</sup>

esempio: Testo prova


-Testo come pedice
CODICE
Testo <sub>prova</sub>

esempio: Testo prova


-Testo lampeggiante
CODICE
<marquee direction="up" scrollAmount=35 height="40" width="80%">Testo prova</marquee>

esempio: Testo prova


-Inserire una lista con varie voci
CODICE
<UL TYPE=square>
1° voce
2° voce
3° voce
[...]
</UL>

esempio:

    1° voce
    2° voce
    3° voce
    [...]


-Per inserire un bottone con testo
CODICE
<button>Testo prova</button>

esempio:


-Inserire un bottone con un link
CODICE
[URL=QUI INSERITE IL LINK]<button>Testo prova</button>[/URL]

esempio:


-Inserire uno sfondo nella firma
CODICE
<div style="background-image:QUI METTETE IL LINK DELL'IMMAGINE"> QUI LA VOSTRA FIRMA</div>



-Testo che rimbalza ai lati
CODICE
<marquee behavior="alternate" width="30%">Testo prova</marquee>

esempio: Testo prova


-Per dare ombre e stili a parole
CODICE
<span style="display:block;color:COLORE TESTO;text-shadow:COLORE OMBRA NUMEROpx NUMEROpx NUMEROpx">Testo prova</span>

esempio: Testo prova
PICCOLA SPIEGAZIONE
Per impostarlo a vostro piacere dovete mettere i due colori (nome in inglese o codice) e settare i tre numeri:
-il primo serve per la distanza dell'ombra in orizzontale (maggiore numero = maggiore distanza)
-il secondo serve per la distanza dell'ombra in verticale (maggiore numero = maggiore distanza)
-il terzo serve per l'intensità della sfocatura dell'ombra (maggiore numero = maggiore sfocatura ombra)


-Inserire link in una scritta (il link si aprirà nella pagina corrente)
CODICE
<a href=QUI INSERITE IL LINK>Testo prova</a>

esempio: Testo prova


-Inserire link in una scritta (il link si aprirà in una nuova pagina)
CODICE
<a href=QUI METTETE IL LINK target=blank>Testo prova</a>

esempio: Testo prova


-Far scorrere la firma o un testo
CODICE
<marquee direction=QUI METTETE LA DIREZIONE IN CUI VOLETE CHE SCORRA scrollAmount=QUI METTETE LA VELOCITA DI SCORRIMENTO>Testo Prova</marquee>
<marquee direction=left scrollAmount=5>Testo prova 2</marquee>
<marquee direction=left scrollAmount=5>Testo prova 3</marquee>

esempio: Testo Prova
Testo prova 2
Testo prova 3


-Inserire un box di testo
CODICE
<textarea>Testo prova</textarea>

esempio:


-Inserire un menù a tendina
CODICE
<select>
<option value="1">Testo prova</option>
<option value="2">Testo prova 2</option>
<option value="3">Testo prova 3</option>
</select>

esempio:


-Inserire una descrizione su una scritta (passate il puntatore sopra la scritta prova per vedere cosa vuol dire)
CODICE
<acronym title="INSERISCI QUI LA DESCRIZIONE">Testo prova</acronym>

esempio: Testo prova


-Inserire una scrollbar
CODICE
<div style="width: 430px; height:60px; overflow: auto">Testo prova
prova!
Ho detto prova!!</div>

esempio:
Testo prova
prova!
Ho detto prova!!
Accidenti!
Mi leggi?
Bravo!
Questa è una...
PROVA!



-Mettere un cursore su una scritta
CODICE
<div style="cursor: Crosshair">
Testo prova
</div>

esempio:

Testo prova







Tenuto in continuo aggiornamento!



Edited by ~The Andre Scrolls MM~ - 13/3/2013, 21:40
 
Top
view post Posted on 12/3/2013, 21:01
Avatar

Hero

Group:
Khajiit
Posts:
8,212

Status:


Guarda che non devi usare il QUOTE, se no non si capisce :asd: deci cliccare su CODE:

CODICE
<i>Testo prova</i>


Testo prova

Così viene giusto :)
 
Top
Vlad Anseem Ivory
view post Posted on 12/3/2013, 21:04




Idea carina, partecipo. :sisi:

Se devo aggiungere altri code edito questo post.
_____

- Colorare il profilo (titolo personalizzato, provenienza etc.)
CODICE
<font color="codice del colore">

- Nascondere una parte del profilo (titolo personalizzato, messaggi e provenienza)
CODICE
<div style="display: none"><div></div>

- Inserire un'immagine nel profilo (sostituire le xx con le dimensioni volute)
CODICE
<img src=indirizzo immagine width="XX" height="XX">

- Inserire una tabella per gli interessi
CODICE
<tr><td class="title2" colspan="2"<br><align="center">TITOLO VOLUTO</td></tr><tr><td valign="top" width="30%"><b></b></td><td></td></tr><td ="" valign="top"><b><br>SOTTOTITOLO VOLUTO</td><td><br>TESTO VOLUTO<br></td></tr>

- Modifiche al testo:

    Grassetto
    CODICE
    <b></b>

    Esempio: Testo prova

    Corsivo
    CODICE
    <i></i>

    Esempio: Testo prova

    Sottolineato
    CODICE
    <u></u>

    Esempio: Testo prova

    Barrato
    CODICE
    <del></del>

    Esempio: Testo prova

    Testo apice
    CODICE
    <sup></sup>

    Esempio: Testo prova

    Testo pedice
    CODICE
    <sub></sub>

    Esempio: Testoprova

- Testo lampeggiante
CODICE
<marquee direction="up" scrollAmount=35 height="40" width="80%">Testo voluto</marquee>

Esempio: Testo prova

- Immagine con collegamento ad una pagina web
CODICE
<a href="http://indirizzo sito"><img src="http://indirizzo immagine"></a>

Esempio:

- Inserire una lista di voci
CODICE
<UL TYPE=square>
Prima voce di menu
Seconda voce di menu
Terza voce di menu
[...]
</UL>


- Pulsante con testo
CODICE
<button>Inserire il testo voluto</button>

Esempio:

- Per inserire uno sfondo nella firma
CODICE
<div style="background-image:url(link immagine)"> FIRMA </div>


- Testo che rimbalza ai lati
CODICE
<marquee behavior="alternate" width="30%">Testo voluto</marquee>

Esempio: Testo prova

Edited by Vlad Anseem Ivory - 12/3/2013, 23:24
 
Top
~The Andre Scrolls MM~
view post Posted on 12/3/2013, 21:32




Ora aggiungo. :P
Grazie Rekhyt non me ne ero accorto XD
 
Top
Vlad Anseem Ivory
view post Posted on 12/3/2013, 21:35




Ora sono impegnato con una faccenda, dopo te ne posto altri. :fiorellino:
 
Top
~The Andre Scrolls MM~
view post Posted on 12/3/2013, 21:40




Ok grazie, non preoccuparti. Non è per me, ma per aiutare coloro che non sono molto bravi sull'argomento e vogliono provare :)
 
Top
view post Posted on 12/3/2013, 21:49
Avatar

Wanderer

Group:
Argoniano
Posts:
1,736

Status:


Oh, questo è il mio campo siccome faccio una scuola "informatica",domani ne posto un po'
 
Top
view post Posted on 12/3/2013, 22:41
Avatar

Hero

Group:
Khajiit
Posts:
8,212

Status:


Beh, a questo punto...

TEXT SHADOW


(l'ho appena imparato :D)

CODICE
<span style="display:block;color:#INSERIRE CODICE COLORE TESTO;text-shadow: #INSERIRE CODICE COLORE OMBRA NUMEROpx NUMEROpx NUMEROpx">Testo prova</span>


Ok. Allora. L'effetto che noi vogliamo ottenere é questo.

TESTO E OMBREGGIATURA GIALLI, 2px 2px 3px

Testo prova

Il codice sopra era in forma generale. A ogni scritta in maiuscolo dovete sostituire qualcosa per modellare il vostro codice. Per ottenere l'effetto sopra riportato, io modifico il codice in questo modo:

CODICE
<span style="display:block;color:#fff700;text-shadow: #fff700 2px 2px 3px">Testo prova</span>


Diamo un'occhiata confrontando questo codice e quello in forma generale. Al posto di INSERIRE CODICE COLORE TESTO bisogna ovviamente inserire il codice del testo che voi volete. Io ho inserito il codice del colore giallo. Al posto di CODICE COLORE OMBRA bisogna inserire il codice colore per la vostra ombra. Può essere uguale o diverso rispetto a quello del testo.

TESTO GIALLO CON OMBREGGIATURA ROSSA, 2px 2px 3px

Testo prova

Per ottenere questo secondo effetto, il codice é il seguente:

CODICE
<span style="display:block;color:#fff700;text-shadow: #ff0500 2px 2px 3px">Testo prova</span>


Come vedete, al posto di CODICE COLORE OMBRA prima avevo inserito lo stesso codice della scritta, quello del giallo; adesso ho inserito quello del rosso.

In sostanza, potete inserire qualsiasi colore vogliate sia per il testo sia per l'ombra. Tabella codici colori: Click

Ora vediamo i valori px. Nel codice, come avrete visto, ce ne sono 3.

- Il primo valore px determina la distanza dell'ombra dalla scritta in orizzontale. Più questo valore é alto, più l'ombra sarà proiettata lontano dalla scritta. Se pari a zero, l'ombra coinciderà con la vostra scritta (solo in senso orizzontale).

TESTO E OMBREGGIATURA GIALLI, 10px 2px 3px

Testo prova

CODICE
<span style="display:block;color:#fff700;text-shadow: #fff700 10px 2px 3px"> Testo prova</span>


Come vedete, l'ombra é molto orientata verso destra. Se volete orientarla verso sinistra, non dovete far altro che mettere un - (sarebbe un segno meno, comunque un trattino) davanti al valore px.

- Il secondo valore px determina il distaccamento dell'ombra in senso verticale. Più é alto, più l'ombra sarà proiettata lontano dalla scritta. Se pari a zero, l'ombra coinciderà con la vostra scritta (solo in senso verticale).

TESTO E OMBREGGIATURA GIALLI, 2px 10px 3px

Testo prova

CODICE
<span style="display:block;color:#fff700;text-shadow: #fff700 2px 10px 3px"> Testo prova</span>


Anche qui vedete che l'ombra risulta più staccata rispetto ai casi precedenti. Analogamente a prima, basta inserire un meno davanti al valore per far distaccare l'ombra nell'altro senso, ovvero verso l'alto.

- Il terzo valore px determina quanto la proiezione del vostro testo risulterà sfocata. Se questo valore é inserito pari a zero, la scritta equivarrà a una qualsiasi scritta normale, e non sembrerà una vera "ombra":

Testo prova

CODICE
<span style="display:block;color:#fff700;text-shadow: #fff700 20px 20px 0px"> Testo prova</span>


Come vedete dal codice ho inserito come valori orizzontali e verticali 20px, in questo modo l'ombra é molto distanziata dalla scritta e potete vedere chiaramente che é uguale alla scritta stessa. Ecco invece cosa succede se il terzo valore px é alto:

Testo prova

CODICE
<span style="display:block;color:#fff700;text-shadow: #fff700 20px 20px 10px"> Testo prova</span>


Visto? Come prima, l'ombra é distanziata, ma molto molto sfocata.

Questo é tutto. Come avrete capito, modificando colori e valori potete ottenere una grande quantità di effetti. Ecco un esempio.

Queste due scritte sono state realizzate con scritta gialla e ombreggiatura rossa, 0px verticali e orizzontali, e diversi valori per il terzo valore px:

Testo prova

CODICE
<span style="display:block;color:#fff700;text-shadow: #ff0500 0px 0px 0px"> Testo prova</span>


In questo caso, ombra e scritta dunque coincidono. La sfocatura é nulla, e il risultato é una scritta giallo-rossa.

Testo prova

CODICE
<span style="display:block;color:#fff700;text-shadow: #ff0500 0px 0px 10px"> Testo prova</span>


Qui, invece, la sfocatura é pari a 10px, e abbiamo quindi un alone rosso attorno alla scritta.

FINE



Scusate se ho scritto una spatafiata enorme, ma altrimenti non si capisce un accidenti di come usarli :( questa é praticamente una guida, tu inserisci solo il codice generale e il codice con il testo di prova. Questa roba sarà utile a chi vuole impararlo per bene :)
 
Top
view post Posted on 12/3/2013, 22:47

Daedra

Group:
Utenti Onorari
Posts:
17,500

Status:


Bell'idea :sisi:

-Inserire un link ad un indirizzo che si aprirà nella pagina corrente
CODICE
<a href=http://tes.forumfree.it/>Link</a>

Esempio: Link

-Inserire un link ad un indirizzo che si aprirà in una nuova pagina (2 Metodi)
CODICE
<a href=http://tes.forumfree.it/ target=blank>Link</a>
<a href=http://tes.forumfree.it/ target=_new>Link</a>

Esempio: Link

-Inserire un testo, un'immagine o un link scorrevole
direction -> Indica la direzione (left - right - up - down)
scrollAmount -> Indica la velocità di scorrimento (numero)
CODICE
<marquee direction=left scrollAmount=5>Testo Semplice</marquee>
<marquee direction=left scrollAmount=5><a href=http://tes.forumfree.it/?t=17205751 >Link Regolamento</a></marquee>
<marquee direction=left scrollAmount=5><img src=http://img854.imageshack.us/img854/6668/regolamentob.png /></marquee>

Esempio:
Testo Semplice
Link Regolamento



EDIT: Forse lo scorrimento ha qualche problema XD, nell'anteprima scorre :asd:
 
Web  Top
view post Posted on 12/3/2013, 22:54
Avatar

Hero

Group:
Khajiit
Posts:
8,212

Status:


Figo lo scorrimento :ahstop: mi garba assai :sisi:

EDIT: adesso la mia firma scorre :rotfl: siiiiii :D
 
Top
Vlad Anseem Ivory
view post Posted on 12/3/2013, 23:24




Ho editato il mio post aggiungendo qualche code. :sisi:
 
Top
view post Posted on 12/3/2013, 23:56
Avatar

Wanderer

Group:
Nord
Posts:
1,848
Location:
da Scoprire

Status:


Belli :ahsisi:

Eppure c'è stato un tempo in cui studiavo HTML e CSS.
 
Top
view post Posted on 13/3/2013, 10:57
Avatar

Daedra

Group:
TES Admin
Posts:
26,518

Status:


I vecchi marquee.. Che ricordi: anni fa su forumfree era nata la moda dello scorrimento :asd: Si andava da quello che si rallentava/fermava al passaggio del mouse a quello super mega veloce :asd:

Comunque volevo rispondere a Rekhyt: a quanto pare non si riesce a far apparire l'effetto che hai dato al tuo titolo agli altri elementi del tuo profilo. Ti consiglio di "accontentarti" del semplice colore giallo e del grassetto.
 
Web  Top
view post Posted on 13/3/2013, 11:07
Avatar

Hero

Group:
Khajiit
Posts:
8,212

Status:


Uffa :( in effetti ho anche cercato in giro su internet, ma non c'é nemmeno nessuno che lo chieda :( vabbe, tornerò al caro vecchio giallo. Nel topic del flood assisterete a numerosi esperimenti di scrittura col text shadow :satanasso:
 
Top
~The Andre Scrolls MM~
view post Posted on 13/3/2013, 14:34




Benissimo! Ne arrivano a fiotti! Se continuate a darmi tempo mano a mano li aggiungerò nel post iniziale! :P
 
Top
21 replies since 12/3/2013, 20:53   2568 views
  Share