How I did it: come creare uno sticker-ribbon in 3 passi

Martedì 2 Dicembre, 2008

Gli sticker (o ribbon) sono quelle immagini che vengono posizionate in alto a destra, o in alto a sinistra, ed hanno comunemente una forma angolare a fascia. Ne esistono di vari tipi, dalle semplici immagini statiche ai più spettacolari filmati Flash. A volte sono costruiti in modo tale da rimanere nella loro posizione anche quando scorriamo il contenuto della finestra del browser.
Se non volete affidarvi a servizi come QuickRibbon.com, ma volete costruire un ribbon tutto vostro, ecco 3 semplice passi da seguire.

1. Creiamo l'immagine

Prima di tutto creiamo l'immagine che vogliamo posizionare in uno degli angoli destro o sinistro. L'immagine qui sotto, di 163x163 pixel, ecostruita per l'angolo superiore sinistro.

Sticker Ribbon

Per rendere l'effetto di sovrapposizione completo bisogna scegliere, al momento del salvataggio, un formato che supporti la trasparenza, come il GIF o il PNG.

2. Il codice HTML

Salvata la nostra immagine possiamo inserirla nella nostra pagina, avvolgendo il tag img con un div contenitore, che useremo puoi per posizionare l'immagine nell'angolo:

PLAIN TEXT
HTML:
  1. <div class="ribbon"><img src="ribbon.gif" title="Ribbon Test" width="163" height="163" border="0"></div>

Se il nostro sticker deve possedere un link, possiamo avvalerci del tag map per definire un'area sensibile che non sia rettangolare. Lo sticker presentato in questo esempio, infatti, hai una forma obliqua e la trasparenza ne evidenzia perfettamente i contorni. Sarebbe quindi sconveniente permette di cliccare su un'area vuota aggiungendo semplicemente un tag a introno all'immagine. Usiamo allora questa sintassi:

PLAIN TEXT
HTML:
  1. <div class="ribbon"><img src="ribbon.gif" title="Ribbon Test" width="163" height="163" border="0" usemap="#ribbonlink"></div>
  2. <map name="ribbonlink"><area shape="poly" coords="163,0,0,163,0,129,129,0" href="http://undolog.com"></map>

L'attributo coords del tag area definisce le coordinate del nostro ribbon.

3. il codice CSS

Aggiungiamo adesso le definizioni degli stili che permetteranno al nostro sticker di posizionarsi sulla pagina in modo corretto:

PLAIN TEXT
CSS:
  1. div.ribbon{
  2. position:absolute;
  3. top:0px;left:0px;
  4. height:163px;width:163px;
  5. margin:0;padding:0;
  6. overflow:visible;
  7. float:none;
  8. z-index:10000}
  9. div.ribbonimg{
  10. border:0;padding:0;margin:0;
  11. background-image:none}

Se vogliamo che il ribbon rimanga "appiccicato" al video, anche se scorriamo la finestra, basta modificare il tipo absolute dello stile position in fixed:

PLAIN TEXT
CSS:
  1. div.ribbon{
  2. position:fixed;
  3. top:0px;left:0px;
  4. height:163px;width:163px;
  5. margin:0;padding:0;
  6. overflow:visible;
  7. float:none;
  8. z-index:10000}

Nota: il tipo fixed, nello stile position, fino a poco tempo fa non era supportato da tutti i browser. Per rendere l'effetto, infatti, si era costretti ad usare una funzione Javascript che, ad intervalli regolari, controllava l'eventuale scorrimento del contenuto della finestra e riposizionava il ribbon in modo che desse l'impressione di rimanere sostanzialmente immobile. Fortunatamente, oggi, a parte qualche obsoleta versione di Explorer, tutti i browser supportano il tipo fixed.

Post correlati

Tags: , , , , ,
Pubblicato in CSS, Internet, Javascript, Sviluppo, Tutorials | Nessun commento »

Come sopportare IE6 e vivere felici

Mercoledì 26 Novembre, 2008

