• Home
  • About Mitch
  • Speaking
  • Articles
  • Contact
  • Home
  • About Mitch
  • Speaking
  • Articles
  • Contact

Digital Strategist

WordPress Developer

Content Creator

Unapologetic Punk

Mitch Canter

  • X
  • Bluesky
  • GitHub
  • Twitch
  • YouTube
  • LinkedIn
Design

CSS3: Fading Colors (A Quick Introduction)

CMDR Mitchcraft

Reading time: 2 minutes

It’s the little things, I’ve noticed, that really make a website design pop.  The layout may be good, the content may be worth reading, but it’s small, minor details that take a good design and turn it into a great one.  With the advent of CSS3 and HTML5, those details become even easier to bring in.  No longer do designers and coders have to “hack” in their favorite flourishes, but we can now simply enter one or two lines of code and get exactly what we need.

CSS3, for example, has a lot of animated characteristics built right in.  Everything from movement, fading, and even replacing current content can be done with just a few simple lines of code.  I wanted to introduce you to CSS3 with a four-line code snippit that can make any website just a bit more polished: a color transformation when you hover over a link.

The first thing we want to do is define our hyperlink colors.  We’ll start simple; I’m only going to change the default link color in the widget areas and the post content:

[code]

.post a, .widget a{
color: #09F;
text-decoration: none;
}

.post a:hover, .widget a:hover{
color: #F000FF;
}

[/code]

Nothing too unfamiliar, right?  We’re defining our hyperlink colors as blue in a resting state, and pink in a hover state.  Now, watch what happens when we add in the “transition” property (here’s a hint: if you want to see it in action, poke around the site a bit and try hovering over some links!)

[code]

.post a, .widget a{
color: #09F;
-webkit-transition:color .25s ease-in;
-moz-transition:color .25s ease-in;
-o-transition:color .25s ease-in;
transition:color .25s ease-in;
text-decoration: none;
}

.post a:hover, .widget a:hover{
color: #F000FF;
}

[/code]

Now, you may be asking why we’ve added 4 different versions of the same code?  Like its friend “border-radius” and all of the other CSS3 commands, all of the major browsers have different ways they interpret the code, and all have browser prefixes.  “Webkit” works on all Safari/Chrome browsers, “moz” on Firefox (and mozilla-based browsers), “o” is for opera, and the non-prefixed version is a catch-all should everything decide to standardize.

Now, without going too in-depth, here’s what that line is doing: the first value is the other property we’ll be affecting.  In this case, we’re going to be applying the transition to the “color” property.  But we can apply it to any other CSS property we want; color makes for a nice looking effect, so we’ll use it for our demo.  Next, is time.  the ‘s’ stands for seconds, so .25 is 1/4 of a second, or 2500 milliseconds.  And finally, ‘ease-in’ is the animation applied to the transition.

Hover over a link, and you’ll see a nice fade from blue to pink.  You can adjust the timing to make it faster (.15s) or slower (.5s), or change the colors.  This is a quick way to add a visual pop to nearly any website.  I’ll do a more in-depth look at CSS3 later, but for now, enjoy this handy little snippit.

09F, cascading style sheets, CSS3, ease-in, F000FF, transition
  • WordPress BootCamp: Categories vs Tags

    WordPress BootCamp: Categories vs Tags

    Reading time: 2 minutes

    This is the second post of Mitch Canter’s “WordPress BootCamp” series… it showcases the ins and outs of WordPress to new users, and highlights some of the more popular (and some overlooked) features that make WordPress fantastic.  You can catch all of the posts here. I get a lot of questions on this: “What’s the…

    WordPress
  • BlogInfo – One Tag with a Whole Lot of Awesomeness

    BlogInfo – One Tag with a Whole Lot of Awesomeness

    Reading time: 1 minute

    One of the most versitile tags in my arsenal that WordPress gives me is a fun little tag called <?php bloginfo(); ?>.  By itself, it’s not much fun, but when you add in a variable, it can tell you anything you need to know about your blog.  Like what, you ask? name description admin_email url…

    WordPress