7 ms·

CSS builder for shadows, backgrounds, and borders

180 points by daleharvey 15y ago

vnorby 15y ago
Wow, some stunning work there - the attention to Photoshop details is great (check out the gradient editor in the background tab). Keep it up!
mijnpc 15y ago
this is some cool shit
chaosmachine 15y ago
As someone who makes a living selling layer styles[1], I have to say this is very cool, but also slightly worrying ;) I've been trying to figure out how long the market for Photoshop addons will last, as CSS and other technologies advance to the point where everything can be done in the browser. Clearly, we're getting closer. [1] http://photoshoplayerstyles.com/ http://photoshoplayerstyles.com/
- faramarz 15y ago
  Making a living via Photoshop layers? can you elaborate a little? are we talking supplemental income or a significant/all of your income doing this? Amazing never the less!
  - chaosmachine 15y ago
    You might be interested in this article I wrote: http://photoshoplayerstyles.com/blog/my-first-100-sales http://photoshoplayerstyles.com/blog/my-first-100-sales At the moment, it's paying most of my bills while I work on something much bigger ;)
    - trafficlight 15y ago
      I always love reading things like this. It's always good to keep in mind that it doesn't take an earth-shattering idea to make a living.
  - callmeed 15y ago
    You'd be surprised. I know photographers that make a decent living selling PS actions, templates and Lightroom presets. Usually more than they make actually taking pictures. http://kubotaimagetools.com http://kubotaimagetools.com http://www.gettotallyrad.com http://www.gettotallyrad.com http://www.designaglow.com/store/ http://www.designaglow.com/store/ (just a few)
- heyimfromreddit 15y ago
  So why don't you start selling CSS with them too?
- xeos 15y ago
  The glass effects look good. I noticed you are using fastspring which I have been considering as a payment processor, Have you had any issues with them? Also can you tell me how well does it handle digital downloads? The way it releases the download to the paid customer, or is it something you handle yourself? Thanks for any advice.
BasilAwad 15y ago
great job. Please make more tools.
jamesrom 15y ago
Definitely the future of HTML/CSS tools.
quizbiz 15y ago
This is awesome. But please left align the toolbar and right align the element being edited. Can't wait to see this progress.
- mindhunter 15y ago
  high priority in the todo!
  - joakin 15y ago
    It would be awesome if it could add several shadows/backgrounds. Really nice tool, good job!
    - mindhunter 15y ago
      hah - and thats gonna be the next BIG thing! Was just too much work for the first release :)
guynamedloren 15y ago
Beautifully done. This is one of those times you kick yourself for not thinking of it first :)
faramarz 15y ago
It took me a little while to see the CSS Code link on the bottom left.. but that's probably because I was so busy messing around with the tool. Great work! keep it up.
shortformblog 15y ago
This is amazing. It's like they took InDesign's effects palette and put it in my browser.
nathanh 15y ago
Has anyone tested this on any IE versions? I'm wondering about graceful degradation, but don't have a VM available at the moment.
- mindhunter 15y ago
  Internet Explorer is not supported. There's a feature detection running at the start page which blocks off browsers who don't support all feature. No released IE supports background gradient's - so they are all blocked. IE 10 will support them, and by the speed browsers iterate nowadays (thanks to Chrome starting that trend) I have hopes that it's release won't take too long.
  - chc 15y ago
    CSS3 Pie (http://css3pie.com/ http://css3pie.com/) adds linear gradient support to all versions of IE. Still not 100%, but it's enough for a lot of people.
    - mindhunter 15y ago
      it has no support for color-stops in gradients, but your right - would be enough for most people. but since the audience are web-designers, for whom 2 color-stops would be a limitation, it's no option.
    - JonnieCache 15y ago
      I have never managed to use css3pie without it totally messing up all my other CSS.
      - chc 15y ago
        I've used it on one site and it worked fine there, but admittedly that's a tiny sample size.
lightyrs 15y ago
The beginning of something huge. Everybody thought of it but nobody executed — until now. Huge kudos to you Dale.
d5tryr 15y ago
This is great! Though i'd contest the assertion that it uses my 'favourite graphics editor', my 'graphics editor' would be more appropriate ;)
robflynn 15y ago
Looks great. I did find a couple little bugs. One annoying, one not so much: 1) The annoying one - When backspacing over values in entry fields (such as opacity, or distance), backspacing over all the characters causes NaN to appear in the field. Sometimes you have to fight with the input field a bit to allow you to re-enter text. (Usually shift+home+the key you want to hit will work) 2) If you enter a ridiculous value such as 500 for percentage then the slider behaves strangely. Not annoying as it pretty quickly snaps back to where it should be. I love the site, so please do not take these two critiques as a slight against it.
- mindhunter 15y ago
  no offense taken. thanks for the observation! also don't mind to fill out bug reports on github https://github.com/mrflix/LayerStyles/issues https://github.com/mrflix/LayerStyles/issues or directly push fixes
  - robflynn 15y ago
    Oh, nice. I didn't catch the link to github previously. (That seems to be a theme for me tonight.)
