Once upon a time, or really, several years ago, the goal of any decent front-end web developer was to implement a pixel perfect design. Hours, and even days were spent trying to get IE to display the same content as firefox, and it took not an inconsiderable amount of skill (and a lot of images) to achieve these layouts.
Times have changed though. Clients are better informed and are much more aware of the technologies that are available out there. This means they’re excited to try the latest features of CSS3 and are much more willing to use the new tags offered by HTML5. What this also means is that they have to give up their ‘pixel perfect’ requirements and embrace the capabilities of the various browsers. Our job, as UI developers is to be aware of, and keep our clients informed as to what is possible in the various browsers.
Our goals then, instead of creating identical experiences in ever browser—mobile or not—should be to create the best experience in each, within the abilities of that browser.
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)
- 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 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 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!
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!
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.
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…
So one of the things I like about Flex / Flash development is the fact that you can use pretty much any font you like, and it displays, fairly well across all browsers and operating systems. But even those of us who make plain ol’ HTML sites are becoming more appreciative value of good typography on the web, and we’re gaining awesome new tools to implement this good typography.
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:
- 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)
And since webfonts aren’t perfect, help for choosing more unique backup (for those browsers that don’t support webfonts), and body fonts:
Hopefully you’ll find some of these links as useful and inspiring as I have.
Hackers got at the site, not sure if it’s from a media temple vulnerability (they’re claiming it’s not off course) or a wordpress vulnerability or the combination of the two, but it’s annoying to have to re do your blog while on vacation! The site is mostly back up but I still need to set up a bunch of plugins / retrieve my file backups from home so it’ll be a few days before everything is fully back up and running.
As a follow up to Elad Elrom’s post on FXG increasing swf file size and taxing the CPU I thought I’d benchmark FXG (compiled graphics files) vs runtime MXML graphics.
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 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:
Thanks everyone who attended my Flex 4 Skinning and Styling talk last night at Flash Coders New York! For those of you who weren’t there, we covered the basics of creating programmatic skins in Flex 4 (and why you would choose to use programmatic skins over skins created in catalyst or png skins.
These demos are similar to some of the demos I’ve posted previously, and all build upon the same base of code:
Posted in Misc.
Tagged flex, flex4, skinning
I’ve always felt that the default (flex 3) scrollbars are sorta chunky, like they might need to go on a diet. Apparently the designers I work with feel the same way, as they’re always making them skinnier than the default 16 pixel width.
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.