disign.it | CSS3 e Jquery: alternativa ai classici pulsanti 'leggi tutto' | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 3.437 visualizzazioni

CSS3 e Jquery: alternativa ai classici pulsanti 'leggi tutto'

04/11/2011

Una situazione tipica di un blog o di un sito di contenuti è la presentazione di un sommario o di un'anteprima che permetta all'utente di comprendere il contenuto e quindi di accedere all'articolo completo se di suo interesse.
Molti risolvono con più o meno eleganti soluzioni grafiche di pulsanti che indicano la presenza di un contenuto esteso.
Attraverso Jquery e l'utilizzo dei CSS3 possiamo ottenere un effetto diverso dal solito, piacevole e personalizzabile con pochi interventi.
L'esempio che vi sottopongo è  composto dal file contenente i link, il css, la libreria jquery e il javascript specifico per settare gli effetti, i testi dei pulsanti e i link di destinazione.
Qui  trovate l'esempio personalizzato, per modificare i parametri dovrete intervenire sul foglio stile e sul js example.js, in particolare dalla riga 37:
$(function() {
   
    $(".widget-uno").middleBoxButton("Leggi tutto", "http://www.disign.it");
    $(".widget-due").middleBoxButton("Continua...", "http://www.improntedigitali.it");

});

La funzione definisce la classe, che deve essere applicata al div interessato, e invia i due parametri testo del pulsante e link da aprire al click.
Se necessitiamo di diversi div cliccabili con testi e link diversi sarà sufficiente aggiungere
    $(".widget-tre").middleBoxButton("testo del pulsante", "link da aprire");
etc etc.
Qui  potete scaricare il file zip dell'esempio.

 

La documentazione completa la trovate nel sito da cui è tratto l'esempio  CSS-tricks.

← Ricavare informazioni geo-IP dell'utente Clonare Hard disk →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.