Posts Tagged ‘google chrome’

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 »


What the Future of Cloud Computing means for Web Designers

Cloud computing is an emerging technology which is revolutionizing the way we interact with the web. The ability to hold information anywhere across the world throughout multiple servers provides tools and resources never available to us before.

But what does this mean for the common web designer? With so many terms and tools to be found everywhere, how do we sort through the mess? In this article, we’ll be going over some groundbreaking ideas into what the future of cloud computing may hold.

We’ll also be taking a look at a few examples of everyday applications currently working within the cloud. Combining the desktop interface with rapidly growing mobile technology, we can get a glimpse into some wondrous possibilities for the future of the Internet.

How does Cloud Computing Work?

Before we delve too deep into the changing technology for web designers, we should define some concepts about cloud computing itself.

Currently the structure of the World Wide Web is held in servers via a client-server response. Physical machines connected throughout the entire world hold digital files for each website on their hard drives. Once queried by a user’s browser the server will respond back with whatever information is needed to properly display the website. When discussing the cloud we’re talking about a collective set of computers utilizing different resources from each one, in this way creating a very powerful virtual server.

This allows us to transcend the limits of physical servers and hardware. Running applications and software from many separate physical machines means a much easier computation load on each one. This means our web is churning out information faster and quicker than ever before.

This also implies we’re allowing for much more powerful software and tools to be run in a simple web browser, such as Mozilla Firefox or Google Chrome. We’re only limited by our Internet connections and browser capabilities, both of which are changing and growing quicker than ever before!

Practical In-browser Image Editing

Adobe produces the de-facto multimedia software used globally by designers and developers alike. Their software suites contain powerful image editing and vector graphics software with innovative tools and rendering engines. Most users have a high-tier computer just to run the programs efficiently.

However, imagine never needing to process these computations on your own computer. Imagine if it were possible to run software similar to Adobe Photoshop directly in your web browser, where all of the computation would be handled in the cloud.

It seems a bit far-fetched for today’s Internet, but it is a plausible idea. With software companies facing heavy profit losses through piracy, a logical next step would be to simply not licence out their software at all. Instead offer it free through a cloud of computers and charge per use. Although this isn’t a solid business model ready to be launched, this is something web designers may be able to see manifest in the next few years.

You can already see many implementations of smaller apps today. Aviary offers the most complete suite of tools for image editing and vector creation, there are also many smaller tools like the web 2.0 Stripe Generator, which allows you to create a striped background on-the-fly. Similarly favicon.cc is a favicon generator worked completely in-browser.
Here are some more online image editors Top 15 Web Based Image Editors

Now you can’t truly compare these simple applications to the power of running an entire design suite within your browser. But once we start seeing some changes in how cloud computing works we may not be too far off.

Editing and Processing your Website Updates Worldwide

The old web used simple File Transfer Protocol (FTP) to update files for your website. Currently the web is mostly controlled by dynamic content, meaning most pages are updated via an administrative backend or by user input.

You wouldn’t say the evolution of cloud computing is going to completely revolutionize the way we edit our files, but it’s interesting to look at the trends. As the mobile market grows and the average developer is running a smartphone in their pocket apps are going to fight for the chance to be your personal website editor.

Holding the ability to log into your server and edit files from anywhere around the entire world is an enormous step for the Internet. Additionally being able to carry your device anywhere makes the entire process even more convenient!

Where are we in Present Day Computing?

All of this futuristic technology may seem enticing and great, but you have to keep everything in perspective. Where are we currently in the timeline of cloud computing technology? Where can we expect to see serious growth in the next few years?

Well currently the leader in cloud computing is by far Google. They actively develop many applications held throughout their own server farms, all with practical testing in Google Labs. Many business wouldn’t even be able to run without them.

Accessing GMail and Google Contacts

When creating a Google account you are automatically signed up for all of their services. This means your username and password are the same for Google Reader, GTalk, and Google Mail, among all their other services.

GMail is the hottest cloud application to date. To begin with it’s a revolutionary mail client compared to any others (Yahoo!, MSN). Threaded replies, Ajax auto-updates, and a global contact list are just a few of the key features Google offers.

The real prize comes with their use of cloud computing to store e-mail messages and conversations throughout the world. This allows you to log into any computer and still have access to all of your e-mails and attachments from previous conversations.

Not only this, but existing users of GMail will know about the allotted server space assigned to each account. Towards the bottom of your GMail page you can see a message explaining how much space you’re currently taking up and how much is still free. At the time of writing this article Google has mine set to just under 7500MB of free space – or just about 7.5GB.

This revolutionizes the way we do business. Never worrying about losing important attachments or information from clients is a great feeling, all thanks to Google’s intelligent use of cloud computing.

Moving Docs and Spreadsheets into the Clouds

The next big step in cloud computing came when Google announced a revolutionary service: Google Docs. This allows anybody with an account to hold their own “folder” in the cloud with online documents, spreadsheets, and presentations.

These can be shared to anybody around the world, and you also have the ability to access them from any computer. This even includes mobile browsing such as the iPhone or Android devices.

Google has essentially launched a free version of Microsoft Office hosted online and accessible anywhere in the world – talk about groundbreaking technology. The doors are just starting to open for the Google Docs team. There’s so much innovation and potential to be added into this area of the web, and it’s a tell-tale sign showcasing the power of our expanding cloud.

There’s a lot of information out there about the potential for cloud computing. As we move into the ever changing future we can see how technology is advancing in our lives every day, and it’s only getting more powerful.

As web designers we frequently find ourselves caught up in the every day workings of the Internet. Keeping up on RSS feeds or updating Twitter have turned into simple tasks with the ease of access using mobile computing.

How many years can we expect before we see drastic changes in the way we work online? What new technology will drastically change the current web design market? Cloud computing looks very hopeful, but ultimately we’ll just have to wait and see.

About the Author

Jake Rocheleau is a passionate web designer and social media entrepreneur. He is frequently researching the latest trends in digital design and new-age Internet ideas. He’s also an advocate for the social media revolution – follow his updates on Twitter @jakerocheleau.

You might also like

The Most Powerful and Feature Rich Web-Based Code Editors (IDEs) →
Google Docs Templates for Web Designers and Developers →
25 Free Color Tools, Apps and Palette Generators →
10 Completely Free Wireframe and Mockup Applications →
Creating a Web Development Environment using Google Chrome Extensions →
10 Useful Web Applications for Freelance Developers →
50 Useful Tools and Generators for Easy CSS Development →
21 Typography and Font Web Apps You Can’t Live Without →
27 Indispensable Web Design and Development Firefox Extensions →


CSS3 Compatibility Tools, Resources and References for Internet Explorer

CSS3 is the coolest thing to happen to web design in a long, long time. With all of its incredible new properties, border-radius, box-shadow, border-image, transform to name just a few, a new dawn has arrived, and opened up a multitude of powerful and exciting options that have refreshed the web design community as a whole. Yes, we really do love it!

Not everybody loves it, well, not as yet, anyway. They, of course is Internet Explorer and as you will probably, they are trying to love it, albeit very slowly. Until they are ready, we can either not support IE at all, and just allow our visitors to enjoy the CSS3 experience through Safari, Chrome and Firefox, or you could use some of the tools we have in this article, and beat IE into submission and support CSS3.

CSS3 Cross-Browser Compatabilty Tools and Resources

Sizzle JavaScript Selector Library

Sizzle JavaScript Selector Library
Sizzle is a completely standalone (no library dependencies) pure-JavaScript CSS selector engine designed to be easily dropped in to a host library. It supports virtually all CSS3 Selectors – this even includes some parts that are infrequently implemented such as escaped selectors (“.foo\\+bar”), Unicode selectors, and results returned in document order.
Sizzle JavaScript Selector Library →
Documentation →

Transformie

Transformie
Transformie is a tiny (5kb) jQuery plugin that you can embed into web pages that renders CSS Transforms by mapping the native IE Filter API to the CSS transitions as proposed by Webkit.
Transformie →
Documentation →

CSS3 PIE: CSS3 decorations for IE

CSS3 PIE: CSS3 decorations for IE
3 Pie (download) is a set of CSS “behaviors” that can be attached to any CSS file by way of the behavior element in order to add rendering support to Internet Explorer 6, 7 or 8 for the more popular CSS3 rendering features: border-radius; box-shadow; border-image; multiple background images; linear-gradient as background image.
CSS3 PIE: CSS3 decorations for IE →

cssSandpaper – a CSS3 JavaScript Library

cssSandpaper – a CSS3 JavaScript Library
The cssSandpaper JavaScript library looks at the stylesheets in an HTML document and, where possible, smooths out the browser differences between CSS3 properties like transform, opacity, box-shadow and others. This script is not only useful for developers who want to support CSS3, it is also useful in other browsers which implement their own vendor-specific variants of these properties.
cssSandpaper – a CSS3 JavaScript Library →

Modernizr

Modernizr
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers (ie. IE) that don’t yet support them.
Modernizr →
Documentation →

YUI 2: Selector Utility – Javascript CSS3 Selector

YUI 2: Selector Utility - Javascript CSS3 Selector
The YUI Selector Utility brings CSS3 Selector syntax to JavaScript, providing a compact shorthand for collecting, filtering, and testing HTMLElements.
YUI also works well with mobile browsers that are based on A-Grade browser foundations. For example, Nokia's N-series phones, including the N95, use a browser based on Webkit.
YUI 2: Selector Utility – Javascript CSS3 Selector →

eCSStender

eCSStender
eCSStender enables developers to patch CSS support in browsers and experiment with new features. It also enables designers to keep browser-specific hacks out of their CSS files.
eCSStender →
Documentation →

52Framework – HTML5 and CSS3 Framework

52Framework - HTML5 and CSS3 Framework
The 52framework provides an easy way to get started using HTML5 and CSS while still supporting all modern browsers (including ie6).
52Framework – HTML5 and CSS3 Framework →
Documentation →

CSS3 Please! The Cross-Browser CSS3 Rule Generator

CSS3 Please! The Cross-Browser CSS3 Rule Generator
CSS3, Please! is a small utility that allows you to edit the document in real-time and create your own personalised cross browser CSS3 rule.
CSS3 Please! The Cross-Browser CSS3 Rule Generator →

IE CSS3 pseudo-class selectors

ie-css3.js allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Simply include the script in your pages and start using these selectors in your style sheets.
IE CSS3 pseudo-class selectors →

IE CSS3 Text-Shadow & Box Shadow jQuery Plugins (jQuery.textshadow.js & jquery.boxshadow.js)

As you will know, CSS3 text-shadow is not supported in Internet Explorer, however it is possible to create an equivialant effect with the IE propertiary CSS Filter Blur. These jQuery plugins makes use of this IE propertiary and allows your web page to have cross browser support for text-shadow and box-shadow.
IE CSS3 Text-Shadow jQuery Plugin →
IE CSS3 Box-Shadow jQuery Plugin →

css3-mediaqueries-js

css3-mediaqueries.js makes CSS3 Media Queries work in all browsers. It is is a JavaScript library that makes IE 5+, Firefox 1+ and Safari 2 transparently parse, and allow you test and apply CSS3 Media Queries.
css3-mediaqueries-js →

CSS3 Support in Internet Explorer 6, 7, and 8 (.htc)

IE-CSS3 is an .htc (HTML component file ) script that provides Internet Explorer support for some new styles available in the upcoming CSS3 standard. This script rebuilds some of the elements in Vector Markup Language (VML), an IE-specific vector drawing language. VML supports things that are missing from IE's CSS implementation like rounded corners and blur effects.
CSS3 Support in Internet Explorer 6, 7, and 8 (.htc) →

curved-corner.htc (Rounded Corner HTML Elements using CSS3)

This is a behavior .htc file for Internet Explorer to make the CSS3 property " border-radius " work on all browsers.
curved-corner.htc (Rounded Corner HTML Elements using CSS3) →

Google Chrome Frame for IE (.htc)

Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer.
It will allow you to start using open web technologies – like HTML5 and CSS3 – right away, even technologies that aren't yet supported in Internet Explorer 6, 7, or 8.
Google Chrome Frame for IE (.htc) →

CSS3 Compatabilty Reference & Utilities

When can I use…

When can I use...
When can I use… is a compatibility table for features in HTML5, CSS3, SVG and other up and coming web technologies.
When can I use… →

Compatibility Master Table

Compatibility Master Table
Compatibility Master Table →

FindMeByIP – CSS3 Properties

FindMeByIP - CSS3 Properties
FindMeByIP – CSS3 Properties →

CSS Compatibility and Internet Explorer

If your Web site targets browsers that include earlier versions of Internet Explorer, you want to know the level of CSS compliance for those versions. This article provides an at-a-glance look at CSS compliance across recent versions of Internet Explorer, including support in Internet Explorer 8.
CSS Compatibility and Internet Explorer →

Internet Explorer 9 Test Drive – Internet Explorer Platform Preview

Internet Explorer 9 Test Drive - Internet Explorer Platform Preview
Interested in checking out the new web platform capabilities of the forthcoming Internet Explorer 9? You can try the Internet Explorer Platform Preview It includes HTML5 & CSS3 demos and speed demos.
Internet Explorer 9 Test Drive – Internet Explorer Platform Preview →

You might also like…

50 Refreshing CSS Tutorials, Techniques and Resources →
50 Awesome New jQuery Plugins →
40 High Quality CSS and XHTML Web Layout Templates →
40 Professional and Detailed Web Layout PSD Templates →
20 Free Web UI Element Kits and Stencils →
25 Completely Free Fonts Perfect for @fontface →
The Complete Web Design Style Series (700 Designs in 14 Categories) →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →
30 Pure CSS Alternatives to Javascript →