Menu CSS – Menu a blocchi

17 settembre 2009 - Fonte: http://www.andrealeti.it

TUTORIAL-CSSCiao ragazzi, oggi mi è venuto in mente di voler creare una collezione di menu css, che potessere aiutare, chi mi segue, nella creazione delle proprie pagine web e perché no anche i più esperti di CSS per relazionarsi con me e gli altri, alla scoperta di nuove e personali tecniche di realizzazione dei menu ma anche di interi layout grafici.

Iniziamo con un menu semplicissimo: un menu css a blocchi.

MENU CSS A BLOCCHI VERTICALE

Il codice (x)html del menu si presenta davvero in manuere semplice, una semplice...

Leggi il seguito »

Nessun commento »

Inserito in , , , , , , ,

Tutorial CSS: Collegare le pseudoclassi dei link

10 settembre 2009 - Fonte: http://www.andrealeti.it

TUTORIAL-CSS

Durante la vita di un Web Designer o di un Visual Designer, l’incontro con i fogli di style CSS è pressoché inevitabile.

Ogni web designer che si rispetti ha imparato dalle basi dei CSS fino ad espandersi e diventare un vero esperto. L’utilizzo dei CSS spesso viene, pensato come: “utilizzo i CSS per creare siti che non usufruiscono di una architettura tabellare, poiche quest’ultima appesantisce la pagina..“. I CSS, invece, sono qualcosa di davvero potente!

Forse non tutti sanno che le pseudoclassi...

Leggi il seguito »

Nessun commento »

Inserito in , , , , , ,

Tutorial CSS – Angoli arrotondati per i box

19 agosto 2009 - Fonte: http://www.andrealeti.it

TUTORIAL-CSS

Una delle esigenze più comuni in questo web 2.0 è quella di arrotondare un po tutto. Creare box con angoli arrotondati, quindi, permette di dimenticare quel tipo di grafica squadrata – tipica dei design tabellari – cui il web ci ha abituato sin dalle sue origini.
Le forme piu libere infatti creano effetti visivi gradevoli e decisamente piu “soft” rappresentando una soluzione semplice ma davvero efficace per mettere in risalto determinate aree della nostra pagina web.
Per prima cosa ci serve un box da tagliare. Per crearlo userò Photoshop...

Leggi il seguito »

Nessun commento »

Inserito in , , , , , , , ,

Tutorial CSS – Direttiva !Important

19 agosto 2009 - Fonte: http://www.andrealeti.it
TUTORIAL-CSS Come utilizzare !important

Indipendentemente dalla specificità del selettore, singole dichiarazioni possono assumere la massima priorità se seguite da ” !important ” (senza virgolette). Vediamo uno stralcio di codice:

p {
background: #f1f1f1  !important;
color: #000000;
}
p#selettore {
background: #EEE;
color: #000;
}

La dichiarazione riguardante la proprietà background della prima regola sovrascrive in ogni caso quella della seconda regola ( indipendentemente dal peso del selettore e/o dall’ordine di comparsa delle due regole), poichè la dichiarazione della prima...

Leggi il seguito »

Nessun commento »

Inserito in , , , , , , , , ,

CSS: Box Trasparente

25 giugno 2009 - Fonte: http://www.programmando.net
Vi piacerebbe applicare un’immagine ad un box e renderlo trasparente per visualizzare gli elementi sottostanti? Ecco il codice:   #BOX { filter: alpha(opacity=80); position: Absolute; top: 25px; left: 25px; background-color: #EEEEEE; width: 130px; height: 50px; [...]...

Leggi il seguito »

Nessun commento »

Inserito in , , ,

CSS: Posizionare testo in verticale

25 giugno 2009 - Fonte: http://www.programmando.net
Utilizzando il codice Css si può scrivere il testo in verticale, applicando una stilizzazione all’elemento testuale. Effetto molto utile nella creazione di report a colonna, ecco il codice completo:     td { text-align: center; font-size: 11px; font-family: verdana; } td.verticale { writing-mode: tb-rl; filter: flipv fliph; }     <table [...]...

Leggi il seguito »

Nessun commento »

Inserito in , , , ,

CSS: Tagliare immagini

16 giugno 2009 - Fonte: http://www.programmando.net
Volete tagliare un’immagine da inserire sul vostro sito senza utilizzare sofisticati programmi di grafica? Create l’immagine assegnandola a una classe, nell’esempio è stata scelta Rid: img src=”immagine.jpg” class=”RID” Infine inserite questo codice css: img.RID { position: Absolute; clip: Rect(0px 50px 200px 0px); } ...

Leggi il seguito »

Nessun commento »

Inserito in , , ,

CSS: Box overlayer

15 giugno 2009 - Fonte: http://www.programmando.net
Oggi vi presento un semplice codice per eseguire un effetto grafico che permette di centrare nello schermo un box overlayer. Script per disegnare overlayer: Esempio di box centrato!!! Ed ecco il codice Css:   style type="text/css" body { margin: 0px; height: 100%; background: #FFFFFF; } div.LayerCentrato { background: #DDDDDD; border: 1px solid #808080; position: absolute; top: 50%; left: 50%; width: 350px; height: 200px; margin: -100px, -175px; /style <pre lang="css"> ...

Leggi il seguito »

Nessun commento »

Inserito in , , ,

CSS: Finestre pop-up

12 giugno 2009 - Fonte: http://www.programmando.net


Ecco un esempio di codice che permette di creare una finestra pop-up che appare quando viene cliccato un link o un pulsante.           function ApriFinestra() { msg=open("","schermo","toolbar=no,directories=no,menubar=no,width=110,height=300,resizable=yes") msg.document.write("<a href="http://www.programmando.net">Sito...

Leggi il seguito »

Nessun commento »

Inserito in , , ,