DynamiX Labs » css

Thanks To Our Veterans!

DynamiXLabs — Wed, 11 Nov 2009 13:14:48 +0000

We wanted to thank our veterans and active military for all that they do to help keep us safe, so we created a banner for our site. Then we thought, why stop there? So, being a tutorial site, we created a quick “how-to” on adding this to your own web site.

We created three versions, one with a link back to this article to help others add this to their web site, a second with simply the banner, and a smaller version.

Link-Back Version:

To create a version of this banner that links to our tutorial, simply add this just below the tag on your web site:

Click Here to Show Your Support!

Next, add this CSS to your stylesheet:

#veterans{width:100%;height:130px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day.jpg) no-repeat top center;border-bottom:1px solid #000;} #veterans a{display:block;width:100%;height:130px;} #veterans span{position:absolute;top:-999em;}

If you would prefer to download and use the image on your own, here it is (right-click and save):

You’re Done!

No Link-Back Version:

This is the same banner, but without the link back and the “Show Your Support With This Banner!” text. Simply add this just below the tag on your web site:

Next, add this CSS to your stylesheet:

#veterans{width:100%;height:130px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day-No-Link.jpg) no-repeat top center;border-bottom:1px solid #000;}

If you would prefer to download and use the image on your own, here it is (right-click and save):

Small Version:

This banner is just 70 pixels high, instead of the 130 pixels in the first two, and the text centers perfectly on an 800 pixel wide site. Simply add this just below the tag on your web site to use this banner:

Next, add this CSS to your stylesheet:

#veterans{width:100%;height:70px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day-Small.jpg) no-repeat top center;border-bottom:1px solid #000;}

If you would prefer to download and use the image on your own, here it is (right-click and save):

We would love a comment on where you have used this, though it is certainly not a requirement. We would also be happy to release the original .PSD file if desired, just let us know in the comments!

A Short List Of Several Sites Already Using This Banner:
– Omni International
– Charis Hills
– DynamiX Web Design

Spread the word!

css: Create awesome tooltips without javascript!

DynamiXLabs — Wed, 15 Jul 2009 13:31:12 +0000

Recently, we came across the need for some very simple tooltips. The only real caveat was that they needed to be lightweight, and since we already had a number of scripts running on the page, we preferred to make these using just css. Thankfully, our dear friend the tag is up to the challenge of making these tips fairly easily.

Example 1

We’ll start with an easy example. You have a link to somewhere, and want people to see a message before they click on it.

Like this:
Hi Labs visitors! Don’t forget to check out DynamiX Web DesignIt’ll rock your socks off!!

Here’s the HTML:
Hi Labs visitors! Don't forget to check out DynamiX Web DesignIt'll rock your socks off!!

It doesn’t matter whether you place the span tag before or after the actual text for the A tag, just as long as it’s inside it.

