Tutorial Photoshop | WebDesign » Tutorial CSS http://www.andrealeti.it Mon, 06 Feb 2012 02:17:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Menu CSS – Menu con cursore http://www.andrealeti.it/menu-css-menu-con-cursore/ http://www.andrealeti.it/menu-css-menu-con-cursore/#comments Sat, 26 Sep 2009 22:49:32 +0000 Andrea Leti http://www.andrealeti.it/?p=462 Gli effetti rollover chi l’ha detto che debbano essere utilizzati solo per lo sfondo? Provate questo Menu!
Un nuovissimo menu con cursore che identifica esattamente dove si sta per cliccare e comunque la categoria selezionata!

Questo il testo HTML:

<ul class="Menu">
           <li> Prima voce </li>
           <li> Seconda voce </li>
           <li>Terza Voce</li>
</ul>

Le regole CSS da utilizzare sono:

.Menu{
width:199px; margin:0;
padding: 15px 0;
border-right:1px solid #999;
test-align:right;
}

.Menu li{ list-style:none;
position:relative;
right:-3px;
}

.Menu a

{
display:block;
text-decoration:none;
border-right:5px solid;
padding:5px 10px 5px 0;
background:#fff;
color:#000;
}

.Menu a:link, .Menu a:visited:{
border-color:#999;
}

.Menu 

a:hover,.Menu a:focus,
.Menu a:active{
border-color:#444;
text-decoration:underline;
}

Ho creato una pagina apposita per questo esempio: Menu con cursore

Spero di avervi fatto cosa gradita! Provate questo Menu, commentatelo e fatemi vedere come lo avete utilizzato.

]]> http://www.andrealeti.it/menu-css-menu-con-cursore/feed/ 3 Menu CSS – Menu a blocchi http://www.andrealeti.it/menu-css/ http://www.andrealeti.it/menu-css/#comments Thu, 17 Sep 2009 10:50:18 +0000 Andrea Leti http://www.andrealeti.it/?p=426 Ciao 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 lista non ordinata <ul>:

<ul>
 <li><a href="#">prima</a></li>
 <li><a 

href="#">seconda</a></li>
</ul>

Il codice CSS o per meglio dire le “regole CSS” da utilizzare sono:

.menu{width:180px;margin:0;padding:0}

.menu li{list-style:none;}
.menu a{
    display:block;
    text-decoration:none;
    background-color:#CCCCCC;
    border:1px solid #000;
    margin:1px 0px;
    padding:3px 10px;}