meow 15y ago
gr8 job! this is going to be a really handy tool.
JonnieCache 15y ago
Very Nice! Props should also go to http://www.colorzilla.com/gradient-editor/ http://www.colorzilla.com/gradient-editor/ who have been doing things like this in the past. That site also generates the IE fallbacks as well.
BasDirks 15y ago
Tools like this will force web designers to step up their game, because their magical css powers aren't so magical anymore. I welcome the development.
marknutter 15y ago
Next step: ability to create an entire web page of these elements and get the markup as a file. Bye, bye Photoshop!
mrspandex 15y ago
I visited in Opera, which is not supported. But I was very pleased that the site didn't just block me for not being an approved browser, but actually tested for the existence of a feature. Bravo!
- mindhunter 15y ago
  props to modernizr.js for making it so easy

180 points by daleharvey 15y ago

Wow, some stunning work there - the attention to Photoshop details is great (check out the gradient editor in the background tab). Keep it up!

mijnpc 15y ago

this is some cool shit

chaosmachine 15y ago

As someone who makes a living selling layer styles[1], I have to say this is very cool, but also slightly worrying ;) I've been trying to figure out how long the market for Photoshop addons will last, as CSS and other technologies advance to the point where everything can be done in the browser. Clearly, we're getting closer. [1] http://photoshoplayerstyles.com/ http://photoshoplayerstyles.com/

faramarz 15y ago
Making a living via Photoshop layers? can you elaborate a little? are we talking supplemental income or a significant/all of your income doing this? Amazing never the less!
- chaosmachine 15y ago
  You might be interested in this article I wrote: http://photoshoplayerstyles.com/blog/my-first-100-sales http://photoshoplayerstyles.com/blog/my-first-100-sales At the moment, it's paying most of my bills while I work on something much bigger ;)
  - trafficlight 15y ago
    I always love reading things like this. It's always good to keep in mind that it doesn't take an earth-shattering idea to make a living.
- callmeed 15y ago
  You'd be surprised. I know photographers that make a decent living selling PS actions, templates and Lightroom presets. Usually more than they make actually taking pictures. http://kubotaimagetools.com http://kubotaimagetools.com http://www.gettotallyrad.com http://www.gettotallyrad.com http://www.designaglow.com/store/ http://www.designaglow.com/store/ (just a few)
heyimfromreddit 15y ago
So why don't you start selling CSS with them too?
xeos 15y ago
The glass effects look good. I noticed you are using fastspring which I have been considering as a payment processor, Have you had any issues with them? Also can you tell me how well does it handle digital downloads? The way it releases the download to the paid customer, or is it something you handle yourself? Thanks for any advice.

BasilAwad 15y ago