Here’s the CSS:
.dynamixtip{position:relative;} .dynamixtip span{display:none;} .dynamixtip:hover span{display:block;position:absolute; left:0;top:20px;} This part is just for the look/feel of the tip, style as you wish: .dynamixtip:hover span{padding:3px;background:#5f9215; color:#fff;border:1px solid #3f6607;font-size:10px;}

Simple isn’t it? Now let’s get more complicated (but still easy).

Example 2

What if you wanted to put a picture in that tooltip, and float it to the right of your link?

Like this:
Balloons are cool!

Here’s the HTML:
Balloons are cool!

Here’s the CSS:
.dynamixtip2{position:relative;} .dynamixtip2 span{display:none;} .dynamixtip2:hover span{display:block;position:absolute; left:130px;top:-50px;}

Configure “left” and “top” as desired to position your tip, and you’re done.

Example 3

Let’s say you wanted to tell someone that this balloon is red.

This balloon is red!

This one is just as easy as the earlier examples. There are a few ways to do this, depending on what you want/need to do for this item, but we chose to simply encase the image in a div and apply our class to it. Note that IE 6 doesn’t support the hover property when applied directly to a div. Alternatively, you can simply replace the div with another span tag, and add “display:block” to .dynamixtip3. If you want us to get fancier, leave a comment and we’ll be happy to get into some alternatives.

Here’s the HTML

This balloon is red!

Here’s the CSS
.dynamixtip3{position:relative;text-align:center;} .dynamixtip3 span{display:none;} .dynamixtip3:hover span{display:block;position:absolute;left:65%;top:25%;} This part is just for the look/feel of the tip, style as you wish: .dynamixtip3:hover span{padding:3px;background:red; border:1px solid #800;color:#fff;font-size:11px;}

Notice that for this example, we positioned the tip using percentages instead of pixels. You can of course also use em if you prefer.

That’s all there is to it! Pretty simple, huh?

Compatibility:
This method has been tested in and is compatible with Internet Explorer 6 (beware of :hover when applied to divs, as well as the “bottom” declaration on absolutely positioned elements), 7, 8, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
Thank you for taking the time to read one of our articles. If you still find yourself stuck, we’d be happy to lend a hand. Simply leave us a comment below, and we’ll do our best to help you out. Found something that we’ve missed? We’d love to hear it.

css: style an element with the span tag

DynamiXLabs — Tue, 21 Apr 2009 12:14:42 +0000

The span tag is a great, and often underutilized way to easily change the look and feel of virtually any aspect of your web site. Here’s a simple scenario: Let’s say you have a div that looks like this:

Synergistically enhance sticky data through excellent vortals. Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures. Seamlessly evolve impactful total linkage before enterprise methodologies.

We named our div “awesomediv” for this example (code below).

Here’s the HTML:

Synergistically enhance sticky data through excellent vortals. Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures. Seamlessly evolve impactful total linkage before enterprise methodologies.

And the CSS:

.awesomediv{background-color:#36c;border:3px solid #039;padding:10px;width:460px;font-size:14px;text-align:left;color:#9cf;}

It’s okay, but it’s boring. What if you want to make part of that content stand out, but you don’t want to insert a bunch of inline css? You also don’t want to create a new Class or ID for the style. What do you do?

The Answer.
First, wrap the sentence in a span tag:

Synergistically enhance sticky data through excellent vortals. Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures. Seamlessly evolve impactful total linkage before enterprise methodologies.

Next, simply define that span tag within your stylesheet. Like this:
.awesomediv span{font-style:italic;font-weight:bold;color:white;}

Here’s our end result:

Now that was easy, wasn’t it? If you want to get even more creative, you could also style other elements such as the “strong” tag to behave differently than intended – though I warn you, unbolding the strong tag may anger the CSS gods.

Here’s how it would have looked without the span tag:
Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

css: Make Bold Items STAND OUT

DynamiXLabs — Tue, 21 Apr 2009 11:51:36 +0000

This one’s very easy, but it’s a great way to quickly increase the visibility of your bolded items.

Let’s say you have a gray color for your site’s font, but you want to make every bold item stand out in solid black. You could add unnecessary code such as BOLD

But that’s neither clean nor necessary. Instead, you can apply this directly to all instances of bold with css.

Just add this to your stylesheet:
strong{color:#000;}

Now, you will see that the bolded items stand out much more when compared to the rest of your text.

Of course, you aren’t just limited to changing the font’s color. For example, we have defined the strong tag as a block element when used within certain divs. This provides us with a way to make each strong tag fall on it’s own line, without having to add a
tag. To do that, simply use this code:
#YOURDIVNAME strong{color:#000;display:block;}

You can see an example of this in action by viewing the source code of DynamiX Web Design under the “what makes us different” area.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

css: hiding/showing the YouTube play/navigation bar on mouseover

DynamiXLabs — Thu, 19 Feb 2009 15:01:31 +0000

We recently had a project wherein we needed to embed a collection of YouTube videos, but without the navigation bar. Now, with a little CSS this is very easy, but we also needed to allow visitors to pause, play and navigate the video when they moused over it. Thankfully, this is just as simple, and we’re going to show you how right here.

Step 1: The HTML.
Simply encase your desired video in the div that you will be working with. Ours is named “sizeit.”

Step 2: The CSS.
#sizeit {width:425px /*this is the normal width of your video*/;height:325px /*this is ~30px less than the defined height of your video*/;overflow:hidden;} #sizeit:hover{height:355px /*this is the normal height of your video*/;}

Step 3: Fix IE 6
Since IE 6 likes to break everything cool, it’s no surprise that it doesn’t like this method. But with the use of csshover.htc, we can get this working in no time.

Add this just before your tag:

Adjust the url() field as needed, then save this file to your site: csshover.htc

That’s it! IE 6 now at least acts like it knows what’s going on.

Here’s the end result.

Now that you have this working, it’s easy to style it to fit your look and feel. For example, you might want to make this video appear to play on a projector screen like we have done here:

Click here to see the full example page.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 6 (with fix noted above), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
Have any thoughts about this article? Let us know through the comment field below. We’d also love to see where you’ve used our method or improved upon it, comment it below for a free link

css: using simple css to create a great looking site shadow

DynamiXLabs — Fri, 18 Jan 2008 18:12:20 +0000

This is a highly requested feature, and one that people often have a lot of trouble with. Before we go any further, Internet Explorer 5.5 and 6 are not compatible with this method, BUT we do have a simple and clean way of degrading for these browsers so that no one is the wiser.

Step 1: Creating the fades.

Depending on the width of your web site, the colors you have chosen and how profound you want your shadow to be, you may need to create your own shadows in Photoshop (for instructions on how to do this, visit our sister article entitled creating a clean png site shadow in photoshop). In this case, I have created a standard, 760 pixel shadow that should work out of the box on any similarly formatted web site or page.

Download this file

Header:
Side:
Footer:

Step 2: Creating the CSS

First, let’s cover what you’ll need to add into your stylesheet:
#shadow {width:784px; background: url(images/middle-shadow.png) repeat-y;margin:0 auto;} #shadowtop{margin:0 auto;height:12px;width:784px;background: url(images/top-shadow.png) no-repeat;} #shadowbottom{margin:0 auto;height:12px;width:784px;background: url(images/bottom-shadow.png) no-repeat;}And here’s where the Internet Explorer 6 fix comes in to play. You will need to create a new stylesheet named ie.css (or whatever you want, just be sure to modify the code below if you change the name), and add this code into it:
#shadow{background-image:none;} #shadowtop{background-image:none;} #shadowbottom{background-image:none;}Next, add this into the HEAD area of your web site (making sure that it’s placed below your standard stylesheet):
This will tell Internet Explorer 6 (and below) to ignore the shadow effect. To learn more about what this code snippet is actually doing, check out our article entitled how to create IE specific stylesheets. If you have a solid background color, you can substitute the png files with gifs (with the proper background color embedded) in your original stylesheet, and bypass this step altogether. You can also try one of the many javascript solutions out there, designed to force compatibility between IE 6 and png transparency.

Step 3: Applying the code:

Now to pull it all together. In most circumstances, it’s as easy as adding this to the header:

Next, add the main shadow DIV to the site, so that it encases the entirety of the design. You can do this just by adding:

just before your “content” or “wrap” DIV (whichever DIV defines the width and location of your site), and closing this at the end of the page, just after your site footer.

Finally, add this code to the very bottom of your site, below the ending DIV you created for your main site shadow:

See the end result!

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5 and 6 (bypasses fade technique), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

css: creating an image “hover” effect using only css

DynamiXLabs — Thu, 17 Jan 2008 22:58:52 +0000

Most of us have at one time or another have had to (or tried unsuccessfully to) alternate an image on mouse over. Most commonly, this is effect is used to provide a response when a visitor runs their mouse over a button, like the one below:

Now, this was very easy to create, using just the following CSS:
.buttonexample{background-image: url(images/button.gif); width:91px; height:28px;} .buttonexample:hover{background-image: url(images/button-over.gif);}and the following html:

If you are just hoping to make a standard image change on mouseover, without having that image link to anything, then you are almost done. To prevent the hover image from “flashing” before loading, simply follow the steps listed on our sister article: A quick look: preloading images with css.

If, however you would like to have a mouseover effect on a linked image, it’s just a little bit more complex. In addition to the code above, we will add one more line to make this:
.buttonexample{background-image: url(images/button.gif); width:91px; height:28px;} .buttonexample:hover{background-image: url(images/button-over.gif);} .buttonexample a{display:block;width:91px;height:28px;}and the following html:

This is the simplest method, but is not compatible with IE 5.5/6. This is because IE 5.5 and 6 do not recognize the “hover” attribute when applied directly to a DIV. To make this button compatible, we’ll just need to define the same variables as we did on the standard div, but for the “a” tag, like this:
.buttonexample a{background-image: url(images/button.gif); display:block;width:91px;height:28px;} .buttonexample a:hover{background-image: url(images/button-over.gif);

Now, we have this link. Remember to change the width and height of this link to correspond with the size of your image.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5 and 6 (see above), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!

If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

css: add a “loading” icon to your larger images

DynamiXLabs — Thu, 17 Jan 2008 20:10:29 +0000

Let’s say that you have a large image (or several large images) on a particular page, and you want to let visitors know that the image is loading. You could use a piece of javascript to embed a “loading” image for all images that have not yet loaded, but unless you are loading a ton of very large images on a single page, we have a much simpler (and cleaner) method to accomplish the same thing.

Step 1: Find a preload image.

There are many fantastic sites out there that will allow you to create your own preload images. Our favorite is here. Just remember not to choose an icon that is too large (file size), or it may not load until after the larger image has loaded. Here is the one that we have created:

Step 2: Create the CSS

There is just a little bit of code to create here, and it can be pasted directly into your stylesheet. Just be sure to replace the “youricon.gif” text with your image name.

Code to paste into your stylesheet:
.load{background:url('images/youricon.gif') no-repeat center;}

Step 3: Applying the code
There are a couple of ways to do this, but this is probably the best solution (depending on your application). Simply encase the image you are interested in loading within a “load” div, and apply the width and height of your image to the div.

Example:

Here it is applied to an image:
You will likely need to clear your cache and reload this page to see the loading icon appear. A more thorough example of this loading icon in action can be found here.

As mentioned by contributor Lim Chee Aun below, you could also bypass the div and apply the .load class directly to the image itself, and here’s how you can do it:
The reason we hadn’t mentioned this idea initially, is if the image does not load it can break the look of the design. If you are absolutely positive you will not have any loading issues, you don’t care if the image needs to be centered (while validating xhtml strict), or if you are applying the class to multiple images, this may be a cleaner solution for you. See our updated example page below for examples of the method created both ways.

You can also apply this globally, by adding this to your stylesheet instead:
img{background:url('images/youricon.gif') no-repeat center;}

Note that in this case, you may run into issues whereby an image loads in an area where the loading icon color may be mismatched. For example, if your content area is white and you create a loading icon with a white background, it will look fine in that area. But your left hand column is black, an image loading on the left hand column will have a poorly colored loading icon applied to it. To counter this, you could always apply the loading icon only to your primary content area, like this:
#yourcontentdiv img{background:url('images/youricon.gif') no-repeat center;}

See the final result in action!

If this solution doesn’t fix the problem for you application, let us know what you are doing differently and we’ll be happy to go into more detail.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!

css: preloading images with css

DynamiXLabs — Thu, 17 Jan 2008 18:33:40 +0000

Now excuse me for pulling up an old chestnut, but this is one that comes up often for people who are just starting out with CSS and want to avoid the extensive javascript output by many website design applications such as Dreamweaver and the dreaded Front Page. This method only requires a very minor understanding of CSS, cleans up your markup and achieves the desired effect.

Step 1: Creating the CSS.

First, let’s start with the CSS we’ll need. This step is very simple, as there is only one line that you will need to add to your stylesheet. Decide what name you would like to use for your preload. In this case we have gone with the creative Class name “preload.” If this is fine for you, simply paste this code into your stylesheet. Otherwise, change the Class to another name you are more comfortable with, bearing in mind you will need to do this on the final code as well. I’ll cover why we chose to use a Class instead of an ID in just a minute.

Code to paste into your stylesheet:
.preload{display:none;}

Step 2: Creating the DIV.

Next, we’ll create the actual DIV that will contain the images you want to preload. If you are using a site that you created yourself, this can go in the footer area of your page, as this will ensure that the main portion of the site loads before your preloaded images. If you want this preload active on every page of your site, make sure to either A. Copy the code to each page of your site, or B. (Preferred) include a footer.txt file that will contain this preload on every page of your site. That way, if you need to add or remove an item, you can do it in one place instead of on every page. If you are using a site that has a WYSIWYG editor and you only want the preload on one page (or want to add different images for preload on each page), you can do this by clicking on the “view code” or “view source” button in the editor and entering the code at the bottom of the editor. The reason we chose to use a Class rather than an ID is because this will grant you the most flexibility to add more than one set of preloads to a site. Say you have a web site with database-driven content. You have a set of preload images in the footer that is outputted automatically on every page, but one particular page also needs a few more preloaded images. You can accomplish this simply by adding those few images into the WYSIWYG editor as described above, without having to worry about having two DIV’s with the same ID on a particular page.

Code to modify/paste into your web site:

Remember to add an alternate tag to each image!

Step 3: Testing.
Try it out! For our example, we created two different sets of images. One has a CSS preload, while one does not. Run your mouse over each, see the difference? The preloaded image loads immediately, while the non-preloaded image flashes before loading. Note that once you have moused over the non-preload image once, you will need to refresh the page to see it flash again.

WITHOUT Preload

WITH Preload

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC, Linux and Mac), Netscape and Safari (PC and Mac).

That’s all folks!