Archive for the ‘css’ Category

Thanks To Our Veterans!

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.

Click to continue reading “Thanks To Our Veterans!”

css: Create awesome tooltips without javascript!

CSS Only Tool Tips

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!”

css: style an element with the span tag

Span Tag CSS

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”

css: Make Bold Items STAND OUT

Bolding with CSS

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

Click to continue reading “css: Make Bold Items STAND OUT”

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

Hide and Show the Youtube Player Bar

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”

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

Site Shadow CSS

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”

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

Preload Images with CSS

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”

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

CSS Only Loading Icon

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”

css: preloading images with css

Preload Images with CSS

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.

Click to continue reading “css: preloading images with css”

DynamiX Web Design

DynamiX Labs is Copyright © 2016 DynamiX Web Design, LLC.
DynamiX Labs is proudly powered by WordPress

Entries & Comments.  |  thanks & about.

The DynamiX Mascot button submit it! Background
hire dynamix!