Piplos' blog » Estetica

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...

81 icone Social Media completamente gratuite

Piplos — Wed, 26 Aug 2009 00:05:40 +0000

Questa è un occasione che non si presenta tutti i giorni: vedere delle graziosissime icone Social Web 2.0 e scoprire che queste sono gratuite per uso personale e commerciale, anche senza obbligo di citazione.

Sono tutte in formato PNG e sono divise in tre categorie, ciascuna da 27 icone. Sono disponibili in formato icone mini (16×16 px) e grandi (32×32 px). Inoltre sono disponibili anche come pulsanti (122×42 px).

Leggi il resto dell'articolo...

GTA IV – Cambiare le macchine con quelle della realtà

Piplos — Mon, 03 Aug 2009 00:54:47 +0000

Sono un grande appassionato di questo gioco, per cui ho deciso di stilare una lista delle migliori mods di veicoli per sostituire quelli presenti nel gioco. Chi non vorrebbe guidare una Lamborghini o una Subaru in GTA IV?

Inizio subito con la lista delle macchine appetitose da inserire nel gioco!

Lamborghini Gallardo LP560-4

Download

Mazda RX-7 Veilside Fortune

Leggi il resto dell'articolo...

Il tema di Firefox 3.7 Aero per Firefox 3.x

Piplos — Mon, 27 Jul 2009 10:38:42 +0000

Innanzitutto chiariamo di cosa sto parlando. Ecco uno screenshot che spiega tutto:

Cliccare per aprire l’immagine

Quello che vedete sopra è la mia versione di Firefox 3.5 modificata per assomigliare nel look alla prossima versione di Firefox, esattamente la 3.7

Da ricordarsi che per avere le trasparenze sulle finestre, come nell’immagine, bisogna avere Vista o Seven con supporto Aero attivo. Il tema potrà anche funzionare su altri sistemi operativi, ma non avrete le trasparenze di Windows data la mancanza di Aero.

I passaggi sono semplicissimi, bastano cinque minuti del vostro tempo. Vediamo come fare.

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...

Come sfumare gradualmente in trasparenza con Photoshop

Piplos — Tue, 23 Jun 2009 07:43:59 +0000

Molti grafici prima o poi si ritroveranno questo problema: come sfumare un immagine gradualmente in trasparenza. Per farvi un idea ecco un esempio:

Notate che l’immagine di primo piano (il volto della bella ragazza) va sfumando in trasparenza verso il basso in direzione della freccia, e dietro la trasparenza si vede un livello che ha un pattern a strisce diagonali. Questa tecnica ha un grosso potenziale in ambito grafico e conoscerla significa anche evitare grosse perdite di tempo in futuro.

Io stesso ho applicato questa procedura per dare un bel look vetroso alla testata di questo blog, allo sfondo celeste dietro la scritta “Piplos’ blog“.

Leggi il resto dell'articolo...

BumpTop, cambiamo il solito desktop!

Piplos — Mon, 08 Jun 2009 09:05:04 +0000

Quanti di voi sono ormai stanchi del solito desktop a due dimensioni di Windows? Quanti di voi vorrebbero cambiare l’interfaccia con le icone con qualcosa di molto diverso e più bello?

BumpTop è la soluzione per voi. Una volta installato sembrerà di stare in una scrivania reale dentro il PC! Questo video spiega esaustivamente tutte le sue potenzialità:

Leggi il resto dell'articolo...

Perle di saggezza

Piplos — Mon, 11 May 2009 09:30:57 +0000

Valid HTML does not equal good HTML. A validator will not tell you if your markup is semantic or not or if it is accessible or not. Think of validation as a step towards a good website, not as quality assurance.

[Fonte]

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...