Piplos' blog » Web-Design

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

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

Domanda esistenziale

Piplos — Thu, 04 Jun 2009 12:44:59 +0000

Può Internet Explorer essere considerato un browser?

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!

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

Fugue icons: tirate a lucido le icone dei vostri blog!

Piplos — Tue, 21 Apr 2009 11:14:05 +0000

Spesso vado in giro a cercare delle icone da applicare ai vari design che ho in cantiere. Ma in genere le icone che trovo sono a dir poco orribili o le solite che si trovano dappertutto. Soprattutto se si vuole un design professionale anche le icone devono essere a regola d’arte.

Ecco che ho trovato finalmente un rispettabile set completo di icone (contenente quasi 2.000 elementi), capaci di dare un tocco professionale a gran parte dei design che si vengono a creare/modificare.

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

Not suitable for IE6

Piplos — Fri, 30 Jan 2009 00:53:54 +0000

Bisognava fare qualcosa. Siamo nel 2009 e ci sono parecchi visitatori che vengono qui utilizzando un antiquato, insicuro e scadente Internet Explorer 6.

Chi mi conosce sa che odio questo browser, dalla prima alla sesta versione. Trovo che sia un obbrobrio in quanto ad accessibilità e conformità agli standard. Praticamente IE6 è uno sputo nell’occhio se sei un web-designer.

Allora ho preso provvedimenti drastici. Se visitate il mio blog con IE6 vedrete un alert giallo bello grosso (fatto simile apposta a quelli reali del browser).

Leggi il resto dell'articolo...

© Copyright by Piplos' blog. | Permalink | 9 commenti
Post tags: browser, internet, internet explorer, web-design, Windows