Get flash to fully experience Pearltrees
Home / CSS3 Previews / Multiple Backgrounds with CSS3 CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list. Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature. Here’s a basic example: This box has two background images, the first a sheep (aligned to the bottom and center) and the second a grass and sky background (aligned to the top-left corner). Here’s the code for this:
Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn't work any more.
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.
Published by Chris Coyier One classic layout conundrum is how much stuff to put in a sidebar. Ideally the height of the main content area and the sidebar are about the same, to avoid either area having a large blank area which can be strange looking and a waste of good web real estate. Go light on sidebar content and short content pages may be just about right but long content pages have a lot of unused sidebar space. Go heavy on sidebar content and those long content pages are looking good but short content pages are pushed down awkwardly far.
Published by Chris Coyier Oh, <textarea>'s. How many quirks you posses. Here is a collection of nine things you might want to do related to textareas. Enjoy.
Published by Chris Coyier A textarea is an element on a webpage that you can type into. These are commonly used as commenting areas, contact forms or address entry areas. All browsers have defaults styles for textareas which vary. You can take control of your textareas and style them with CSS, just like any other element:
1. position:static The default positioning for all elements is position:static , which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative
Forms do not have to be boring and ugly, they too can be beautiful. With the proper understanding of each element (radio buttons, checkboxes, textareas..), CSS know-how, a little patience and some creativity you can make your forms beautiful. Throw in, the always important, semantics and accessibilty and things can get tricky. Below you will find 20+ resources and tutorials for deisgning creative forms with CSS. How To Create a Good Looking Form How To Create a Good Looking Form » View Demo » This tutorial explains how to design a great looking form using a clean CSS design with only the label and input tags to simulate an HTML table structure.
2011/4/8: It is high time I update the documentation here. This plugin got as far as supporting IE8 Release Candidate 1. That was a while ago. Things have changed. I spent some time away from the project before IE8 final was released.
This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day. Here's what you'll get: Sliding doors Since we want our buttons to be über-flexible, we'll have to make the background image expand with the size of the button's text.
NOTE: I’ve covered button link styling using CSS3 in a more recent post which you can read here . The following post is an older method using images. There is certain anchor state in CSS that I don’t see used very often — actually, it’s something I haven’t really used myself, but something which I now realize can be very useful. I’m talking about the “active” anchor state.
A fair while back I wrote a post on pressed button states using CSS, which was a tutorial on how to implement a pressed down button effect on custom styled links. In that post I used images to achieve the visual effect. Now that we have good CSS3 support, that method is really out of date.