MaiNick Web » CSS

Trasformazioni sui link con CSS

MaiNick — Thu, 15 Jul 2010 06:00:25 +0000

Quando si passa su un link, l’elemento si anima e si inclina verso sinistra o destra. Gli effetti sono stati creati solo con i CSS.

Vengono utilizzate le funzionalità di transizione specifiche per ogni browser tramite hack CSS (dato che ciascuno ha il proprio prefisso). La durata della transizione è impostata su 250 millisecondi e la scala/rotazione è impostata ad un valore predefinito.
Sempre tramite CSS, allo stato hover dei link viene assegnato un colore di sfondo, gli angoli arrotondati per migliorare l’effetto e la scala/rotazione modificati per inclinare l’elemento.

Foglio di stile CSS

.cpojer-links a	{
  display: inline-block;
  padding: 4px;
  outline: 0;
  color: #3a599d;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  -webkit-transform: scale(1) rotate(0);
  -moz-transform: scale(1) rotate(0);
  -o-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
  background: #3a599d;
  text-decoration: none;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-transform: scale(1.05) rotate(-1deg);
  -moz-transform: scale(1.05) rotate(-1deg);
  -o-transform: scale(1.05) rotate(-1deg);
  transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
  -webkit-transform: scale(1.05) rotate(1deg);
  -moz-transform: scale(1.05) rotate(1deg);
  -o-transform: scale(1.05) rotate(1deg);
  transform: scale(1.05) rotate(1deg);
}

Fonte David Walsh Blog e demo.

Drop Shadows con CSS3

MaiNick — Mon, 12 Jul 2010 06:00:29 +0000

Funziona su tutte le ultime versioni di Opera, Chrome, Safari e Firefox, anche se su Opera e Firefox le trasformazioni non sono proprio ottime come Webkit, motore di Safari e Google Chroem.

Pagine HTML


  
    CSS3 Wrapping Drop Shadows
    With out any minimal extra bullshit markup(You need the first child to be a container element like a header, hgroup or a div). Oh and they stretch G. Webkit only for now, although I'm sure Firefox could do this trick as well.

Foglio di stile CSS3

body {
  font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif;
  font-size: 13px;
  background: #3a6682;
}
div#shadows {
  position: relative;
  width: 50%;
  margin: 20em auto;
}
article {
  background: #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 1.5em; color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  text-align: center;
  display: block;
}
article:before, article:after {
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom: 15px;
  z-index: -1;
  width: 50%;
  height: 20%;
  content: "";
  background: rgba(0, 0, 0, 0.7);
}
article:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  right: 10px;
  left: auto;
}
article:before {
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  right: auto;
  left: 10px;
}

Fonte Nimbupani Designs e demo.

Google Font API

MaiNick — Thu, 27 May 2010 07:00:52 +0000

Durante il Google I/O 2010, Google ha fatto grandi annunci. Uno di questi riguarda le Google Fonts API

Letteralmente, è possibile integrare tipi di caratteri diversi da quelli web-safe, universalmente diffusi su tutti i device, semplicemente collegando il nostro documento ad un carattere tra quelli ora disponibili, memorizzati sui server di Google (risparmiando banda per le prestazioni di caching).

Utilizzo

Per usufruire delle Google Font API, abbiamo bisogno di un link al nostro carattere desiderato, e farne riferimento nella proprietà font-family del css. Questo è tutto!


  
    Utilizzo Google Font API
    
    
  
  
    Hello World

Per la lista aggiornata dei fonts disponibili è possibile far riferimento alla Google Font Directory.

Per conoscere le operazioni eseguite dietro le quinte dalle Google Font API potete leggere l’articolo sul blog di Html.it

Colonne adattabili a layout liquido con CSS e jQuery

MaiNick — Fri, 18 Dec 2009 12:00:31 +0000

Twittando mi sono ritrovato a leggere un post che analizzava il problema di avere un layout costituito da colonne “liquid” adattabile alle dimensioni della finestra del browser.

