Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Is my dream CSS design app out there?

Featured Replies

Hi!

 

I've been searching for what appears to be unavailable....

 

Having looked at a number of visual design tools, StyleMaster, Flux, FreeWay, CSS Edit etc etc every one of them (unless I've missed it) doesn't seem to offer the "killer feature" I'm after. Can anyone suggest one that does please?

 

All I want to do is to be able to position my block elements on a my pages and apply basic fills, gradient fills and rounded corners without having to mess around in Photoshop building up a series of graphics every time. This sort of thing has been easy in Quark XPress for years. Draw a text / picture box with rounded corners, choose your fill, make it a graduated (fading) fill form top-to-bottom if you like, add a drop-shadow etc etc.

 

Surely it can't be impossible for a CSS-aware HTML editor to take any boxes / block elements I design within it and create the required background graphics (fill, corners, shadows...) for me when I click "Publish" ?

 

I'd be delighted to be shot down in flames with "Fool! You need to use: <insert package name here> !" :-)

 

Thanks in advance,

 

Steve

Not possible as far as I know. There are some javascript stuff out there that can make things look rounded etc.

 

Editors are rubbish at best.

Quark is designed for the print industry - the web is something completely different.

 

To do gradient backgrounds etc you will need to create the images in an image editor first, then apply rules to your CSS document to actually show them.

 

Every web site requires two things - 1. HTML markup to define your document, and 2. A CSS file to present, style, and position the HTML.

 

The feature you're looking for doesn't exist because it's an impossibility with the current state of web technology.

The feature you're looking for doesn't exist because it's an impossibility with the current state of web technology.

 

 

Not sure I agree, although I don't really have any need for this feature it should be at least possible for an editor to create html, css and generate the images (and optimize them) in order to create rounded corners, gradients or stripy backgrounds. I second the sentiment that editors are very poor at the moment (although it doesn't need to be this way)

I see where you're coming from but to my knowledge no-one has written such a peice of software yet - maybe there's an opportunity to combine a code editor with a simple image editor?

If Dreamweaver is anything to go by it will spit out crap code.

  • Author

Thanks for all the replies folks. What I have in mind as a some people have spotted, is a visual design tool which would allow one to:

 

\\ Create a DIV

\\ Specify its attributes such as a background colour using standard OS-level colour pickers etc.

\\ Add rounded corners

\\ Specify individual top / bottom / left / right border values & styles (this is already possible with some apps).

 

Then when it comes time to "Publish" my page, the app would look at the DIV(s) I've created and break them down into six core image files which the CSS will call upon as its background images;

 

\\ TOP: top-left-corner top-middle, top-right-corner

\\ MIDDLE: middle-left, middle, middle-right

\\ BOTTOM: bottom-left-corner, bottom-middle, bottom-right

 

It could automatically name the images based on the name of the DIV: my_div_top_left.png, my_div_bottom_right.png etc.

 

Any text (content) I'd added to the DIV would of course be separated out back to the HTML file as happens currently with visual CSS editors.

 

It does seem a bit pre-21st-century that we have to keep hopping in & out of our visual CSS tool of choice to an image editor to create even the most basic solid fill for a DIV.

 

Cheers,

 

Steve

I think this is simply because the people that would write the software don't have this problem because they don't use WYSIWYG editors. Therefore the tools they use (something to write code in plus something to make images in) do everything they need.

I think this is simply because the people that would write the software don't have this problem because they don't use WYSIWYG editors. Therefore the tools they use (something to write code in plus something to make images in) do everything they need.

 

Good point. There's also the problem of different file types. Once you factor in all the variables (size, positioning, file format,colours etc), it's going to take a while to load the app, fill out the information and apply it.. personally, I think it'd be quicker for me to just use notepad and an image editor.

I agree with bumfluff - it seems like it would be a pointless application. For those of us accustomed to coding by hand, inputting all those variables into a page editor would take as long doing it by hand, in all probability without the advantages of coding by hand.

What if you don't want your element to be a div? What if you need to change a small apsect of your code at a later date - taking the time to load your project back into the editor, edit it, resave the page etc, sounds laborious to say the least compared to editing the file at source.

I understand your desire for this product, but I hope it doesn't come to fruition. I think it's a recipe for getting by without really understanding the process of web design.

Agree with ^

I'm sure if there was a piece of software that could do this, it would no doubt sell very well.

But the time it would take to master the software could easily be put to good use learning the basics of html/css and (insert graphics app here).

I don't see the point of software like this tbh. Once learned, it might speed up the process of creating a web page a bit but the fact would remain that if you rely on any software to 'create' a page for you, you never truly understand the underlying code.

And as notbanksy said, this becomes a problem when the generated code doesn't do quite what you thought it would.

I'll jump on the band wagonn of

 

^ I Agree

 

I think if there was an app which did this it would spit out code worse than dreamweaver and it would take just aslongto clean the code up as it would write it yourself.

oh go on then ^I agree too.

 

The amount of effort you've put into specifying what you need in this thread is possibly less than the effort it would take you to create the effect required!!

 

The CSS 3 spec does enable this feature however:

 

http://www.css3.info/preview/rounded-border/

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.