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
I was lucky enough to get the invite from Matt West, founder/organizer of CodeSLO, via my coworker @schwarty to give a presentation at the CodeSLO meetup “HTML and CSS – Part 3 – Modern Web Design” meet up. This was a good time. I got to get out and talk shop with a great group of
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
For those of us who are used to working with XHTML this is going to seem a little odd but, with HTML5, we no longer need to add a trailing slash on self closing tags like images and inputs. When using an img tag do you tend to set it up like this? Well, that
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.
If you use Illustrator for interface design you probably take advantage of using placed files for some of your design elements. I’ve started using the heck out of them in order to make updating items across files much easier and quicker. As I started doing this I quickly realized that it’s monotonous to update the
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
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
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
With HTML5 we have been given new input types (email, tel, url, number, etc.) and built in browser validation to validate them. This is great but you may want to disable this validation if you want to test your server side validation, use custom validation, or something else. This is where the novalidate property comes
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
When you create a new Illustrator document the grid will always be aligned based off the upper left corner of the art board. Personally, I always want it to be aligned to the top center. How do you do that? Well, the simplest way that I’ve found is to actually just center the art board.
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