CSSDeck, lo stato dell’arte del CSS3

Si chiama CSSDeck ed è una raccolta degli script CSS3 più cool della rete. La nuova versione dei fogli di stile, pur lasciando inalterato l’impianto della precedente versione, aggiunge 130 nuove proprietà che rendono i CSS molto flessibili e potenti.

Pur restando nella sfera dell’impaginazione e dell’aspetto grafico in generale, con le nuove proprietà si riesce a scegliere qualsiasi tipo di font, avere molta libertà sui bordi e sugli sfondi (sfondi multipli), è ora possibile impostare gradienti di colore e adattare le proprietà del foglio di stile in base al dispositivo utilizzato (media queries). E che dire delle tecniche per dare dinamicità alla pagina, come transizioni, trasformazioni e animazioni? Dalla nascita dei CSS3, i web designer si sentono molto più potenti !!!

Capita però di non conoscere tutte le nuove capacità di cui dispone il CSS3 e il modo migliore per scoprirle è quello di analizzare gli esempi che troviamo in rete, peraltro sempre più articolati. CSSDeck si pone l’obiettivo di raccogliere i migliori script e di metterli a disposizione. La capacità didattica di questo sito è indubbia.

A Collection of Pure CSS Creations! Let’s form a big collection of items built with pure CSS and HTML and help frontend coders realize the power and flexibility of CSS. Hopefully the creations will help them get better at the new features of CSS (and in general too) and they’ll start making more use of it in their projects 🙂

Avete mai pensato possibile creare un effetto page flip solamente con il CSS? Eccolo qua:

Oppure impaginare un html in modo da farlo diventare come una tastiera per Mac?

O creare un mini calendario senza usare tabelle o oggetti flash?

CSSDeck è un’ottima risorsa per chi vuole scoprire tutte le caratteristiche dei CSS3 e un buon punto di partenza per essere conquistati e prendere la giusta carica per cominciare a studiarli.

3 Semplici ed utili tutorial per jQuery


Oggi con questo articolo stileremo una lista di 10 semplici ed utili esempi dell’ormai nota libreria di Javascript, jQuery. Con queste librerie, realizzare effetti complessi, diventa veramente banale.

1. Tooltip con jQuery

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale:

  1. Semplice tooltip
  2. Testo con anteprima immagine
  3. Thumbnail con anteprima ingrandita

Step 1

Inserite il seguente codice tra i tag del vostro sito internet.

[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]

Step 2

Successivamente dovete inserire il seguente codice tra i all’interno dei tag head, tra <script type=”text/javascript”> //il codice qui </script>, oppure realizzate un nuovo file .js incollate il seguente codice ed importatelo con <script src=”funzione.js” type=”text/javascript”></script>

[code]
this.screenshotPreview = function(){
/* CONFIG */

xOffset = 10;
yOffset = 30;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append("<p id=’screenshot’><img src=’"+ this.rel +"’ alt=’url preview’ />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
this.imagePreview = function(){
/* CONFIG */

xOffset = 10;
yOffset = 30;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append("<p id=’preview’><img src=’"+ this.href +"’ alt=’Image preview’ />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id=’tooltip’>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
[/code]

Step 3

Come nello Step 2, importate quest’altra funzione:

[code]
$(document).ready(function(){
tooltip();//active les tooltip simple
imagePreview();//active les tooltip image preview
screenshotPreview();//active les tooltip lien avec preview
});
[/code]

Step 3

Come nello Step 2, importate quest’altra funzione:

[code]
$(document).ready(function(){
tooltip();//active les tooltip simple
imagePreview();//active les tooltip image preview
screenshotPreview();//active les tooltip lien avec preview
});
[/code]

Step 4

Adesso i tooltip sono funzionanti, occorre solo inserire il seguente file nel nostro foglio di stile CSS.

[code]
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
[/code]

Step 5

Siamo giunti al termine del nostri piccolo tutorial. Adesso dobbiamo solo richiamare il tutto nei seguenti modi:

Classico tooltip con testo

[code]
<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>
[/code]

Testo con anteprima immagine

[code]
<a href="image.jpg" class="preview" 2="2="2="title="Great""" 3="looking" 4="4="4="landscape">Roll""" 5="over" 6="to" 7="preview</a>" 8="[/html" language=">"]
<h5>Immagine con tooltip di anteprima</h5>
<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>
[/code]

Source


2. Horizontal Accordion

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale.

Step 1

Inserite il seguente codice tra i tag del vostro sito internet.

[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]

Step 2

Successivamente inserite tra i tag il seguente codice:

[code]
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 210;
minWidth = 75;

$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
[/code]

Step 3

Diamo un tocco di classe con i CSS (in realtà questi sono essenziali al funzionamento dello script):

[code]
ul{
list-style: none;
margin: 0;
padding: 0;
}

ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}

ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}

#a1{
width: 210px;
}

ul li img{
position: absolute;
border: 3px solid #881212;
}

ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}
[/code]

Step 4

Infine richiamiamo tutte le funzioni con il seguente codice:

