Posted by Jamie Munro | March 19, 2012 | Tags: css3
The hr tag has been around for quite some time to provide a nice horizontal line to visually separate content. To achieve a vertical line, it’s typically been accomplished via border-left or border-right. However, this is when you can get into height issues or columns that don’t extend the whole way, etc… Instead CSS3 allows for the rotation of elements and allow for vertical or diagonal lines to be created with some basic CSS.
Posted by Jamie Munro | March 5, 2012 | Tags: css3
As more and more browsers support HTML5 and more importantly CSS3, it begins to allow us much more freedom using standard text without the need of images. Not only does this speed up page load times, it also lowers bandwidth costs as well. Using CSS3, many standard DOM (Document Object Model) objects can easily be rotated, such as: images, text, block elements, etc…
Posted by Jamie Munro | February 20, 2012 | Tags: css3
Do you have a nice background image that you don’t want hidden by a solid color and your content? With some CSS3, a background color can be set with an opacity value so that the content or image beneath will be visible through it.
Posted by Jamie Munro | January 23, 2012 | Tags: css3
Do you see the gradient blue above for the title of this article? If you don’t then your browser doesn’t support CSS3 gradients. However, if you do see it, you’ll be happy to know that I saved you and me some bandwidth by not using an image! Instead, some CSS3 is used. So next time a designer provides you a PSD with a bunch of gradient images forget “chopping” them out and use the following example instead.
I have long been against absolute position. I always felt it the “lazy” way out. Until recently! I’ve finally seen the light! Absolute positioning works extremely well inside of a relative position. In fact it works so well, that it reduces my browser testing time because IT IS actually consistent!
Posted by Jamie Munro | October 17, 2011 | Tags: css3
In a previous article, I demonstrated how you can use jQuery to Transition AJAX Content into view with $.animate(). In this article, we are going to remove the jQuery animation and use CSS3 instead. Currently this is not supported by Internet Explorer and Opera.
I truly believe that Facebook is attempting to shape the Internet. Every time a changed is made, there is always massive uproar – both positive and negative. A recent change that I noticed was how they began using previously “unused” content spacing. This is done intelligently and only when you have a screen resolution greater than 1280 pixels wide. It’s an extremely simple process to add using the most basic CSS and some basic jQuery resize detection.
Posted by Jamie Munro | September 19, 2011 | Tags: css3
Have you ever wanted to set a custom style on all images that contain .png as their extension? How about some custom CSS for a URL that is under SSL (perhaps add a lock image beside it?). In CSS3, new attribute selectors have been added to allow for partial matches to attribute values. The match can be at the start, end, or anywhere else in the string.