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 [...]
Share on Facebook
maggio 20, 2009 – 11:57 am
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 [...]
Share on Facebook
maggio 20, 2009 – 11:42 am
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: [...]
Share on Facebook
maggio 14, 2009 – 7:56 am
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 [...]
Share on Facebook
maggio 12, 2009 – 11:20 am
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;
}
Share on Facebook
Share on Facebook
maggio 5, 2009 – 12:36 pm
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>
Share on Facebook
Share on Facebook
