Category: CSS

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

/ 0 Comments / Category: CSS/Tags: CSS3

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.

Free CSS3 Menu Maker

/ 0 Comments / Category: CSS/Tags: CSS3, Menus

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.

25 Online CSS Compressors to Optimize Your CSS Code

/ 5 Comments / Category: CSS, Online Tools/Tags: css techniques, Website Optimization

CSS Compressors - CSS Optimizers

One of the most important thing when developing websites is page loading speed, to load as quickly as possible, especially in the case of large websites with lots of CSS code where faster loading means increased usability and user satisfaction.

CSS Compression tools improves your load time performance by removing comments from code, placing each command in one single line, removing unneeded ‘white space’ characters like space, new line, and tab to reduce its size.

Keep in mind, if you really want to optimize website performance, after the development stage, you should go further with CSS sprites, minifying JavaScript, gzip compression and caching your files.

Try out these online CSS optimization tools, some of them also offer JavaScript compression, and see how they can speed up website response time and save your bandwidth as well.

Online CSS Compression Tools

1. cssdrive.com CSS Compressor – comes in 2 modes: Normal and Advanced. You can choose from three levels of compression. The ‘Normal’ mode should work well in most cases, creating a good balance between the two.

2. Clean CSS – CSS Formatter and Optimiser based on csstidy available in English, German and French.

CSS3 Code Generator with Preview – CSS3.0 Maker

/ 0 Comments / Category: CSS, Online Tools/Tags: CSS3

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.

Extremely Lightweight Typography Focused CSS Framework – Atatonic

/ 1 Comment / Category: CSS/Tags: css framework

Atatonic CSS Framework – as vertical rhythm is one of the most important things in design, this lightweight CCS framework has it’s main focus on typography, with added grid support.

The main goal of this project is to provide a solid base to start with every project. The combined file is only 5kb (gzipped~3kb).

View DEMO , or checkout the code

Atatonic CSS Framework is still very young. Extra features will be added as plugins, like a stylesheet for forms, icons for buttons, better form controls and maybe some GUI standards such as dialogs, bars, buttons and more.

HTML5-CSS3 Base Templates – HTML5 Reset

/ 0 Comments / Category: CSS/Tags: CSS3, HTML5

HTML5 Reset – is a set of HTML5 and CSS3 templates you can use as a base template to start a new project.

This reset package by Monkey Do is more than just a single style sheet. It includes a basic HTML5 document structure, with all the every day stuff like title, header, footer, etc., clearing floats, correcting IE problems, and much more.

You can choose from two versions, the ‘full version’ (fully commented or without comments) and one that has just the basic features.

P.S. Another similar project we mentioned 2 days ago at V-B Magazine: HTML5 Boilerplate - Base HTML/CSS/JS Template.

Experiment and Learn about New CSS3 Capabilities – CSS3 Playground

/ 0 Comments / Category: CSS, Online Tools/Tags: css techniques, CSS3

CSS3 Playground – online tool – web application to experiment and learn about new CSS3 capabilities. Primarily those than conform to the progressive enhancement philosophy, which means that the styles can be used on all sites without severely changing the experience on browsers that does not support them.

When changing the different settings in the panels at the left, all CSS3 properties like CSS3 radius, box-shadow, text-shadow, transforms, are instantly applied with generated CSS code.

The styles applied when changing the different settings should follow the principles of progressive enhancements and will work in all browsers like Firefox, Chrome, Opera, Safari and Internet Explorer, but some properties will not have an effect when changed depending on the browser capabilities (IE 8 and older versions).

Base HTML/CSS/JS Template – HTML5 Boilerplate

/ 1 Comment / Category: CSS/Tags: css techniques, CSS3, xhtml

HTML5 Boilerplate – is a base HTML/CSS/JS template that helps you develop a fast, performance optimized, robust and future-proof site.

With HTML5 Boilerplate you’ll get the best practices baked in:
cross-browser compatibility, including IE6, performance optimizations, optional features like cross-domain Ajax and Flash, mobile browser optimizations, graceful degradation and more.

A starter apache .htaccess config file prepares your site to serve HTML5 video, use @font-face, and gzip compression.

Make Internet Explorer 6-8 CSS3 Capable – CSS3 PIE

/ 0 Comments / Category: CSS/Tags: css techniques, CSS3

CSS3 PIE – Progressive Internet Explorer – makes Internet Explorer 6-8 capable of displaying a number of CSS3 decoration properties.

CSS3 PIE doesn’t require any browser hacks or loads of javascript, you just need to add the following line in the CSS file like: behavior: url(PIE.htc);

Currently supported CSS3 features are:

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

Documentation section describe in detail the exact levels of support PIE has for certain CSS3 properties.

CSS3 New Features with Examples and Browsers Support

/ 0 Comments / Category: CSS/Tags: css techniques, CSS3

CSS3 Click Chart by Impressive Webs – CSS3 “help chart” that displays examples of the new features in CSS3.

Each example visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page to see CSS codes used to create them, feature description and browsers support on that particular feature.

The CSS3 properties currently included (with more to come) are: box-sizing, border-radius, shadows, RGBA colors, multiple columns, HSLA colors, gradients, multiple backgrounds