Posts Tagged ‘experimental’

CSS3 Button Tutorials and Techniques Revisited

Once upon a time when a web design required a nice, functional and scalable button it would have had to have been firstly designed in Photoshop, implemented with the sliding doors technique, and you may have had to spice things up with a little Javascript. With CSS3 everything is changing – everything is easier and certainly better.

As well as button tutorials and techniques we have also showcased some CSS3 tools and generators, you will find these at the bottom of the post.

Throughout this Christmas week we are taking a look at the most popular and most resourceful articles that we have published in the past year.
I promise that by next week normal service will resume with even higher quality articles, with even more resourceful posts and, of course, some highly inspirational posts. I can hardly wait !
Hope you have all had a great Christmas!

This article was originally published on February the 15th 2010 and entitled 20 CSS3 Tutorials and Techiques for Creating Buttons.

Pretty CSS3 Buttons

CSS3 Buttons
The Objective of this tutorial is to create a set of button styles that are cross browser compliant, can degrade gracefully for non CSS3 compliant browsers and are are entirely scalable, meaning that you can make it a variety of sizes and colors with ease.
This tutorial lends its self heavily from the Super Awesome Buttons tutorial from Zurb, with some insightful and useful alterations and additions.
Downloads and Docs »Demo »

CSS3 Button That Degrades Nicely

CSS3 Buttons
There was a time where creating a nice looking, scalable button required heavy use of images, the sliding doors technique and even some Javascript.
As it stands a lot of the modern browsers support the CSS we would like to use to create a nice looking button. Firefox, Safari and Opera all have support for rounder corners, box shadows and text shadows.
What used to take six steps and lots of extra mark-up, images and CSS, now only takes three steps and some simple CSS3.
Downloads and Docs »Demo »

Dynamic Buttons With CSS3

CSS3 Buttons
The example in this tutorial demonstrate how to create nice looking, dynamic buttons that are fully scalable using the CSS3 properties border-radius, box-shadow and RGBa.
By using RGBa color values, the button and text shadows will always blend well with any color you choose for your button, no matter if you want the button to be green, red or blue – The code will always remain the same.
Downloads and Docs »Demo »

A Sexy Button Using CSS

CSS3 Buttons
Downloads and Docs »Demo »

Roll Your Own Google Buttons

CSS3 Buttons
Google has a new focus on webkit-specific properties thanks to their new Chrome browser, which uses a branch of the same rendering engine Safari uses.
The buttons use the -webkit-gradient function, which takes in arguments for the gradient start and stop points as well as color and then creates what the browser basically considers an image. That means you can use gradients anywhere you would use images, including backgrounds and even borders (with border-image).
Downloads and Docs »Demo »

Cool Overlapped Menu using Sprites

CSS3 Buttons
Here you can learn how to create a cool overlapped pure CSS menu/button using CSS sprites. CSS sprites can be termed as a method for reducing the number of image requests to a web page by combining multiple images into a single image, and display the desired segment using CSS background-image and background-position properties.
The photoshop source is also available for download, so that you can customize it as per your need.
Downloads and Docs »Demo »

Sexy Buttons

CSS3 Buttons
Sexy Buttons is a HTML/CSS-based framework for creating 'sexy' web site buttons. These stylish, attention getting buttons can be used for calls to action wherever user interaction is desired and can be used with either the <button> or <a> elements.
The entire 1000 icons from the Silk Icons set and the 450+ Silk Companion Icons set are included with the Sexy Buttons download.
Downloads and Docs »Demo »

Radioactive Buttons with CSS Animations and RGBa

CSS3 Buttons
Using CSS animations in Safari, you're able to turn an otherwise ordinary button into a glowing, radioactive mess of awesome.
To make it work, you first have to specify all your button styles and then you add the shadows. Now, in the animation, you switch from a box-shadow that matches the background color to the color of the button to give it the glowing effect – And then you add in some animation. Awesome!
Downloads and Docs »Demo »

Super Awesome Buttons

CSS3 Buttons
This is another tutorial lending itself from the perfectly titled the super awesome buttons, from Zurb. This time the developer has extended them to improve the cross browser compatibility, added a nicer design for when the buttons get clicked and finally removed the necessity to set to different background colors for different states of the buttons.
Downloads and Docs »Demo »

CSS3 Buttons from CSSPlay

CSS3 Buttons
This demonstration, from Stu Nicholls of CSSPlay, will work in Firefox, Safari and Google Chrome and shows how to style buttons using just the border radius, drop shadows and gradient fills.
No graphics have been used in the demo and no extra markup. If you wanted to be adventurous you could also add a hover state change of gradient fill to give an illumination effect.
Downloads and Docs »Demo »