Trovo sempre un certo "malore" quando affronto l'argomento "compatibilità tra i browser". Inoltre, e devo ancora capirne il vero motivo, tra tutti i browser che conosco quello più "antipatico" rimane sempre lui: Microsoft Internet Explorer 6! Purtroppo la release 6 di IE è ancora in circolazione e sono frequenti le segnalazioni di problemi nella visualizzazione delle pagine.
Un Web Developer deve quindi organizzarsi in modo tale da avere a disposizione tutti gli strumenti per il controllo e la verifica del proprio (sudato) lavoro su tutti i possibili browser (e piattaforme) disponibili. Microsoft Internet Explorer, più degli altri, rende questo compito più arduo in quanto - ad oggi - è necessario verificare le proprie pagine web sia con la più recente versione 8 (ancora in beta) sia con le precedenti versioni, come la 6 o la 5.5. Esistono vari modi per far convivere versioni diverse di Explorer (vedi Usare Microsoft Internet Explorer 6 e 7 contemporaneamente) ed in alternativa esistono anche ottimi (anche se un po' lenti) servizi online.

image

Un'altra ottima possibilità, che funziona bene su Windows Vista, è rappresentata da IETester, un'applicazione completamente gratuita e realizzata dagli stessi sviluppatori di DebugBar e Companion.JS. IETester, nonostante sia ancora in beta e con qualche crash in agguato, permette rapidamente di verficare le nostre pagine - contemporaneamente - sia su IE5.5, IE6, IE7 e IE8 beta.

Patch CSS

Se grazie a IETester riusciamo a scovare un difetto negli stili, cioè un'interpretazione diversa tra IE6 e IE7, o IE6 e FireFox, ad esempio, trovata la soluzione dobbiamo far in modo che solo IE6 usi la nuova definizione. A me, ad esempio, è capitato con un margine! Avevo una classe che impostava il margine destro a 28px e, su tutti i browser, il risultato era identico, tranne che con IE6! Su quest'ultimo, per rendere il layout identico, dovevo usare un valore di 8px.
Un modo assai semplice, facile da ricordare ed estremamente immediato per risolvere il problema, è quello di "sovrascrivere" il nostro stile caricando un diverso file ad hoc solo se il browser è il - temuto - IE6:

PLAIN TEXT
CSS:
  1. /** ___ file ie_override.css
  2. * uso questo file per sovrascrivere uno stile
  3. */
  4. div.mystyle{margin-left:8px}

PLAIN TEXT
HTML:
  1. <!-- stili per tutti i browser -->
  2. <link rel="stylesheet" href="css/style.css" type="text/css">
  3. <!-- stili solo per IE6 -->
  4. <!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/ie_override.css" /><![endif]-->

Post correlati

Tags: , , , , , , , , , , , , ,
Pubblicato in CSS, Internet, Software, Sviluppo, Windows Vista | 3 commenti »

Very short snippet: Wordpress, separare le categorie in due colonne

Mercoledì 19 Novembre, 2008

Prendendo spunto da Wordpress Hack #2 - Separare le categorie in colonne nella sidebar può tornare utile "spezzare" in due colonne la lista delle categorie di Wordpress. Se la sequenza che vogliamo ottenere è da sinistra a destra, cioè cat1 | cat2 (a capo) cat3 | cat4 (a capo) etc... non è necessario usare un codice PHP, ma basta giocare con gli stili impostando il tag li a float:left e "chiudendo" con l'opportuna width il tag ul, in modo a mandare "a capo" il successivo li. Nei casi invece dove il css non arriva, ad esempio nella sequenza cat1 | cat3 (a capo) cat2 | cat4, possiamo usare questo semplice codice:

PLAIN TEXT
PHP:
  1. $cats       = explode("<br />",wp_list_categories('title_li=&echo=0&depth=1&style=none'));
  2. $middle     = round( (sizeof($cats)-1)/2 );
  3. $cats_left  = array_slice( $cats, 0, $middle );
  4. $cats_right = array_slice( $cats, $middle, -1 );
  5. echo '<ul class="left"><li>'.implode( '</li><li>', $cats_left ).'</li></ul>'.
  6.      '<ul class="right"><li>'.implode( '</li><li>', $cats_right ).'</li></ul>';

Post correlati

Tags: , , , , , ,
Pubblicato in CSS, Internet, PHP, Sviluppo, WordPress | 1 commento »

Very short trick: versatilità delle classi CSS

Lunedì 10 Novembre, 2008

I più esperti lo sapranno già, tuttavia mi viene spesso chiesto che differenza c'è tra class e id nei fogli di stile CSS. Una panoramica su alcune differenze e avvertenze è possibile trovarla in Classi e ID nei CSS, tuttavia una caratteristica utile, che distingue class da id, è la possibilità di usare classi multiple. Ad esempio è possibile definire:

PLAIN TEXT
CSS:
  1. .bordoNero {border:2px solid #000}
  2. .coloreRosso {color:#f00}
  3. .bordoRosso {border:2px solid #f00}

e scrivire nell'HTML:

PLAIN TEXT
HTML:
  1. <div class="bordoNero coloreRosso">Bordo nero con caratteri rossi</div>
  2. <div class="bordoRosso coloreRosso">Bordo rosso con caratteri rossi</div>

class, a differenza di id, può contenere al suo interno più definizioni in qualsiasi sequenza!

Post correlati

Tags: , , , , , ,
Pubblicato in CSS, Internet, Sviluppo | 2 commenti »

jQuery: bordi rotondi sulle immagini per sovrapposizione

Giovedì 30 Ottobre, 2008

A causa dei diversi rendering tra i vari browser, che vedono sicuramente Microsoft Internet Explorer in testa, bisogna sempre ricorrere ad artifizi particolari per applicare effetti che, ormai, dovrebbero rappresentare uno standard. I pluri-discussi bordi arrotondati sono un classico esempio del "disastro" prodotto dalla completa incapacità di realizzare uno standard serio sul rendering delle pagine HTML/CSS. Esistono in rete numerosissime soluzioni che permettono di ottenere "effetti" (effetti che esonerano dall'HTML attuale come bordi arrotondati, effetti ombra, riflessioni, etc...) con patch sui fogli di stili, particolari trucchi con l'uso di div innestati, librerie Javascript, uso delle canvas, etc...
A titolo puramente didattico vorrei illustrare un'ulteriore tecnica (cross-browser) per applicare dei bordi arrotondati a delle immagini:

Demo e sorgenti

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , , , , , , , , , , , , , , , , ,
Pubblicato in CSS, Grafica & Design, Internet, Javascript, Sviluppo, Tutorials, jQuery | Nessun commento »

Wordpress: come creare passo passo un proprio login

Venerdì 24 Ottobre, 2008

In questo tutorial vedremo come creare una procedura di Login personale, utilizzando anche funzionalità Ajax tramite jQuery. Ci sono vari metodi per personalizzare il login di Wordpress, ad esempio tramite l'uso di hook e filtri (add_action(), add_filter()). Noi qui useremo una procedura più a basso livello, anche se ci interfacceremo comunque al Kernel di Wordpress. Inoltre faremo in modo di convalidare un utente tramite la dupla email/password.

Perchè realizzare un proprio login?

  • In alcuni contesti può ritornare uitle avere il massimo controllo sulla pagina di login, per proporre un layout personalizzato ai nostri utenti registrati. Inoltre si può arricchire la pagina con informazioni utili, dal un logo al classico "Password dimenticata?"
  • Per permettere l'accesso tramite l'email (come nell'esempio qui trattato) al posto dello user_login standard di Wordpress
  • Per avere la possibilità di inserire un pannello di login nella sidebar del nostro Blog
  • E infine, per avere uno scheletro - ed un'idea - per un ottimo Plugin :D

Ambiente

Nel nostro esempio/tutorial lavoreremo sulla root di Wordpress all'interno di una cartella mylogin. Creiamo due file php all'interno di questa cartella: index.php e logon.php. Il primo conterrà l'interfaccia del nostro login, con tutte le funzioni Javascript/jQuery che ci servono. Il secondo file, logon.php, conterrà il codice per la validazione dell'utente. Creiamo poi una cartella css e dentro questa un file layout.css e una cartella images. All'interno della cartella images inseriremo un classico Ajax loader: createlo online su AjaxLoad.info. Alla fine dovreste avere:

  • mylogin
    • index.php
    • logon.php
    • css
      • layout.css
      • images
        • ajax-loader.gif

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , ,
Pubblicato in Ajax, CSS, Internet, Javascript, PHP, Sviluppo, Tutorials, WordPress, jQuery | 9 commenti »

Wordpress: modifcare AdminBigWidth per gli sviluppatori

Venerdì 17 Ottobre, 2008

AdminBigWidth è un Plugin per Wordpress in grado di impostare l'area di lavoro dell'amministrazione a tutto schermo. È un plugin davvero semplice e banale, infatti il suo codice non fa altro che modificare la classe CSS .wrap:

PLAIN TEXT
PHP:
  1. function AdminBigWidth () {
  2.     echo '<style type="text/css">.wrap{max-width:none}</style>';
  3. }
  4. add_action('admin_head','AdminBigWidth');

Per chi come me usa l'editor di Wordpress in modalità HTML potrebbe risultare utile impostare dei caratteri a spaziatura fissa, come il Courier, invece del font proposto di default. In questo modo, almeno per gli sviluppatori, risulta più facile allineare codici sorgenti. Per fare questo basta aggiungere, sullo stile di AdminBigWidth, una nuova impostazione CSS che si rifletta sull'editor quando è in modalità HTML. Si potrebbe scrivere un Plugin (di due righe) per fare questo, tuttavia è meglio sfruttare proprio il codice di AdminBigWidth, così da evitare un ulteriore carico dovuto all'ennesimo Plugin:

PLAIN TEXT
PHP:
  1. function AdminBigWidth () {
  2.   echo '<style type="text/css">.wrap{max-width:none}#editorcontainer #content{font-family:"Courier New", Courier, monospace}</style>';
  3. }
  4. add_action('admin_head','AdminBigWidth');

Post correlati

Tags: , , , , , , , , , , ,
Pubblicato in CSS, Sviluppo, WordPress | 1 commento »

jQuery: animate backgroundColor

Mercoledì 15 Ottobre, 2008

Non ho capito bene se è un bug o una cosa voluta, comunque sia rimane il fatto che il metodo animate() di jQuery non funziona con alcuni attributi CSS, tra cui background-color (che nella versione camelize è backgroundColor). Ad esempio il seguente codice non produce nessun effetto:

PLAIN TEXT
HTML:
  1. <style type="text/css">
  2. div#box { background-color: #eee; width:100px; height:100px }
  3. </style>
  4. <!-- .... -->
  5. <div id="box"></div>

PLAIN TEXT
JavaScript:
  1. $('div#box').animate( {backgroundColor: "#f90"} );

Per risolvere il problema è necessario installare un'estensione: jQuery Color Animations. Questa permette di eseguire "animazioni" sull'attributo backgroundColor e non solo:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor

Post correlati

Tags: , , , , , , , , , ,
Pubblicato in Internet, Javascript, Sviluppo, jQuery | 4 commenti »

Creare un pipe separatore tramite CSS

Martedì 9 Settembre, 2008

Capita spesso di vedere una serie di link distribuiti orizzontalmente separati dal carattere pipe "|", il simbolo grafico dell'asticella verticale. Inoltre, se è presente una buona stesura HTML, ci si accorge che questa serie di link - apparentmente orizzontali - altro non sono che liste puntate UL o OL. Ne deriva che invece di scrivere:

PLAIN TEXT
HTML:
  2.     <a href="#1">Link 1</a> | <a href="#2">Link 2</a> | <a href="#n">Link n</a>
  3. </p>

Sarebbe meglio usare:

PLAIN TEXT
HTML:
  2.     <li><a href="#1">Link 1</a></li>
  3.     <li><a href="#2">Link 2</a></li>
  4.     <li><a href="#n">Link n</a></li>
  5. </ul>

Continua a leggere... »

Post correlati

Tags: , , , , ,
Pubblicato in CSS, Grafica & Design, Internet, Sviluppo | 2 commenti »

Safari, eliminare il blue border sui campi input

Lunedì 14 Luglio, 2008

Safari, il browser Apple disponibile anche per Windows, produce un bordo blu (blue border) quando si clicca all'interno di un campo input. Se in alcuni casi può risultare piacevole, in altri diventa davvero fastidioso! Per eliminarlo basta inserire nel nostro foglio di stile:

PLAIN TEXT
CSS:
  1. /* ____________________________ remove blue border */
  2. input { outline: 0 none }

O, in alternativa, direttamente come attributo nel tag input:

PLAIN TEXT
HTML:
  1. <input style="outline: 0 none" ... />

Post correlati

Tags: , , , , , ,
Pubblicato in CSS, Internet, Sviluppo | Nessun commento »