Webistrate - Draw Your Own Conclusions

CSS3: Creating Diagonal Lines

Posted by Jamie Munro | March 19, 2012 | Tags:

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.

See the solution »

Share


CSS3: Rotating DOM Elements

Posted by Jamie Munro | March 5, 2012 | Tags:

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…

See the solution »

Share


CSS3: Creating a Transparent Background

Posted by Jamie Munro | February 20, 2012 | Tags:

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.

See the solution »

Share


CSS3: Creating a Background Gradient

Posted by Jamie Munro | January 23, 2012 | Tags:

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.

See the solution »

Share


CSS3: Transitioning AJAX Content into view with CSS3 Animations

Posted by Jamie Munro | October 17, 2011 | Tags:

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.

See the solution »

Share


CSS: Fixed Position Content

Posted by Jamie Munro | October 3, 2011 | Tags: ,

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.

See the solution »

Share


CSS3: Attribute Selectors

Posted by Jamie Munro | September 19, 2011 | Tags:

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.

See the solution »

Share


CSS3: Custom Fonts using @font-face

Posted by Jamie Munro | August 29, 2011 | Tags:

Let me start by saying that I am not a designer, so this feature didn’t mean much to me; however, when we told designers that they can start using custom fonts – they want ape @$!# for it.

See the solution »

Share


Buy one of my books