March 4th, 2010

Speed Up with CSS3 Gradients

gradientnotloaded 150x150 Speed Up with CSS3 Gradients

WebKit browsers paved the way with CSS based gradients. Now Firefox 3.6 is out and is supporting them as well, which makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead.

But wait… if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.

March 4th, 2010

The Basics of CSS3

title css3 useful webdev webdesign resources The Basics of CSS3

Last week I posted a CSS3 dropdown menu and someone complained that I didn’t explain the CSS code in detail. Well, here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know.

RGBA: The first three values are RGB color values and the last value is the level of the transparency (0 = transparent and 1 = opaque).

March 1st, 2010

How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout

HTML5 CSS3 layout 150x150 How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout

HTML5 is the next big thing in the land of web developers, so I figured the best way to show you how it’s all gonna come together is by giving you a lesson on how to make your own HTML5 and CSS3 layout. Although this isn’t a practical solution to building websites today, in a couple of years it’s going to make our lives so much easier.

February 28th, 2010

50 Awesome Animations made with CSS3

css3 animations 50 Awesome Animations made with CSS3

CSS3 has brought some amazing new features. And the most fun is playing with the CSS animation. Here is a compilation of 50 CSS3 animation that allows you to perform many motion-based functions normally Delegated to JavaScript. In order to view this effect, you are required to have WebKit browsers like Safari and Chrome ( very sorry for the users of Internet Explorer )

February 26th, 2010

Design a Prettier Web Form with CSS 3

tutorial forms css3 150x150 Design a Prettier Web Form with CSS 3

Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort. I’ll show you how in today’s tutorial!

Subtle background gradients give depth to the fields while shadows lift them from the page. Even more impressive is that this is done without any images at all.

By following this tutorial you will not only end up with a lightweight and beautiful form, you’ll also learn and understand new CSS3 techniques, such as box-shadow, gradients, opaque colors, and rounded corners.

February 26th, 2010

6 Smashingly Practical CSS3 Effects You Can Use Right Now

css32 150x150 6 Smashingly Practical CSS3 Effects You Can Use Right Now

CSS3 is developing fast, and the most exciting part is seeing all of the intriguing and attractive effects that are being invented to solve real design problems. With the combined creativity of the design community, CSS3 has quickly traveled through the zone of interesting speculation and into the territory of time/resource saving practical everyday use.

Today, we’re going to look at 7 impressive, concrete, real-life effects and techniques that you can implement in your next design. This isn’t going to be the usual overview of features – these are all specific techniques that will help your design work to be more advanced and effective. Let’s dig in!

February 20th, 2010

Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices

html5 website2 150x150 Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices

HTML5 is the next major version of HTML. HTML5 provides some great new features for web designers who love to create readable code and semantically-meaningful layouts. HTML 5 introduces and enhances a wide range of features including: form controls, APIs, dragging and dropping, multimedia, drawing graphics on screen and a lot more.

The new specifications has added quite a few interesting and useful tags for structuring your markup.
In today’s post, we would like to showcase some of the best blogs and websites in the industry built with HTML5+CSS3. At the end of the post we would like you to check out detailed write-ups and tutorials that aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. Let’s get started marking up the blog page.
trans Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices
View Post …

February 10th, 2010

350+ Amazing CSS3 Resources – All You’ll Ever Need to Become a CSS3 Master!

cssmaster1 150x150 350+ Amazing CSS3 Resources – All You’ll Ever Need to Become a CSS3 Master!

Knowledge of CSS3 is fast becoming a crucial element of any web designer/developer’s skillset, which means that it’s an excellent time to start learning, if you haven’t already! A solid knowledge of CSS3 has a large market value and will take you a long way towards success, giving you an image of competence and authority.

Thankfully, there’s a huge amount of terrific tutorials and resources available – if you can find them. Here you’ll find an amazing ‘ultimate’ toolbox of over 350 of the best tuts and tips out there. Get ready to be amazed!

February 10th, 2010

CSS3 Examples and Best Practices

forabeautifulweb1 150x150 CSS3 Examples and Best Practices
The CSS3 trend is getting more and more popular. In fact CSS3 new features open a lot of new possibilities. Check out my previous post on “CSS3 Animation Demos” to see the things that you can do with it. However, don’t get too excited so soon because it is not fully supported by all browsers yet. But this doesn’t mean you shouldn’t use it at all. So, when should you use CSS3 new features? Well, continue on this post to see some excellent examples.

February 9th, 2010

25 Essential Tutorials And Resources For Learning CSS3

css3 tutorials

There are many tutorials and resources  for the CSS3. Most of the browsers such as Firefox, Safari already support some of the CSS3 properties. It is essential for a web designer to know about CSS3.  Today, I will share the best tutorials and resources for learning about CSS3. These are the best tutorials I could find on CSS3. Hope you enjoy them.