Category: Web Development

Friday, July 02, 2010

iPhone icons made with pure CSS

Louis Harboe over at graphicpeel.com has recreated 11 iOS icons using per CSS styles. No images used. To see the icons you need to use a webkit browser such as Safari 5 or Google Chrome 5. This is very cool!

image

Saturday, March 06, 2010

Good news for the future of HTML5

Not only has the W3C HTML Working Group Published New HTML5 Drafts but rumor has it that the upcoming Internet Explorer 9 will have HTML5 support too.

Saturday, February 13, 2010

CSS3 techniques you can use today

The future of CSS is exciting with all the new techniques coming our way in CSS3. Though CSS3 is not yet fully supported in all popular browsers there are some browser specific prefixes that are supported in such leading browsers as Firefox, Chrome, and Safari. Because CSS3 is not fully supported yet we have to use the following extensions:

  • -moz- for Mozilla/Firefox
  • -webkit- for browsers running on Webkit (Safari/Chrome)

So let's look at a few CSS3 techniques that I use on this site that can be used in today's leading browsers that degrade well in the non-supported browsers (Internet Explorer).

Rounded Corners

Having rounded corners in your designs has always been possible using graphics. An easier way is to let CSS do it for you. If you look at my site you will see a few rounded corners here and there such as on the background of the sidebar to the right. I'm using both the Mozilla and Webkit specific styles to make that happen. First you write the specific prefixes for both mozilla and webkit browsers then you add the radius value for the corners. If all corners have the same radius then you can simply write:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

To add a different radius value to each corner you will first need to add the specific prefix for each corner and then add the radius value.

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 20px;

-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 20px;

Text Shadows

The drop shadow effect is one of the CSS3 properties that is actually supported in all the leading browsers except, you guessed it, Internet Explorer. The first 2 values are the X and Y coordinates. The next value is the blur radius of the text-shadow. And the last value is the color of the text-shadow. This effect can be seen at the top of my site on the large blue text.

text-shadow: 1px 2px 2px #000;

In a future post I will show more CSS3 techniques that can be used in today's leading browsers.

Friday, February 12, 2010

New version of Chrome beta for Mac now supports extensions

Today Google updated Chrome beta for the Mac adding support for extensions. One of the big reasons I use Firefox is for its extensions. As a web designer I use many useful Firefox extensions on a daily basis such as the Web Developer, Firebug, and Colorzilla extensions to name a few.

Out of curiosity I checked the Chrome extension library and found there were quite a few developer tools available.

Alt text

  • Firebug Lite - It's not a replacement for Firebug but still a very useful extension with many of the useful tools found in Firebug.
  • Pendule - Not only does this extension have many of the tools found in Firefox's popular Web Developer extension it also has many extras such as a color picker.

With Chrome now supporting extensions (Firebug lite, Pendule) I feel I can now give Chrome a try as a full-time browser. It is a speedy browser and seems to run Javascript faster than the other leading browsers. I think I will start using it this week and see how it goes.

Page 1 of 1 pages