Oncemade

You've probably noticed by now that webkit browsers have a handler to resize textareas. That said, you can control it with one line of CSS.

Disable resize

Vertical resize only

Horizontal resize only

Nowadays it's very common to find websites "hiding" form labels in favor of input's default text. Even tough it's a cleaver idea, there is a better way to accomplish the same result without compromising accessibility.

First step is to create the form. I usually have all my forms inside a list:

UPDATE: It's necessary to turn off the "autocomplete" so the inputs don't get messed up.

Markup

Don't forget the "for" attribute, the script will rely on it. Go ahead and add the following CSS:

CSS

Read more …

Here is how to create a very basic tooltip using only CSS. I've been using this technique all over my latest project.

Let's start by creating the following markup:

Markup

CSS

As I mentioned in a previous article, IE doesn't support RGBa. Adding the following styles, wrapped in a conditional comment, will make it work.

IE CSS

For more info about creating speech bubble using only CSS, go to DeSandro's tutorial on creating speech bubble.

I got tired of my colleague, *cough Buz, asking me for links and tools that I find and use while working, so I've decided to create posts where I list these things for future reference. Enough talk lets get to it.

Bookmarklet is a very important piece of my development. Lately, I've been using the following:

1. ReCSS

   Super B tool, used to reload your css without refreshing the whole page. It's very useful if you want to change a website in production that you can't run locally.

2. Firebug Lite

   

   If you develop websites in different browsers like I do (webkit nightly build), and can't live without Firebug; Firebug Lite is the way to go. It isn't as powerful as the Firebug add-on but it does a good job if you need to use the console or check for applied styles. Unfortunately, there is no way to change the css on the fly.

3. Design

   

   A very cool set of design tools. It includes grid, rule, unit and crosshair. A must have if you are designing in the browser.

4. jQuerify

   As expected, it includes jQuery to the page. Very useful if you want to use firebug's console and jQuery selectors.

5. Favelet Suite

   If you are a fan of the web developer toolbar add-on for Firefox, you will love this tool.

6. xRay

   It displays CSS information of a selected object.

7. Microformats

   

   Every time I markup a page, I try to use microformats as much as possible. This bookmarklet gives you a list of vCard on the page. Unfortunately, it doesn't display any other micro data.

If I missed any other bookmarklet, feel free to leave a comment with the link to it.

While at An Event Apart Boston, Jeremy Keith delivered the best lecture of the conference, about progressive enhancement. One slide caught my attention the most. It was about adding a class to the body if JavaScript was available. Here is his code example using jQuery:

Keith's Example using jQuery:

CSS

Why add a class if JavaScript is enabled?

Although the majority of desktop users have JavaScript enabled, mobile is one of the most used platforms to surf the web. Some mobile browsers don't support JavaScript. Keep in mind that search engines don't run JavaScript, so NEVER add important content using JavaScript.

Read more …

When positioniseverything.net posted an article about clearfix technique, it didn't take much for web developers and designers to start adopting it. Lately, Dan Cederholm has been talking about renaming the class clearfix to group, which semantically speaking makes a lot more sense. So, let's go ahead and rename the class.

New Easy-Clearing

Using conditional comments, let's add the proper code to handle IE 6 and IE 7 (IE8 supports the :after pseudo-elements; no extra code is necessary).

Read more …

One of the best progressive enrichment that I use on my projects is to set colors as RGBa (red, green, blue, alpha) values. As I write this, RGBa is current supported in firefox 3.0.5+, Safari 2+, Chrome 1+, and Opera 10+.

The most efficient way that I found to declare RGBa values is to separate the flat colors into code block, and keeping RGBa with the other styles. Like in this example:

CSS

I always keep the flat colors separated because they can be easily removed when the other browsers start supporting RGBa. Why didn't I declare the HEX colors on the same line as the RGBa? Simple! IE doesn't support it; no color will be rendered at all. Note: Please be aware that the RGBa colors have to be the last ones declared.

Read more …

I recently ran into a bug on Internet Explore 7 that was driving me nuts. After hours of debugging, I finally found the solution.

IE7 has a bug when using adjacent sibling selectors. If there is a comment between two elements, it will think that the comment is the next element. Here is the example:

CSS

Markup with comment

The image bellow shows how it supposed to look like in all modern browsers. Unfortunately, the only way to make it work in IE7 would be by removing the comment.

Markup without comment to make it work in IE7

This tutorial will walk you through creating date badges with Wordpress and CSS.

Let's start of by adding the necessary markup to render the appropriate date format. Create a DIV element with a class of "entryDate" and three children SPANs with respective classes "postMoth", "postDay", and "postYear".
Add the PHP code to get the post date from the database as shown bellow. For more PHP date format go to http://us.php.net/date

Markup

Now let's add styles to make it look pretty.

Read more …

Last week's websites that I stumble upon. Some design related, development and completely off beat topic. If you have a link that you'd like me to share with others feel free to send it me.

Web Design & Web Development

• 30 Essential PDF Documents Every Designer Should Download
• 5 Techniques to Acquaint You With CSS 3
• The Woork Handbook - Free CSS, HTML, AJAX eBook

iPhone & iPod Touch Wallpapers