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.
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.
Click to continue reading “css: Create awesome tooltips without javascript!”
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. Read more…
Click to continue reading “css: style an element with the span tag”
This one’s very easy, but it’s a great way to quickly increase the visibility of your bolded items.
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…
Click to continue reading “css: hiding/showing the YouTube play/navigation bar on mouseover”
Add a clean shadow around your content area with this tutorial.
Click to continue reading “css: using simple css to create a great looking site shadow”
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…
Click to continue reading “css: creating an image “hover” effect using only css”
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.
Click to continue reading “css: add a “loading” icon to your larger images”
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.
