Compass Placeholders #

I’m a huge fan of Sass. Nico Hagenburger just got in touch with us to let us know about his newly released Sass library to use @extend instead of @include for Compass mixins to save file size and speed up rendering. In the readme Nico covers the traditional way with Compass, and then the optimized way via Compass Placeholders.

Animation the CSS3 way with Animate.css #

Animate.css adds CSS3 animation without the headache of managing cross-browser styles. Grab the whole stylesheet or pick and choose using the handy build tool.

From the docs:

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

MIT Licensed. Source code on Github.

gradientD is a CSS3 Gradient Designer using Dojo #

Tom Pryor:

I wanted to try out Dojo’s new AMD pattern, as well as widigtize (finally) the gradient code spagetti I am currently using in my CSS3 Button Tool (Beta) and I finally got some time to play so I put this dojo widget/mashup together and put it on gitHub in case anyone was interested.

I’m psyched with the much better network performance, but even more importantly (for me) is that I have my first Dojo widget, and I think the next step is to just include it in the buttonMaker… but now I am thinking of upgrading it too to the AMD pattern, before installing this new Dojo AMD widget.

Wow. This is certainly useful, if you’re looking to easily visually create gradients of all types using CSS3/SCSS copy and paste-able code right into your project. The UI design Tom has chosen to go with for the generator could use some work (using Drew Wilson a barometer), but it’s certainly an awesome project that makes it too easy to create CSS3 gradients that’s for sure.

I like how you can double click the sliders to change their color or add new ones by clicking below the horizontal ruler.

Tom does mention support for SCSS in the description of the repo on GitHub, but based on his todo list, that’s not done yet.

Check out the CSS3 Gradient Designer to have some fun creating CSS3 gradients and the source on GitHub.

The Good Man experiments with basic CSS3 animations #

From the readme:

This project is about experimentations. About CSS3 animations and a graduation project. My name is Pedro Ivo Hudson and this is my debut.

And what a debut. Wow, I’m impressed.

Check it out for yourself at thegoodman.cc or check out the source code as well as the about/credits to learn more about how Pedro did this. By the way, Pedro is open to new projects right now, so get in touch if he’s got the skills you need.

Hat tip to Chris Coyier on Google+

Impress.js – A CSS3 based JavaScript presentation framework #

A few months back Bartek Szopka released impress.js, a JavaScript presentation tool that uses CSS3 for all of the transitions and transformations in modern browsers.

While impress.js is a little different than the projects we usually cover on the changelog, it is a very cool tool in it’s own right. Being one of the highest watched repositories on github, it obviously has drawn the attention of many.

Impress got it’s inspiration from prezi.com, and the possibilities are endless. Using it takes a little setup (developing, designing, and laying out your “slides”). Once your content is setup, initializing impress is simple:

<script src="js/impress.js"></script>
<script>
  impress().init();
</script>

Use the source, Luke!

Bartek strongly encourages you to read through the source to understand what impress is doing. If you look at the official example, you will see commented source code explaining how to use impress.js.

As the documentation explains:

The only limit is your imagination

Checkout a few more examples to see it in action. You can also browse the source at GitHub.

Spin.js – CSS3 Spinning activity indicator #

Felix Gnass created a handy JavaScript utility that makes it very easy to add a “spinner” to your website. The project is very small (~2k), has no dependencies, uses CSS for styling/animations and has fallbacks for older browsers.

After including the JavaScript library:

var target = document.getElementById("spinner-wrapper");
var spinner = new Spinner({lines: 12, color: "#fff"}).spin(target);

Voila! You now have a spinner inside of the element you specified as your target. It is highly customizable (number of lines, color, thickness, radius, speed, trail, etc). If you want to use it with jQuery, they have an example showing you how.

Head on over to GitHub to browse the source, or view the example page with customizable sliders.

stroll.js – CSS3 List Scroll Effects #

This project by Hakim El Hattab is just sick. stroll.js is a collection of CSS list scroll effects. Oh, and of course, pull requests are welcome.

Stroll.js scroll effects demo

Besides the awesome work from Hakim, a few contributors helped make stroll.js possible as well:

Also, if you haven’t heard Paul Irish, Boris Smus and Eric Bidelman kicked off the first episode of HTML5Rocks Live – which features stroll.js to show off some of the latest features in Chrome developer tools. The first 20 minutes Paul talks about a brand new feature: the DevTools’ vertical timeline!