[code]
<ul>
<li>
<a id="a1">
<img src="images/free_thumb.jpg" />
<p>
<strong>Freebies</strong><br/>
Download free files to make your job easier.
</p>
</a>
</li>
<li>
<a>
<img src="images/tut_thumb.jpg" />
<p>
<strong>Tutorials</strong><br/>
Tips and tricks to help you
keep up with the latest technology.
</p>
</a>
</li>
<li>
<a>
<img src="images/inspire_thumb.jpg" />
<p>
<strong>Inspiration</strong><br/>
Get inspired by what other designers are doing.
</p>
</a>
</li>
</ul>
[/code]

3. Menu Accordion

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale.

Step 1

Inserite il seguente codice tra i tag del vostro sito internet.

[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]

Step 2

Successivamente inserite tra i tag la segueente funzione:

[code]
function initMenus() {
$(‘ul.menu ul’).hide();
$.each($(‘ul.menu’), function(){
$(‘#’ + this.id + ‘.expandfirst ul:first’).show();
});
$(‘ul.menu li a’).click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;

if($(‘#’ + parent).hasClass(‘noaccordion’)) {
$(this).next().slideToggle(‘normal’);
return false;
}
if((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
if($(‘#’ + parent).hasClass(‘collapsible’)) {
$(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
}
return false;
}
if((checkElement.is(‘ul’)) && (!checkElement.is(‘:visible’))) {
$(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
checkElement.slideDown(‘normal’);
return false;
}
}
);
}
$(document).ready(function() {initMenus();});
[/code]

Step 3

Inoltre per rimuovere un bug del buon vecchio IE, utilizziamo i conditional tag:

[code]
<!–[if lt IE 8]>
<style type="text/css">
li a {display:inline-block;}
li a {display:block;}
</style>
<![endif]–>
[/code]

Step 4

Adesso decoriamo il nostro menu, aggiungendo il seguente codice nel nostro foglio di stile.

[code]
ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}

ul.menu a {
display: block;
text-decoration: none;
}

ul.menu li {
margin-top: 1px;
}

ul.menu li a {
background: #333;
color: #fff;
padding: 0.5em;
}

ul.menu li a:hover {
background: #000;
}

ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}

ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
[/code]

Step 5

Adesso richiamiamo tutte le funzioni con il seguente codice html:

[code]
<ul id="menu1" class="menu">
<li style="position: static;">
<a href="#">Weblog Tools</a>
<ul style="display: block;">
<li><a href="http://www.pivotx.net/">PivotX</a></li>
<li><a href="http://www.wordpress.org/">WordPress</a></li>
<li><a href="http://www.textpattern.com/">Textpattern</a></li>

<li><a href="http://typosphere.org/">Typo</a></li>
</ul>
</li>
<li style="position: static;">
<a href="#">Programming Languages</a>
<ul style="display: none;">
<li><a href="http://www.php.net/">PHP</a></li>

<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="http://www.python.org/">Python</a></li>
<li><a href="http://www.perl.org/">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>

</li>
<li><a href="http://www.i-marco.nl/weblog/">Marco’s blog (no submenu)</a></li>
<li style="position: static;">
<a href="#">Cool Stuff</a>
<ul style="display: none;">
<li><a href="http://www.apple.com/">Apple</a></li>
<li><a href="http://www.nikon.com/">Nikon</a></li>

<li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
<li><a href="http://www.nintendo.com/">Nintendo</a></li>
</ul>
</li>
<li style="position: static;">
<a href="#">Search Engines</a>
<ul style="display: none;">
<li><a href="http://search.yahoo.com/">Yahoo!</a></li>

<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.ask.com/">Ask.com</a></li>
<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
</ul>
</li>
</ul>
[/code]

Nota bene

Modificando la classe, potremo ottenere degli effetti differenti. Di seguito le classi disponibili:

  1. menu
  2. menu expandfirst
  3. menu noaccordion
  4. menu collapsible expandfirst

Source

Script Ajax: una libreria di widget gratuita

Ajax Rain, una libreria gratuita di widget in Ajax Ajax Rain è una libreria di più di 450 script Ajax. Si tratta per lo più di widget per completare il vostro sito, come progress bar, grafici interattivi, form di upload, tooltip, menu contestuali e molto altro. Gli script sono pubblici e di solito fanno uso dei già noti framework Ajax come QooxDoo, JQuery, YUI.

Come dice lo slogan, "Secret Behind your inspiration", Ajax Rain è un’ottima risorsa da cui prendere spunto e per mettere in moto la nostra fantasia.

Libreria Ajax

Google Maps sul proprio sito in 30 secondi

Google Maps sul proprio sitoAggiungere una cartina di Google Maps sul proprio sito ora è più facile. Questa guida in 4 passi vi mostra come farlo:

  1. Vai su WikiMapia.org e seleziona la regione che ti interessa mettere sul tuo sito
  2. Clicca nel menu in alto a destra la voce "Map on your page"
  3. Aggiusta il rettangolo proposto in modo da farlo adattare all’area voluta
  4. Copia e incolla il codice che ti propone sul tuo sito

Ecco un esempio funzionante del risultato. In questo caso ho creato la cartina d’Italia:

(via WikiMapia Blog)