Resources for Designers

[baggyeyes]

I thought more than a few people might get some use out of these links/utilities.

For CSS3 styling, while it is a new set of tools that are coming down the Intertubes, it's also a good idea to keep up on the new technologies.

To that end:
CSS3.info is a blog built around exploring CSS3 and the cool things you can do with it.

One of the tricks to keep in mind - to keep your style sheet relevant after the CSS3 spec becomes standardized, is to include a vanilla declaration:

box-shadow: 4px 4px 2px #EAEBF5; padding: 2px 2px 2px 6px;
-moz-box-shadow:4px 4px 2px #EAEBF5; padding: 2px 2px 2px 6px;
-webkit-box-shadow:4px 4px 2px #EAEBF5; padding: 2px 2px 2px 6px;



Also, you can check out the Opera Developer site for their articles on CSS. They have a ton of great articles and ideas you can use. If you use Opera, don't forget to use the Dragonfly Debug tool. Something I didn't know: Opera supports Speech in their browser. Some links:

Visit XHTML Voice in Style using Opera, the page should talk to you. This is because of the specification in XHTML and CSS for VoiceXML, or Speech in web apps and pages. This is going to open up at least some of the Accessibility of pages. So far, Opera is the only one that supports this. You can find more information here:
Add Voice interactivity to your site,

Another way to make sure your layout/theme stands up to the standards is to use EM instead of PX for font-size. Using EM ensures that the text will look correct no matter what size the user's monitor or resolution. It will scale well, in other words. There are several tools on the web to help out in this, but I'll include two:

Aloe Studios EM Chart, a downloadable tool you can use offline and in any web browser.

PXtoEM.com, a popular site that not only will help you get your conversion, generate the CSS code you need, but also help you learn along the way.

There are more, and maybe I'll add them in in the future. If anybody else has resources of their own they'd like to add, please do so.

Friendly Neighborhood Tester

Comments

[afuna]

Great links -- I've found pxtoem very useful, but I hadn't heard of the others until now. Thanks!

[baggyeyes]

You're very welcome. I'm also working on a community Drupal install - so, I want to make it look spiffy at least five years from now.

I really like what CSS3.info has in the preview section. And apparently Opera 10 supports the speech module from the CSS3 spec. CSS3.info has a demo on their site.

Making web pages speak through CSS. Now that's cool.

I know I have more, but I have to wade through my massive set of bookmarks. :(

[turlough]

Thank you for these!! I really should convert my layouts from px/pt to em but I keep "forgetting" because it's always seemed like such a hassle. These convertion tools will hopefully make me actually do it :-)

[baggyeyes]

You're very welcome. Do you have any of your own inspiration/resources?

[turlough]

I'm completely self-taught when it comes to CSS and I've got an annoying habit of forgetting the correct names of things so I would be completely lost without being able to check CSS Reference. And without the Web Developer add-on I don't think I would ever have the courage of tackling new things - like making Stylish scripts for my favourite websites to change formatting that irritates me :-) I've got Firebug too and I keep trying to use it but it's just too confusing for me.

[nostariel]

Something I didn't know: Opera supports

Supports what?

I've found stylemakers to be a great resource here.

[baggyeyes]

Hee. Good thing somebody is on the ball. I posted this, and thought the whole sentence went through.

If you visit this page XHTML Voice in Style using Opera, the page should talk to you. This is because of the specification in XHTML and CSS for VoiceXML, or Speech in web apps and pages. This is going to help in the Accessibility of pages.

So far, Opera is the only one that supports this. Another page: Add Voice interactivity to your site.

I love stylemakers! ninetydegrees is awesomely talented.