Source on GitHubDemo

HTML5-Clear: A replica of the Clear iPhone UI in HTML5 and CSS3 #

If we’re fans of anything, we’re fans of experiments that get open sourced.

As a followup to our native coverage of Clear’s UI with JTGestureBasedTableViewDemo, you might enjoy this experiment by Evan You to replicate the UI of Clear in HTML5 and CSS3.

HTML5 Clear

HTML5 Clear is a replica of the awesome Clear iphone app (UI only) featuring the innovative gesture controls and the look and feel in HTML5 using CSS3 transitions.

While Evan might not have been able to get 100% of the details right, it comes pretty close and there’s certainly something to learn from the codebase.

Source on GitHubDemoVideo

CSS3 Test – How does your browser score for its CSS3 support? #

If you’d like to know how your browser scores for its CSS3 support, you have to check out Lea Verou’s CSS3 Test. She announced the project yesterday on her blog.

Here’s screenshot of my browser, Google Chrome 23.0.1271.101.

The CSS3 Test

Lea actually planned this as an improvement to her interactive CSS playground called Dabblet (Source on GitHub), but it didn’t work out the way she planned, so she released CSS3 Test on its own.

If you haven’t yet, read her blog post about the project – she talks about how it works, using browserscope, how it doesn’t work on dinosaur browsers like IE8, and why she built it in the first place.

A word of caution the CSS3 test checks which CSS3 features your browser recognizes, not whether or not they are actually implemented correctly. Oh, and WebKit claims to support CSS3 background-repeat, but it is LYING.

If you’d like to add tests to CSS3 test, go to tests.js and follow the current structure. Also, there are lots of great conversations and comments about the project on Hacker News.

Links

deCSS3 – Easily strip out CSS3 to test for graceful degradation #

When I’m working on a design using CSS3 features, I often worry about how things are looking on older browsers. Sure there’s VMware Fusion or Parallels, but that’s uber clunky for just a quick view of how things are shaping up for older browsers.

deCSS3

deCSS3 is a bookmarklet that lets you get a view of what your site will look like on older browsers that don’t support CSS3.

It doesn’t remove all CSS3 right now, but I’m sure that Dave would gladly accept a pull request. Oh, and BTW, they are looking for collaborators with some regex-fu.

Currently supports: Chrome, Safari

Hit the deCSS3 homepage to get the bookmarklet or fork it on GitHub.

Episode 0.6.7 – HTML5 Boilerplate, Modernizr, and more with Paul Irish

Adam and Wynn caught up with Paul Irish of Google’s Chrome developer relations team to talk about HTML5, JavaScript, CSS3, polyfills, and more. Items mentioned in the show: Paul Irish – Chrome dev relations guy at Google. Dion Almaer – Host of Function Source, all around JavaScript, frontend expert. “HTML5 is a jewel that we […]

fancy-buttons: Fancy CSS Buttons using Sass and Compass #

Fancy buttons is a Compass Extension written in Sass (installable as a gem) that helps you to easily generate beautiful, flexible CSS3 buttons. It’s written and maintained by Brandon Mathis and he recently announced the 1.0 release of Fancy Buttons.

Listen to Episode 0.0.1 (our first episode) to learn more about Compass

How to Install

First things first we need to get compass and the fancy buttons gem installed.

gem install compass
gem install fancy-buttons

To create a new project based on fancy-buttons:

compass install -r fancy-buttons -f fancy-buttons /path/to/project

To add fancy-buttons to an existing compass project, add this to your configuration file (rails: compass.config, other: config.rb):

require 'fancy-buttons'

Then import fancy-buttons in your sass file:

@import "fancy-buttons";

What’s It Doing?

Below are details of what CSS rules this mixin handles for you:

  • Button reset – to get browsers to the same starting point
  • CSS3: Rounded corners, Text shadows, Gradients, Inset box shadows, and browser vendoring
  • Background image fallback
  • Padding, Text size, line-height, etc
  • Default, Hover, and Active states for all styles
  • Lots of tricky color math to generate beautiful gradients from one color

If you were writing the actual CSS for this (and not leveraging Sass), it would be a lot of CSS to write. Fancy buttons has taken the pain out of the way and effectively reduced all that thinking and math down to a single Sass mixin. Of course, it’s also great that you get to use the bare minimum HTML.