In un layout fisso imposteremo una dimensione fissa per ogni colonna, occuperemo tutta la larghezza della pagina; ma ad un certo limite, l’ultima colonna non sarà in grado di adattarsi allo spazio rimanente, andando a capo lascierà un margine di spazio vuoto.

Invece, in un layout liquido le colonne riempiranno perfettamente l’intero spazio della pagina in qualsiasi caso, ma ci troveremo ad avere un numero predefinito di colonne su singola riga.

La soluzione trovata dall’autore è stata quella di unire insieme le caratteristiche dei due loyout tramite l’utilizzo di CSS e jQuery.

Abbiamo un codice html di base per l’esempio:

Codice CSS del foglio di stile collegato all’esempio:

ul.column {
  width: 100%; /*layout liquido*/
  margin: 10px 0;
  padding: 0;
  list-style: none;
}
ul.column li {
  float: left;
  display: inline;
  width: 200px; /*larghezza predefinita per ogni colonna*/
  margin: 5px 0;
  padding: 0;
}
.block {
  height: 355px;
  margin-right: 10px; /*margine tra ogni colonna*/
  padding: 20px;
  background: #e3e1d5;
  font-size: 1em;
}
.block img {
  /*Dimensioni flessibili per l'immagine interna alla colonna*/
  display: block;
  width: 89%;  /*1% in meno per prevenire un bug in IE6*/
  margin: 0 auto;
  padding: 5%;
  background-color: #fff;
  -ms-interpolation-mode: bicubic; /*prevents image pixelation for IE 6/7 */
}

diamo dimensione 100% al layout per coprire l’intero spazio della pagina, mentre una dimensione fissa predefinita per le colonne in modo da risolvere il secondo dei due problemi descritti: in caso di colonne liquidi avremo un numero predefinito su singola riga.

Ecco lo script jQuery che risolve il primo dei problemi:

//Funzione che calcola la dimensione da applicare alle colonne
function smartColumns() {
  //Resetto dimensione colonne all'intera pagina 100%
  $('ul.column').css({ 'width' : "100%"});
  var colWrap = $('ul.column').width(); //larghezza riga
  //Numero di colonne di 200px che vanno bene nell'attuale larghezza della pagina
  var colNum = Math.floor(colWrap / 200);
  //Dividendo la larghezza della pagina per il numero di colonne che possono andare bene,
  //otteniamo come numero intero la larghezza perfetta da assegnare a ciascuna colonna
  var colFixed = Math.floor(colWrap / colNum);
  $('ul.column').css({ 'width' : colWrap}); //Risolve bug in qualche browser
  $("ul.column li").css({ 'width' : colFixed}); //Imposto la nuova larghezza alle colonne
}
smartColumns(); //Esegue la funzione quando si carica la pagina la prima volta
$(window).resize(function () {
  //Ogni volta che la finestra è ridimensionata si esegue la funzione
  smartColumns();
});

Come realizza il tutto è descritto nei commenti dello script; potete visualizzare la demo e avere ulteriori informazioni visitando la pagina dell’autore.

Creare una lista a due colonne: fissa + liquida

MaiNick — Fri, 18 Dec 2009 07:00:44 +0000

Questo tutorial risolverà la maggior parte dei problemi CSS che si hanno in generale quando si vuole realizzare un effetto come da titolo: una lista a due colonne di cui la prima di larghezza fissa e la seconda che occupa tutta la parte rimanente nel browser.

Si crea prima la lista, di cui ogni elemento è costituito da due div che rappresenteranno le colonne.
Il primo div sarà la colonna fissa, che, secondo l’esempio qui riportato, conterrà un’immagine e la sua didascalia. Il secondo div rappresenterà la colonna liquida, permettendo al contenuto di essere flessibile – in larghezza – in base alla risoluzione del browser.

