Css3 @Font-Face anche per Internet Explorer

Posted: 5th Ottobre 2011 by Daniele Crupi in Blog, Web Programming
Tags: , , , ,
Commenti disabilitati su Css3 @Font-Face anche per Internet Explorer

Ecco come si può aggiungere un font che vogliamo in una pagina web, molto semplicemente con il Css3.
Nel nostro foglio di stile aggiungiamo:

@font-face {
font-family: yourFontName ;
src: url( /percorso-del-font/FontFileName.ttf ) format("truetype");
}

/* Puoi usarlo come qualsiasi altro font */

.yourFontName {
font-family: yourFontName , verdana, helvetica, sans-serif;
 }

Per integrarlo con Internet Explorer basta aggiungere il corrispettivo file .eot del font.
Se non ne siete in possesso vi viene in contro un utility che converte il tuo font .ttf in .eot
Qui il link TTF->EOT converter

A questo punto il nostro css diventa:

@font-face {
font-family: yourFontName ;
src: url( /percorso-del-font/FontFileName.ttf ) format("truetype");
}

@font-face {
font-family: yourFontName;
src: url( /percorso-del-font/FontFileName.eot );
}

Cufon, l’alternativa ai Font Flash

Posted: 13th Settembre 2011 by Daniele Crupi in Blog, Web Programming
Commenti disabilitati su Cufon, l’alternativa ai Font Flash

Cufon è il sistema rivoluzionario che ti permette di inserire font alternativi all’interno del tuo sito web.
E’ una valida alternativa ai font creati con flash o al nuovo @font-face del css3.

Funzionamento

  1. Scarica cufon-yui.js dal sito di cufon e fai l’upload sul tuo server.
  2. Usa il generatore di font presente sul sito di cufon:
    1. Scegli il font che vuoi convertire.
    2. Spunta il checkbox EULA sotto il campo di upload del file.
    3. Lascia i settaggi di default che vanno bene alla maggior parte delle persone.
    4. Accetta alla fine i termini di condizione e convalida il forme hai fatto!
  3. Fai l’upload del font.js generato sul tuo server. Puoi rinominare il file se desideri.
  4. Il tuo HTML dovrebbe essere più o meno così: 
    <!doctype html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Playing with Cufón</title> <!-- Stylesheets here, before all scripts. Helps avoid styling issues. -->
<link rel="stylesheet" type="text/css" href="style.css" /> <!-- If you want to use complex selectors with Cufón, load a selector engine (JavaScript framework) here. We support jQuery, Sizzle, MooTools, Dojo, Prototype and other popular frameworks. -->
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="YourFont.font.js"></script>
<script type="text/javascript">// <![CDATA[
 Cufon.replace('h1'); // Works without a selector engine
 Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7, see above
// ]]></script>
</head>
<body>
<h1>Your custom font here</h1>
<h2 id="sub1">Your custom font here too</h2>
 <!-- To avoid delays, initialize Cufón before other scripts at the bottom -->
<script type="text/javascript">// <![CDATA[
 Cufon.now();
// ]]></script><!-- Google Analytics and other scripts here -->
</body></html>
  5. Fai attenzione nel tuo HTML a:
    • Usare un doctype tradizionale o l’ HTML5 doctype.
    • Evitare gli spazi bianchi prima del doctype.
    • UTF-8 è l’unico charset supportato.

JQuery Cycle Plugin

Posted: 6th Settembre 2011 by Daniele Crupi in Blog, Web Programming
Tags: , , , ,
Commenti disabilitati su JQuery Cycle Plugin

Cos’è?

Il Plugin jQuery Cycle è uno plugin per lo slideshow che supporta differenti tipi di effetti.
Ad esempio permette pause-on-hover, auto-stop, auto-fit, before/after callbacks, triggers e molto altro.

Come Lavora

Il plugin chiama il metodo cycle che è invocato su un elemento contenitore. Ogni elemento figlio del contenitore diventa una “slide”. Le opzioni di controllo gestiscono le transizione delle slide.

Opzioni

Il plugin ha molte opzioni per personalizzare le tue slideshow. Ecco qui un esempi0:

1 – Definisci uno stile

<div id="s1" class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" alt="" width="200" height="200" />
<img src="images/beach3.jpg" alt="" width="200" height="200" />
</div>

.pics { height: 232px; width: 232px; padding: 0; margin: 0; }
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}

2 – Scegli un Effetto

Tu puoi scegliere qualsiasi dei seguenti effetti:

<ul>
	<li><code>blindX</code></li>
	<li><code>blindY</code></li>
	<li><code>blindZ</code></li>
	<li><code>cover</code></li>
	<li><code>curtainX</code></li>
	<li><code>curtainY</code></li>
	<li><code>fade</code></li>
	<li><code>fadeZoom</code></li>
	<li><code>growX</code></li>
	<li><code>growY</code></li>
	<li><code>scrollUp</code></li>
	<li><code>scrollDown</code></li>
	<li><code>scrollLeft</code></li>
	<li><code>scrollRight</code></li>
	<li><code>scrollHorz</code></li>
	<li><code>scrollVert</code></li>
	<li><code>shuffle</code></li>
	<li><code>slideX</code></li>
	<li><code>slideY</code></li>
	<li><code>toss</code></li>
	<li><code>turnUp</code></li>
	<li><code>turnDown</code></li>
	<li><code>turnLeft</code></li>
	<li><code>turnRight</code></li>
	<li><code>uncover</code></li>
	<li><code>wipe</code></li>
	<li><code>zoom</code></li>
</ul>

Tu specifichi l’effetto passando al metodo cycle una stringa o usando un oggetto opzione e impostando la fx property con il nome dell’effetto desidertato.





 $('#s1').cycle('fade'); 
$('#s2').cycle({ fx: 'scrollDown' });

Scarica il plugin

Cycle Plugin

Css3 su Internet Explorer 8

Posted: 31st Marzo 2011 by Daniele Crupi in Blog, Web Programming
Tags: , ,
Commenti disabilitati su Css3 su Internet Explorer 8

In questa breve guida affrontiamo un problema ormai comune a tutti i web designer: l’uso delle tecniche CSS3 su Internet Explorer 8.

L’ormai obsoleto browser restera’ ancora per molto tempo usato da molti utenti (basti pensare che la versione 9 non può essere installata su Xp!) e pertanto nasce l’esigenza di trovare “una via” per poter usare queste nuove feature e renderle disponibili per tutti. Perchè privare gli utenti di un‘esperienza creativa superiore?

css3-pie-img1DOWNLOAD | DEMO

Perchè usare i CSS3 “prima del tempo”?

La risposta e’ semplice: i css2 sono stati in uso per anni e anni per rinnovare davvero l’esperienza finale dell’utente bisogna ricorrere a nuovi (e piu potenti) mezzi. E’ impensabile, ad oggi, di rimanere ancorati alle vecchie tenclogie e lasciare che tutti gli altri “concorrenti” si aggiornino rendendo i nostri lavori, seppur ben fatti, ormai OBSOLETI.

Per questo nasce l’esigenza di iniziare (gradatamente) a usare queste nuove tecniche, in questo modo potremo facilmente rimanere al passo coi tempi e sopratutto rimarremo COMPETITIVI sul mercato del web design.

Quali sono i problemi su IE?

Internet explorer 8 semplicemente non “elabora” le nuove proprieta’ CSS3, rendendo il lavoro di cross-browsering davvero frustrante. Che fare?

La risposta: CSS3

In nostro aiuto arriva CSS3 PIE, un progetto che personalmente seguo da parecchio tempo, fin dalla sua versione 1.0 (oggi siamo alla beta4!) e devo dire che rende il lavoro di ottimizzazione molto piu’ veloce e sopratutto ci permette di realizzare in (relativa) tranquillita’ i nuovi progetti con il nuovo linguaggio di stile.

Potete scaricare questo tool direttamente dal sito ufficiale: Css3 PiE official site per seguire invece il progetto segui CSS3 pie su Twitter!

Come si usa?

L’utilizzo e’ abbastanza semplice: si tratta di posizionare il file PIE.htc nella root (o in un altra directory) del vostro sito e procedere come segue:

-moz-box-shadow: 0 0 5px 5px #d6d6d5;
-webkit-box-shadow: 0 0 5px 5px #d6d6d5;
box-shadow: 0 0 10px 5px #d6d6d5;
behavior: url(PIE.htc);

In questo caso, ad esempio ho applicato la proprieta’ di ombra al mio div, compatibile con tutti i browser!. Nel caso posizionassimo il file PIE.htc nella directory “css3″ dovremmo scrive:

behavior: url(css3/PIE.htc);

Si può usare con i CMS, come ad esempio WordPress? Certo che si!

Vi bastera’ posizionare il file PIE.htc nella root del sito WordPress (quella contenente il file wp-config per intenderci), e NON nella root del template. Per richiamarlo nei css usate la stessa sintassi vista sopra (ovviamente aprendo il file style.css del vostro template in uso).

Quali funzioni supporta CSS3 PIE?

Css3 Pie permette l’uso di tutte le tecniche “base” dei CSS3 come ad esempio: border-radius, box-shadow, border-image, CSS3 Backgrounds (-pie-background).

Guarda la lista completa delle feature QUI.

Nota: Css3 PIE contiene gia’ il fix delle immagini PNG per Ie7, e IE8!