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
…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
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
… Good news today for everyone interested in learning more about WordPress! I have a new training course available on Lynda.com: WordPress 3.0: Creating and Editing Custom Themes.…
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 …
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 …
Did you know you can make triangles with pure CSS? It’s pretty easy. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. They …
$.fn.shuffleChildren = function() {
$.each(this.get(), function(index, el) {
var $el = $(el);
var $find = $el.children();
$find.sort(function() {
return 0.5 - Math.random();
});
$el.empty();
$find.appendTo($el);
});
};
$(".parent-element").shuffleChildren();
See the Pen
jQuery Shuffle Function by Chris Coyier (@chriscoyier…
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 =
… 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";
… 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). …