Shiny Happy Buttons

CSS3 Buttons
In this tutorial you will build buttons that use no images, neither in your HTML nor your CSS. There will be no sliding doors and no image replacement techniques. Just straight up, CSS, CSS3 and a bit of experimental CSS. The finished button will be compatible with pretty much any browser (though with some progressive enhancement for those who keep up with the latest browsers).
Downloads and Docs »Demo »

CSS Sprite-Slide Button

CSS3 ButtonsThere are lots of tutorials on sliding doors button and lots on the sprite technique, but never a combination of both.This button combines the wonderful sprite technique with the sliding doors technique to make a beautiful button that not only loads in a snap but also looks great and scales to your text.
Downloads and Docs »Demo »

CSS3 Box-Shadow Button with Inset Values (Aqua Button)

CSS3 ButtonsThere’re plenty of tutorials that describe how to create a sexy aqua button with Photoshop, but none that will show you how to create the button using only CSS, more specifically CSS3 (-webkit-gradient, text-shadow and RGBa).
Downloads and Docs »Demo »

Simple Button with CSS Image Sprites

CSS3 Buttons
The button you’ll be creating in this tutorial takes on traditional styling using subtle gradients and outlines to give the impression of a rounded, three dimensional object. You will learn how to built this simple using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example.
Downloads and Docs »Demo »

Beautiful Buttons with CSS Gradients

CSS3 Buttons
Using a CSS-based method means you don’t have to regenerate images every time you change text, pages will load much faster and it allows text to be easily localized. In this case it also makes the page better from an accessibility standpoint – the text contained in the <a href> can add context.
In this demo you'll be shown a simple use for the new gradient capabilities and learn how to build a nice-looking embossed and beveled button using gradients and existing CSS properties.
Downloads and Docs »Demo »

Fancy Buttons Are Here!

CSS3 Buttons

Downloads and Docs »Demo »

Better Button and Nav Interactions

CSS3 Buttons
The iPhone user controls are responsive, like tactile objects in your hand. The panels slide and the icons glow when you touch them. It gives the illusion of tighter control over the app. Switching to a touchscreen-less web browser, interactions feel stiff and unsatisfying and lack of response creates a feeling of distance been the user and the interface.
In this well described tutorial the button you will build has a distinct :hover and :active states so that it depresses when clicked. The text also bumps down 1 pixel and the text-shadow changes to give it a 2-dimensional feel. Now that CSS3 is gaining wider support, most of this styling and behavior can be done pretty easily.
Downloads and Docs »Demo »

Nice 3D Ribbons Only Using CSS3

CSS3 Buttons
Yes, it is possible to create a simple and nice (3D) layout with some CSS3 properties, only using code and without the help of any graphic editor.
You will be using box-shadow to create a drop-shadow with RGBa, border-radius and the transform property for the single items of the list to make a nice 3D effect.
Downloads and Docs »Demo »

Super Awesome Buttons with CSS3 and RGBA

CSS3 Buttons
Super Awesome Buttons are certainly the Daddy of all the CSS3 buttons above. It was back in April 2009 that ZURB first published this tutorial, and set a high bench-mark for all to follow.
They may look like images, but loading speed and maintainability demonstrate that they are certainly not.
It's a simple button that is made possible by a transparent PNG overlay (for the gradient), border, border-radius, box-shadow, and text-shadow.
Yes, they are so awesome!
Downloads and Docs »Demo »

CSS3 Gradient Generator

CSS3 Buttons
The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS.
CSS gradients generate an image result, meaning the result of a CSS gradient can be used anywhere an image can be used, be it a background-image, mask,border, or list item bullet.
CSS3 Gradient Generator »

CSS3 Generators and Tools from Westciv

CSS3 Buttons
Developers from Westciv offer free to use CSS3 generators, that will not only help with your buttons but with almost every aspect of CSS3.
The tools are:
Linear and Radial Gradients »
Explore CSS gradients (both linear and radial) (an experimental feature in Safari 4, and a proposed addition to CSS3).

Shadows (Text and Box) »
CSS now lets you create drop shadows on text, and on the box of an element. Explore CSS3 transforms (supported in Opera 9, Firefox 3.5 and Safari 1.2 and higher), and box-shadows (supported in Firefox 3.5 and Safari 3.1).

CSS Transforms »
You can rotate, scale, skew, and otherwise transform HTML elements with CSS 3. Explore CSS3 CSS Transforms (supported in Opera 10.5, Firefox 3.5 and Safari 4 and higher).

