background preloader

CSS3 Image Styles

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 Related:  CSS3

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:

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

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

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.

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.

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

Related: