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
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 15th Jan 2015 04:04
Link
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
Back to top
Profile PM Email Website
mr Handy
16
Years of Service
User Offline
Joined: 7th Sep 2007
Location: out of TGC
Posted: 15th Jan 2015 06:42
Link
Does your religion prohibiting Scalable Vector Graphics?



Back to top
Profile PM
Dark Java Dude 64
Community Leader
13
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
Link
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!



Back to top
Profile PM Website
mr Handy
16
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
Link
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.

Back to top
Profile PM
Ortu
DBPro Master
16
Years of Service
User Offline
Joined: 21st Nov 2007
Location: Austin, TX
Posted: 15th Jan 2015 07:56
Link
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

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


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


Placement Editor Professional -- Code Line Counter -- Tiled TMX Map Loader 2.0
Open Bezier Curve Library -- Image Tools -- MarbleX GUI Library -- NeoParticle -- Simple Serial
Back to top
Profile PM Email
mr Handy
16
Years of Service
User Offline
Joined: 7th Sep 2007
Location: out of TGC
Posted: 20th Jan 2015 10:43
Link
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!

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

Back to top
Profile PM Email Website
Back to top

Login to post a reply

Server time is: 2024-04-20 11:13:20
Your offset time is: 2024-04-20 11:13:20