Ormai lo sviluppo e l'evoluzione dei browser web come Safari, Chrome e Firefox ha dato la possibilità ai web designer e non, di sbizzarrirci con  la creazione di effetti bellissimi, semplicemente usando il CSS3 senza bisogno di javascript, ottenendo risultati favolosi. Infatti in questo tutorial vedremo come ottenere degli effetti 3D semplicemente usando il CSS3.
Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

Come sapete oramai grazie ai CSS3 si possono ottenere degli animazioni fantastici senza la necessità di applicare scripting alla pagina.
Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

JQuery Mobile è un framework web-based che può essere utilizzato per creare applicazioni web o sviluppare siti web (potete vedere l'ultima versione mobile che ho creato per www.fight4fun.it aprendolo da un dispositivo mobile), per tutti i tipi di dispositivi mobili. Fornisce un'esperienza ottimizzata per smart-phone e tablet touch-based, pur consentendo ai dispositivi più anziani di accedere al contenuto. E' supportato dalla comunità JQuery. Sono sicuro che avete sentito parlare di jQuery. Così, la sua versione mobile è abbastanza vicino a quello che già siete abituati, ma con un sacco di miglioramenti
Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

Abbiamo parlato anche nei precedenti tutorial di gallerie di immagini con fantastici effetti. In rete esistono migliaia di esempi. La scelta cade nella utilità e nella semplicità di queste gallerie e dell'uso che dobbiamo fare.
Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

Non c'è sito web che non abbia la necessità di inserire dentro le pagine una galleria fotografica o semplicemente uno slide di immagini. Che tu sia un fotografo che vuole presentare il suo lavoro,
Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

Nofollow è un valore assegnabile all'attributo rel dell'elemento HTML a per indicare ai motori di ricerca che un collegamento ipertestuale non deve influenzare il posizionamento della pagina web del collegamento nell'indice dei motori di ricerca stessi.
Tra gli strumenti per i webmaster notiamo il famoso "Nofollow".
Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

Il CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio informatico usato per definire la formattazione di documenti HTML, XHTML e XML ad esempio in siti web e relative pagine web. Il supporto completo e corretto delle specifiche CSS non è offerto da nessun browser attuale. Tuttavia esistono browser che si avvicinano molto a questo risultato ed altri che invece ne sono molto lontani. La lista che segue è di motori di rendering perché a loro è assegnato il compito di formattare la pagina secondo le istruzioni CSS. Può essere utilizzato in progetti Flash per formattare l'aspetto dei i campi di testo.  Usare i CSS in Flash offre una serie di vantaggi, come la possibilità di personalizzare il testo in maniera più profonda (ad esempio, cambiare il colore del dei collegamenti) e per aggiornare l'aspetto del testo senza dover tornare al file di origine.
Questo tutorial vi insegnerà come formattare un testo caricato esternamente tramite CSS.
Trovate il tutorial completo in questo sito: http://www.republicofcode.com/tutorials/flash/as3css/ Anche se in inglese, è molto semplice e intuitivo. In caso di difficoltà non esitate a chiedere.
Buon proseguimento. Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

Per gli sviluppatori web, HTML5 ha introdotto molte nuove funzionalità e usare i sfondi sfumati con i CSS3 è stata una di queste caratteristiche. Ma certe volte invece di perdere tempo con i codici e la scelta dei colori, eccoci che ci vengono in aiuto dei tool fantastici. Uno dei tanti, o meglio quello che uso io è "Ultimate CSS Gradient Generator", che è uno strumento online gratuito. Per eseguirlo è necessario utilizzare l'ultima versione di un browser HTML5 come Firefox, Chrome o Safari. Lo strumento è composto da due riquadri: il riquadro di sinistra consente di selezionare un colore, assegnare un nome al gradiente, regolare i cursori e si ferma, il riquadro sottostante, che consente di visualizzare in anteprima il gradiente e ottenere il codice CSS.

Utilizzando questo tool on-line gli sviluppatori web hanno la possibilità di scegliere il colore della sfumature, e aggiungere, modificare ed eliminare le posizioni di arresto. Il riquadro di anteprima consente agli sviluppatori di vedere il risultato finale. Questo pannello mostra anche come sarà visualizzato con l'Internet Explorer. Alla fine, quando si è soddisfatti delle modifiche apportate, è sufficiente copiare il codice CSS generato e incollarlo nel foglio di stile.

Non aggiungo altro e lascio a voi  il piacere di  provare questo   fantastico tool.

Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

Per chi ha bisogno di spazio e vuole sistemare graficamente e non solo il suo sito o blog, mettendo in ordine  tutti i link, le pagine, le etichette e qualsiasi cosa, questo post sarà sicuramente di grande aiuto.
Come vedete nell'immagine (cliccando qui o sopra l'immagine si aprirà la demo che ho preparato per darvi meglio l'idea), abbiamo una lista di link, che all'interno contengono altri link.
Cliccandoci sopra, vedrete l'effetto scroll che visualizza il contenuto della categoria scelta.
E' una specie di "Mobiletto con cassetti", dove possiamo inserire e tenere in ordine tutto quello che vogliamo. Possiamo inserire i nostri "Blog Amici", le etichette piu richieste, la lista dei nostri libri o film preferiti, e tutto chiuso in uno spazio piccolo e graficamente bellissimo.
Per inserirlo è facilissimo. Vediamo come:
1 - Collegatevi a blogger.
2 - Andate in Layout, clickate su Aggiungi un gadget pagina, poi su HTML/JavaScript, inserite il codice sotto:

<!-- inizio cod CSS --> <style type="text/css"> .menuPad { height:2px; } #slide { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#000000 none repeat scroll 0 0; font-family:arial,sans-serif; font-size:12px; margin:0; padding:10px; position:absolute; width:181px; } #slide dt { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(back.png) repeat scroll 0 0; color:#DDDDDD; cursor:pointer; font-weight:bold; height:37px; line-height:37px; margin:0; padding:0; text-align:center; width:181px; } #slide dt.slide { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(back.png) repeat scroll left bottom; color:#FFFFFF; } #slide dt a { color:#FFFFFF; display:block; height:37px; line-height:37px; text-decoration:none; } #slide dt a:hover { color:#FFCC00; } #slide dd { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#EEEEEE url(shade.png) no-repeat scroll left top; height:0; margin:0; overflow:hidden; padding:0; position:relative; text-align:center; width:181px; } #slide dd ul { bottom:0; height:auto; left:0; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0; position:absolute; } #slide dd ul li { border-bottom:1px solid #AAAAAA; height:25px; line-height:25px; width:181px; } #slide dd ul li a { color:#666666; display:block; font-size:11px; height:25px; text-decoration:none; } #slide dd ul li a:hover { color:#000000; } </style> <!-- fine cod CSS --> <dl id="slide"> <dt><a href="">HOME</a></dt> <dt id="item1" class="">Prima Categoria</dt> <dd id="sitem1" style="height: 0px;" class=""> <ul> <li><a href="inserire qui il link">Primo link</a></li> <li><a href="inserire qui il link">Secondo link</a></li> <li><a href="inserire qui il link">Terzo link</a></li> </ul> </dd> <dt id="item2" class="">Seconda Categoria</dt> <dd id="sitem2" class="" style="height: 0px;"> <ul> <li><a href="inserire qui il link">Primo link</a></li> <li><a href="inserire qui il link">Secondo link</a></li> <li><a href="inserire qui il link">Terzo link</a></li> </ul> </dd> <dl> <div class="menuPad"></div> <!-- inizio cod JAVASCRIPT --> <SCRIPT> var getdd = document.getElementById('slide').getElementsByTagName("DD"); var getdt = document.getElementById('slide').getElementsByTagName("DT"); for (var i=0; i<getdt.length; i++) { getdt[i].onclick=function() { if (this.id.indexOf('item') != -1) { for (var z=0; z<getdd.length; z++) { if (getdd[z].id.indexOf(this.id) !=-1 && getdd[z].className=='') { eNext = getdd[z].firstChild; while (eNext.nodeType!=1) {eNext = eNext.nextSibling;} ulHeight = eNext.offsetHeight; expand (0,ulHeight,getdd[z].id) } else { eNext = getdd[z].firstChild; while (eNext.nodeType!=1) {eNext = eNext.nextSibling;} ulHeight = eNext.offsetHeight; if (getdd[z].offsetHeight > 0) { contract (ulHeight,0,getdd[z].id) } } if (getdd[z].id.indexOf(this.id) !=-1 && getdd[z].className=='') { getdd[z].className='selected'; this.className='slide'; } else { getdd[z].className=''; ePrevious = getdd[z].previousSibling; while (ePrevious.nodeType!=1) {ePrevious = ePrevious.previousSibling;} ePrevious .className=''; } } } } } function expand (cY, fY, subY) { cY=cY+2;; if (cY <= fY) { document.getElementById(subY).style.height = cY + "px"; setTimeout ("expand("+cY+","+fY+",'"+subY+"')", 5); } } function contract (cZ, fZ, subZ) { cZ=cZ-2; if (cZ >= fZ) { document.getElementById(subZ).style.height = cZ + "px"; setTimeout ("contract("+cZ+","+fZ+",'"+subZ+"')", 5); } } </SCRIPT> <!-- fine cod JAVASCRIPT -->

Naturalmente, bisogna personalizzarlo.
Trovate il blocco di codice sotto e personalizzate le scritte in rosso:

<dt id="item1" class="">Prima Categoria</dt>
<dd id="sitem1" style="height: 0px;" class="">
<ul>
<li><a href="inserire qui il link">Primo link</a></li>
<li><a href="inserire qui il link">Secondo link</a></li>
<li><a href="inserire qui il link">Terzo link</a></li>
</ul>
</dd>
<dt id="item2" class="">Seconda Categoria</dt>
<dd id="sitem2" class="" style="height: 0px;">
<ul>
<li><a href="inserire qui il link">Primo link</a></li>
<li><a href="inserire qui il link">Secondo link</a></li>
<li><a href="inserire qui il link">Terzo link</a></li>
</ul>
</dd>

Potete aggiungere tutte le categorie che volete, personalizzando l'identificatore del blocco codice(vedi nel essempio le scritte in blu) e aumentando il numero (esempio: item 3 e sitem 3 - item 4 e sitem 4 - item 5 e sitem 5 - e cosi via

<dt id="item1" class="">Nome Categoria</dt>
<dd id="sitem1" style="height: 0px;" class="">
<ul>
<li><a href="inserire qui il link">Nome</a></li>
<li><a href="inserire qui il link">Nome</a></li>
<li><a href="inserire qui il link">Nome</a></li>
</ul>
</dd>

Dopo aver fatto tutte le prove e tutte le modifiche, quando siete soddisfatti,
salvate tutto ed Enjoy your Accordion Menu. Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su

In questo tutorial vedremo come inserire in due passaggi, nel nostro blog o sito, un fantastico menu orizzontale, realizzato con i CSS. E' un menu di grande impatto, grazie anche ai vari colori. Ho fatto una piccola modifica per chi vuole inserirlo nel blog con piattaforma blogger.
Come vedete, sotto c'è il menu e se vi piace, seguite il tutorial e vedrete che è un gioco da ragazzi.

• Home
  01
• About
  02
• Archive
  03
• Contact
  04
• RSS
  05
• bestar
  05

1 - Collegatevi a blogger. 2 - Andate in Layout, clickate su Aggiungi un gadget pagina, poi su HTML/JavaScript, inserite il codice sotto e salvate tutto.
<div align='right'> <p><style type="text/css"> #css_menu_13{ padding-bottom:20px; background-color:black; } #css_menu_13 ul{ list-style:none; overflow:hidden; height:110px; margin:0; padding:20px 20px 0 20px; border-bottom:5px solid white; } #css_menu_13 li{ display:inline; } #css_menu_13 li a{ display:block; float:left; width:70px; height:50px; margin:60px 2px 0 2px; border-top:5px solid white; border-right:5px solid white; border-left:5px solid white; text-decoration:none; text-align:center; text-transform:uppercase; font-family:arial; font-size:11px; font-weight:bold; color:white; } #css_menu_13 li a span{ display:block; margin-top:5px; padding:5px; } #css_menu_13 li a b{ display:block; margin-top:10px; font-family:"Arial Narrow"; font-size:60px; } #css_menu_13 li a:hover{ height:110px; margin-top:0; } #css_menu_13 li a.item1{ background-color:#FF0099; } #css_menu_13 li a.item2{ background-color:#99CC00; } #css_menu_13 li a.item3{ background-color:#FF3300; } #css_menu_13 li a.item4{ background-color:#3399FF; } #css_menu_13 li a.item5{ background-color:#FFB300; } #css_menu_13 li a.item6{ background-color:#323644; } #css_menu_13 li a.item1 span{ background-color:#CC007A; } #css_menu_13 li a.item2 span{ background-color:#7AA300; } #css_menu_13 li a.item3 span{ background-color:#CC2900; } #css_menu_13 li a.item4 span{ background-color:#297ACC; } #css_menu_13 li a.item5 span{ background-color:#CC8F00; } #css_menu_13 li a.item6 span{ background-color:#768ebc; } </style> <div id="css_menu_13"> <ul> <li><a href="#nogo" class="item1"><span>Home</span><br/><b>01</b></a></li> <li><a href="#nogo" class="item2"><span>About</span><br/><b>02</b></a></li> <li><a href="#nogo" class="item3"><span>Archive</span><br/><b>03</b></a></li> <li><a href="#nogo" class="item4"><span>Contact</span><br/><b>04</b></a></li> <li><a href="#nogo" class="item5"><span>RSS</span><br/><b>05</b></a></li> <li><a href="#nogo" class="item6"><span>bestar</span><br/><b>05</b></a></li> </ul> </div></p> </div>
Naturalmente, bisogna personalizzarlo.
Per esempio. Trovate il codice sotto e sostituite il colore, cambiando il codice esadecimale #FF0099.
#css_menu_13 li a.item1{ background-color:#FF0099; }
Qui potete scegliere il colore che volete. Troverete tutti i colori possibili. Fare la stessa cosa per gli altri colori e alla fine quando siete soddisfatti, salvate tutto.
L'ultima cosa da impostare sono gli url da inserire/sostituire.
Trovate il codice sotto, e sostituite #nogo con il vostro url.
<li><a href="#nogo" class="item1"><span>Home</span><br/><b>01</b></a></li>
Per coloro che vogliono inserire il menu nel loro sito web con WP o altre piattaforme, vi mando nel sito di FlepStudio. In caso di problemi o bisogno di consigli, basta chiedere. Continua a leggere

Chiudi

 Abbonati gratis a questo blog      

Torna Su