A recent client project called for an image rotator that was essentially a 3D cube. I was pretty excited when I heard that, because I had not really had much of a chance to use any of the CSS3 3D stuff on a project yet!
Lets take a walk through the process of creating this slider!
First off, below is an example of the final product.
See the Pen CSS 3D Image Rotator by Ryan Christiani (@Rchristiani) on CodePen.
There are a lot of new tools out there to help speed up and streamline your workflow as a developer, and to be honest they can seem a bit daunting to get into. Two new tools I have started using this year were Grunt and Sass. Grunt is a commandline JavaScript Task Runner, and Sass is a Css preprocessor that lets you write more powerful css, with the use of variables, mixins/functions and nesting! Lets take a look at getting started using Grunt to compile our Sass.
(more…)
The Scenario: You are building a site, the designer has set what looks like a base font size of 13px. So you go ahead and set body{font-size: 13px;} and carry on using this as the value for your measurements. Need something to be 26px? font-size: 2em; etc.
You ran into a problem though when you set up your media queries with ems:
@media screen and (max-width: 76.9230769em){
/*1000px? No*/
}