Posts Tagged ‘CSS3’

Real Shadow is a simple-yet-effective jQuery plugin for creating realistic shadow effects for any HTML element.

With a simple function, it works by targeting any number of elements and manipulating the value of box-shadow CSS property for the elements in accordance with the mouse position.

jQuery Real Shadow Plugin

So, the shadow's location and size is determined by the element's distance to the mouse pointer which ends up in a cool effect.

Like said, the plugin accomplishes a simple job but can help creating attractive outputs when used smartly.

CSS3's properties enable us to create many different shapes by styling a single element.

CSS3 Shapes is a project that shares the styles for many different shapes including triangle, diamond, star, comment bubble, egg, heart and more.

For sure, not all of them are functional for daily use but they are definitely good for inspiration and improving our CSS(3) skills.

CSS3 Shapes

  • Tags:
  • Filed under: Design, No License, Xhtml & Css
  • 1 Comment
  • Hakim El Hattab (hakim.se), a very talented developer and programmer, has created a set of very nice scrolling effects.

    The effects are all CSS-only and a simple JavaScript function helps attaching/removing classes to elements.

    CSS Scroll Effects

    Currently, there are 10+ effects and, as expected, they are WebKit + Firefox-only but degrade nicely on incompatible browsers.

    P.S. You should also check the experiments page of hakim.se to see various other exciting stuff.

    Ian Hansson, a designer/developer from London, has created a fully-functional responsive slider with CSS3 without any JavaScript.

    It is similar to JavaScript sliders; works by floating all of the content areas (articles) next to each other and hides the overflow. After that, animating the margin of the inner <div> gives us the next item.

    There is an optional JavaScript fix for an iOS-only issue and the slider works well in modern browsers.

    P.S. There is no download provided and "view source" is your guide.

    Responsive CSS3 Slider

    As almost every browser has their own CSS prefixes (-webkit-, -moz- or -o-) for some properties, we usually need to add all of them to our stylesheets.

    This is not only time-consuming, but also hard to maintain, increases the sizes of CSS files (that can end up in slower loading times and higher bandwidth usage).

    cssFx

    cssFx is a JavaScript file (weights 2.5kb) that creates vendor-specific CSS3 properties required for old and new browsers on the client-side.

    It has support for most of the CSS3 properties and works with the majority of browsers (including IE6).