CSS
Get flash to fully experience Pearltrees
fluid /responsive
ie CSS
One of the many uses for personal and professional web site is to display a gallery of photographs that show off your skills with a camera. Until now these galleries have been produced using javascript, PHP or CGI. However there is now another way. With this article I hope to show you how to produce a professional quality photograph gallery using nothing more than an unordered list of photographs and a Cascading Style Sheet (CSS). I will take you through the styling one step at a time and end up converting:
Stu Nicholls | CSSplay | A photograph gallery tutorial
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). How it Works Multiple background images can be specified using either the individual background properties or the background shorthand property. We’ll first look at an example using the individual background properties.
Multiple Backgrounds with CSS3 - CSS3 . Info
Responsive Design with CSS3 Media Queries
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). But for the moment, as with many other ‘experimental’ CSS3 properties, you’ll need to use the following prefixes to support Mozilla and Webkit:
Box-shadow, one of CSS3′s best new features - CSS3 . Info
The set height and width ensure only a portion of the sprite.png graphic is shown. The rollover shifts the position of the background image, revealing a different area of the graphic.
Basic Link Rollover as CSS Sprite | CSS-Tricks
Load More Sidebar Content When There Is Room | CSS-Tricks
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. One solution is to pick some kind of happy medium and just roll with it.
You can add a background-image to a textarea like you can any other element. In this case, the image is a friendly reminder to be nice =). If you add a background image, for whatever reason, it can break the browser default styling of the textarea. The default 1px solid bolder is replaced with a thicker beveled border. To restore the browser default, you can just force the border back to normal.
Textarea Tricks | CSS-Tricks
Creating a Nice Textarea | CSS-Tricks
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: In this case, the textarea with the id of "styled" has it's width and height explicity set, a border and padding applied, default font set, and a background image applied.
Troy Mcilvena
If you have a need to access domains on your local machine from the Android emulator, you should find this script helpful. You will need to replace my hostname (troy.local) with your own. Put this script in the root Android developer folder (the same folder as platform-tools). #! /usr/bin/env bash # You'll need to run this #./tools/emulator -avd NAME -partition-size 128 .Learn CSS Positioning in Ten Steps: position static relative absolute float
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. 2. position:relative If you specify position:relative , then you can use top or bottom , and left or right to move the element relative to where it would normally occur in the document.
20+ Resources and Tutorials for Creative Forms using CSS
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. 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.Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms. Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts and eliminate the need for redundant validation functions and processing data. Today we wanted to share with you some great steps to get the perfect form: we will go through designing and usability you need to keep in mind, styling your form, spicing it up with some nice javascript effects, validating user’s input and finally getting it to work using PHP and Ajax. Read these guidelines to help you better position a form for your specific purpose, the combination of layout, visual elements, and content that’s right for you should still be verified through user testing or data analysis (completion rates, errors, etc.).