September 2010
2 posts
4 tags
BaCSS - A Base Stylesheet For Your Project →
I’ve been working for a short while on a project called BaCSS (pronounced “base”). It’s a stylesheet that is just that, a base set of styling for anything you’re building. It will add styling and layout to any site with a common HTML (including HTML5) structure.
More information & download
Github
I’d love to hear any feedback you have on the project...
4 tags
Google Chrome 6's new HTML5 features
With the recent release of Chrome 6 comes an update to it’s HTML5 support, here’s a run down of the new features supported.
You must, of course, be either using Chrome 6 or a browser that supports these features to view the demo’s. Check if your browser does.
The Hidden attribute
This does exactly what it says on the tin, really. Attaching it to an element will hide it, as...
August 2010
1 post
7 tags
Entitifier →
The Entitifier is a little tool that will convert any characters in text or HTML pasted to the correct HTML entities. It’s great for ridding documents clients have sent you of those horrible Microsoft Word quotes (and will even replace the relevant characters with the correct typographic entities).
There a couple of issues so if you have any Ruby knowledge, I’d welcome any help on...
July 2010
2 posts
4 tags
Semantic Tooltips With Pure CSS3 and HTML5
This technique is so simple that I’m really surprised nobody has come up with it before, please shoot me link if they have but I couldn’t find anything after some extensive Google action.
Currently, most people use something like this to produce a pure CSS tooltip:
<a href="#">Title <span>Tooltip</span></a>
(Code from CSSGlobe)
But this is another...
Understanding CSS3 box-sizing
There has long been a debate about how the box model should work. The developers of IE5 chose to exercise their creative license and use a model that differed to the official W3C specification of the time. Many believed that the IE model made more sense and in this article we’re going to explore the differences and see what we can do about it in CSS3.
Know your box model? Skip ahead,...
June 2010
12 posts
8 tags
Using abbr on Touch Devices
The situation with the :hover pseudo-class on touch devices is well documented and something that simply requires a different approach. The abbreviation HTML tag, however, is a different kettle of fish.
Simply putting the definition in brackets following the abbreviation is a possible solution (e.g. “HTML (HyperText Markup Language)”) but I’m a stickler for semantics and would...
5 tags
Multiple Borders on Dynamically Sized Elements...
I recently saw a blog post on Nettuts on how to add multiple borders to elements with simple CSS.
This method has some flaws in that text may be rendered unselectable and links unclickable, I’m working on a fix but Nicolas Gallagher has a great alternative method in his article on Multiple Backgrounds and Borders with CSS2.1.
There was one significant problem with this method: you had to...
5 tags
Coming up on An Innovative Web this summer
Just to whet your appetite slightly, here’s what’s coming up on An Innovative Web this summer.
The website is going to become completely self-hosted and rebuilt from the ground up including loads of great new features.
We’re going to conduct UX and UI case studies on large websites and help you give your visitors the best user experience.
A series on web design basics with...
5 tags
SaveTabs Safari Extension
I seem to be getting some kind of Safari Extension development bug. This extension fills a gaping hole in Safari’s functionality—it saves all open tabs in the current browser window and allows you to reopen them whenever you want, even across restarts of the browser.
This is a really inelegant solution but the APIs open to extensions are pretty limited at the minute.
Clicking the save...
6 tags
Send to Tweetie 0.4 and Send to LittleSnapper 0.3
Thanks ever so much to everyone that’s downloaded the extensions, I’m glad to hear that so many people are enjoying using them. After a few suggestions and bug reports there are now new versions of both extensions.
Send to Tweetie
Bug which resulted in an empty Tweet - not fixed but temporarily resolved by removing the title from the tweet. This will be back soon and enhanced with...
5 tags
Two New Safari Extensions: Send to Tweetie and...
With the release of Safari 5 we gained the ability to build extensions (something that’s been missing from the browser for a long time) so I had a play around.
I’ve created two very small extensions: Send to Tweetie and Send to LittleSnapper.
As these extensions both tie in with Mac applications, they are too Mac only.
Send to Tweetie
Send to Tweetie will - as the name states -...
CSS Three - Connecting the dots →
As a web community, we’ve made a lot of exciting progress in regards to CSS3. We’ve put properties like text-shadow & border-radius to good use while stepping into background-clip and visual effects like transitions and animations. We’ve also spent a great deal of time debating how and when to implement these properties. Just because a property isn’t widely supported by browsers or fully...
The Future of CSS Typography →
The challenge for any web designer is to create style sheets that are unique, distinctive and can be replicated in a way that will create brand recognition. To that end, the future of CSS typography is an ever evolving and changing field that is constantly being updated, altered, and manipulated to both meets the growing demands of clients and the challenging demands of the market.
The HTML5 Family: CSS3 →
webkitbits:
Web designer Jay Robinson adds to Ext’s blog series on HTML5 with this great post covering CSS3:
“Many of the benefits people associate with ‘HTML5’ are actually provided by CSS3 and Javascript. Ultimately, HTML only defines content structure, while Javascript provides behavior and CSS provides presentation. CSS3 builds on the widely supported CSS2.1 spec, and allows for truly...
Advanced CSS3 Box Shadow Techniques →
Here is a five minute video that will teach you some advanced CSS3 Box Shadow techniques.
How to use RGBA in IE →
The modern browsers all have rgba(), giving you a semi-transparent background colour while keeping the foreground elements (text, images) fully opaque. But if you want to use that in your design, what about IE? Here’s how to do it.
Web Development for the iPhone and iPad: Getting... →
According to AdMob, the iPhone operating system makes up 50% of the worldwide smartphone market, with the next-highest OS being Android at 24%. Sales projections for the Apple iPad run anywhere from one to four million units in the first year. Like it or not, the iPhone OS, and Safari in particular, have become a force to be reckoned with for Web developers. If you haven’t already, it’s time to...
May 2010
11 posts
HTML5 Globals and You →
WordPress 3.0 RC1 released →
Another great development for the WordPress team.
Using CSS3 Transitions, Transforms and Animation →
A great writeup on all of the new CSS3 transition, transform and animation features. Definitely worth a read through.
Google Reader Latest To Kill IE6 Support →
Another small victory.
How to create offline web apps on the iPhone →
Why does Apple's web app store lack a mobile...
The lack of a mobile customised experience renders the web app store nigh on useless. The content of the page is useless to anybody browsing on a desktop yet it’s still horrible to use on a mobile device. Apple clearly has the resources to create a native feel to its web app directory yet still fails to throw even the slightest bit of love its way. I fully understand that Apple wants to...
Pure CSS Text Gradients →
What is The Future of Web Development? →
Video JS - A HTML5 Video Player →
Looks like a good solution although I prefer SublimeVideo.
Examples of CSS3 in the Wild →
Thorough roundup - as always - from Six Revisions on some recent examples of CSS3 in general usage.
Who? What? Where?
An Innovative Web is a blog run by Sam Bowler, a web design student at the University of the West of England, Bristol in England. I will be researching the extent we, as web developers and designers, can stretch the limitations of the web as we know it so why not join me for the ride?