Ecco il codice html dell’esempio:


  
    
      
    
    
      Cosa è Wikipedia
      Wikipedia è un'enciclopedia multilingue liberamente consultabile sul Web, fondata sulla certezza che ciascuno possiede delle conoscenze che può condividere con gli altri. L'ambizioso progetto, che prende il via il 15 gennaio 2001 in lingua inglese, nell'arco di soli quattro mesi ha visto nascere altre 13 edizioni, tra cui quella in italiano.

Diamo uno stile alla lista tramite codice CSS:

ul.column {
  float: left;
  width: 100%;
  margin: 10px 0;
  padding: 0;
  border-top: 1px solid #ddd;
  font-size: 1.2em;
  list-style: none;
}
ul.column li {
  float: left;
  width: 100%;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  background: #f0f0f0;
}

Il seguente è il codice CSS che rende l’effetto:

ul.column li .imgblock {
  float: left;
  width: 150px;
  padding: 0 10px;
  font-weight: bold;
  text-align: center;
}
ul.column li .imgblock img {
  margin-bottom: 5px;
  padding: 5px;
  border: 1px solid #ccc;
  background: #fff;
}
ul.column li .detail{
  padding-left: 170px;
}

specifichiamo una larghezza fissa per il primo div, quindi per la prima colonna, e niente alla seconda in modo che sia larga quando tutto la finestra del browser (width: 100%).
Dunque il testo si adatterà per tutto lo spazio di destra, dando, nello stesso momento, spazio alla prima colonna a sinistra.

Come ottenere sempre la compatibilità Cross Browser

MaiNick — Mon, 01 Dec 2008 06:30:38 +0000

Questo è un elenco di problemi principali che si hanno lavorando con Internet Explorer.

Contraddizioni dell’elemento

Ogni browser rende diversi particolari elementi – importi differenti per padding, margini e bordi etc. – se lasciamo utilizzare lo stile predefinito dei browser.

Soluzione

La prima cosa da fare è ripristinare i vostri stili. Disporre all’inizio del vostro css una soluzione di reset che rimuove il padding, margin e border e altre incongruenze dagli elementi.
Un buon esempio è il codice reset.css di Eric Meyer.

Image Rendering

IE6 e IE7 rendono estremamente male le immagini ridimensionate, quando le loro dimensioni sono cambiate con CSS o nel HTML.

Soluzione

Ridimensionare le immagini alla dimensione desiderata prima di utilizzarla nel sito.

Font Rendering

Safari 3+ ha un problema con il modo in cui rende testo chiaro su sfondo scuro. Esiste un modo per farlo sembrare più chiaro.

Soluzione

E’ necessario aggiungere questa regola al selettore:

p {
    text-shadow: #000 0 0 0;
}

Selezione font

Ci sono font web sicuri che usiamo – Arial, Georgia, Verdana etc. Ma ci sono alcuni font che sono comuni sia al PC che al Mac – - Century Gothic, Arial Narrow etc. – tuttavia, browser e OS differenti li rendono di tipo differente.

Soluzione

Finché è un font sicuro va tutto bene nella visualizzazione. Tuttavia bisogna informarsi e verificare questi problemi di rappresentazione: ad esempio, un font che probabilmente non dovreste usare è Lucida Grande/Sans, il quale rende bruttissimo in Internet Explorer.

Dimensione testo

La capacità di ridimensionare il testo differisce fra i browser e gli OS. Se vogliamo impostare tutto il testo in em, IE esagererà i formati del testo una volta ridimensionato.

Soluzione

È necessario specificare la dimensione in percentuale nell’elemento body, e quindi la dimensione in em, attraverso il resto del foglio. line-height è necessario definirla in em, piuttosto che in pixel, per una rappresentazione costante.
Una cosa da ricordare è che la dimensione del font di default è 16px. Quindi, per ridimensionarlo a 12px usiamo:

body {
    font-size: 75%;
    line-height: 1.5em;
}
h1 {
     font-size: 3em; /* 36px */
}

