Archive for the ‘CSS3’ Category

« Older Entries

CSS Three — Connecting The Dots

Wednesday, June 9th, 2010

As a web community, we’ve made a lot of exciting progress in regards to CSS3. We’ve put properties like text-shadow & border-radius to good use while stepping into background-clip and visual effects like transitions and animations. We’ve also spent a great deal of time debating how and when to implement these properties. Just because a property isn’t widely supported by browsers or fully documented at the moment, it doesn’t mean that we shouldn’t be working with it. In fact, I’d argue the opposite.

Best practices for CSS3 usage need to be hashed out in blog posts, during spare time, and outside of client projects. Coming up with creative and sensible ways to get the most out of CSS3 will require the kind of experimentation wherein developers gladly trade ten failures for a single success. Right now, there are tons of property combinations and uses out there waiting to be discovered. All we have to do is connect the dots. It’s time to get your hands dirty and innovate!

Visit Source

Tags: , ,
Posted in CSS3, HTML | No Comments »

The Basics of CSS3 | webdesignerwall

Saturday, March 6th, 2010

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.

Visit Source

Tags: , , , ,
Posted in CSS3 | No Comments »

CSS bar charts—styling data with CSS3 and progressive enhancement

Saturday, March 6th, 2010

Bar charts in CSS are neither very new, or very difficult. Using some pretty basic styling you can force lists etc into resembling graphs and charts fairly easily. Such charts, in their most basic form, work perfectly well in displaying and presenting the data they represent. However, using some rich CSS3 and progressive enhancement, you can really start pushing the display and presentation of these normally boring documents to the next level. They are also an ideal way in which to demonstrate the power and ability of progressive enhancement.

Visit Source

Tags:
Posted in CSS, CSS3, HTML | No Comments »

We’re Ready for CSS3, but are we Ready for CSS3?

Saturday, February 27th, 2010

We’re Ready for CSS3, but are we Ready for CSS3?

We’re all smitten with CSS3. It’s reinvigorated that sense of newness that CSS and Web Standards brought our way just a few years ago. We’re able to more easily replicate the set of design standards that has become nearly universal much faster than before with just a few CSS declarations. There are a number of CSS3 rules I’d be writing for every project, but I’m just not sure it’s as ready for prime time as many designers are making it out to be.

I’m having an honest-to-goodness back and forth with myself on this issue because I sympathize with two opposing sides to the same issue. I’ve thought about it so much that I’m not sure it’s as much of an issue I’m making it out to be, but would definitely love to have a targeted conversation about it.

I’d like to review the four rules I’d more than love to use without a second thought on every project I work on for the rest of my life, and explain the issues I’ve come up with (so far) regarding each.

Visit Source

Tags:
Posted in CSS3 | No Comments »

CSS3 Techniques You Should Know | sixrevisions

Sunday, February 7th, 2010

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!

If you aren’t aware of the browser extensions, these are CSS styles with a vendor specific prefix. Since CSS3 is not fully supported yet, we must use these extensions. They are as follows:

  • Mozilla/Firefox/Gecko: -moz-
  • Webkit (Safari/Chrome): -webkit- (note: Some webkit prefixes only work in Safari, and not Chrome)

As you might have guessed, one of the downsides of using these extensions is the fact that we must use all of the above prefixes to get the CSS3 style to render in Firefox, Safari, and Chrome. And no surprise to anyone, IE does not support CSS3 or do they have extensions like the other leading browsers. Alright, enough talking, lets dive right in! Note: styles without a prefix are the actual W3 specification proposal.

Tags: ,
Posted in CSS3 | No Comments »

10 Best Tutorials To Learn CSS3 | aext

Tuesday, January 12th, 2010

In the last few years, web design has improved significantly. There are so many tutorials out there to increase the skills capacity web designers and web developers. Some popular browsers such as Firefox, Safari already supported some CSS3 properties, and now the designer has many CSS3 properties. Today, I will share some tutorials, tips and tricks about CSS3.

Visit Source

Tags: , ,
Posted in CSS, CSS3 | No Comments »

Practical Uses of CSS3 | Viget

Saturday, December 26th, 2009

“We are certainly at an interesting point in time with the web. There are new techniques being created every day, and as developers, we have the privilege of deciding how and when to use them. I’m the new guy at Viget (only been here a few weeks), and every company is different, so it is interesting adapting to Viget’s standards. Some companies utilize progressive enhancement more than others, and I love that we utilize it when we can.

One big item for me is how much we use CSS3. Yes I know, it is not fully supported across all browsers. If you still want everything to look exactly the same across all browsers, you should probably just close this article and not read about CSS for another 10 years. A user is not going to pull up your site in two different browsers to compare the experience, so they won’t even know what they are missing. Just because something is not fully supported, that does not mean that we can’t use it to an extent. In this article I’ll show you some practical uses for CSS3.”

Visit Source

Posted in CSS3 | No Comments »

What You Need To Know About Behavioral CSS | smashingmagazine

Saturday, December 19th, 2009

“As we move forward with the Web and browsers become capable of rendering more advanced code, we gradually get closer to the goal of universal standards across all platforms and computers. Not only will we have to spend less time making sure our box model looks right in IE6, but we create an atmosphere ripe for innovation and free of hacks and heavy front-end scripting.

The Web is an extremely adaptive environment and is surrounded by a collaborative community with a wealth of knowledge to share. If we collectively want to be able to have rounded corners, we make it happen. If we want to have multiple background images, we make it happen. If we want border images, we make that happen, too. So desire is not the issue. If it was, we would all still be using tables to lay out our pages and using heavy over-the-top code. We all know that anything can be done on the Web.”

Visit Source

Posted in CSS3 | No Comments »

« Older Entries