So the other day a friend of mine asked – how do I make these fancy buttons in CSS? I thought I should share the technique with the rest of you. It’s rather simple once you break it down into it’s components which are:

• text (okay, that one’s kinda obvious)
• icon
• button background
• button border
• hover states

We’ll skip the text part, that’s some basic css styling, but you can see the example in the codepen.

The Icon

The icon is rendered via an :after psuedo element. The content of this element would be the white icon – it’s a character, not an image. Since it’s a character, I can then also define a background for the icon. I’ve made this background a circle through the use of css3′s border-radius. Note that the icon inherits it’s font colors and sizing from the button styles.

Check out this Pen!

The Background

The background is a CSS3 gradient. If I was implementing this in a real project I’d use something like Compass’s CSS3 mixins to improve the legibility of the code.  In this example I’m using a standard two stop linear gradient (with the added bonus of greater IE support), but you should play around with multiple stop or layered gradients for a nicer effect.

Check out this Pen!

The Border

Depending on your browser, your button may already have a nice looking border. We want to standardize this.

The border here is specified with a different color for each side. The colors vary slightly from the button background, giving the button a beveled effect. In this case the “light” is coming from the top left, so the top border, is the lightest, the left the second lightest, the right the third lightest, and the bottom the darkest.

The final code:

Check out this Pen!

Alfred James Forst, born September 7th

And unfortunately it’s been keeping me from being as active as I’ve hoped as far as blogging. I’ve never been the fastest or most prolific writer, far from it, writing for me has always been a drawn out process despite my having an English degree. However, this past year has brought a number of personal accomplishments that have kept me quite busy outside of work. My husband and I bought our first home (in the burbs, oh the horror) and then welcomed our first child, Alfred James Forst on September 7th. It’s amazing becoming a parent, and to be honest I had no idea what sleep deprivation really was before this. (Silly me, I thought staying up all night coding would prepare me for staying up all night with a kid).

Hopefully now that we’re getting a little more sleep, I’ll be able to be a bit more active with the blog posts again. I’ve also switched my focus in the past year from Flex development back to the HTML development I originally started my web dev career with, so expect to seem more posts along those lines.

gRaphael isn’t as robust as Flex charting, but with some tweaking I think you can get it to suit your charting needs for a HTML based site.

I’ve started experimenting with the Pie control, basically recreating the demo from the gRaphaël website. It’s really easy to get set up, but from what I can tell, it lacks features like labels on the wedges themselves (similar to what we see in flex), and there seem to be some layout issues with positioning the pie relative to the legend.

There’s not a lot of documentation out there for Raphael, so maybe there are work-arounds for these issues, or maybe I’m just doing something wrong. I’ll need to dig through the Raphael code a bit more to figure it out.

My gRaphael Pie Chart Code

For those of you not on the tech side of things, here’s a brief breakdown:

• HTML5 – HTML is a markup language. It declares the structure of our content. HTML5 is a new version of HTML, adding new tags that allow us to define the parts of our HTML page. Much like a outline, the HTML defines the content of the page. HTML5 has added new tags such as video, header, and section, that better allow us to describe our HTML pages.
• CSS3 – Just as HTML5 is the latest iteration of HTML, CSS3 is the latest iteration of CSS. CSS stands for “Cascaiding Style Sheets” and defines the style (a.k.a. the design of the page). An HTML page viewed without it’s CSS should theoretically still be perfectly legible and usable, just boring looking.
• JavaScript – The magic behind the webpage. It’s what makes things move, defines complex svg shapes, creates motion, adds and removes parts of the page on demand, loads dynamic content, etc.

However, I understand why web users are confused. There’s not really a clear label for this type of development, at least not one that’s quick and easy to use. Sites use terms like “HTML5 and related technologies” (slate.com) or “HTML5 and web standards” (apple.com) which easily becomes abbreviated to HTML5, confusing less technical web users. I think we need a clear term to describe this new type of web development, one that doesn’t lump JavaScript in with CSS3 and HTML5.

