Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Geek Culture / Photoshop to CSS

Author
Message
Phaelax
DBPro Master
19
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 15th Jan 2015 04:04
I found this rather useful plugin for Photoshop today. Turns your layer styles into CSS code! Though not 100% perfect match sometimes, I find it to be pretty darn close enough. Just thought I'd share with any other web designers out there.

http://css3ps.com/


"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
mr Handy
15
Years of Service
User Offline
Joined: 7th Sep 2007
Location: out of TGC
Posted: 15th Jan 2015 06:42
Does your religion prohibiting Scalable Vector Graphics?



Dark Java Dude 64
Community Leader
12
Years of Service
User Offline
Joined: 21st Sep 2010
Location: Neither here nor there nor anywhere
Posted: 15th Jan 2015 06:46 Edited at: 15th Jan 2015 06:46
I don't have Photoshop, but this seems neat. Also, this post inspired me to look up and finally (I have wanted to do this for years) learn what CSS really is. I have now written my first CSS program/webpage! Thanks for the great inspiration, Phaelax!



mr Handy
15
Years of Service
User Offline
Joined: 7th Sep 2007
Location: out of TGC
Posted: 15th Jan 2015 06:54 Edited at: 15th Jan 2015 06:58
Quote: "I don't have Photoshop"

Inspect the source code of the image above (right in the browser). It is actually XML. Easy to make with open-source Inkscape.

And buttons should be graphics. Because you will need a lots of knowledge to make your complicated button looks exactly the same in all browsers.

Ortu
DBPro Master
15
Years of Service
User Offline
Joined: 21st Nov 2007
Location: Austin, TX
Posted: 15th Jan 2015 07:56
Quote: "And buttons should be graphics. Because you will need a lots of knowledge to make your complicated button looks exactly the same in all browsers."


If you are using actual <button> or <input type="button"> elements yeah, some browsers pretty much ignore most/all styling on these kinds of elements (glares at Safari)

You can go with styled div's, but you will need to handle click events in javascript, which means users will need to have javascript enabled. Non-trivial pages/web apps will need plenty of javascript anyways so this isn't much of an issue, or rather you'll have bigger issues than buttons to worry about if javascript isn't running.

Anyway, SVG is great, but I still use plenty of css too

Clonkex
Forum Vice President
12
Years of Service
User Offline
Joined: 20th May 2010
Location: Northern Tablelands, NSW, Australia
Posted: 17th Jan 2015 12:28
Quote: "Easy to make with open-source Inkscape."


I so do not like Inkscape. Just cannot work out how to use it.

mr Handy
15
Years of Service
User Offline
Joined: 7th Sep 2007
Location: out of TGC
Posted: 20th Jan 2015 10:43
Use Youtube and inspect extensions section, there are power tools here like triangle geometry. Plus, if you do something wrong, you can open the source xml right in the Inkscape and edit/remove anything!

Chris Tate
DBPro Master
14
Years of Service
User Offline
Joined: 29th Aug 2008
Location: London, England
Posted: 20th Jan 2015 16:07
That's a nice idea; it will make for a faster loading webpage since less images are required to render the page.

Login to post a reply

Server time is: 2023-01-28 06:24:50
Your offset time is: 2023-01-28 06:24:50