New Screencast: CSS3 Slideup Boxes

Follow along as we use a few very simple CSS3 transitions to create a “slideup” box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized

Avatar of Chris Coyier
Chris Coyier on

Multiple Columns

Here is an example of a simple three-column class:

.three-col {
       -moz-column-count: 3;
       -moz-column-gap: 20px;
       -webkit-column-count: 3;
       -webkit-column-gap: 20px;
}

Of which you would apply to a block of text like so:

<p class="three-col">Pellentesque habitant morbi tristique senectus et netus 
Avatar of Chris Coyier
Chris Coyier on

CSS3 Finalize

Direct Link

jQuery plugin from Han Lin Yap which allows you to write CSS3 without vendor prefixes. This plugin will read through your CSS files and in-document <style> blocks, find the CSS3 stuff, then append a new <style> block to your …

Avatar of Chris Coyier
Shared by Chris Coyier on

CSS Gradients for IE9

Direct Link

This article by Robert Biggs goes into a solution for using SVG for gradients in Internet Explorer 9, because it doesn’t support CSS3 gradients. The core benefit being that the SVG image format is XML and actually rather similar in …

Avatar of Chris Coyier
Shared by Chris Coyier on

Happy Halloween

HTML, CSS, and JavaScript got invited to a halloween party. They decided they would all dress up as each other!

HTML went as JavaScript:

<div id="pumpkin" onclick="alert('Boo!');"></div>

JavaScript went as CSS:

var jackolantern = document.getElementById('pumpkin');
jackolantern.style.color = "orange";
jackolantern.style.backgroundColor = 
Avatar of Chris Coyier
Chris Coyier on

Reset Admin Password Through Database

You’ll need to be able to run SQL on that database, like for example, through phpMyAdmin.

UPDATE `wp_users` SET `user_pass` = MD5( 'new_password_here' ) WHERE `wp_users`.`user_login` = "admin_username";
Avatar of Chris Coyier
Chris Coyier on

Rotating Molecules with 3D Transforms

Direct Link

Click-and-drag to rotate these complex objects through a pseudo three dimensional space. It’s a familiar design pattern, but one that is particularly difficult to pull off. No Flash, not even canvas. Just some fancy JavaScript and CSS (WebKit 3D Transforms). …

Avatar of Chris Coyier
Shared by Chris Coyier on