CSS

June 24, 2013 CSS , Design no responses # , , , ,

Buttons – A CSS Library For Creating Buttons

Buttons is a CSS library for creating highly customizable, flexible and modern web buttons. It is built with Sass + Compass and has support for square, rounded or circular buttons that can be flat or not and having custom effects (like glow).

CSS Buttons Library

The sizes, colors, effects and fonts used can all be changed with the help of variables and it can be extended easily.

June 14, 2013 CSS , CSS3 , Design no responses # , , ,

Magic – CSS Animations With Impressive Effects

We see lots of impressive CSS3 demos regularly: flipping, rotating or sliding items and more. Magic is a stylesheet that includes many of these CSS effects (also mentioned that “more will be added”).

Magic CSS Animations

The effects are collected under few categories (magic, perspective, rotate, bling, static, slide) and all of the effects are pretty attractive. Each of them has their own classes and the easiest way to use them is by adding/removing these classes to the targeted elements via JavaScript.

Requirements: No Requirements
Compatibility: All Modern Browsers

Website: http://www.minimamente.com/magic-css3-animations/
Download: https://github.com/miniMAC/magic

May 21, 2013 CSS , Design no responses # , , ,

Label.css – CSS Rules For Labeling Any Element

Label.css is a simple-yet-useful set of CSS rules that provide a global label usage.

Label.css

Each label can be attached to any element, positioned how we want (right, left, top, bottom, inside, outside) and can be animated with float or fade effects. It works by adding pre-defined classes to the elements and the content of the labels are stored inside the data-label attributes of each element.

Compatibility: All Major Browsers

Website: http://usablica.github.io/label.css/
Download: https://github.com/usablica/label.css

February 10, 2013 CSS , Design no responses # ,

Roole – A JavaScript-Powered CSS Preprocessor

We all experience how CSS preprocessors like SASS or LESS ease working on projects with complex styles.

Roole is another alternative that is inspired from SASS, LESS + Stylus and only requires JavaScript to work.

Roole

It has vendor-prefixing built-in so there is no need to use them, supports variables + conditional logic and allows us to define the format we want to code CSS.

Roole can work both on the client or server-side (nodejs) and it is documented well.

February 4, 2013 CSS no responses # , , , , ,

CSS-Only Tooltips With Hint.css

Tooltips are usually created and triggered with JavaScript. But, CSS is now powerful enough to handle a simple tooltip functionality itself. Hint.css is a tooltip library that is built with SASS and only uses CSS + HTML.

The library uses 

data

attribute,

content

property, pseudo elements and CSS3 transitions.

Hint.css

Tooltips are simple-yet-good looking, has arrows and can be positioned on any side of the parent element.

And, they don’t have to be visible onlyВ when hovered but can be set as “always showing” too.

Compatibility: All Modern Browsers

Website: http://kushagragour.in/lab/hint/
Download: https://github.com/chinchang/hint.css

December 3, 2012 CSS no responses # , ,

5+ Great Responsive CSS Frameworks

Using responsive CSS frameworks developers can speed up the delivery and improve the quality of responsive CSS code. Since responsive web design is in high demand a lot of frameworks have been created to streamline the delivery of high quality mobile-ready websites. These resources can make it easier for you to create responsive websites and in combination with a framework for HTML, like e.g. HTML5 Boilerplate you will have a really strong foundation.

In this article we present some of the most popular and useful responsive CSS frameworks. This can help you to get started and to keep focus on what is important, such as layout, usability and content. Please tell us your opinion, questions and thoughts in the comments, and help us by sharing this post to your friends.

Continue reading

May 2, 2012 CSS , CSS3 no responses #

Border-radius: create rounded corners with CSS!

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.
Since first being announced in 2005 the boder-radius property has come to enjoy widespread browser support (although with some discrepancies) and, with relative ease of use, web developers have been quick to make the most of this emerging technology.

Continue reading

November 25, 2011 CSS no responses #

CSS Compression

Method One

This method involves adding a small PHP script to your CSS document and replacing its 

.css

 extension with a 

.php

 extension.

Place the following PHP script into the top of the CSS document that you wish to compress. Then change the 

.css

 extension to 

.php

, to arrive at something similar to: 

compressed-css.php

. Remember to use the new name when referencing the file.

Continue reading

November 25, 2011 CSS , CSS3 no responses # , , ,

Cross-browser CSS3 box-shadow

There is a simple way for creating cross-browser box-shadow in all modern and popular browsers including Internet Explorer (Opera only since 10.50 pre-alpha version).


Continue reading

November 23, 2011 CSS , jQuery no responses # ,

Text Resizing With jQuery

Want to allow visitors to increase or decrease the text size (font size) on your website? I’m going to show you how – using jQuery (a great JavaScript library).

CSS Font Size

Firstly, we should consider the various methods of specifying a font size using CSS. 4 CSS attributes pertaining to font sizing come to mind:

  1. pixels
  2. points
  3. em
  4. percentage – ‘%

For the purpose of this article, treat ‘em’ and ‘%’ as the same (where 1em is equivalent to 100%). When we allow visitors to change the font size, only elements with a font size set in ‘em’ or as a percentage will be variable. Elements without this attribute fall back to the value of their immediate parent element’s font-size. This means is that if you specify the value for an element’s font size in pixels, the font size will not change.
Continue reading

Pin It on Pinterest