I’m not sure what this new term should be. I’ve seen some suggestions, some calling it Web 3.0 (confusing, as Web 2.0 is more of a reference to a visual style than a programming style), but most are some variant of HTML5… and some other stuff. We need a nice simple term like DHTML (that’s Dynamic HTML for you young’ns), so here are some suggestions: iHTML (inspired by Apple, who are really pushing for a richer HTML experience), fHTML (after all, it’s the “future of web development” – also what one may be saying when trying to convince IE7 to degrade gracefully), but these names still put the focus on the HTML component of this type of development. Maybe we should just call it “super awesome new internet stuff” (SAWIS for short)? What are your suggestions?

//Update: After a brief, unscientific survey of twitter, it seems we should just use DHTML. I think it works!

If you do want to write your own css however, you can – and I ended up going this route when I was having trouble adding id’s in the TypeKit control panel. I’m not sure if this is a TypeKit issue, or me just doing something wrong, but in the end, I’m usually happier when I’m managing my own code, so it’s great that typekit also has this option (it would be rather strange if it didn’t).

The other great thing about TypeKit is that they offer a trial membership level – I think 1 website, restricted to two fonts, but it’s great for trying it out.

My only problem is the font selection. I love small caps and there just aren’t enough serif small caps options. So off to try the next site…

Now if I’m not a big slacker (it happens sometimes) hopefully in the next few weeks I’ll update this blog with a new design, and nice typography, instead of this boring old default wordpress theme. I’m hoping to use a few of these new tools to make my site super awesome looking:

For webfonts:

• typekit (webfonts for a yearly subscription)
• typechart(where you can purchase fonts w/ webfont licenses for a resonable fee)
• google web fonts (I’m not quite sure how I feel about these fonts, but it’s nice of google to make them freely available)
• kernest(has a large number of free and inexpensive webfonts)

For layout:

• typograph – scale & rhthym (for those Elements of Typographic style nerds out there)

And since webfonts aren’t perfect, help for choosing more unique backup (for those browsers that don’t support webfonts), and body fonts:

• fontspring
• revised font stack

Hopefully you’ll find some of these links as useful and inspiring as I have.

There seems to be some confusion in the community as to the difference between FXG graphics and MXMLG (MXML Graphics). FXG is used to create static vector files, and are frequently produced using Catalyst or other Adobe software, although they can be written by hand.

MXMLG’s format is very similar to that of FXG – they use a number of the same tags. Adobe’s even published a helpful guide on converting FXG to MXMLG. However, MXMLG is much more powerful as it’s rendered at runtime, and as such, you can customize it on the fly, even adding styling hooks to change properties via CSS.

The results from my benchmarking were somewhat surprising – I had assumed that FXG would use less memory, but it actually uses the tiniest bit more.

In both tests, I created 100 buttons and applied a skin to each of these buttons via the ‘Button’ css selector. The skins where identical, except in one I used a FXG component, and in the other I used MXMLG.

The Results

The swf’s themselves were fairly similar in size 41,020 bytes for the MXMLG version, FXG at a slightly lower weight at 40,900 bytes.

So the two demos used almost exactly the same amount of memory, the FXG version using 3K more at max memory – see for yourself:

The Skin Code

And just in case you don’t believe me that the code is almost identical, here’s it is:

FXG Skin:

The FXG Component:

The MXMLG Skin:

These demos are similar to some of the demos I’ve posted previously, and all build upon the same base of code:

(right click and view source for all) – also note I couldn’t include akzidenz w/ the demos, you’ll have to comment that out or set up your own font for that to work.

The slides are available here:

However, when I go to implement the scrollbars in DataGrids, I run into a problem where there’s a slight gutter between the row backgrounds and the scrollbar, where the data grid background colour shows through.

There’s a simple (although I feel slightly hacky) solution to this fix. In any of your data grids that are using thinner scrollbars, on creationComplete call myDataGrid.invalidateList().

I should note, I’m not sure if this is an issue with programmatic skins, for scrollbar graphics at least, I tend to always use pngs.