Fade in grey

... Un effetto molto semplice e suggestivo, che opera, però (fate attenzione!) solo con I.e (4+). In sostanza vi consente di trasformare un' immagine a colori in bianco e nero, salvo restituirla alla sua tinta originale al passaggio del mouse. Può essere un' idea molto graziosa e differente per presentare i vostri banners e le vostre fanlistes. Per realizzare l' effetto è sufficiente sostituiate l' Url http://www.yoursite.net/image.gif con quello relativo alla vostra immagine.
Posted on 28 Oct 2007 by Sar@

Filtri css

Grey: Trasforma un'immagine a colori in una in bianco e nero. In buona sostanza, la sua applicazione può aiutarvi a raddoppiare le skins di un sito senza dover intervenire di grafica.

filter:Gray()

FlipH e FlipV(): Con questi filtri gemelli potrete capovolgere orizzontalmente o verticalmente un testo od un' immagine. Anche in questo caso, di solito, tendo ad usarli in combinato con altri filtri.

filter:FlipH()
filter:FlipV()

X ray: Un filtro molto semplice, per lo più adatto alle immagini (come vi presento in anteprima). Consente infatti di renderne una sorta di 'radiografia'. Di solito lo uso in unione ad altri filtri, visto che l' effetto non è immediatamente visibile.

filter:XRay()

Alpha: Ecco il filtro che fa più gola di tutti (non negate: è quello che ha registrato il maggior numero di sottrazioni non autorizzate). Estremamente versatile, vi consente, semplicemente modificando lo style, di ottenere risultati diversissimi. Vi inserisco, per cominciare, le formule più semplici (in questo caso ho aggiunto uno sfondo, ma solo per farvi vedere meglio. Ovviamente non lo riporto nel codice). Rispettivamente, dall'alto verso il basso:

filter:alpha(style=1, opacity=100); height: 10px
filter:alpha(style=2, opacity=100); height: 10px
filter:alpha(style=3, opacity=100); height: 10px

Se volete fare di meglio, e, giustamente, non vi accontentate, i parametri completi seguono questa formula (che è poi quella che uso io):

filter:alpha(style=1, opacity=100 finishopacity=0, startx=0, finishx=100, starty=0, finishy=100); height: 10px
filter:alpha(style=2, opacity=100 finishopacity=0, startx=0, finishx=100, starty=0, finishy=100); height: 10px
filter:alpha(style=3, opacity=100 finishopacity=0, startx=0, finishx=100, starty=0, finishy=100); height: 10px

Attraverso prove e concrete sperimentazioni sul campo, potrete invertire lo sfumato, ad esempio, o creare delle screziature incredibilmente decorative.

Glow: Per ottenere questo semplicissimo effetto, l'istruzione da inserire nei css, in corrispondenza del settore che dovrà assumere il carattere, sarà:

