Senior Member
- Group
- Moderatore
- Posts
- 12,556
- Creepy Score
- +817
- Status
- Offline
|
|
Salve amici creepypastiani e benvenuti al nuovo tutorial della vostra giovinetta Rory, che vi spiegherà come utilizzare al meglio i codici per aprire questo tipo container (o, quantomeno, un container contenete questi codici)! Non posso più utilizzare colori per evidenziare le cose, per cui, state ben attenti 
---------- Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo
CODICE <div align="center"><div style="background-color: rgba(0,0,0,0.7); width: 100px; height: 150px; border-radius: 3px; box-shadow: 0 2px 3px rgb(0,0,0); border: 1px solid rgba(255,255,255,0.3)"><div style="text-align:center;padding-top:5px;">[IMG=2lnyglz]http://i55.tinypic.com/2lnyglz.png[/IMG] ----------<div align="center"><div style="overflow:auto; width: 88px; height: 50px; background-color: rgb(200,200,200); border-radius: 3px; margin-top: 40px; color: black"> Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo</div></div></div></div></div>
Prima di tutto però, c'è da precisare che se non avete letto quello che c'è scritto nel tutorial number one, non possiamo andare avanti. Per cui, recatevi nel Come aprire un Container!
Dopo aver letto le seguenti opzioni, riveleremo alcune interessanti opzioni che vi potranno ben servire quando e se volete aprire un vostro container senza partire da quello proposto.
Come avete ben visto, ho usato il metodo RGB per indicare il colore dello sfondo del nostro container. In questo caso è nero. Abbiamo aggiunto l'opacità e la si ottiene aggiungendo un "a" ad "rgb", e in questo caso si ottiene "rgba", ed un numero che va da 0 a 1. Io ho opacizzato fino ad ottenere il un'opacità del 30% (per cui ho impostato a 0,7). Più il numero è grande, più l'opacità è riempita e lo sfondo pieno. Quindi se avessimo messo un 0,9, invece che 0,7, il bello sfondo del CPF si sarebbe visto ben poco <3
Mi raccomando, non confondetevi col codice "Opacity" il quale, invece di opacizzare la singola parte, vi opacizzerà tutto il container.
Dopo aver aggiunto questa piccola postilla, andiamo avanti col nostro tutorial.
Come avete ben visto, ho riutilizzato il Width e l'Height per dare larghezza e altezza (ripeto, indispensabili per dargli forma) e ho aggiunto il border.
In questo caso l'ho impostato a "Solid" quale codice mi darà una linea continua. Poi ho impostato la grandezza in PX. In questo caso ho utilizzato la grandezza minima, ovvero ad 1px, colorandola e opacizzandola con l'RGBA (come potete ben vedere).
Esistono diverso modi per impostare il bordino quali "Dashed" il bordo tratteggiato:
CODICE <div align="center"><div style="background-color: rgb(0,0,0); width: 300px; height: 30px; border: 1px dashed"></div></div>
Oppure il bordino "dotted", che vi darà un bordo punteggiato:
CODICE <div align="center"><div style="background-color: rgb(0,0,0); width: 300px; height: 30px; border: 1px dotted"></div></div>
Chiedo venia se, per mio grande difetto, solo solita utilizzare il bordino smussato, il quale, come potete ben vedere, la nostra bella skin è piena di questi. <3
Il bordo privo di spigolo appuntito lo si ottiene utilizzando il "Border-radius". Le grandezze sempre in PX (talvolta io uso anche la misura in PC, che equivale a cinque volte tanto il PX. Quindi, se usassimo "10px" è come se avessimo usato "2pc").
C'è da dire una cosina, però, per quanto riguarda questo codice.
Il Border-radius, se inserito una volta cambia tutti i lati. Ma possiamo inserirlo quante volte sono i lato che vogliamo "smussare", per renderlo più figo (?). Quando si usano le quantità per quattro volte (poiché, quattro sono i lati xD <3) dobbiamo renderci conto che: il primo numero, equivale allo smussamento dello spigolo in alto a sinistra, il secondo quello in alto a destra, a seguire, il terzo quello in basso a destra e l'ultimo quello in basso a sinistra.
CODICE <div align="center"><div style="background-color: rgb(0,0,0); width: 300px; height: 30px; border: 1px solid; border-radius: 10px"></div></div>
CODICE <div align="center"><div style="background-color: rgb(0,0,0); width: 300px; height: 30px; border: 1px solid; border-radius: 10px 0px 10px 0px"></div></div>
Vi posto una chicca: il bordo può essere indirizzato a vostro piacimento, ovviamente, tenendo conto della direzione quale volete impostarlo.
Le direzioni sono Top, Bottom, Left, Right (sopra, sotto, sinistra, destra).
CODICE <div align="center"><div style="background-color: rgb(0,0,0); width: 300px; height: 30px; border-top: 1px solid;"></div></div>
CODICE <div align="center"><div style="background-color: rgb(0,0,0); width: 300px; height: 30px; border-left: 1px solid;"></div></div>
E così via.
E adesso arriviamo alla parte che per molti può sembrare la cosa più difficile. Senza esserlo (sì, ragazzi, l'importante e conoscerne l'utilizzo).
Parliamo del Margin e del Padding. Come (spero) potete ben sapere, questi codici sono assai utilizzati nella creazione delle skin, poiché la prima determina lo spazio tra il bordo del contenitore e tutti gli elementi attorno, e la seconda è lo spazio tra il contenitore e il "contenuto del contenitore".
A voi dei banali esempi:
Testo senza Padding né margin.
CODICE <div align="center"><div style="background-color: rgb(0,0,0); width: 300px; height: 30px; border-bottom: 1px solid; text-align: center; font-size: 12px; font-family: tahoma">Testo senza Padding né margin.</div></div>
Testo con margin a 10px, senza padding.
CODICE <div align="center"><div style="background-color: rgb(0,0,0); width: 300px; height: 30px; border-bottom: 1px solid; text-align: center; font-size: 12px; font-family: tahoma; margin: 10px">Testo con margin a 10px, senza padding.</div></div>
Testo con padding a 10px, senza margin.
CODICE <div align="center"><div style="background-color: rgb(0,0,0); width: 300px; height: 30px; border-bottom: 1px solid; text-align: center; font-size: 12px; font-family: tahoma; padding: 10px">Testo con padding a 10px, senza margin.</div></div>
Testo con padding a 10px e margin a 10px
CODICE <div align="center"><div style="background-color: rgb(0,0,0); width: 300px; height: 30px; border-bottom: 1px solid; text-align: center; font-size: 12px; font-family: tahoma; padding: 10px; margin: 10px">Testo con padding a 10px e margin a 10px</div></div>
Nel mio container, ho utilizzato il Margin, abbinato alla direzione "top". Quindi lo spazio che si andrà a creare tra la scroll bar (Poiché si trova sotto all'immagine) e il banner del CPF. Se avessi messo Margin-bottom, la scroll bar si sarebbe spostata più in alto, e così via per le altre due direzioni.
Ultima cosa, ma non per importanza: l'ombra dietro il container. La si crea utilizzando il box-shadow. Per far sì che si veda, su usano tre bagliori misurati in px. Il primo darà l'ombra verso destra, la seconda in basso e la terza da la sfocatura.
Esempio senza sfocatura:
Testo con padding a 10px e margin a 10px
CODICE <div align="center"><div style="background-color: rgb(0,0,0); width: 300px; height: 30px; box-shadow: 5px 2px 0px; border-bottom: 1px solid; text-align: center; font-size: 12px; font-family: tahoma; padding: 10px; margin: 10px">Testo con padding a 10px e margin a 10px</div></div>
Esempio con la sfocatura:
Testo con padding a 10px e margin a 10px
CODICE <div align="center"><div style="background-color: rgb(0,0,0); width: 300px; height: 30px; box-shadow: 5px 2px 3px; border-bottom: 1px solid; text-align: center; font-size: 12px; font-family: tahoma; padding: 10px; margin: 10px">Testo con padding a 10px e margin a 10px</div></div>
se volessimo indirizzare l'ombra a sinistra, non c'è cosa più semplice di questa: Possiamo usare i numeri negativi (mettiamo un segno "meno" vicino).
Testo con padding a 10px e margin a 10px
CODICE <div align="center"><div style="background-color: rgb(0,0,0); width: 300px; height: 30px; box-shadow: -5px 2px 3px; border-bottom: 1px solid; text-align: center; font-size: 12px; font-family: tahoma; padding: 10px; margin: 10px">Testo con padding a 10px e margin a 10px</div></div>
Ragazzi belli, il tutorial finisce qui! Fatemi sapere se vi è piaciuto e se vi è stato d'aiuto! Alla prossima!
|
|
.