CSS Text Stroke »
You can stroke text with experimental CSS text-stroke, supported in Safari 4.

You might also like…

15 jQuery Plugins for Better Web Page Element Layouts »
10 jQuery Plugins for Easier Google Map Installation »
25 Tutorials and Resources for Learning jQuery UI »
Creating a Web Development Environment using Google Chrome Extensions »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
50 Useful Tools and Generators for Easy CSS Development »
20+ Resources and Tutorials for Creative Forms using CSS »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials »


10 Shining Examples of Grid Based Web Design and Best Practices

The grid is not just a cool-sounding word (why sci-fi loves it), but it’s also an incredibly simple and effective principle for website design. By sticking to a grid, you can make your website look sexy and clean, have it be highly readable, scannable, and navigate-able for your visitors (increasing their chances of returning), and make it easier on yourself since you’re following an existing framework when designing your website. To help with design inspiration, you’ll even get 10 shining examples of grid-based website design.

grid

Before diving into the examples, you’ll get the best practices of effective grid-based website design. They are what was learned from looking at the 10 website designs – what makes a grid-based design effective. Of course, they’re not the only practices or rules, but they are a starting point if you’re just beginning to get into grid-based design.

Without further ado, here are the best grid-based design practices, followed by 10 shining examples of grid-based website design…

From analyzing the 10 shining grid-based website designs, here are 5 best practices learned in order to create an effective grid-based website design:

  • 1. Limit the number of elements – this is forehead-slapping obvious, for sure, but bears repeating: the more elements, the bigger the clutter, so keep it easy for you and your visitors by reducing as much as possible.
  • 2. Vary the sizes of each grid – monotony tires the eyes and makes nothing stand out, so include variety in the sizes of the individual grids (not so ones next to each other are varying, but the size of the individual grid boxes for each group of grids).
  • 3. Vary the arrangement of grid sections – similar to #2: avoid monotony by having some grids expand vertically, others horizontally, some groups be forming a square, others rectangles, and so forth.
  • 4. Don’t have each grid too close together (or too far apart) – the right spacing makes your website highly readable, navigate-able, and scannable, so feel it out when spacing the individual grid squares and grid sections next to each other (or ask others if it’s too close/far if in doubt).
  • 5. Have a single big square or rectangle for the featured website element – continuing from #2, have the featured website element—the one you want to draw immediate attention to—big one single big square or rectangle, as this will make it stand out from a grid section that’s a similar size and shape but is broken up by a lot of smaller grid squares.

Okay, now onto the good stuff…

365Mag

365Mag

The international electronic music magazine website manages to juggle a lot with a multi-column design, breaking each column down into square and rectangular grids. It’s an example of how a grid helps to keep a lot of content and information manageable for both the creator and the visitor.

Beatport

Beatport

The design for electronic music’s most popular online store is literally a futuristic user interface – like some console. A huge amount of information is kept manageable, techno-looking, and fun.

Bleep

Bleep

The design for Warp Records’ online music store is just like the music it stocks – slick yet quirky, futuristic yet classic, chin-stroking yet let-hair-down fun.

BPitch Control

BPitch Control

One of Berlin’s top electronic record labels puts the focus on the artists and their latest releases in their website’s design. Like Bleep, the design reflects the futuristic yet classic aesthetic. Gotta love vectors.

BT

BT

Another example of an effective artist site’s grid layout, this time for composer/electronic artist BT’s website. An awesome subtle touch: the “_BT” keeps things techno-futuristic without needing to resort to elaborate fonts or crazy visual flourishes.

Groove Armada

Groove Armada

Groove Armada’s artist website does an excellent job balancing the flashiness with a user-friendly interface and useful content.

Kompakt

Kompakt

The Cologne, Germany-based electronic record label and shop not only uses a clean grid to arrange the content, but cleverly—not to mention cheekily—uses the grid for the navigation menu as well, having each of the pages be a record on a square.

Nine Inch Nails

Nine Inch Nails

Yet another example of an artist’s website using a grid layout effectively. The black-and-rust design immediately shows that NIN is darker, cinematic, industrial music.

Plaid

Plaid

An effective website design with no menu items – nice. A no-nonsense 3 column layout gives you all you need to know about the duo: news/blog, when and where you can see them perform next, and what’s the latest stuff they released.

Warp

Warp

Warp Records’ home base balances the abstract and obtuse thanks to a grid-based design. Admittedly not the cleanest website out there, the design is featured here specifically for the aforementioned reason – it’s a good example of how a grid can be a foundation, keeping your website design grounded and easy-enough-to-navigate as you push the visual style to the experimental edges.

These 10 examples have hopefully shown the advantages to having a grid-based website design. When done effectively, it looks clean and is highly readable, navigate-able, and scannable – great for the visitor, who will now more likely return for more. And it makes adding future elements easy for you, since you simply add some more individual grid squares to a section, or add a new grid section below or next to an existing one. No need to figure out some weird spacing or whatnot.

No go forth, and use the power of the Matrix- er, power of the grid, to create your effective and clean website design.

Over to you: Do you like designing grid-based websites? What effective techniques and tips have you picked up? Any websites that are your favorite examples? Feel free to share in the comments section below.

You might also like…

A Review of Web Design Trends from 2010 →
The Trend of Minimalist Graphic Design →
How To Control Flow Within Your Web Designs →
Accessibility Principles for the Modern Designer →
Professional Structure and Documentation in Web Design →
Clear Your Mind to Focus on What Matters →
What the Future of Cloud Computing means for Web Designers →
Beginners Guide to Using the Power of Color in Web Design →
Understanding and the Meaning of Color Within Design →


Weekly Design News – Resources, Tutorials and Freebies (N.65)

This is our weekly column were we share our favorites posts, articles and resources with our readers from the previous week.

If you would like to be kept up to date with loads of fresh design news and resources, you can follow us on Twitter, on Facebook or even by subscribing to our RSS feed.

If you would like to see view some of our previous weekly design news round-ups, click here: Weekly Design News Archives →

20 Things I Learned About Browsers and the Web

20 Things I Learned About Browsers and the Web
20 Things I Learned About Browsers and the Web →

CSS Positioning 101 from A List Apart

CSS Positioning 101 from A List Apart
CSS Positioning 101 from A List Apart →

The Great Typekit Table

The Great Typekit Table
The Great Typekit Table →

Experimental Pure CSS GUI Icons

Experimental Pure CSS GUI Icons
Experimental Pure CSS GUI Icons →

Designing for iPhone 4 Retina Display: Techniques and Workflow

Designing for iPhone 4 Retina Display: Techniques and Workflow
Designing for iPhone 4 Retina Display: Techniques and Workflow →

Tips on How to Code Web Designs Better

Tips on How to Code Web Designs Better
Tips on How to Code Web Designs Better →

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery
How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery →

Slide-Down Mega Drop-Down Menus with Ajax and jQuery

Slide-Down Mega Drop-Down Menus with Ajax and jQuery
Slide-Down Mega Drop-Down Menus with Ajax and jQuery →

Opera mobile window chooser, recreated with jQuery

Opera mobile window chooser, recreated with jQuery
Opera mobile window chooser, recreated with jQuery →

nude.js – Nudity detection with JavaScript and HTMLCanvas

nude.js - Nudity detection with JavaScript and HTMLCanvas
nude.js – Nudity detection with JavaScript and HTMLCanvas →

Centage – The Smart'n Fluid CSS/LESS Framework

Centage - The Smart'n Fluid CSS/LESS Framework
Centage – The Smart'n Fluid CSS/LESS Framework →

Create a Realistic Folded Paper Text in Photoshop

Create a Realistic Folded Paper Text in Photoshop
Create a Realistic Folded Paper Text in Photoshop →

Classic Programming Quotes from the Storm Development Blog

Classic Programming Quotes from the Storm Development Blog
Classic Programming Quotes from the Storm Development Blog →

40 Mindblowing Photoshop Masterpieces

40 Mindblowing Photoshop Masterpieces
40 Mindblowing Photoshop Masterpieces →

National Geographic's Photography Contest 2010 (40+ Hi-Res Images)

National Geographic's Photography Contest 2010 (40+ Hi-Res Images)
National Geographic's Photography Contest 2010 (40+ Hi-Res Images) →

MightyDeals – Daily Deals for Creative Professionals

MightyDeals - Daily Deals for Creative Professionals
MightyDeals – Daily Deals for Creative Professionals →

Freebie: FatC Typeface

Freebie: FatC Typeface
Freebie: FatC Typeface →

Freebie: GardenC Typeface

Freebie: GardenC Typeface
Freebie: GardenC Typeface →

Freebie: Newsletter Sign-Up Form PSD

Freebie: Newsletter Sign-Up Form PSD
Freebie: Newsletter Sign-Up Form PSD →

Freebie: Vector Brushes Ver. 1.0

Freebie: Vector Brushes Ver. 1.0
Freebie: Vector Brushes Ver. 1.0 →

Where Have All The Comments Gone?

Where Have All The Comments Gone?
Where Have All The Comments Gone? →

Previous Weekly Design News…

Design News Roundup Archives →


10 Mind-Blowing Experimental CSS3 Techniques and Demos

As CSS3 gathers momentum, more and more new techniques and ideas are being published every other day. Each seems to explore exciting never seen before avenues, and ALL push CSSes boundaries ever further away. It really is an exciting time for web design.

The post should have been called “The Top 10 Kick-Ass Experimental CSS3 Techniques That Simply Blew My Mind Away!“, but instead we opted for the conservative route. Having said that, that title describes this post to a tee, and gives you a clearer idea of what you will find.

Anyway, here are our favorite CSS3 experimental techniques, And please, please do try this at home, we will really look forward to seeing your results.

Our Solar System – An experiment with CSS3

Our Solar System - An experiment with CSS3
This is a recreation of our solar system using the CSS3 features border-radius, transform and animation.
The orbits and planets have all been built using border-radius, while the animation have been done via –web­kit animation properties and transform. The result is amazing!

Star Wars HTML and CSS: A NEW HOPE


A couple of years ago, would you have thought that the Star Wars Episode IV opening crawl could be built by using only CSS and HTML? I didn’t either.
This inspirational experiment, built by Guillermo Esteves, only works in recent versions of Safari and WebKit on Mac OS X.
If you do view it in your browser, just be aware that it may not work work, and may even crash your browser. Never mind the warnings, go for it, try the demo!

Pure CSS3 Animated AT-AT Walker from Star Wars

Pure CSS3 Animated AT-AT Walker from Star Wars
This article is not only showcasing experimental CSS3, it actually shows you how to do it via a highly detailed and well written tutorial (by Anthony Calzadilla), that walks you through the process of creating a CSS3 animation of an AT-AT Walker from The Empire Strikes Back.

Pure CSS3 Spiderman Cartoon

Pure CSS3 Spiderman Cartoon
This experiment is a recreation of the intro to the classic 1967 Spiderman cartoon using CSS3 for animation and with a little dash of HTML5 for audio.

CSS3 Clock – 3D Transforms and Transitions


This experimental clock has been built by using CSS3s 3D transforms and transitions. JavaScript has only been used to set the time and turn the wheels, but the wheels themselves are built and animated using only CSS. There are two demos available, one with Javascript and one without.

Pure CSS3 Page Flip Effect

Pure CSS3 Page Flip Effect
By using CSS3 gradients, transitions, 2d transforms and clipping, Román Cortés has built this pure CSS3 – without Javascript – page flipping effect magazine.
You could add some Javascript and it would then be possible to do a full catalog viewer just like the existing ones Flash versions, which are popular.
It works in Webkit based browsers (Safari and Chrome) only.

Pure CSS3 Cube

Pure CSS3 Cube

Create Social Media Icons in Pure CSS

Create Social Media Icons in Pure CSS
These icons are an amazing and practical example of what can be achieved with CSS3. Built using the new CSS3 properties border-radius, text-shadow, box-shadow and gradients. They are an amazing achievement.

Curtis CSS Typeface by David DeSandro

Curtis CSS Typeface by David DeSandro
Curtis is the name given to this font, that has been entirely built using CSS3. All shapes are rendered by the browser, using a combination of background-color, border-width, border-radius, and a heavily reliance on absolute/relative positioning.

Anigma – Online Gaming using only CSS3 Animations and Transitions

Anigma - Online Gaming using only CSS3 Animations and Transitions
Benjamin Meyer has built the experimental Anigma, an online game designed to showcase some of CSS3s functionality, and in particular its transitions and animations.
Anigma is a simple puzzle game where the player has to remove the jewels from the screen, by moving matching jewels next to each other, and progress through multiple levels of varying difficulty.
The source files are also available.

CSS 3D Meninas

CSS 3D Meninas
This is another experimental demo from Román Cortés, this time he has taken the classic painting 'The Maids of Honour (Las Meninas)' and given the painting a CSS pseudo-3D/parallax effect. It is pure CSS.
It has been tested and it is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it even validates!

You might also like…

30 Pure CSS Alternatives to Javascript »
15 CSS3 Navigation and Menu Tutorials and Techniques »
20 CSS3 Tutorials and Techniques for Creating Buttons »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
50 Useful Tools and Generators for Easy CSS Development »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
20+ Resources and Tutorials for Creative Forms using CSS »