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.

CSS
-webkit-border-radius
-moz-border-radius

It's a tough decision to start dramatically forking the experience between IE and “the rest of the world.” But, before you get overly excited, note the border-radius has it's gotchas!

1. FF 3.0 doesn't support individual corners Corrected - thanks Brainlag

   Yep, I'd really recommend squaring the diminishing world of FF3.0 as well. By all means, ROUND EM IN FF3.0! This can be done by targeting FF3.0 and above with @media queries. This will require a constraint since @media partially worked in FF3.0. So, try @media (min-width: 1px;) { } corrected: @media screen { #myDiv { -moz-border-radius: 5px; } }

2. Background images spill out of rounded boxes in FF3.0

   I believe FF3.5 properly masks background images finally

3. Rounded corners in FF2.0 aren't anti-aliased

   This is probably not much of a problem given FF2.0's 3% market share.

These quirks are no cause for concern. In fact, I think you should leave FF3.0 and pre Safari 4.0 out of the rounding world by the fact that older browser FF and Safari users disappear faster than “a truckload of dead rats in a tampon factory!” - gratuitous, meaningless quote from Top Secret.

What do you guys think? Any major CSS Rounded Corner converts?

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
/* NON RGBa BROWSERS
  ------------------------------------------------------ */
#wrap { background-color: #000; }
#footer,
#header { background-color: #ccc; }
.section { color: #fff; }

/* HEADER
  ------------------------------------------------------ */
#header { background-color: rgba(204,204,204,.8); }
#header ul { float: right; }
#header li {
  float: left;
  margin-left: 1em;
}
#header li:first-child { margin-left: 0; }

/* WRAP
  ------------------------------------------------------ */
#wrap {
  width: 960px;
  margin: 0 auto;
  background-color: (0,0,0,.7);
}
.section {
  padding: 1em;
  color: rgba(255,255,255,.9);
}

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.

DOESN'T WORK IN IE
/* HEADER
  ------------------------------------------------------ */
#header {
  background-color: #ccc;
  background-color: rgba(204,204,204,.8);
}

Last but not least, when I use border's shorthand syntax, I declare it with the flat colors first, and then border-color afterward. See the example bellow for better understanding.

CSS
/* NON RGBa BROWSERS
  ------------------------------------------------------ */
#header { border: 1px solid #000; }

/* HEADER
  ------------------------------------------------------ */
#header { border-color: rgba(0,0,0,.7); }

Browser Support

• Firefox 3.0+
• Safari 3.0+
• Chrome 1+
• Opera 10+

Choose Unused Color

Choose an unused color and draw your objects.

Select by Fill Color

Select one of the objects and go to Select » Same » Fill Color.

Final Result

Once all objects are selected, change their appearance as desire and you may also want to create a layer for them. Make sure to explore the Select Menu for further options.

Books

Miscellaneous

Roy Doty Collection

Traditional Vintage Xmas Cards

Want More? Click Here

Collage

by tsevis

by John Derry

by timmywheeler

Illustration

by dumbrobot

by renzo358

by Rafael Lopez

by dnewby

by HHS

by artbymags

by theholidaygirl928

by Jeff Bridgforth

by craftysquid

by Dan of Future's Past

by dklimke

by iluvyourwork

by zeushadesposeidon

by cezleo

by qwnzxmsj

by roberlan

by roberlan

by chngch

by roberlan

by BenHeine

by sillycity

by fall-out

by aperryz

by befresh

Typography

by dumbrobot

by palino

by COMMAND C design

by furstdesign

by gsang

by donavon

by gausa

by gausa

by gausa

by overlapdesign

by valeria_fuso

by Phillustrations

by wezzburlesque

by bcbailey

Vote!