great job. Please make more tools.

jamesrom 15y ago

Definitely the future of HTML/CSS tools.

quizbiz 15y ago

This is awesome. But please left align the toolbar and right align the element being edited. Can't wait to see this progress.

mindhunter 15y ago
high priority in the todo!
- joakin 15y ago
  It would be awesome if it could add several shadows/backgrounds. Really nice tool, good job!
  - mindhunter 15y ago
    hah - and thats gonna be the next BIG thing! Was just too much work for the first release :)

guynamedloren 15y ago

Beautifully done. This is one of those times you kick yourself for not thinking of it first :)

faramarz 15y ago

It took me a little while to see the CSS Code link on the bottom left.. but that's probably because I was so busy messing around with the tool. Great work! keep it up.

shortformblog 15y ago

This is amazing. It's like they took InDesign's effects palette and put it in my browser.

nathanh 15y ago

Has anyone tested this on any IE versions? I'm wondering about graceful degradation, but don't have a VM available at the moment.

mindhunter 15y ago
Internet Explorer is not supported. There's a feature detection running at the start page which blocks off browsers who don't support all feature. No released IE supports background gradient's - so they are all blocked. IE 10 will support them, and by the speed browsers iterate nowadays (thanks to Chrome starting that trend) I have hopes that it's release won't take too long.
- chc 15y ago
  CSS3 Pie (http://css3pie.com/ http://css3pie.com/) adds linear gradient support to all versions of IE. Still not 100%, but it's enough for a lot of people.
  - mindhunter 15y ago
    it has no support for color-stops in gradients, but your right - would be enough for most people. but since the audience are web-designers, for whom 2 color-stops would be a limitation, it's no option.
  - JonnieCache 15y ago
    I have never managed to use css3pie without it totally messing up all my other CSS.
    - chc 15y ago
      I've used it on one site and it worked fine there, but admittedly that's a tiny sample size.

lightyrs 15y ago

The beginning of something huge. Everybody thought of it but nobody executed — until now. Huge kudos to you Dale.

d5tryr 15y ago

This is great! Though i'd contest the assertion that it uses my 'favourite graphics editor', my 'graphics editor' would be more appropriate ;)

robflynn 15y ago

Looks great. I did find a couple little bugs. One annoying, one not so much: 1) The annoying one - When backspacing over values in entry fields (such as opacity, or distance), backspacing over all the characters causes NaN to appear in the field. Sometimes you have to fight with the input field a bit to allow you to re-enter text. (Usually shift+home+the key you want to hit will work) 2) If you enter a ridiculous value such as 500 for percentage then the slider behaves strangely. Not annoying as it pretty quickly snaps back to where it should be. I love the site, so please do not take these two critiques as a slight against it.

mindhunter 15y ago
no offense taken. thanks for the observation! also don't mind to fill out bug reports on github https://github.com/mrflix/LayerStyles/issues https://github.com/mrflix/LayerStyles/issues or directly push fixes
- robflynn 15y ago
  Oh, nice. I didn't catch the link to github previously. (That seems to be a theme for me tonight.)

meow 15y ago

gr8 job! this is going to be a really handy tool.

JonnieCache 15y ago

Very Nice! Props should also go to http://www.colorzilla.com/gradient-editor/ http://www.colorzilla.com/gradient-editor/ who have been doing things like this in the past. That site also generates the IE fallbacks as well.

BasDirks 15y ago

Tools like this will force web designers to step up their game, because their magical css powers aren't so magical anymore. I welcome the development.

marknutter 15y ago

Next step: ability to create an entire web page of these elements and get the markup as a file. Bye, bye Photoshop!

mrspandex 15y ago

I visited in Opera, which is not supported. But I was very pleased that the site didn't just block me for not being an approved browser, but actually tested for the existence of a feature. Bravo!

mindhunter 15y ago
props to modernizr.js for making it so easy