Tag: CSS3

Sometimes it’s necessary to have a link that contains some children elements. Say, for example, you have a link that contains some text and an inline SVG icon that’s styled using CSS. This set up allows you to style the icon for all of the link states :hover, :visited, and :active right? Well yes, with

You’ve likely seen CSS animations and transitions in various web applications out there where they just didn’t work well. They are choppy and freeze along with a bunch of other issues. This occurs because they are not taking advantage of the device GPU and hardware acceleration, but are instead using the browsers’ built in rendering

Have you ever attempted to use a condensed or expanded font face from a particular font family using CSS? How did you do it? Did you create a new web font with a subset of the condensed or expanded versions? Well, thanks to CSS3 there’s now a better way, sort of. CSS font-stretch The CSS

CSS provides us with a handful of pseudo classes that are specific to HTML5 forms. They allow us to create forms that are easier to fill out by highlighting fields that are required, optional, valid, invalid, etc. Pseudo Classes for Forms The following pseudo classes are all related to form elements with examples on how

Back in the good ol’ days, CSS was much more limited than it is today. If we needed to style something it had to be in the page which, in turn, led to bloated markup simply for design purposes. Luckily we are no longer in those days. CSS Generated Content is one of many advancements

We pick up lots of pieces of knowledge over time when working with CSS and then if we don’t use them often we can forget how to use them and then have to spend time either looking it up again or looking for where we used them in other projects. Well, Adam Schwartz, a Principal

If you’re ready to build out your next site using flexbox you are probably going to want to use a grid. Well, you’re in luck because Kristofer Joseph has created Flexbox Grid with many of the features that you’re used to with other div based grids and more. Flexbox Grid Features It’s responsive It’s fluid

I have been using CSS background properties for quite a few years and have only used what I have needed. There are some pretty cool things that can be done with backgrounds that I was not so familiar with. In this article I’ll highlight some of these not so common options. background-origin The background-origin property

For the longest time the only pseudo selectors that we could use were :link, :hover, :visited and :active and they could only be applied to a tags. As long as we were intending to support ie6 that was all we could do. As we’ve adopted philosophies like progressive enhancement, graceful degradation, or dropped support for

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. The beauty of using a cubic-bezier() timing function is that it allows you to to create an acceleration curve so

Before I get started you should know that at the time of writing CSS Filter Effects are not supported in the latest versions of ie(11) and Firefox(27) so if you are using them you should try Chrome, Safari, or Opera instead. CSS filter effects are quickly becoming one of the hottest topics among web designers.

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

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

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,

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

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

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