background preloader

Box Shadow Generator

Box Shadow Generator
Use this CSS3 box shadow generator to quickly generate box shadow CSS for your project. Your browser does not support the CSS3 box-shadow property. You can still use this tool to generate the CSS3 rule, but you won't be able to see the results. <div class="error_msg">Please enable Javascript to use this page.</div> Box Shadow Explained The CSS3 box-shadow property allows you to add depth to your website's design without the need for images or extra container elements. While the syntax is easy to understand, it is hard to visualise the style using just code. The box-shadow syntax works as follows: The first value defines the distance of the box shadow in the x (horizontal) direction and the second value defines the distance in the y (vertical) direction. Optionally you can include an additional parameter after the blur distance: This defines the spread distance of the shadow. Supporting Browsers

CSS Text Wrapper Web development tutorials for HTML, XHTML, CSS, Javascript, PHP, and Java Box-shadow, one of CSS3′s best new features Home / CSS3 Previews / Box-shadow, one of CSS3’s best new features The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset. Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix). Here’s a basic example: Firefox, Safari/Chrome, Opera and IE9 users should see a grey fading shadow under this box. In theory, the code for this is straightforward: But for the moment, as with many other ‘experimental’ CSS3 properties, you’ll need to use the following prefixes to support Mozilla and Webkit: How it Works The Syntax: box-shadow: none | [ , ]* = inset? Examples: Creating a basic drop shadow Layering multiple shadows Example:

CSS Menu Builder Jquery Lightbox - jQuery Lightbox Google+ Adds Content Recommendations For Mobile Websites Website owners with a Google+ page will soon be able to add content recommendations to the user experience on their mobile websites. Google just announced the new feature today, which blends both Google+ activity (such as +1s and shares) and search authorship to determine the best related content to show to users as they browse mobile website content. Readers will see recommendations whether they’re signed in to a Google account or not. The feature works for iOS and Android, for the Android browser, Chrome and Safari. There’s a video on that Google blog post that shows best how it works, but that video is inexplicably not on YouTube and doesn’t appear to be easily embeddable. You can see it in action now by reading any Forbes.com article on your mobile device; and here’s a screenshot showing the recommendation in action: Here’s how Google explains the feature on the content recommendations developer page: This feature is being rolled out now.

SpritePad - Create and edit css sprites 960 Grid System

Related: