Quick Tip - 08: Highlight Search Results With the HTML5 Mark Tag
The HTML5 mark tag was created in order to highlight text within a document that is relative to another context. This is perfect for highlighting the search term in a list of results.
Recent Posts
Oh Wow That’s Neat – 08: Cubic-Bezier.com
I don't really come across much about the use of CSS3 cubic-bezier() functions for easing in animations. It is a timing function that can be used in place of the easing keyword for CSS animations.
Modern Web Typography: Kerning
Kerning is a very important aspect when it comes to setting type. Unfortunately, until more recent times, it has been left out when it comes to the web.
Quick Tip - 07: Autofocus Fields With HTML5 Form Attributes
Have you ever wanted to automatically place the cursor in a field when the page is rendered? I know I have.
Oh Wow That's Neat - 07: Gratisography.com Free HQ Images
Looking for high quality pictures to use in your personal or commercial projects? Don't want to pay tons of cash for overused stock photos? Well, you're in luck thanks to [Ryan McGuire](http://www.laughandpee.com/) from [Bells Design](http://www.bellsdesign.com/).
How to Use CSS Filter Effects
Quick Tip - 06: Use the Four-Value Syntax to Properly Position Background Images
After writing my post Use CSS Calc to Properly Position Background Images I had some folks point out that you can now use the new Four-Value syntax for the background-position property to achieve the same effect. I was absolutely blown away when I saw that this was finally possible. I'm mean, this just makes sense and it's something that I've wanted for years.
Oh Wow That's Neat - 06: www.fontwalk.de
www.fontwalk.de is a site that was created as a marketing tool for www.fontshop.com. I'm not so interested in their fonts, although it looks like they have a nice selection. I am more interested in the great design ideas behind the Font Walk site.
Make it Count with CSS Counters
Often I've found myself in a spot where I've needed to style an ordered list in a way that I just couldn't do with CSS. So I either had to live with it as it was or get tricky with JavaScript or something to create a custom list with the necessary markup. Then I stumbled across CSS Counters and that all changed.
Quick Tip - 05: Small Caps Using font-variant
Ever needed to use small caps in a website? They can add a really nice typographic touch in certain circumstances, but I've never really taken advantage of them with CSS.
Oh Wow That's Neat - 05: Perspective Page View Navigation
Navigation can be a hard thing to master. Handling it intuitively and in a usable fashion is even more challenging with the wide variety of devices and screen resolutions available. Most sites tend to just shove all of their menu items under some three bar icon and expand the menu when clicked. Seems to work pretty well, but what If your were to think of navigation in a whole new way?
How and Why to Use the CSS Clip Property
The CSS Clip property is an odd one. I've been building websites for a long time and didn't know about it even though it's been around for a while. In this article I am going to explore how and why to use the CSS Clip property.
Quick Tip - 04: Create Drop Caps With CSS
CSS drop caps came up in a discussion with a co-worker the other day. I don't use drop caps in web sites I design, but there's really no reason why I shouldn't.
Oh Wow, That’s Neat – 04: Ink - Responsive Email Templates
Anyone who's ever had to create HTML emails knows that it sucks. You have to write old, crappy, code and inline style everything. You have to use tables because more modern float layouts just don't work consistently across the bagillion email clients that are out there. Overall, I would say that they are probably my least favorite part of the Job. But, they don't have to be. Thanks to the great folks at [ZURB](http://zurb.com/) we can hit the ground running when developing HTML emails.
The Difference Between CSS box-shadow and filter: drop-shadow();
Normally when I need to add a drop shadow to an element I will use CSS box-shadow. There's another way that I can handle this though. I can use CSS filters. They allow me to do many different things like apply gray-scale, apply sepia, blur, adjust brightness, adjust contrast, adjust hue, invert colors, saturate colors, and alter opacity.
Quick Tip - 03: Prevent Mobile Device Text Inflation With the text-size-adjust Property
You may have noticed that your phone tends to scale up text automatically in an attempt to make things more readable on the smaller screen. The intentions are great but the effects may be undesired for the person in charge of the design. Well, you have the ability to prevent mobile device text inflation with the text-size-adjust property.
Oh Wow, That's Neat - 03: Myth.io
CSS Preprocessors like LESS, SASS, and Stylus are all the rage now-a-days and rightfully so. They all do some great stuff allowing us to write CSS in a more programmatic way where we repeat ourselves less and operate at a higher efficiency level. With all the good that they provide for us they do add a layer of complexity.
Understanding CSS Regions
Some of my favorite parts of CSS3 are those concerning layout. So far I've explored Flexbox and Columns, but today I'm going to dig into CSS Regions.
Quick Tip - 02: Use CSS Calc to Properly Position Background Images
If you would have asked me about the CSS Calc function six months or so ago I would have said "What's That?". But luckily for me I stumbled across some blog post highlighting the coolest new CSS stuff that's available for us to use and CSS Calc was one of them. It's really a pretty useful item to have at our disposal.
Oh Wow, That’s Neat – 02: iconmelon.com, svg Icons Lib for the Web
There are many pros and cons to using icon fonts and SVGs for icons in your designs. I had been under the impression that icon fonts were the more effective of the two but have had some reservations. For one, what happens if you need a multi-color icon? Remember, they are simply fonts so they have to be a solid color. The only way around that is to get all hacky and build the various components using other elements. The sizing of things is also a little odd since they are fonts they have to be sized with font-size and line-height which doesn't necessarily feel right. Using animations with them is also very limited when compared to SVG. And one last thing, they cant be set to scale at a percentage of their containing elements like SVGs can.