Emastic CSS Framework

Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before.

Why should you use emastic?

  • Lightweight (compressed weight less then 4kb)
  • Personalized width of the page in (em,px,%)
  • Use of fixed and fluid columns in the grid.
  • Elastic Layout with “em”s

YAML XHTML / CSS Framework

“Yet Another Multicolumn Layout” YAML is an XHTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

  • Focussed on web standards and accessibility
  • Slim framework core with numerous extensions
  • Robust, flexible layout concept columns & grids
  • Design patterns for typography, forms, mircoformats, rtl support ect.
  • Complete multilingual documentation

CSS Menus – Examples of Dropdown, Dropline and Flyout Menus

CSS Menus is a website set up to show how CSS can be used to style unordered lists and turn then into stylish, professional menus that would enhance the look of any website.CSS Menus are search engine friendly, they will allow search engines to easily navigate and spider your pages. They are easy to setup, even easier to update and will work even when javascript is turned off.They will even degrade well for text readers and when CSS is turned off…

Rounded Corners in Internet Explorer

One of the reasons that I love Firefox and Webkit-based browsers (Chrome, Safari) is the ability to effortlessly create rounded-corner elements using pure CSS. As you probably already know, IE doesn’t allow you to create rounded corners without using images or endless hacking. Enter the CurvyCorners javascript project. CurvyCorners allows you to quickly create rounded corners within Internet Explorer…

The Mystery Of The CSS Float Property

In this article, we’ll discuss exactly what the float property is and how it affects elements in particular contexts. We’ll also take a look at some of the differences that can occur in connection with this property in the most commonly-used browsers. Finally, we’ll showcase a few practical uses for the CSS float property. This should provide a well-rounded and thorough discussion of this property and its impact on CSS development…

Is Your CSS Reset Doing More Harm Than Good?

You know the drill. Code the XHTML. Check. Validate. Check. Start the CSS style sheet with a reset. Che… Hold on there. Before you dump the latest and greatest CSS reset in your style sheet, you might want to think about what those style declarations actually do. If you’re resetting tags that aren’t in your markup or tags that don’t need to be reset, you could cause more problems than you fix…

15 Ways to Improve CSS Techniques Using jQuery

CSS is great and when it is combined with powerful JavaScript frameworks like jQuery, you can achieve some really amazing things. Combining these two together will let you enhance the user experience by providing more intuitive and responsive web interface. Here are 15 ways you can use jQuery to improve CSS techniques…

How To Implement Animations of CSS Properties With jQuery

In the past days I received several requests from my readers that asked me to dedicate the new issue of my jQuery Lesson Series to how to implement custom animations of CSS properties of HTML elements.

So this post illustrates a basic way to use the jQuery animate() function that allows you to animate easy a property or a group of CSS properties of DOM elements…

Using Rounded Corners with CSS3

A few years back, rounded corners became one of the signature design elements of the Web 2.0 trend. Even though they started as a fad, rounded corners are more than simple eye candy. They also have a role in separating or grouping the sections of a page.

As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser…

Mouse Cursor Affordance

One important interaction indicator on the web is the mouse cursor. The default cursor arrow changes into a pointing hand when you hover over links for example, which indicates they are indeed links and can be clicked on. It also changes into other things to differentiate context, for example it can change into a text input cursor when hovering over text fields to indicate you can type there.

When styling your website with CSS, in some cases you may lose the correct cursor type for certain elements. It’s important to retain this indicator as it will inform the user about how the item they’re hovering over can be used (see affordances). The solution is easy: if the cursor type is wrong, specify it using the CSS “cursor” property…