Piplos' blog » css

CSS3 Generator – Il nome dice già tutto

Piplos — Mon, 15 Mar 2010 09:47:05 +0000

Stavolta voglio presentarvi uno strumento molto utile soprattutto per chi è alle prime armi con il CSS.

Recentemente, non tanto recentemente, sono state dichiarate nuove regole CSS per far fronte alle novità e, soprattutto, per snellire le pagine web da codice che potrebbe appesantirle. Queste regole, per convenzione, fanno parte di una nuova release (se così vogliamo chiamarla) detta CSS3.

Quali sono le novità introdotte dal CSS3?

Non sono molte, a dirla tutta, ma sono parecchio essenziali. Esse vanno dalle ombreggiature dei testi e dei box ai font personalizzati, passando per i bordi arrotondati e alcune altre sfiziosità.

Leggi il resto dell'articolo...

YouTube cambia il layout e diventa più social 2.0

Piplos — Sat, 13 Mar 2010 10:28:43 +0000

YouTube, il grande portale internazionale di video (amatoriali e non) siamo abituati a vederlo compiere piccole modifiche alla volta, senza mai stravolgere lo stile globale. In effetti YouTube è sempre stato apparso nella sua interfaccia spartana ma efficiente.

Stavolta, invece, sembra essere cambiato tutto. Noto con piacere che è stato migliorato lo stile e sono state aggiunte delle caratteristiche che lo rendono sempre più simile ad un social network.

Cliccare per guardare la versione allargata e intera

Leggi il resto dell'articolo...

CSS: Personalizziamo al meglio la barra di ricerca

Piplos — Thu, 02 Jul 2009 18:51:34 +0000

Con pochi passaggi è possibile dare un nuovo look allo strumento di ricerca, guardate la pagina di esempio.

Il sistema operativo Windows Seven è stata una fonte di ispirazione per la creazione dell’esempio, ma potete personalizzare come volete la barra di ricerca, come io stesso ho fatto per questo blog (in alto a destra).

Il tutto usa un gioco di Javascript e CSS per simulare gli effetti della barra di ricerca di Vista/Seven, nei suoi tre stati: normal, hover (cursore del mouse sopra) e focus (click del cursore sulla barra).

Come applico questa tecnica?

Leggi il resto dell'articolo...

CSS: rimuovere il bordo punteggiato di selezione

Piplos — Mon, 18 May 2009 07:44:56 +0000

A quanti da fastidio quel bordo punteggiato di ogni link in una chicchessia pagina? Serve da selettore a chi naviga i link della pagina solo con la tastiera, ma chi al giorno d’oggi ancora non usa il mouse o qualsiasi altra periferica di puntamento?

La regola da inserire nel CSS per eliminare quel bordo aberrante è questa:

a { outline:none; }

Tutto qui. Addio bordi antiestetici!

Conditional-CSS – Adottiamo gli stili ai diversi browser

Piplos — Sat, 02 May 2009 13:59:33 +0000

Per chi, come me, fa a botte con i vari browser per adattare gli stili CSS per ciascuno di essi, non può fare null’altro che usare vie traverse, come sfruttare i bug di ciascun browser per fargli leggere delle regole CSS adattate per questi ultimi, oppure l’applicazione di javascript che rileva il browser utilizzato dall’utente che specifica i fogli CSS da utilizzare, eccetera.

Spesso questi metodi sono anche un po’ troppo scomodi per la non-pulizia del codice, che lo fa irrimediabilmente invalidare.

La soluzione al problema è Conditional-CSS, uno script in un file PHP che ci permette di leggere il CSS in modo condizionale per ogni browser. Con questo metodo si risparmia molto tempo e la manutenzione è più immediata. Un esempio delle possibilità di questo script è questo:

.box {
   width: 400px;
   [if IE 6] width: 600px;
   [if Opera] width: 500px;
}

Indovinate un po’? Esatto, normalmente il div con classe “box” è grande 400px, ma grazie a Conditional-CSS, con le regole del CSS condizionale se vediamo la pagina da IE 6, il box appare di 600px mentre in Opera lo vedremo di 500px!

Leggi il resto dell'articolo...

Cose da fare una volta sparito IE6

Piplos — Sun, 19 Apr 2009 13:50:13 +0000

Internet Explorer 8 non ancora mi piace come si deve, ma mi piacerebbe tanto, davvero *tanto*, che soppiantasse una volta per tutte quel ridicolo Internet Explorer 6, arrivato con l’avvento di Windows XP. Quest’ultimo browser è stato finora una vera e propria spina nel fianco, in quanto non solo non è conforme agli standard (rendendo *difficile* il lavoro agli sviluppatori web) ma è anche riuscito argutamente ad affermarsi come browser più utilizzato del mondo. Doppia disgrazia.

Ma la Microsoft, dall’alto dei cieli, sembra aver preso provvedimenti. Si è deciso all’unanimità (ed era ora) che la nuova versione di Internet Explorer, la numero 8, deve soppiantare con le buone o con le cattive il prepotente antenato, con il numero 6 affibbiato al nome.

Leggi il resto dell'articolo...