background preloader

Creating Polaroid Style Images with Just CSS - ZURB Playground -

Creating Polaroid Style Images with Just CSS - ZURB Playground -
Through a combination of browser-specific CSS (2 and 3) integration and some basic styling, we've turned regular old images into cool looking polaroid style images—with no additional markup to show the text. Using the Title Attribute Instead of adding additional markup (more headings or paragraphs), we've opted to reuse the content within the title attribute of the surrounding anchor tag. Note: this is from the CSS2.1 spec, but browsers haven't implemented it fully. We have to use the title attribute for the anchor because the alt attribute isn't fully implemented by Safari or Firefox. Adding "Random" Tilts Safari 4 and Firefox 3.5 both have support for the :nth-child pseudo-selector (this is CSS3). Read about :nth-child and it's usage here. Although this seems like a bit much, this works to our advantage. Making Them Scale For the scaling, we once again turn to some CSS3. Final Details Now, we go back and make things as sexy as can be with some more CSS3 goodness. Related:  CSS3

Recreating the OS X Dock with CSS - ZURB Playground - The CSS The HTML <ul class="osx-dock"><li class="active"><span>ZURB</span><a href=" title="ZURB"><img src="/playground/osx-dock/zurb-icon.png" /></a></li><li><span>LinkedIn</span><a href=" title="LinkedIn"><img src="/playground/osx-dock/linkedin-icon.png" /></a></li></ul> Copyright ZURB, freely available for distribution under the MIT license. Product Design Training from the Experts at ZURB This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS. This is just a simple modal with the default styles, but any type of content can live in here. CSS3 Rounded Image With jQuery The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn't display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image. Thanks to Darcy Clarke for the jQuery code which does the magic tag wrapping automatically. View Demo Rounded Images Goal My goal to use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot below. Problem The problem is none of the modern browsers display rounded corners image the way I want it. The CSS Trick The trick is very simple: wrap a span tag around the image element. Final Solution With jQuery To make things easier, we can use jQuery to automatically wrap a span tag around the image. The jQuery code below will find any element with ".rounded-img" or "rounded-img2" (in my case, it is the image element) and wrap it with a span tag. Sample Usage I hope you will find this trick useful. Credits

An Awesome CSS3 Lightbox Gallery With jQuery Martin Angelov In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it. It will be search-engine friendly and even be compatible with browsers which date back as far as IE6 (although some of the awesomeness is lost). We are using jQuery, jQuery UI (for the drag and drop) and the fancybox jQuery plugin for the lightbox display in addition to PHP and CSS for interactivity and styling. Before reading on, I would suggest that you download the example files and have the demo opened in a tab for reference. So lets start with step one. Step 1 – XHTML The main idea is to have PHP as a back-end which will generate the necessary XHTML for each image. demo.php <div id="gallery"><? Nothing too fancy here. The gallery Step 2 – CSS Now that we have all the markup in place, it is time to style it. demo.css Step 3 – PHP

22 Useful HTML5 CSS3 Form Tutorials Using HTML5 and CSS3 you can create creative web forms with great specifications. So in this roundup we are featuring 22 CSS3 form tutorials. Slick login form with HTML5 & CSS3 HTML5 & CSS3 envelope contact form Build a Neat HTML5 Powered Contact Form Create a Stylish Contact Form with HTML5 & CSS3 Fun with HTML5 Forms Design a Prettier Web Form with CSS 3 Create A Clean and Stylish CSS3 Contact Form Create a Slick CSS3 Login Form NO IMAGES ALLOWED Fancy Forms: HTML5 + CSS3 – JS How to Create A Multi-Step Signup Form With CSS3 and jQuery Glowform CSS3 Image-less Glowing Form Tech A jQuery & CSS3 Drop-Down Menu With Integrated Forms How to Create a Contact Form using HTML5, CSS3 and PHP Carbon Fiber Signup Form With PHP, jQuery and CSS3 Designing Modern Web Forms with HTML 5 and CSS3 HTML5/CSS3 Contact Form Tutorial Beautiful CSS3 Search Form Clean and Stylish CSS3 Form How To Create A HTML5 Contact Form How To Create An Ajax-Based HTML5/CSS3 Contact Form Free slick css form

CSS3 box-shadow and image hover effects | CVW Web Design The CSS3 box-shadow property is a new way of adding drop shadow effects just by editing a style sheet. There’s no need to use Photoshop! Just open your style sheet in a text editor and away you go. Well, it’s almost as simple as that but not quite. Box-shadow basics First, a quick introduction and explanation. Horizontal offset of the shadow: a positive value for shadows on the right of the box, and a negative value for a shadow on the left of the box Vertical offset: similarly, a negative value means the shadow will be on top, a positive one means the shadow will be below the box The blur radius: a value of 0 makes the shadow sharp, the higher the number, the more blurred. Color: no need to explain this one ;-) Just to explain, here’s a style sheet rule that will give a 1px border and a grey drop shadow of 5px to right and bottom of an element. I use the -moz- and -webkit- prefixes for Firefox and Safari and the official box-shadow property for browsers that support this in future.