.menu a:link, .menu a:visited{ 

color:#000000;}
.menu a:hover{
color:#FFF;
background-color:#CC0033;
border-color:#CCCCFF;}

Questo codice presenta un bug per Internet Explorer, poichè gli elementi XHTML  ‘<a>‘,  definiti come elementi di tipo blocco con la regola:”display:block‘ nel codice css, vengono mal interpretati dai browser di casa Microsoft (assurdo per altro visto che hanno quasi il monopolio informatico sui browser) poiché creano degli spazi aggiuntivi che creano problemi di impaginazione.

Per evitare questo tipo di problema vi ho preparato un hack da inserire dopo lo style gia mostrato, sempre all’interno del tag <head></head> che andrà ad aggiungere due regole ai tag <li> e al tag <a>. Questo hack siccome è scritto sottoforma di commento verrà interpretato solo dai browser Microsoft! ;) 

<!--[if IE]>
<style>
.menu li{ display:inline;}
.menu a{height:0px;}
</style>
<![endif]-->

Per i più tosti di comprendonio…..ho preparato una pagina ad hoc da copiare ed incollare per i propri esperimenti:

<html><head>
<style>
.menu{width:180px;margin:0;padding:0}
.menu li{list-style:none;}
.menu a{ 

display:block; text-decoration:none;
background-color:#CCCCCC;
 border:1px solid #000;
 margin:1px 0px;
 padding:3px 10px;}
.menu a:link, .menu a:visited{ color:#000000;}
.menu a:hover{ color:#FFF; 

background-color:#CC0033; border-color:#CCCCFF;}
</style>
<!--[if IE]>
<style>
.menu li{ display:inline;}
.menu a{height:0px;}
</style>
<![endif]--

>
</head>
<body>
<ul>
 <li><a href="#">prima</a></li>
 <li><a href="#">seconda</a></li>
</ul>
</body>
/html>

Ho creato una pagina apposita per questo esempio: Menu CSS a Blocchi

Commentate con i vostri esperimenti!


]]> http://www.andrealeti.it/menu-css/feed/ 0 Tutorial CSS: Collegare le pseudoclassi dei link http://www.andrealeti.it/tutorial-css-collegare-le-pseudoclassi-dei-link/ http://www.andrealeti.it/tutorial-css-collegare-le-pseudoclassi-dei-link/#comments Thu, 10 Sep 2009 00:51:17 +0000 Andrea Leti http://www.andrealeti.it/?p=417 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 :link, :visited, :hover, :focus e :active, nel 90% dei casi utilizzate per la gestione del link e dei suoi eventi possono anche essere collegate fra loro.

Infatti, si possono collegare le pseudoclassi, facendo in modo che i link abbiano un colore diverso per lo stato :hover (e quindi quando gli passiamo il puntatore del mouse sopra) a seconda che il link in questione sia stato già visitato o meno.

a:link{color:#000000;}
a:visited{color:#ff00ff;}
a:link:hover{color:#ff0000;}
a:visited:hover{color:#0000ff;}

La cosa fenomenale di questa tecnica avanzata CSS è che non occorre preoccuparsi dell’ordine delle regole, poiché funzioneranno a prescidere grazie alle diverse destinazioni e specificità.

Come al solito però c’è un però. :D C’è sempre un guastafeste: Internet Explorer 6. Il maledetto browser Microsoft, infatti, potrebbe creare qualche problema  (uff…..che novità…) poiché legge le ultime due righe come a:hover.

]]> http://www.andrealeti.it/tutorial-css-collegare-le-pseudoclassi-dei-link/feed/ 0 Tutorial CSS – Angoli arrotondati per i box http://www.andrealeti.it/tutorial-css-angoli-arrotondati-per-i-box/ http://www.andrealeti.it/tutorial-css-angoli-arrotondati-per-i-box/#comments Wed, 19 Aug 2009 16:24:38 +0000 Andrea Leti http://www.andrealeti.it/?p=221 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 ma va bene qualsiasi programma di grafica.

box

Il box creato con il programma di grafica

Vediamo dunque come utilizzare i CSS per un box con angoli arrotondati.

Come si può ben vedere niente di trascendentale. E’ un semplice box azzurro con il bordo di un colore piu scuro. Fatto questo ci basterà con delle sezioni utente di Adobe Photoshop creare tre immagini che raffigurino il lato superiore, inferiore e mediano. Vediamo come:

boxm_01

alto.gif

boxm_03

medio.gif

boxm_05

basso.gif

I file sopra li chiamaremo alto.gif, medio.gif e basso.gif.
Vediamo ora il codice CSS per creare il nostro box ad effetto:

div.box-alto
{
  width: 

300px;
  background-image: url('alto.gif');
  background-repeat: no-repeat;
  background-position: left top;
  padding-top: 20px;
}
div.box-medio
{
  width: 300px;
  background-image: url

('medio.gif');
  background-repeat: repeat-y;
}
div.box-basso
{
  width: 300px;
  background-image: url('basso.gif');
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-

bottom: 20px;
}
div.box-testo
{
  margin: 0px 10px 0px 10px;
}

Mentre nel codice della nostra pagina HTML scriveremo:

<div class="box-alto">
  <div class="box-basso">

<div class="box-medio">
      <div class="box-testo">
      Scrivi qui il tuo testo...
      </div>
    </div>
  </div>
</div>

Facile Vero? Abbiamo detto all’HTML di utilizzare quelle immegini per visualizzare il suo DIV con gli angoli arrotondati. Tutto questo in attesa dei CSS 3 e del finale adeguamento dei browser microsoft alle specifiche CSS.

]]> http://www.andrealeti.it/tutorial-css-angoli-arrotondati-per-i-box/feed/ 2 Tutorial CSS – Direttiva !Important http://www.andrealeti.it/tutorial-css-direttiva-important/ http://www.andrealeti.it/tutorial-css-direttiva-important/#comments Wed, 19 Aug 2009 16:00:48 +0000 Andrea Leti http://www.andrealeti.it/?p=213 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 regola contiene appunto la direttiva !

important. Si noti che la direttiva !important deve trovarsi sempre dopo il valore associato e quindi prima del punto e virgola ; che separa le varie dichiarazioni. Quando due o più dichiarazioni con direttiva !important entrano in conflitto, il browser solitamente tiene conto anche della specificità del selettore dando ” causa vinta ” al selettore che ritiene innocente :D .

Tenete sempre presente che ogni browser per quanto simile agli altri assume sempre un comportamento leggermente diverso e decisamente caratteristico del browser stesso.

]]> http://www.andrealeti.it/tutorial-css-direttiva-important/feed/ 0