[Source on GitHub] [Homepage] [Demo]

baker: Publish eBooks on the iPad using HTML5 #

Screenshot

Want to create an eBook but don’t want to futz with learning new tools? Davide Casali, Marco Colombo, and Alessandro Morandi have created Baker, a new framework to let you create books for the iPad using HTML5, CSS3, and JavaScript. Baker aims to do for books what PhoneGap has done for HTML5 web apps in just three steps.

Design

Baker currently supports portrait layouts, so just design your book using a web layout 768px wide. Pages can be as tall as you want and will scroll anything over 1024px. Multiple chapters are supported using separate HTML files.

Package

Drop the contents of your book into a /book folder, naming chapters sequentially as 1.html, 2.html, 3.html, etc. You may use subfolders for assets, but your chapters must be in the root folder.

Publish

To publish your book, you’ll need an Apple Developer account. Then you can publish your book using the Baker XCode project, renaming the project to reflect your book title as well supplying your own icon for the App Store. Check out full instructions in the README

[Source on GitHub] [Homepage] [Follow on Twitter]

html5-boilerplate: Best practices starting point project for HTML5 and mobile web apps #

While HTML5 is expanding in definition to include any whizz-bang feature in the post rounded corner web era, implementing actual HTML5 in your web app can be confusing. It’s a fast moving landscape that touches everything from traditional web apps to mobile.

Paul Irish, the Google Chrome dev relations guy who gave us the bulletproof syntax for @font-face, brings us his HTML5 Boilerplate a great tutorial/starting point for implementing a number of best practices in your desktop and mobile web applications including

  • HTML5 <!doctype> and CSS reset
  • Handheld stylesheets
  • CSS media queries for advanced mobile device targeting (even portrait or landscape layouts)
  • Paul’s Modernizr script for detecting device capabilities such as Modernizr.video.ogg

The current version is heavily documented. Paul promises a more slim, production ready version soon.

Check out the source on GitHub and the HTML5 Boilerplate homepage

CSS3 PIE – A taste of Web 2.0 for Internet Explorer #

How will that web app of yours ever get featured on TechCrunch without rounded corners and drop shadows? With CSS3, such things are child’s play. If only IE supported them.

Be not despaired, my friends for Jason Johnston brings you Progressive Internet Explorer (PIE). PIE takes advantage of vendor namespaced CSS properties and an HTML Behavior (remember those) to graft on some missing features for Internet Explorer:

.box {
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
  background: -moz-linear-gradient(#EEFF99, #66EE33);
  -pie-background: linear-gradient(#EEFF99, #66EE33);
  behavior: url(/PIE.htc);
}

PIE supports a number of CSS3 properties including border-radius, box-shadow, border-image, RGBA color values, and gradients.

[Source on GitHub] [Homepage] [Docs]

Safari 4 – reproduce thyself #

While short on functionality, Joshua JonesSafari 4 clone (built in Safari 4 no less) provides a great learning resource for learning some advanced CSS3 techniques to recreate a familiar interface.


Safari clonen screencap

Our only disappointment is that the mock browser didn’t house an <iframe> that would let you load the site in itself. Then you could really get a cereal box effect – you know where Tony the Tiger is on a box of Frosted Flakes that has a picture of Tony the Tiger holding a box of Frosted Flakes that has a picture of…

[Source on GitHub] [Demo]

Quicksand: Awesome jQuery plugin to filter/animate HTML lists #

Quicksand from Jacek Galanciak is a jQuery plugin to help you filter and animate items in an HTML list.

With code like this:

$("#content").quicksand($("#data > li"), 
  {
    // all the parameters have sensible defaults
    // and in most cases can be optional
    duration: 1000,
    easing: "easeInOutQuad",
    attribute: "data-id",
  }
);

You can get the eye candy in this video:

Quicksand depends on jQuery 1.4+ and most any browser that isn’t abbreviated IE6.

[Source on Github] [Homepage] [Demo] [Happy Webbies!]

Firefox 3.6 beta 2 #

Over 190 bug fixes and several cool new features for developers including

  • -moz-background-size
  • -moz-linear-gradient and -moz-radial-gradient properties, is supported for background-image
  • multiple background images
  • @font-face now supports the new WOFF web font file format
  • HTML5 video supports poster frames
  • The multiple attribute is now supported on HTMLInputElement
  • Gecko 1.9.2 introduces JavaScript 1.8.2