laboratorio caffeina

Esistono vari modi per mappare un’immagine via CSS (aiutati qualche volta da JS), oggi ve ne segnalo alcuni… poi ognuno deciderà  quale sia il migliore…

CSS Image Maps, Flickr-like Technique?

Tecnica proposta da Frank Manno basata sull’uso degli elementi DL, DT e DD via CSS e XHTML.

[...]a sample image map that’s built entirely using CSS and XHTML. While I’ve added support for Javascript (item titles are simply displayed beneath the image), I’ve disabled it in this example — I’ve run into a bit of a problem when JS is enabled and CSS is disabled (more details below).[...]

• CSS Image Maps

CSS Image Maps, Redux

Versione “redux” della precedente, sempre dello stesso autore e sempre CSS con XHTML.

[...]I went back to the drawing board, and came up with another solution that requires a single image, some CSS, and a little creativity! This second example makes use of transparent images (PNG images) to indicate an annotation on an image. Much of the same CSS from the first example was used, with a few minor alterations. Below is a sample of the old vs. [...]

• CSS Image Maps, Redux

CSS Image Map, by Moryson

Tecnica basata sull’uso delle liste non ordinale (UL) - CSS con XHTML. (sito e spiegazioni solo in tedesco)

• CSS Image Map, by Moryson

Create a reactive zone (image map) with CSS

Tutorial che prende spunto da un vecchio articolo di A List Apart per poi proporre la propria soluzione via CSS e XHTML.

[...]It needs to be converted in block to go around that. There are only two possibilities to do that: display: block on the link (in this case, the image will need to be positionned) or float: left on the link, that will transform it in a block (that’s the solution I went with)[...]

• Create a reactive zone (image map) with CSS

A List Apart: Articles: A More Accessible Map

Questa invece è una soluzione che sfrutta anche il JS accompagnato sempre da CSS e XHTML.

As companies like Google and Yahoo! have simplified the process of placing information on a map by offering web services/APIs, the popularity and abundance of mapping applications on the web has increased dramatically. While these maps have had a positive effect on most users, what does it mean for people with accessibility needs?[...]

• A List Apart: Articles: A More Accessible Map

How to Create an Image Map Using CSS

Tutorial fatto molto bene, con un’interessante soluzione finale, tutto via CSS e XHTML.

Here, you will learn one styling step at a time, fully explaining the reason for each style and showing the results of each step, so that you can see what to expect and implement it for yourself.

• How to Create an Image Map Using CSS

CSS: Map Pop

L’ultima soluzione che vi segnalo è davvero valida.

Image maps are cool. So are pop-ups. Here I combine the two into a single “Map Pop” experiment. Combining the two could be very useful to some people. Especially if you want a nicely interactive solution that just happens to be accessible to a vast number of users. In addition to its accessibility, based not on conjecture but on actual testing, this solutions seems to be supported by a large number of user agents, even Internet Explorer 6.x [...]

• CSS: Map Pop

Ora non vi resta che provare, provare e provare… finchà© non troverete la soluzione che fa al caso vostro… buon lavoro.

Condividi

Photoshop Support
http://www.photoshopsupport.com/
[Site features free Adobe Photoshop tutorials and links to free Photoshop brushes, plugins and resources.]

Tutorialized: Photoshop
http://www.tutorialized.com/tutorials/Photoshop/1
[Adobe Photoshop Tutorials.]

Good-Tutorials
http://www.good-tutorials.com/
[Good-Tutorials.com lists tens of thousands of tutorials for Photoshop, Flash, and more.]

The Photoshop Roadmap
http://www.photoshoproadmap.com/
[Hundreds of Photoshop tutorials, plugins, downloads and other graphics related resources.]

Adobe Tutorialz
http://www.adobetutorialz.com/
[Learning Adobe Software - Adobe Photoshop effects.]

Photoshop Cafe
http://www.photoshopcafe.com/tutorials.htm
[One of the largest collection of quality original photoshop tutorials on the web.]

Planet Photoshop
http://www.planetphotoshop.com/
[Online Photoshop Tutorials, Tips and News.]

Tutorial Kit
http://www.tutorialkit.com/
[Rich collection of Adobe Photoshop tutorials, tips and tricks to help users of all skill levels reach their full potential.]

FS Tutorials
http://www.fstutorials.com/
[Photoshop Tutorials, Learn photoshop online, the best photoshop tutorials search engine.]

Eyes on Tutorials
http://www.eyesontutorials.com/
[Adobe Photoshop Tutorials - Photo Effects, Photo Editing, Drawing, Designing, Web Graphics Layouts.]

Condividi

Il titolo forse non è dei più immediati, ma vorrei presentare delle proprietà degli elementi HTML utilizzabili con Javascript per creare degli scroller personalizzabili o automatici ( classico box delle news a scorrimento continuo ) o quant'altro preveda il movimento di un blocco scrollabile.

Innanzitutto presentiamo le proprietà  degli elementi HTML che utilizzeremo negli script.

