CSS3

CSS3 Infographic

Jan 22nd

Posted by existdissolve in Cool Stuff

1 comment

There’s something with me, the weekend, and CSS3…hmm…

On Saturday, Google Politics & Elections posted an interesting infographic about search trends over the last week related to the four remaining GOP Presidential candidates.

Here’s the infographic:

From Google Politics & Elections

Overall, pretty nice. It makes good use of color, highlights the important details, and avoids loading the graphic with needless frills, pointless content, etc.

The one problem, though, is that it’s simply an image. While it’s nice to look at, it’s kind of boring.

Some CSS3 Up In Here

So as I was internally complaining about how boring the image qua image is, it occurred to me that some simple CSS3 flourishes could really make this nice.

Check Out the Example (note: you’ll need a more recent version of Webkit or Firefox for this to work…)

In this experiment, I’m using a few things I’ve not messed with much in the past: keyframes and the flex-box model.

Flex-Box Model

If you’re a web designer, you’ve no doubt spent endless hours trying to coax HTML and CSS to do simple things like expand “columns” a particular percentage in width and height. This is a horrible nightmare to endure, and it usually ends in a lot of hacks and more cursing, just to More >

, ,

Sencha Touch Theming: 1.1.0

Apr 23rd

Posted by existdissolve in CSS3

2 comments

In my last article, I showed how to get setup and started with creating custom stylesheets. After a significant release (1.1.0) and several reader requests, I’m updating the walkthrough with screenshots and instructions for v1.1.0. This version will be strictly business: for discussion about the more interesting points of what’s going on, refer back to the original post 🙂

Step 1: Install Ruby

To get SASS setup, you’ll first need to install Ruby and Ruby Gems (SASS is bundled with something called “Compass”, and Compass is a “Gem” that can be added into Ruby). You can go the painful route and install Ruby and then add Gems into it. However, if you’re stupid about these things, you can do what I did and just grab the Ruby 1.92 installer–it comes pre-built with Gems already configured.

Get the Ruby 1.92 Installer

When prompted, choose “”Add Ruby executables to you PATH”

I installed to the default directory on Windows (C:\Ruby192\)

Step 2: Setup Compass

Now that Ruby is installed, the next step is to get Compass (e.g., SASS) setup. This step actually took me the longest, simply because I’m stupid about command-line stuff. So here’s a play-by-play of what to do (this is for Windows…I assume Mac More >

Fun with CSS3: RGBA

Jun 20th

Posted by existdissolve in CSS3

No comments

If you’re a web designer, there are times (I’m sure) when you’ve wanted to have a transparent background for something.  After all, Web 2.0 is all about transparency and rounded corners, right? 😉

In CSS2, there were generally two ways to go about this.  The easiest was to use the “opacity” property.  Sure, it didn’t validate, and you had to use an alternate syntax for IE7, but still…super easy.

.opacity {opacity:.7;}

The major downside (besides lack of support) of this approach is that the opacity is applied to the entire element. So, if you have a div with a bunch of text in it, any opacity setting applied to it will rollup to whatever content is contained within the element to which the opacity is applied.  Especially with text, this can make for some washed-out-looking content:

In this example, the heading has a simple color of “white”, yet it looks very washed out.  This is simply because it inherits the opacity of its parent element.

So if the opacity of the content is important, the next best option is to use a .png as a background image.  With this approach, we get all the benefits of background-opacity, while still preserving the natural opacity of any More >