Posts Tagged ‘CSS’

Creating a CSS3 3D image rotator

September 22nd, 2014 No Comments

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.


Getting started with Grunt and Sass

July 4th, 2013 38 Comments

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.

Em’s in Media Queries

June 20th, 2013 No Comments

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*/