

CSS Hat translates Photoshop layer styles to CSS3 - benackles
http://csshat.com/

======
tomaskafka
Hi guys, I'm one of CSS Hat devs and I'd like to thank you for your interest
and show a little bit more:

This is the output of current version of CSS Hat:
<http://jsfiddle.net/tomaskafka/ZXgqN/>

~~~
tluyben2
Offtopic: can I have a Piffle invite? I'm very curious; we try out all these
tools all the time at our company and none of them are really good. This looks
promising, but that's the outside only for now of course.

~~~
tomaskafka
Oops - I didn't expect a comment after the initial wave, so I stopped watching
the thread. At this time, I cannot advise you anything better than signing up
at <http://csspiffle.com> \- you'll be then first to know our news :).

------
colinramsay
Fireworks CS6 has something related to this. If you select an object in
Fireworks, you can get the CSS which will build the shape, gradients, curved
borders, etc.

[http://layersmagazine.com/new-css3-support-in-dreamweaver-
cs...](http://layersmagazine.com/new-css3-support-in-dreamweaver-cs6.html)

~~~
tomaskafka
Yep - kudos to Adobe for doing this; we discovered this while working on CSS
Hat. We are in Photoshop, and from CS4 up, though :) Tomas (CSS Hat dev)

------
michaelmior
"Hate Flash? Click here!" That one's clever :)

~~~
why-el
Mine said "hate IE6?". In any case I think it would have been both funny and
effective if it led to their products page, something like here is how we will
can take your pain away..Redirecting to twitter? I didn't like it.

~~~
michaelmior
Agreed. If they show me something awesome, that might give me a reason to send
out a tweet. As it stands, I just closed the window.

------
TazeTSchnitzel
I don't use Photoshop, but the hue-shifting glowing hat and floating words are
a pretty cool effect.

~~~
tomaskafka
Thanks - I'll pass it on to Peter who made the effect ;)

------
huhtenberg
Oh, common. Who keeps changing the submission titles? It is really getting out
of hand lately. What was wrong with "{css:hat}" ?

~~~
michael_fine
I think because "{css:hat}", while interesting and amusing, doesn't accurately
display what it does.

------
tomkin
I was _just_ talking about this with colleagues. If some piece of photo
manipulation software centered its features for the web developer and actually
outputted the CSS for shadows, blend modes, etc. I am sure that many would be
interested. Photoshop is great, don't get me wrong, but it is shoehorned into
being a web development tool. It isn't by nature. Fireworks and tools like it
were never well rounded enough. Now we're in an era where CSS can actually do
a lot of the stuff Photoshop is capable of.

Can't wait to try this out.

------
unkoman
Why is the page calling me a fag?

~~~
Nogwater
That says "Faq". Notice how the loopy part of the descender goes to the right.
I don't know why it's lowercased.

------
sktrdie
This is huge if they can pull it off. I wonder how accurately they can make it
happen. Even if they're simply able to position layers exactly the same as in
PS, it's already something I would use as being extremely useful. This could
virtually allow you to not code in HTML/CSS3 anymore - which is something I
really hate to do.

So would it output the HTML elements and give you CSS3 code for it? How about
<forms> and other elements that aren't just simply <div>'s? Can you make
those?

~~~
tomaskafka
Hi sktrdie, we considered this, but we think that the output would become just
a mess of absolutely sized and positioned divs - and that's not how websites
should be made.

It is a coder's job to bring in the semantic structure and we merely aid to
assist her/him - so CSS Hat will 'only' transform layer's fills and styles to
CSS3. Hope that's cool :).

Tomas - one of CSS Hat devs

------
sushi
I wonder how many people still use Photoshop to create mocksups first and then
move to HTML/CSS. Ever since CSS3 became popular I create my mockups directly
in HTML/CSS3.

~~~
companyhen
I always use Photoshop for my mockups for clients, but I'm still pretty new to
web design.

I've only been at it about 5-6 months, with 1-2 years experience in graphic
design. Any advice?

~~~
josefresco
Two things from someone with 12 years in professional web design: Switch to
Adobe Fireworks now before you get too used to Photoshop. And ignore all of
the engineering advice here about jumping straight to CSS/HTML.

Good web design begins much earlier than Photoshop/Fireworks, and doesn't even
move to the graphics/proof stage until you've made dozens of decisions
beforehand that will influence your design (think business goals, marketing
messaging, platform, audience etc.) HTML/CSS is almost one of the _last_ steps
in a complete web project.

~~~
gilrain
Can you expand on why you recommend Fireworks over Photoshop, please?

~~~
robszumski
1\. an Illustrator-style object selection engine so you don't have to do that
"right-click > pick layer from list" BS. 2\. Multiple versions of one screen
in a single file. Think collapsed/uncollapsed states of a form or all of the
tabs of a form. 3\. Small file sizes because it uses PNGs. 4\. Ability to
import PSDs and use style from PSD layers. Same with Illustrator files. 5\.
Customizable patterns UI so you can drag and drop custom buttons, etc. 6\.
Built in prototyping. Just click-through stuff using hotspots, but it's a good
way to see if an interaction is going to be worth pursuing further or not.

~~~
AhtiK
> 1\. an Illustrator-style object selection engine so you don't have to do
> that "right-click > pick layer from list" BS.

Ctrl/Cmd+click with Photoshop move tool automatically selects the layer that
is under your mouse cursor raster. Not 100% Illustrator-style but less BS than
selecting from lists.

------
treelovinhippie
"Now waiting for App store approval" - does that mean Mac only?

~~~
LeZuse
No, it is not :) Although the initial release will be for Mac

------
pvidler
From the link:

"Photoshop is required to use CSS Hat."

From their main site:

"CSS Piffle. No more photo editing software for web design!"

Eating their own dog food?

~~~
LeZuse
Well, a lot of people are stuck in Photoshop, unfortunately. That way there
could be some transition from PS to straight HTML/CSS.

------
erable
This could be good -- any additional info that you can share? The details are
somewhat scant and I'm greatly interested.

~~~
tomaskafka
Hi erable, I can show you a sample CSS generated by current version:
<http://jsfiddle.net/tomaskafka/ZXgqN/>

------
alexobenauer
It looks like it only exports webkit-compatitble CSS. If this is the case,
this would be really disappointing.

~~~
whalesalad
Not nearly as disappointing as the fact that Webkit has not become a standard
in _all_ browsers. We should all be working on a single rendering engine.
Webkit has won, and should be the standard.

People/organizations can continue to experiment on components of that. V8 vs
Nitro etc... We'll just have beta/dev forks of Webkit that can eventually be
merged back into the core.

Browser fragmentation is fine. It's the rendering engines that are killing us.

~~~
darkstalker
CSS prefixes are dumb, why not just drop them?

~~~
mas1n
<http://www.alistapart.com/articles/prefix-or-posthack>

------
jokull
What about exporting Stylus (/w nib) or at least LESS?

~~~
joshmlewis
It's not generating total stylesheets, just blocks of CSS from what I can
tell. Although an option for loosing the ; and maybe a couple features
SASS/LESS has would be nice, and shouldn't be too hard to pull off.

------
jzd131
Any news on when the beta version will be released?

~~~
lukashurych
CSS hat is going live next week :) So you can get it then ;)

~~~
joshuahornby
What About Piffle? Been waiting far too long now keep checking every day.

------
colemanti
How much is it going to cost? :P

------
reflexer
clever name