Doppi margini su elementi flottanti

Creiamo un CSS layout con elementi flottanti a destra:

#content {
    float: right;
    width: 300px;
    margin-right: 10px;
}
#sidebar {
    float: right;
    width: 100px;
}

In IE qualsiasi margine che si trova sullo stesso lato del float sarà raddoppiato. Questo significa che l’elemento content a sinistra avrà tale margine esteso a 20px.

Soluzione

Per risolvere il problema, tutto quello che dovete fare è applicare la proprietà display:inline sui box del layout:

#content {
    float: right;
    width: 300px;
    margin-right: 10px;
    display: inline;
}
#sidebar {
    float: right;
    width: 100px;
    display: inline;
}

Compensazione elementi flottanti

Si verifica quando un div contenitore non avvolge correttamente intorno ai div contenuti.
Probabilmente non noterete questo fino a che non si prova a mettere uno sfondo sul vostro contenitore.

Soluzione

La soluzione migliore è un semplice overflow:auto o overflow:hidden nel div contenitore:

#container {
    width: 966px;
    margin: 0 auto;
    overflow: auto;
}

È necessario tenere a mente che overflow: auto potrebbe causare alcuni problemi con Firefox: se si verificano problemi usare overlflow:hidden.

CSS selettori

Se vorremmo utilizzare tutti i nuovi CSS3 selettori, IE6 non supporta tutti quelli importanti.
Molti di questi selettori non sono supportati neppure da Firefox 3. Per un elenco completo dei selettori supportati, consultare questo post sul supporto dei CSS selettori nei browser.

Soluzione

Usare soltanto E + F, E > F, E ~ F. Se realmente dovete utilizzare questi selettori, dovreste esaminare IE8.js che dà a IE6 il migliore supporto dei selettori. Tuttavia questo rallenterà il vostro sito.

PNG Trasparenza

IE6 non supporta la trasparenza alfa del PNG. Il più fastidioso bug/problema di IE.

Soluzione

Esistono tre soluzioni per questo problema.
E’ possibile utilizzare AlphaImageLoader in un foglio di stile specifico per IE: aggiungi queste proprietà a qualsiasi immagine PNG che si desidera avere la trasparenza.

.trans {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='image/scale/crop');
}

È necessario creare una PNG trasparente 1×1 e collegarla ad essa nell’attributo src.
Un modo migliore per farlo è IE5.5+ PNG Alpha Fix simile al AlphaImageLoader, tranne per il fatto che si collega ad uno script JavaScript che innesca la trasparenza.
Il terzo metodo è quello di utilizzare IE8.js citato sopra. E’ anche più sicuro rispetto al metodo precedente. Realizzerà la trasparenza a qualsiasi png che finisce -trans; ad es. myimage-trans.png.

Applicare CSS ad un semplice elenco

MaiNick — Fri, 07 Nov 2008 06:30:25 +0000

Lista verticale

HTML


    
        Item one
        Item two
        Item three
        Item four
        Item five

CSS

#navcontainer {
    width: 12em;
    border-right: 1px solid #000;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    background-color: #90bade;
    color: #333;
}
#navcontainer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}
#navcontainer li {
    border-bottom: 1px solid #90bade;
    margin: 0;
}
#navcontainer li a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
}
html>body #navcontainer li a { width: auto; }
#navcontainer li a:hover {
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
}

;

Lista orizzontale

HTML


    
        Item one
        Item two
        Item three
        Item four
        Item five

CSS

