background preloader

Creating Polaroid Style Images with Just CSS - ZURB Playground - ZURB.com

Creating Polaroid Style Images with Just CSS - ZURB Playground - ZURB.com
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 - ZURB.com 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.

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

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

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

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

How to Create a CSS3 Mega Drop-Down Menu Topic: CSS3Difficulty: IntermediateEstimated Completion Time: 1 hour Hello guys! In this tutorial I will teach you how to create a pure CSS3 Mega Menu. Mega Menus are usually used on corporate/e-commerce websites, but they become more popular because they are a great way to display/organize content. The design of this mega menu can be found on the The Bricks UI. HTML Markup Create an unordered list with the class “nav” (<ul>), then for each menu item we will add a new list item (<li>) with an anchor tag (<a>) inside. Reset and Container Basic Styles As the default styles of the browsers differ from each other, we’ll add some reset styles to keep consistency between them and avoid future issues. Then we will add some basic styles to the menu container and float the list items to the left in order to show them on the same line. Styling the Menu Links We will start with the common styles like padding, height, position, etc. For the hover state we will only change the background color.

Collection of Useful Open Source CSS Resources There are loads of free scripts to download and include in your website projects. Developers are constantly releasing their work under open source General Public Licenses. This allows other developers to work off the same code and even customize pieces to better suit their project’s needs. Overall the majority of codes you’ll find these days are written in JavaScript or backend languages. But I will say there are some newer CSS libraries and resources which are extremely beneficial to most frontend developers. 1. IVORY is a frontend CSS framework for building responsive grids in web design. Visit Website → 2. I found this resource just a few weeks ago and it has proven to be incredibly helpful. Visit Website → 3. If you have ever seen longer hidden anchor links on Github you will notice how they slide out to display the full text. Visit Website → 4. Workless is a clean HTML5 and CSS3 framework for web developers. Visit Website → 5. Visit Website → 6. Visit Website → 7. Visit Website → 8. 9.

CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes Whether you’re a CSS guru or a CSS novice you will always need some help, some resources, some tutorials, some references and, of course, some cheat sheets. In this article we have collected the best resources for answering all possible CSS questions as well as how to understand CSS and how to use it properly. There are also CSS property references, cheat sheets, not only typical cheat sheets, but also cheat sheets for CSS frameworks, conversion tables and CSS short-hand. CSS Reference and Learning Core CSS: Part I Most people have learned CSS the same way they’ve learned HTML—by viewing source, copying template codes, reading books and articles. Core CSS: Part II Core CSS: Part II covers CSS 2.0/2.1 selectors. Core CSS: Part III To understand and manage attractive design and layouts, gaining an appreciation for the how to manage the CSS Box Model, Floats and Positioning is paramount. SitePoint CSS Reference CSS Basics CSS Basics is a fantastic CSS learning and reference resource. Cheat Sheets

ZenCSSPropertiesEn - zen-coding - CSS-properties and its aliases for Zen CSS plugins - Set of plugins for HTML and CSS hi-speed coding Based on CSS 3 draft specification Property Alias Special Rules @import url(); @i @media print { @m } ! expression() exp Properties Groups Sorting Methods Positioning Box behavior and properties Sizing Color appearance Special content types Text Visual properties Print Positioning position:; posposition:static; pos:sposition:absolute; pos:aposition:relative; pos:rposition:fixed; pos:f top:; ttop:auto; t:a right:; rright:auto; r:a bottom:; bbottom:auto; b:a left:; lleft:auto; l:a z-index:; zz-index:auto; z:a Box behavior and properties float:; flfloat:none; fl:nfloat:left; fl:lfloat:right; fl:r clear:; clclear:none; cl:nclear:left; cl:lclear:right; cl:rclear:both; cl:b visibility:; vvisibility:visible; v:vvisibility:hidden; v:hvisibility:collapse; v:c overflow:; ovoverflow:visible; ov:voverflow:hidden; ov:hoverflow:scroll; ov:soverflow:auto; ov:a overflow-x:; ovxoverflow-x:visible; ovx:voverflow-x:hidden; ovx:hoverflow-x:scroll; ovx:soverflow-x:auto; ovx:a zoom:1; zoo Sizing width:; wwidth:auto; w:a Text Print

CSS3 Image Styles When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I'm going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles. View Demo Image Styles Problem (see demo) Take a look at the demo and note that there is border-radius and inset box-shadow applied in the first row of images. Workaround To get the border-radius and inset box-shadow working, the workaround is to apply the actual image as background-image. Dynamic Way To make it dynamic, you can use to jQuery to wrap the background image dynamically for every image element. Output

How To Create a Pure CSS Polaroid Photo Gallery Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling. View the Demo Check out the demo to see what we’ll be building. Start work by sourcing your images. Next, set up the basic page structure with a container centered on the page. Semantically lay out the collection of images in an Unordered List element, and wrap each image with an anchor to create a clickable link. Now we get start work on the CSS to style up the gallery. Give the images the Polaroid effect by adding a few styles to the anchors. To really add realism to the design, use the CSS3 box-shadow property to add some shading to the photos. Now we need to target each image individually, so go back and give each anchor a unique class name. With unique class names in place, we can then add unique styling to each photo. That’s all there is to it!

Bring Your Forms Up to Date With CSS3 and HTML5 Validation Let's look at how to create a functional form which validates users' data, client-side. With that done, we'll cover prettying it up using CSS, including some CSS3! First we want to conceptualize what our form is going to look like and how it is going to function. For this example, let's create a simple contact form that asks for the following information from the user: Name Email Website Message We want to make sure the user is entering the information correctly. Let's get an idea of what we want our form to look like by creating a rough mockup. As you can see, the following elements make up our form: Form Title Required fields notification Form labels Form inputs Placeholder text Form field hints Submit Button Now that we've specified which elements make up our form, we can create the HTML markup. Let's create our basic HTML markup from the form concept we created. Up to this point, our HTML file will still appear blank in the browser. Let's add some typographic styles to our form elements:

Related: