Css-only Alternative to the Select Element | PEPSized Css-only Alternative to the Select Element | PEPSized In this tutorial, I will present you my alternative solution to the select form tag. It’s css-only and it looks simple but really nice. We will use a list of radio elements, styled as a drop-down list, that will look and behave similarly to the select element. Of course you have to provide some fallback for mobile devices (and IE8 if you wish). I discuss that briefly in the final part of this tutorial. Check the demo and choose your favorite beer.
Beautiful typography always intrigues me and I'm always looking for ways to combine web typography and technology to make them display better. Last month I got a chance to experiment with CSS3 typography techniques and see how far I could mix and match these techniques to create a visually stunning piece of typography on the web. Today, I’ll show you how you can use these CSS3 properties to spice up your typography or create stunning text effects in a way you don’t think is possible. Note: These effects will only work on Webkit browsers but I have added fallbacks to make it viewable on other browsers. Cutting Edge CSS3 Typography Techniques Gradient on Text Cutting Edge CSS3 Typography Techniques Cutting Edge CSS3 Typography Techniques
Awesome CSS3 animation menu | css3 menu,animation navigation menu Awesome CSS3 animation menu | css3 menu,animation navigation menu In this new category called “Tips and Tricks” we will introduce some quick and interesting methods around web development and web design. In today’s tip we’ll show you how to spice up your menu by adding a neat hover effect to it. The idea is to slide an image out to the right when hovering over a menu item. Each menu item (which is a unordered list item in this case) will have an anchor containing two spans and an image: <ul class="mh-menu"><li><a href="#"><span>Art Director</span><span>Henry James</span></a><img src="images/1.jpg" alt="image01"/></li><!
11:57AM — Tuesday, April 9, 2013. It’s been about two and a half years since I released the 1140px CSS Grid. Initial response was exciting; lots of people used it. However, a lot has happened in that time. The 1140px CSS Grid System · Fluid down to mobile

The 1140px CSS Grid System · Fluid down to mobile

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

CSS3 Generator

CSS3 Generator
CSS3 Linear Gradients (new style syntax)
CSS Layout Generator CSS Layout Generator is online web tool for creating HTML+CSS templates (layouts). This tool generate an archive (in just a few clicks) containing two files: HTML & CSS, which represent the basic layout for your future site. Service can be useful to those who know some basics of HTML and CSS technologies, but the creation of a core part of page (ie structure, consisting from the header, the column with the content, the sidebars and the footer) is causes certain difficulties. Layouts generated by CSS Layout Generator has been tested are displayed correctly in modern and popular browsers.

CSS Layout Generator

The 1KB CSS Grid by Tyler Tate :: A simple, lightweight approach
Blueprinter - Blueprint CSS Generator
If you're familiar with the grid, a bit of design and basic typography, using this script should be pretty easy - most of the functions are pretty self-explanatory. If you're unfamiliar with grids in general, you could start by reading an excellent series of articles by web designer Mark Boulton. For those who want a real understanding of the theory of grids in relation to design and typography, I strongly recommend this book. On the Columns tab, you can start your design in two ways: Fill in the number of columns, total width, gutters and margin widths, all specified in pixels - then press the design button. Grid Designer 2 Grid Designer 2

Ultimate CSS Gradient Generator - ColorZilla.com

Ultimate CSS Gradient Generator - ColorZilla.com background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */

Typetester – Compare fonts for the screen

Typetester – Compare fonts for the screen Browsers supported* JavaScript In order to use the application, please turn JavaScript on.
Use this CSS3 text shadow generator to easily add text shadow styles into your web project. Your browser does not support the CSS3 text-shadow property. You can still use this tool to generate the CSS3 rule, but you won' be able to see the results. <div class="error_msg">Please enable Javascript to use this page. Text Shadow Generator | CSS3 Generator | CSS3Gen Text Shadow Generator | CSS3 Generator | CSS3Gen

CSS Sprites - Online CSS Sprite Builder / Generator

Tue Jun 15 14:07:26 CEST 2010 - Users Feedback and Enhancements. What is it? What am I doing here ? Every web developer or designer who had to deal with CSS sprites will understand that it might be kind of harsh to determinates CSS coordinates on sprite sheets, even using developers tools like Firebug. So, here's the app that solves it all up!