CSS3 2D Transforms

CSS3 2D Transforms

Browser Support Internet Explorer 9 requires the prefix -ms-. Firefox requires the prefix -moz-. Chrome and Safari requires the prefix -webkit-. Opera requires the prefix -o-. 2D Transforms In this chapter you will learn about the 2d transform methods: translate() rotate() scale() skew() matrix() You will learn about 3D transforms in the next chapter. The […]

Media Queries Usage

Media Queries Usage

/* Smartphones (portrait and landscape) ———– */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ———– */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ———– */ @media only screen and (max-width : 320px) { /* Styles […]

Equal height for floating list elements

Equal height for floating list elements

That will literally search in this form: Find all elements which match :nth-child(3n+1), meaning every third element inside its parent. Filter only those who are lis. Filter only those who are direct descendants of ul.themenboxen. Or in english, find every third element directly inside of ul.themenboxen, and apply clear: both on it. Note: I’m not […]

CSS Box-Shadow:Inset

CSS Box-Shadow:Inset

You’ve gotta appreciate the imageless design elements the CSS box-shadow property makes possible. No more slicing up 3 jpgs to recreate the depth so easily gained in Photoshop. Lately, we’ve been using box-shadow:inset on some Paravel jobs, and I’ve seem some clever uses out there on the intertubes. This property is compatible with Webkit (Safari […]