CSS3 Transitions — Thank God We Have A Specification! Advertisement This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or giving advice on how to circumvent the issues discussed. Alex MacCaw has already written a very insightful and thorough article on “All You Need to Know About CSS Transitions.” Whereas Alex wrote about achieving particular effects, I’m going to talk about the technical background, especially the JavaScript-facing side. 01. Separation of concerns is nothing new — we’ve been using template engines for years to accomplish exactly that, separating our HTML from whatever scripting language we were using. A couple of weeks ago, I was tasked with developing a JavaScript module that would allow for the use of CSS transitions in a way that the JavaScript side would know nothing about the transitions taking place. “Not knowing is difficult to handle. … But assumptions are often wrong. 1. CSS Properties to Transition

Tangle: a JavaScript library for reactive documents Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Tangle is super-simple and easy to learn. This is a simple reactive document. When you eat 3 drag cookies, you consume 150 calories. This is the HTML for that example. When you eat <span data-var="cookies" class="TKAdjustableNumber"> cookies</span>, you consume <span data-var="calories"> calories</span>. And this is the JavaScript. Write your document with HTML and CSS, as you normally would. Try out some examples. Proposition 21: Vehicle License Fee for State Parks The way it is now: California has 278 state parks, including state beaches and historic parks. What Prop 21 would do: Proposes to charge car owners an extra $18 on their annual registration bill, to go into the state park fund. Analysis: Suppose that an extra $18 was charged to 100 % of California taxpayersvehicle registrations. Fc = 2 KHz Q = 0.8 Unstable

Fun with CSS Transforms in Firefox and Webkit updated: published: topics: css javascript mobile WebKit based browsers like Safari have had CSS Transforms for quite awhile now, allowing developers to skew, translate, rotate, and scale HTML elements or the entire page with CSS alone. Update: CSS Transforms are now available in Safari, Chrome, Firefox 3.5+, IE9+, and Opera. Quick Review of the Basics First, a quick rundown of the properties themselves. Lorem ipsum dolor sit amet. <div class="square"><p>Lorem ipsum dolor sit amet. Finding the Transformation Properties in the DOM with JavaScript In order to animate these CSS Transform properties with JavaScript, we need to find the HTML element whose CSS properties we want to animate in the page DOM, and then find the specific CSS properties we want to change in the DOM node. WebKit in particular makes this very easy. Firefox 3.1 turns out to be more stubborn and requires case sensitive style.MozTransform (or the equivalent style['MozTransform']). Deciding Which Property to Use This is tdiv6.

The Definitive Guide to CSS Transitions Back in the golden days of the web, we had a little thing called Flash to help us make the web a dynamic, fun, interactive place. But, Flash is being used less and less. Of course, in certain environments it can still be put to amazing use, but in today’s web environment you need CSS to get the job done. One of the easiest ways to give your site a near-instant facelift is to bring CSS3 transitions to the table (pun intended). As users interact with various elements on your page, transitions allow for a delayed response that is far more natural and engaging than a jarring, instant response. Drop this into an HTML document and check it out: Yeah, I know gray boxes aren’t all that exciting, but the point is that the transitions on the box to the right are more interesting and give the design a more polished feel. Pseudo-Classes for CSS Transitions The key to making CSS transitions work is through the use of pseudo-classes. Introducing CSS Transitions Properties of the CSS Transition

Layer - The open communications Layer for the Internet 35 Useful CSS3 Tutorials To Boost Your Skills Good CSS3 tutorials can teach you the tricks and techniques used by experienced web designers and developers to implement a specific solution. Looking the experts over the shoulders is also a great way to pick up fresh inspiration and further to see that something your client is asking for can actually be done. A great CSS3 tutorial providing clever solutions to requirements you need to fulfill may be a great time saver and therefore may kick-start a project. CSS is for styling and controlling layout of webpages. In this article we have collected some of the best CSS3 tutorials we have been able to find. Advertisement Create an animated 3d bar chart using CSS3 This is a tutorial on how to create an animated 3d bar chart using CSS only. Enhancing your Image Thumb Galleries using CSS3 Transitions and Transforms (Responsive) You may enhance the user experience across browsers with the techniques explained in this tutorial. How to create some cool CSS3 buttons CSS3 pricing table CSS3 breadcrumbs

50 New Useful CSS Techniques, Tutorials and Tools Advertisement These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing! In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. CSS Techniques Now Playing: transitions and animations with CSSTim Van Damme showcases a fairly simple CSS design that uses transitions, animations and subtle hover-effects to produce an engaging user experience. CSS3 range slider, checkbox + radio buttonA demo of HTML input elements made with CSS3. The Simpler CSS GridWhy restrict your layout so that it can fit into this 960gs?

A Simple, Responsive, Mobile First Navigation We're going to build a simple, responsive web site navigation. Our solution will help us place emphasis on the content of our page, arguably the top priority when designing for mobile. There'll be no JavaScript involved, and we'll tackle it from a Mobile First approach. Mobile Navigation If you've read Luke Wroblewski's Mobile First you'll be familiar with his statement that: As a general rule, content takes precedence over navigation on mobile. What he means by this is that mobile users are often looking for immediate answers; they want the content they went searching for, not more navigation options. Many sites, even responsive ones, stick to the convention that navigation belongs at the top of any given page. Take this example from London & Partners: A perfectly decent responsive design, but at standard mobile viewport dimensions (320px x 480px) all you really see is a navigation menu. So What are the Solutions? Big screen, little screen. Pure CSS Solution Step 1: Markup Step 3: CSS Reset