Tag: CSS

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

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. It is a very non-traditional user experience that takes the parallax scrolling

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

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. It’s really easy to add small caps using font-variant, here’s how: The CSS: The HTML: The Demo: See I’m Using Small Caps Browser Support: The

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. To visualize how the CSS Clip property works think

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. Example Here’s how you can create drop caps with CSS using the :first-letter pseudo-class: The Code: Demo: Lorem ipsum dolor sit amet, consectetuer

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

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,

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

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

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. What the Heck are They? Understanding CSS regions is pretty simple really. Basically, they allow us to flow content through multiple containers on a page. Usually we are

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

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

Layout has traditionally been a pretty difficult thing to get right when it comes to building web sites. With CSS3, however, it looks like things are getting a bit easier. I’ve written “Flexbox: Modern Web Layouts Simplified” which covered Flexbox layout techniques. That was cool, but there are other great layout features provided for us

For those of you that have read my post “SVGs are Cool & You Should Start Using Them, If You’re Not Already” you know that I am a fan of SVGs. In fact, now that I know a little more about them I feel that they are very under used in modern web development. They

Most of the time when using HTML and CSS we are simply drawing flat rectangles, rounded rectangles, or circles within 2D space. CSS Transforms allow us to alter the shape, position, rotation, and scale of html elements within both 2D and 3D space. When combined with CSS transitions, transforms can really enhance the user experience

New in the world of web layouts is the CSS3 “Flexible Box Layout Module” known as Flexbox. It is so new in fact that at the time of writing this post it is still just a W3C Recommendation and is still in flux with different browsers implementing things a little differently. That being said, it

Up until a couple of months ago I had no idea that there was even such a thing as an inline SVG. Once I found out I realized that I need to learn more about them. First off SVG stands for “Scalable Vector Graphics” which literally means just what it says. It’s simply an image

I’ve often found myself in a position where I want to add a simple text glow effect to some text when hovering over a link. Before CSS3 the only way this was possible was to use some sort of image replacement technique or something. Well, now it can all be done with the CSS text-shadow