Articoli marcati con tag ‘Css tutorial’

CSS: Realizziamo un testo infuocato

3 giu 2009
Pubblicato in CSS, HowTo | Nessun commento »

8

Ecco un effetto molto semplice da realizzare che attirerà molto gli utenti, attraverso l’attributo Filter e alle impostazioni di Glow il risultato finale sarà simile a quello dell’immagine.

Codice:

style
div.fire {
color: #FFFFFF;
font-family: Arial;
font-size: 20px;
font-weight: Bold;
text-align: center;
letter-spacing: 10px;
filter: glow(color: #800000, strength: 5);
width: 100%;
}
/style
<pre lang="css">

Il tag Html che contiene il testo sarà il seguente:
div class=”fire”Effetto testo infuocato/div

Pronti a infuocare le vostre pagine?

CSS: Moduli personalizzarli con fogli di stile

20 mag 2009
Pubblicato in CSS | Nessun commento »

Con il codice Css ormai si può fare di tutto, creare layout,formattazione dei form e tanto altro. Oggi vedremo come migliorare ulteriormente i form personalizzati attraverso il Css. Uno degli elementi più importanti quando si crea un form è l’elemento

Ecco il codice per il campo usarname per esempio:

 
input.user {
background-image: url(NomeImmagine.png/gif/jpg);
background-repeat: no-repeat;
background-position:left;
background-color:#fff;
width:290px;
color: #666;
padding:3px 5px 3px 19px;
font-size: 1em;
font-family: 'trebuchet ms', sans-serif;
border: 1px solid #ccc;
height: 27px; 
}

In teoria è meglio se in una pagina sono presenti più campi di testo per assegnare le classi ad ogni tipologia. Input.user viene utilizzato nel caso in cui decidete di inserire un icona.

In questo caso è stato assegnato un valore di 19pixel , perfetto per un icona di 16×16, stessa cosa accade per il campo password.

CSS: Inserire sfondo tridimensionale ai form

20 mag 2009
Pubblicato in CSS, HowTo, Risorse | Nessun commento »

textarea

Il codice Css è il più potente e interessante per creare effetti unici su elementi form, le pagine web con queste caratteristiche risultano accattivanti per gli utenti. Si possono creare effetti tridimensionali su in immagine, creando anche contrasti a piacimento.

Il codice da inserire è questo:

 
.box {
color: #000000;
background-image: url(sf_text.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-attachment: fixed;
background-repeat: no-repeat;
border: 1px solid #999;
height: 20px;
padding-top: 3px;
padding-left: 5px;
width:150px;
}

Per la textarea:

 
color: #000000;
background-image: url(textarea.gif);
background-attachment: fixed;
background-repeat: no-repeat;
border: 1px solid #999;
height: 100px;
padding-top: 3px;
padding-left: 5px;
width:300px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}

Effetto ombreggiatura su testo

14 mag 2009
Pubblicato in CSS | Nessun commento »

text-shadow

Utilizzando solo codice css e una base di Html è possibile ricreare un effetto molto simile a quello che si può avere utilizzando strumenti di grafica. Inserite il testo di base all’interno dell’elemento span codice html:

 
<h1 class="ombreggiatura_css"><span>OMBREGGIATURA CSS</span>OMBREGGIATURA CSS</h1>

Aggiungente il codice CSS:

 
ombreggiatura_css{
/*la misura dei caratteri*/
font-size:30px;
/*il colore del ombreggiatura del testo*/
color:#CCCCCC;
/*necessario per poi posizionare l’elemento span in modo assoluto*/
position:relative;
}
.ombreggiatura_css span{
/*il colore del testo*/
color:#3399CC;
/*trasformazione da elemento di riga a elemento di blocco*/
display:block;
/*posizione assoluta in rapporto a l’elemento genitore*/
position:absolute;
/*spostamento di 2 px verso l’alto*/
top:-2px;
/*spostamento di 2 px verso la sinistra*/
left:-2px;
}

Css: creare pulsanti con 3 stati

12 mag 2009
Pubblicato in CSS, Risorse | Nessun commento »

bb613545custom_button_animatedbutton_3it-itvs90

Semplice funzione per inserire all’interno della propria pagina pulsanti di vario tipo e dimensioni.

Codice Html:

<div>
<a class="selezionato" href="#nogo"></a>
<a href="#nogo"></a></div>

Codice Css:

#menu a{
width: 100px;
height: 25px;
float: left;
display: block;
background:url(btn_bg.jpg) no-repeat top;
margin-right: 2px;
}
#menu a:hover{
background-position: center;
}
#menu a.selezionato, #menu a.selezionato:hover{
background-position: bottom;
}

CSS: come inserire immagini ripetute

5 mag 2009
Pubblicato in CSS | Nessun commento »

Inserire nel proprio sito web un immagine fissa su bordi potrebbe esser un buon modo di personalizzare l’interfaccia, senza utilizzare tabelle si può effettuare questa funzione tramite l’utilizzo di codice XHTML e CSS.

div#container{
width:500px;
margin:20px auto;
padding:0;
border:1px solid #000;
}
 
Scegliete un immagine di <strong>500pixel </strong>:
 
div#alto{
margin:0;
padding:0;
height:25px;
width:500px;
background-image:url(alto.gif);
background-position:top left;
background-repeat:repeat;
}
div#centro{
margin:0;
padding:0;
height:250px
}
div#basso{
margin:0;
padding:0;
height:25px;
width:500px;
background-image:url(basso.gif);
background-position:top left;
background-repeat:repeat;
}
 
Infine per <strong>html in body:</strong>
 
<div>
<div></div>
<div><img src="girasole.jpg" alt="girasole" /> </div>
<div></div>
</div>