#navcontainer {
    margin: 0;
    padding: 0;
    height: 22px;
    font: 11px Verdana, sans-serif;
    width: 100%;
    border-bottom: 1px solid #bbb;
    list-style-type: none;
    background: #fff;
}
#navlist li {
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
    display: block;
}
#navlist li a, #navlist li a:link {
    background: #fff;
    color: #555;
    text-decoration: none;
    padding: 3px 5px 3px 5px;
    display: block;
}
#navlist li a:hover {
    color: #039;
    border-bottom: 3px solid #bbb;
    cursor: pointer;
    background: #eee;
}
#navlist li a#current, #navlist li a#current:link {
    color: #000;
    cursor: default;
    font-weight: bold;
    border-bottom: 3px solid #999;
}
#navlist li a#current:hover {
    border-bottom: 3px solid #f90;
    background: #eee;
}

Visualizzare propri font nelle pagine web

MaiNick — Fri, 17 Oct 2008 05:30:45 +0000

Con il rilascio della versione beta di Firefox 3.1 sono state introdotte nuove funzionalità per i CSS.

Una delle regole supportate dalla nuova versione del noto browser permette di specificare un font che l’utente può scaricare per visualizzare la pagina come era nelle intenzioni dello sviluppatore.

@font-face è attualmente supportata su Mac OS X e Windows, ma non in Linux.

Sintassi

@font-face {
  font-family: ;
  src: ;
}

Valori

– specificare un nome di font che verrà utilizzato come font face
– URL della locazione del font file

Esempio



  Esempio Web Font
  


  This is Bitstream Vera Serif Bold.

Ecco la pagina di esempio con il codice sopra, visualizzabile solo con Firefox 3.1.

Hack CSS per Firefox, Opera, Safari e Internet Explorer

MaiNick — Thu, 16 Oct 2008 12:00:14 +0000

Neal Grosskopf in un articolo propone una lista di hack CSS con cui è possibile scrivere regole specifiche per ciascuno dei principali browser.

Come introduce l’autore, è una pratica non consigliabile, ma qualche volta potrebbe tornare utile, soprattutto quando avrete bisogno di un modo rapido come obiettivo un browser diverso da Internet Explorer.

L’autore ha creato 6 paragrafi con identificativo i diversi browser per vedere a quali sarà applicata la regola CSS:

Opera 7.2 - 9.5

Safari

Firefox

Firefox 1 - 2

IE 7

IE 6

nascondendo tutti i tag ‘p’, aprendo il documento nei diversi browser noteremo solo quello appartenente ad esso.

Internet Explorer utilizzando commenti condizionali

Vi è una robusta sintassi che Microsoft ha creato per consentire agli autori di farlo. Esistono due alternative a seconda della versione del browser:

Internet Explorer utilizzando Parser Hacks

Non è molto consigliabile questa tecnica hack in quanto è molto più semplice utilizzare i commenti condizionali descritti sopra, ma se si desidera mantenere tutte le regole CSS in un solo file, questa è l’alternativa:

/* IE 7 */
html > body #ie7 {
  *display: block;
}

/* IE 6 */
body #ie6 {
  _display: block;
}

si noti che il trucco IE7 si applica solo alla versione 7 del browser di casa Microsoft perché la versione 6 non interpreta bene il selettore ‘>’; va inoltre notato che nessuno degli altri browser riconosce questo hack.

Firefox

Il primo hack ha come obiettivo Firefox versioni 1 e 2, utilizzando un hack vuoto sul tag body. Il secondo trucco, riconosciuto da tutte le versioni di Firefox, si ha utilizzando la proprietà ‘-moz’ combinato con ‘-document url-prefix()’:

/* Firefox 1 - 2 */
body:empty #firefox12 {
  display: block;
}

/* Firefox */
@-moz-document url-prefix() {
  #firefox { display: block; }
}

Safari

Anche Safari ha una propria proprietà CSS, usando ‘-webkit prefix’ viene riconosciuto solo dal browser di Apple:

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)  {
  #safari { display: block; }
}

Opera

Il trucco per Opera può funzionare solo negando una proprietà CSS. Questo hack risulta debole semplicemente perchè presto Firefox supporterà tale hack, quindi sarà riconosciuto anche dalla “volpe di fuoco”.

/* Opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  head~body #opera { display: block; }
}