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

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

Interessante rassegna organizzata da “esterni” (progetto sociale e culturale):

Nelle città  che non sono più comunità , dove cittadini estraniati compiono ogni giorno gli stessi percorsi e raramente si sfiorano, design pubblico propone un altro modo di vivere insieme gli spazi di tutti; un modello di cultura dello “spazio pubblico” come controaltare a quello dominante del “tempo privato”, visioni ravvicinate al posto di tele-visioni e progetti di cultura democratica anzichà© oligarchie di mercato.
Una rivoluzione di tutti che solo in uno spazio pubblico libero o liberato potrà  muovere i suoi primi passi.

per i milanesi, l’interland e chi volesse maggiori informazioni, andate su designpubblico.it

ps: ricordate che bastano appena 2 mq per ospitare un designer… bed sharing!

Condividi

What happened to the design?

To know more about why styles are disabled on this website visit the

Annual CSS Naked Day website for more information.

Bene, anche Laboratorio Caffeina aderisce al “Naked Day” quindi per l’intera giornata di oggi, 5 aprile 2007, il sito si spoglierà  del suo preziosissimo foglio di stile e lo vedrete come mamma l’ha fatto…

Condividi

A List Apart
http://www.alistapart.com/
[For people who makes websites.]

Accessibility101
http://accessibility101.org.uk/
[Accessible Website Design by Shaun Anderson.]

css Zen Garden
http://www.csszengarden.com/
[A demonstration of what can be accomplished visually through CSS-based design.]

Design Meltdown
http://www.designmeltdown.com/
[Design elements, trends, and problems in web design.]

Dexigner Design Portal
http://www.dexigner.com/
[Is the leading online information service for designers and artists.]

Good-Tutorials.com
http://www.good-tutorials.com/
[Good-Tutorials.com lists 13,180 and more Adobe Photoshop tutorials.]

Ideasonideas
http://www.ideasonideas.com/
[Is a blog that invites dialogue on issues relevant to communication designers and brand strategists]

Netdiver
http://www.netdiver.net/
[Digital culture magazine + new media design portal.]

WhatTheFont
http://www.myfonts.com/WhatTheFont/
[Upload a scanned image of the font and instantly find the closest matches.]

Will the browser apply the rule(s)?
http://centricle.com/ref/css/filters/
[Browser rules.]

Condividi