Posts

Scalable CSS3 Gradient Buttons

CSS3 Buttons – a set of scalable CSS3 gradient buttons created with pure CSS , without any image or Javascript.

The buttons are scalable based on the font-size, button size and rounded corners can be adjusted by changing the font size and padding values.

The buttons can be applied to any HTML element such as div, span, input, button,  div, a, p, h2, etc. with fallback – if CSS3 is not supported, it will display a regular button just without gradient and shadow.

View DEMO

Pure CSS3 gradient buttons

CSS3 Text to Path Generator – CSSWarp Online Tool

CSSWarponline tool that allows you to attach any text to an arbitrary bezier path or a circle and create Illustrator like “warped” text with pure CSS and HTML.

CSS3 brings new text-transform options like rotation, skew, matrix, etc. By applying the right transformations to every single letter it is possible to create the illusion of text following a path with CSS only.

With CSSWarp – text to path generator you can use google font directory and it is also possible to use your local fonts.

Blog post about CSSWarp

CSS3 text to path generator

Simple CSS3 Buttons with Icons

CSS3 Buttons – a simple CSS3 buttons framework for creating GitHub style buttons with icons.

To create a button you just have to define button class like class  .big for creating bigger buttons, class .pill to create pill-like rounded buttons, etc.

CSS3 buttons framework with icons

You can create grouped buttons that are linked together by using the .left, .middle and .right classes. Button that triggers a negative action, like deleting post, can be easily styled by using the class .negative

CSS3 Buttons framework supports a wide range of icons that can be easily added to any button by adding a span tag inside the anchor tag with the class of .icon

Online CSS3 Code Generator Tool

CSS3 Generator – is a free online tool for generating CSS3 code with detailed comments.

You can easily change common CSS3 rules like border, border-radius, box-shadow, opacity, etc. In detailed settings there are options to fine tune all the rules.

CSS3 generator comes with live preview, you instantly see the results.

online CSS3 generator tool

84 Pure CSS GUI Icons

Pure CSS GUI icons – an experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML only.

The Demo Page contains a full set of user interaction and media player control icons, as well as other common icons.

Tested in: Firefox 3.5+, Chrome 5, and Opera 10.6.

84 CSS only GUI Icons

Cross-browser CSS Gradient Generator from Colorzilla

CSS Gradient Generator – easy to use online tool for creating cross-browser CSS3 gradients.

The resulting CSS gradients are cross-browser – will work in all modern browsers and will also fall back to a simpler gradient in Internet Explorer. In the ‘Preview’ panel there is quick preview how the IE fallback gradient will look in Internet Explorer.

The ‘CSS’ panel always has the CSS for the current gradient for easy copy/paste into your stylesheet.

CSS gradient generator

Important: You’ll need a recent version of Firefox, Chrome or Safari to use this Gradient Generator.

CSS3 Buttons – Animated Bubble Buttons

Animated CSS3 Buttons – a useful set of CSS3 buttons with the power of CSS3 multiple backgrounds and animations. 4 color themes and 3 sizes are available.

With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary.

View DEMO

CSS3 Buttons - Animated bubble buttons

Buttons are entirely CSS3 based. You can create your own colors and shapes by modifying the CSS file.

Note that only Mozilla and Webkit browsers support CSS gradients at the moment. The rest of the browsers will display the fallback background color.

Stylesheet for Creating Beautiful Keyboard-Style Elements – Keys.css

Keys.css – a simple stylesheet to render beautiful keyboard-style elements as a great way of showing hotkeys.

Keys.css is compatible with all modern browsers, uses CSS3 properties, and degrades gracefully in older browsers. Adapts to any font-size and is easy to use.

The stylesheet has 2 classes, for light and dark keys (dark style is the default) for good visibility on every background. You can also create your own variations.

Keys CSS - keyboard style css3 elements

Free CSS3 Menu Maker

CSS3 Menu – Windows and MAC application for creating beautiful and Free CSS3 Menus and drop down navigations with CSS only, no JavaScript or images.

The menus are based on ul/li structure and CSS, can be vertical and horizontal, and works in all modern browsers.

The dropdown navigation also works on non-CSS3 compatible browsers but the rounded corners and shadow will not be rendered.

Free CSS3 menu maker

CSS3 Code Generator with Preview – CSS3.0 Maker

CSS 3.0 Maker – a free CSS3 generator tool to experiment with CSS3 properties and values and easily generate and download a simple stylesheet for your site.

When changing the different settings in CSS3 Styles Panel, all CSS3 properties like Border Radius, Gradients, CSS Transforms, CSS Animations, Text Shadow and so on, are instantly applied with generated CSS code and preview.

There is also CSS3 browser compatibility panel where you can see browser support for all CSS3 properties you experiment.

css3 online code generator