For the longest time we’ve been stuck with boxes and it makes things that are common yet beautiful in the print world difficult if not impossible on the web. CSS shapes change this, leveling the playing field allowing us to create much more engaging layouts and designs on the web. Layout on the web is
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
We are all designing and building responsive websites now. For many of us this means both exciting new challenges and significant increases to our workload. Testing at many variable widths is more and more difficult to do and is likely the culprit of much of our increase in development time. We are all designing and
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
With all of the great frameworks popping up it can be difficult to choose the “right” one. Besides doing some really great things, probably the two most popular frameworks Twitter Bootstrap and Zurb Foundation, can be a little overreaching at times when it comes to theming them. You may find that you have to overwrite
Now that there are so many people accessing the sites we build through touch devices many of us will see that we need to alter the default panning and zooming behavior of the browser when touching them. Drawing Example The easiest example to help you understand this property is through a simple canvas drawing demo.
It used to be that websites and their interactions were much different than those from native software applications. Well this is not so much the case anymore. Mary Lou, a freelance web designer and developer from tympanus.net, wrote an interesting article discussing a few different morphing buttons concepts that showcase some amazing possibilities for web
If you’re reading my blog I’ll assume that you are familiar with how to live edit code within all browser developer tools. I use them all the time and can hardly remember what it was like without them. Chrome DevTools tend to be my favorite but FireFox and Internet Explorer continue to improve. Chrome DevTools
Paul Irish created and maintains a site devoted to Ampersands. The site is a collection of open source web fonts that only contain the ampersand character. He created it based off an article from 2008 regarding the usage of ampersands and the fact that certain variants of the character in some fonts are more interesting
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
For those of you who have taken advantage of web fonts you’ve likely noticed various levels of quality. Sometimes, in some browsers, they look great. Other times, in other browsers, they look thin grainy. And if you’re like me you probably just cringed a little and dealt with it. Well, fortunately we now have help
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
The ng-cloak directive was added to Angular in order to prevent the flickering of elements before your application has fully loaded. It then removes ng-cloak once it has had a chance to compile your views. However, there is still a flicker issue that occurs between when the view is first loaded and before Angular has
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
No, this is not a hip hop song about SVGs, sorry to those of you who were expecting that. This is another post about good ol’ SVG graphics. So most of us know that there is a lot that you can do with SVGs and it can all be done in many different ways. The
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
The :root pseudo class, at first glance, is a little odd. It seems like it’s simply a replacement for using the HTML tag as a CSS selector. There’s a little bit more to it than that and in this article I will explain what the :root pseudo class is and why you might use it.
If you’ve ever wanted to do something like set the borders on a container to the same color as the text within it you can easily do it using currentColor. currentColor can be used for anything that accepts a color value like box-shadow, background-color, etc. The CSS The Demo My border should have a color
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
AngularJS is a newer JavaScript framework geared towards the creation and maintenance of single page web applications. It is considered to be a “toolset for building the framework most suited to your application development” meaning that, for the most part, you can choose the elements that you want to use and swap out those that
Modular is the new black when speaking in terms of the web. From the back-end perspective, developers have been building modular, object-oriented code for a long time now. Well, as web technologies and our development processes continue to improve, more and more of these back-end, programmatic philosophies are finding their way into front-end development. The
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
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. For those of you that may not be clear on what kerning is, it deals with the spacing between certain pairs of letters letters such as W
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.