clientHeight
Proprietà in sola lettura che ritorna il numero di pixels dell'altezza interna di un elemento, incluso il padding ma escluse l'altezza della scrollbar, del bordo o del margine.

clientWidtht
È il corrispettivo di clientHeight ma per la larghezza interna di un elemento.

scrollHeight
È una proprietà  in sola lettura che restituisce il numero di pixels dell'altezza di un elemento relativa al layout, quindi comprensiva di padding e bordi.

scrollWidth
È il corrispettivo di scrollHeight ma riguardante la larghezza un elemento.

scrollTop
È una proprietà  in lettura e scrittura che può assumere un valore qualsiasi intero positivo rappresentate la distanza in pixel tra il lato superiore e la prima parte visibile dell'elemento countenuto.

scrollLeft
È il corrispettivo di scrollHeight ma riguardante la larghezza un elemento.

Schema riassuntivo

Note: le proprietà presentate sino ad ora sono state introdotto dal object model di MSIE, quindi non sono nè una specifica nè una raccomanandazione W3C. In ogni caso sono implementate anche dal render Gecko ( Firefox, Mozilla, Netscape, etc. )

Queste proprietà si applicano a numerosi elementi, per avere maggiori dettagli consultate pure la MSDN DHTML library

Condividi

Sei un grafico? Ti appassiona il fotoritocco? Vuoi metterti alla prova?

Se hai risposto sì ad almeno tre delle domande precedenti, allora Photoshop Contest è quello che stavi cercando...

At Photoshop Contest you can win prizes by editing images and entering them into contents for other site members to vote on. Show off your skills in the contests or learn from our tutorials and talented user base.

Io penso di partecipare a qualche contests... per provare e provarmi... poi vi dirò comìè andata... speriamo bene... ;)

Condividi

Personalmente mi capita spesso di vedere in giro font particolari che mi piacerebbe usare... secondo le intenzioni di questo semplice servizio potrete trovare il carattere che stavate cercando in pochi semplici step partendo da un'immagine... la grafica non è molto web 2.0 ma il database ed il motore che usano sembrano davvero ottimi...

Ever wanted to find a font just like the one used by certain publications, corporations, or ad campaigns? Well now you can, using our WhatTheFont font recognition system.
What fhe font

Ho fatto una piccola prova con il logo di questa azienda (casamood) e direi che il risultato è buono, c'è ancora da lavorare anche perchà© mi è venuto il dubbio che la ricerca sia fatta solo su font proprietari a pagamento... detto questo, il risultato indica che il font dovrebbe essere un Folio Light, ma credo che il logo testato sia della famiglia Helvetica...
ma i due sono davvero simili...

Se non avete trovato il carattere che cercavate oppure avete voglia di immergervi nel modo dei font gratuiti, andate su urban fonts (più di 8000 fonts) oppure su dafont.com, (più di 7000 caratteri) è probabile che troverete il font che vi serve...

Quindi, non aspettate oltre... what the font?

Condividi

Sull'onda dell'articolo 35 Designer x 5 Questions di Smashing Magazine, mi piacerebbe sapere le risposte che avreste dato voi alle 5 domande:

• L'aspetto del design a cui dai maggiore importanza
• La tecnica CSS più utile e che usi più spesso
• Il font che usi più spesso nei tuoi progetti
• Un libro legato al design che raccomandi
• Una rivista di design che segui giornalmente o settimanalmente (online o offline)

poi vi dirò anche le mie risposte

Condividi

Quante volte vi è capitato di aver bisogno di un'icona ed impazzire per trovarla? Ora impazzirete lo stesso, ma almeno la qualità  è garantita... buon surfing...

• TwoTone
• Pixel Girl Set
• Vista-Inspirate
• Greyscale
• ColorCons
• Xi4Dox
• Kelli Shaver
• kNeu
• Tango Icon Gallery
• Dropline Nuovo
• Ganato
• Silvestre - Yasis
• Silvestre - Neu
• Silvestre - Etiquette
• Ricebowl
• FamFam Fam - Mini
• FamFam Fam - Silk
• FamFam Fam - Flags
• Drunken Love
• Milk & Green

Alcuni dei files sono degli SVG (Scalable Vector Graphics) vi consiglio di usare Inkscape per aprirli ed editarli...

Inkscape è un programma open source per il disegno, simile a Illustrator, Freehand, CorelDraw e Xara X che si basa sul formato standard W3C "Scalable Vector Graphics" (SVG). Tra le caratteristiche supportate da SVG vi sono le forme base, i tracciati, i testi, i segnali, i cloni, le trasparenze, le trasformazioni, i gradienti e i gruppi. Inkscape supporta inoltre i meta-dati Creative Commons, la modifica sui nodi, i livelli, le operazioni complesse sui livelli, i testi su tracciato e la modifica dell'XML SVG. Può importare da diversi formati come EPS, Postscript, JPEG, PNG, BMP e TIFF e esportare in PNG ed in altri formati basati su vettori multipli.

Condividi