filter:glow(color:#000000 strength=1); height: 10px

I valori relativi ai colori ed all'intensità sono ovviamente puramente indicativi. Potete variare come preferite, finché non avrete ottenuto l'effetto desiderato. Un valore che NON dovete mai dimenticare è HEIGHT. Spesso è omesso nei manuali canonici, ma è in virtù di questo che l'effetto è concretamente visualizzabile.
Se non vi basta, ecco la scheda tecnica completa:

Glow(Color=?, Strength=?)

Traccia un contorno colorato dell'oggetto cui è applicato.
Color: colore del contorno, in esadecimale.
Strength: permette, attraverso un numero decimale, di decidere le dimensioni dello spessore del contorno.

Invert: Con questo filtro potete intervenire sul testo o sull' immagine, invertendone i toni, con un effetto analogo alla solarizzazione grafica.

filter:Invert()

Shadow: Per ottenere questo semplicissimo effetto, l' istruzione da inserire nei css, in corrispondenza del settore che dovrà assumere il carattere, sarà:

filter:shadow(color:#000000); height: 10px

I valori relativi ai colori ed all'intensità sono ovviamente puramente indicativi. Potete variare come preferite, finché non avrete ottenuto l' effetto desiderato. Un valore che NON dovete mai dimenticare è HEIGHT. Spesso è omesso nei manuali canonici, ma è in virtù di questo che l' effetto è concretamente visualizzabile.
Se non vi basta, ecco la scheda tecnica completa:

Shadow(Color=?, Direction=?)

Molto simile al dropshadow, ma meno preciso e, quindi, più adatto agli inesperti. Crea l'ombra dell'oggetto cui viene applicato, ed utilizza due semplici parametri.
Color: colore dell'ombra in esadecimale.
Direction: direzione in cui viene proiettata l'ombra. Possibili alternative: up, down, rigth, left.

Dropshadow: Per ottenere questo semplicissimo effetto, l'istruzione da inserire nei css, in corrispondenza del settore che dovrà assumere il carattere, sarà:

filter:dropshadow(color:#000000, offx=1, offy=1); height: 10px

I valori relativi ai colori ed all'intensità sono ovviamente puramente indicativi. Potete variare come preferite, finché non avrete ottenuto l'effetto desiderato. Un valore che NON dovete mai dimenticare è HEIGHT. Spesso è omesso nei manuali canonici, ma è in virtù di questo che l'effetto è concretamente visualizzabile.
Se non vi basta, ecco la scheda tecnica completa:
DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Effetto ombreggiatura. Rende l'oggetto cui viene applicato, quasi, tridimensionale, o comunque crea un effetto di "sollevazione" dal piano di lavoro standard a causa dell'ombra che proietta sul livello più basso.
Color: indica, in esadecimale, il colore dell'ombra.
Offx: distanza, sull'asse delle X, dell'ombra dall'oggetto che la genera (funziona coi numeri decimali).
OffY: distanza, sull'asse delle Y, dell'ombra dall'oggetto che la genera (funziona coi numeri decimali).
Positive: Determina se applicare il colore scelto per l'ombra all'oggetto ad al suo "negativo". In pratica, settato ad 1( o con valori diversi da 1 e 0) si vedrà l'ombra del colore desiderato proiettato sullo sfondo originale della pagina web, invece col valore 0 settato si vedrà lo sfondo dell'oggetto desiderato assumere il colore assegnato all'ombra, mentre l'oggetto avrà il colore dello sfondo originale (si negativizza l'oggetto ed il suo sfondo).

Wave: Questo filtro, che uso con molto piacere sulle immagini o sui links, consente di dare ad essi un piacevole ed originale effetto distorto.

filter:Wave(freq=3, light=20, phase=10, strength=2); height: 10px

Blur: Per ottenere questo semplicissimo effetto, l'istruzione da inserire nei css, in corrispondenza del settore che dovrà assumere il carattere, sarà:

filter:blur(strength=5); height: 10px

Il codice che vi propongo è molto più semplice di quello ortodosso, ma per cominciare può andar bene. Un valore che NON dovete mai dimenticare è HEIGHT. Spesso è omesso nei manuali canonici, ma è in virtù di questo che l' effetto è concretamente visualizzabile.
Se non vi basta, ecco la scheda tecnica completa:

Blur(Add=?, Direction=?, Strength=?)

Crea un effetto di sfocatura sull'oggetto cui viene applicato.
Add: parametro rpivo di reale utilità, si consiglia di ometterlo.
Direction: direzione della sfocatura dell'oggetto (left, rigth, up e down)
Strength: la "forza" con cui si visualizza la sfocatura. In altri termini, un valore basso implicherà un effetto poco visibile, quasi sfumato, mentre con valori alti si avrà un effetto molto più marcato (vanno utilizzati valori decimali)


Ora permettetemi qualche consiglio! I filtri sono meravigliosi, decorativi e versatili. Potete infilarli praticamente OVUNQUE, e sostituiscono meravigliosamente la grafica pixel.. MA NON ESAGERATE! Errore tipico dei principianti (che ovviamente ho fatto anch'io) è quello di usare una profusione di effetti. Non va bene: non migliorano l'estetica. Bene due abbinamenti, malissimo una sovrapposizione priva di senso. Attenti agli abbinamenti di colore: fate in modo che l' effetto AUMENTI la leggibilità e non il contrario. Se una pagina distrugge la retina di chi la guarda, è molto difficile il malcapitato torni. Ricordatevi che non tutti i browsers li supportano. Io uso I6 e mi curo sempre di segnalarlo, in modo che gli utenti lo sappiano. Altra nota: i filtri cozzano talora con le transizioni (altro tutorial postato in questa sede). Ergo scegliete: o gli uni o le altre. Del resto è abbastanza logico non ci sia bisogno di sovrapporli. Altra indicazione importante: i filtri possono reciprocamente annullarsi. Non solo: se settate un filtro nel body, è possibile esso ponga in evidenza tutte le aree coperte da altri filtri. Motivo per il quale consiglio di applicare gli stessi sempre in modo CIRCOSCRITTO all' area che intendete decorare. Bene: non mi resta che augurarvi buon lavoro!

Posted on 28 Oct 2007 by Sar@

Alert rating

Una delle esigenze che ho avvertito fortemente come webmistress, in ragione della mia passione per la scrittura, è stata quella di oscurare alcuni contenuti dei miei siti dedicati alla narrativa amatoriale, in modo da poter proteggere gli utenti più giovani. Uno strumento adatto allo scopo, anche se non sempre sufficiente, è senz'altro l'alert, ovvero uno script java attivo sul singolo link o nella pagina web. Ve ne offro diverse tipologie, indicandovi altresì le caratteristiche d'uso.

1. Il primo alert risulta attivo su tutta la pagina e deve essere inserito tra i tag <head> ed </head> del vostro sito. Presenta una funzione history.back legata al tasto annulla, che è tuttavia inutile laddove la pagina venga aperta in una nuova finestra. Atro dettaglio fastidioso è che se la navigazione avviene in .php e si mantiene attivo l'header, l'alert apparirà in ogni pagina, potendo rallentare la navigazione.:

2. Il secondo alert è attivo sul singolo link (all'interno del target <a>) e si caratterizza come semplice indicazione del contenuto (esempio)

3. Il terzo alert è attivo sul singolo link (all'interno del target <a>) e si caratterizza per la possibilità di annullare l'accesso al contenuto (esempio)

 

 

Posted on 28 Oct 2007 by Sar@

Blocca tasto destro

Per quanto questa prassi sia spesso contestata, sottolineandone la scarsa utilità, visto che non è affatto difficile aggirare qualsivoglia tipo di limite posto in tal senso, applicare una protezione al proprio sito vuol dire soprattutto indicare in modo specifico che, come webmaster, non si gradisce affatto il proprio lavoro sia scopiazzato da aspiranti trafficoni. Chi infatti ha curiosità in merito ad una struttura o ad uno scripts può tranquillamente DOMANDARE, via e-mail, senza bisogno di spacciare per proprio il lavoro altrui. Le protezioni possono esser di difformi tipi, a seconda delle esigenze di tutela.


1- Inibizione generale del tasto destro (script fornito gentilmente da Maki e funzionale anche per Mozilla Firefox). E' sufficiente incollare il seguente codice tra i tag <head> ed </head> del proprio source:

2- Inibizione del tasto della funzione "salva immagine con nome" presente sui browser IE e che si attiva cliccando col tasto destro del mouse su un'immagine presente nella pagina web:

a- Incolla il seguente codice tra i tag <head> ed </head> del source (se vuoi ripristinare l'effetto sulla singola immagine, ricorda di scrivere il suo codice come <IMG SRC="tua_immagine.jpg" GALLERYIMG="yes">):

b- Seconda versione, in due tempi (dal sito Weblink). Incolla il seguente codice tra i tag <head> ed </head> del source:

Inserisci l'evento onload nel tag body:

3- Inibizione copia-incolla testuale. Incolla il seguente codice tra i tag <head> ed </head> del source:

Come ho già detto, non è affatto difficile per chi non sia proprio del tutto inesperto aggirare questi limiti, ma non è per certo lo scopo che ne determina l'inserimento. Per quel che mi riguarda, nei fatti, aggiungere l'alert vuol solo dire che non autorizzo nessuno a vivere sulle mie spalle. Per contro sono disponibilissima con chi mi domanda informazioni in merito agli scripts che uso (e che, per altro, possono essere reperiti da chiunque con un minimo di curiosità ed applicazione)

Posted on 28 Oct 2007 by Sar@

Jump-menu

Un buon modo per ottimizzare gli spazi, senza ricorrere a menu particolarmente dispendiosi, è adottare i jump-menu. Si tratta di piccoli form, in sostanza, che consentono in modo snello e veloce l'accesso alle varie pagine di uno spazio web. Ve ne propongo uno (© Dynamic Drive) che unisce alla significativa riduzione dello spazio la possibilità di veder indicato il contenuto delle pagine di accesso.


La costruzione del form implica due distinti passaggi:

1. tra i tag <head> ed </head> (o nel vostro foglio di stile, omettendo, in questo caso <style> e </style>) dovete indicare le caratteristiche cromatiche e la tipologia del font che vi interessa usare nel modulo. Ovvero incollare (ma i colori ed i caratteri sono, ovviamente, regolabili a discrezione) quanto segue:

2. tra i tag <body> ed </body> (in corrispondenza del punto in cui volete che il form appaia) incollate quanto segue, ovviamente inserendo i vostri links in luogo della traccia data e la descrizione relativa. Naturalmente, purché si rispetti la progressione, il numero delle pagine può essere aumentato o diminuito. Allo stesso tempo può essere modificata la destinazione (trovate indicato 'newwin', come target di apertura. Ma se volete aprire il form nella stessa pagina, selezionate 'self' e via di seguito):

 

 

Posted on 28 Oct 2007 by Sar@

<< Previous 1 2 3 4 Next >>

Content Management Powered by CuteNews

<< go back



Disclaimer

All bands, actors, anime, manga and video game related materials depicted on Graficamente belongs to their respective owners and creators. No copyright infringment is intended. They are used for educational, personal and non-profit purposes only. Graficamente is in no way associated with these parties.
All original materials (content, design and coding) belongs to Sar@, or otherwise stated. No parts of Graficamente may be reproduced in part or in whole without written permission. The layouts offered by this site may be used under the conditions written in the Terms of Service.
Questo sito non rappresenta una testata giornalistica in quanto viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi un prodotto editoriale ai sensi della legge n. 62 del 7.03.2001.



home page