Laptop Giveaway

Attention Designers, Writers and Programmers. WDI is giving away a Compaq™ Presario Notebook PC to promote their new directories.
Just register for free on one of the participating sites to enter.

The contest eligibility period will run from March 31st 2011 through May 1st 2011. Details are available on the
WDI Homepage (http://www.webdirectoriesinc.com/). The grand prize is a new laptop computer. The second and third prizes are $250 and $100 credit
packages from design quote ( http://www.DesignQuote.net ) that designers can use to get fresh verified sales leads.

Multiple CSS Background Images in Layers

The lower the image, the closer the layer. The problem is that unsupported browsers show NOTHING! You can use http://www.modernizr.com/ to detect the browser compatibility. Here is a list of compatible browsers.

Opera 10.5	Works according to the spec
Safari 4	ignores the declaration altogether
Firefox 3.6	Works according to the spec
Chrome 4	Treats the second value as the same as the first. Eg: 10px becomes '10px 10px'

Layering multiple background images

The background of a box can have multiple layers in CSS3. The number of layers is determined by the number of comma-separated values in the ‘background-image’ property. Note that a value of ‘none’ still creates a layer.

Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties. The lists are matched up from the first value: excess values at the end are not used. If a property doesn't have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.

Name:	background-image
Value:	[ , ]*
Initial:	none
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	as specified, but with URIs made absolute

For example, this set of declarations:

background-image: url(flower.png), url(ball.png), url(grass.png); background-position: center center, 20% 80%, top left, bottom right; background-origin: border-box, content-box; background-repeat: no-repeat; 

has exactly the same effect as this set with the extra position dropped and the missing values for ‘background-origin’ and ‘background-repeat’ filled in (emphasized for clarity):

background-image: url(flower.png), url(ball.png), url(grass1.png); background-position: center center, 20% 80%, top left; background-origin: border-box, content-box, border-box; background-repeat: no-repeat, no-repeat, no-repeat

See the section “Layering multiple background images” for how ‘background-image’ interacts with other comma-separated background properties to form each background image layer.

When setting a background image, authors should also specify a ‘background-color’ that will preserve contrast with the text for when the image is unavailable.

http://www.w3.org/TR/css3-background/#the-background-image

http://snook.ca/archives/html_and_css/multiple-bg-css-gradients

http://css-tricks.com/stacking-order-of-multiple-backgrounds/

Add A FaceBook Like Button To your website

It's easy to add a FaceBook Like button to your website. Just use the facebook like button generator located at:

http://developers.facebook.com/docs/reference/plugins/like

Once you have included Like buttons on a lot of your pages, you can use other social plugins to turn those user interactions into more engaging experiences throughout your site. For example, you can use the activity feed plugin to show users a stream of the recent likes and comments from their friends on your site, and you can use the recommendations plugin to show personalized page recommendations to your users based on the likes and comments across your entire site.

http://developers.facebook.com/docs/guides/web

10 Great CSS Resources

CSS TextWrapper CSSTextWrap.com

This web site provides an absolutely free and easy method to create HTML text that can be wrapped around shapes of any type. Make curves or zigzags and then just cut and paste the dynamically-generated code.

Stripe Generator StripeGenerator.com

Easily create your own tiled striped background or Photoshop tiled image with this free CSS tool for FREE. Grab an existing tile and make your own changes or create a brand new striped image of your own.

CSS Menu Generator webmaster-toolkit.com/css-menu-generator.shtml

Create your own dynamic CSS navigation menu for FREE. This web site offers three different customizable styles of navigation menus and generates the code that can be cut and pasted into your web page code.

CSS Grid Builder developer.yahoo.com/yui/grids/builder/

Yahoo offers an excellent way to easily create CSS stylesheets that can be utilized for web site layouts for free. This site lets you customize the layout and then generates the code.

Grid Designer grid.mindplay.dk

This web site allows you to easily design and customize a CSS layout grid including headings, columns, rows, gutters and width - all for free. Export the resulting code into your web pages.

Lorem lorem2.com

Are you tired of trying to find your own "for position only" text? Just copy and paste this lorem ipsum text that comes in four flavors: short paragraphs; long paragraphs; short list items; long list items.

GridFox - The Grid Layout Firefox Extension puidokas.com/portfolio/gridfox/

This extension for the Firefox browser instantly places a CSS grid on top of any web page. Use this free tool to layout your own web pages.

CSS Rounded Box Generator neuroticweb.com/recursos/css-rounded-box/

Using this visual online interface, easily create CSS and HTML code for a rounded box. You can even customize the colors of the box and its background. Just cut and paste the code when you're done.

Typetester typetester.org

This visual interface is a must for web designers. It allows you to see the same text in various fonts and font weights. Choose common fonts or use your own.

Reset CSS meyerweb.com/eric/tools/css/reset/

Because different browsers have their own styles preset, this "reset css" tool comes in very handy. Different margins and paddings are removed and styles should act consistently across various browsers.

Continuing the Trend of Simplifying CMS Tools

There is a new embedded content tool that gives users the ability to build websites with this user friendly tool. It gives one the option to incorporate CSS style building and digital assets in the body of the page with the style variation.
Continuing the Trend of Simplifying CMS Tools

Posted using ShareThis

Learning Gets Easier With InPics

The InPics Website offers free helpful and easy to understand tutorials on Microsoft Office, HTML, MySQL and CSS. InPics tutorials are more visually based versus words. Their website focuses more on the common tasks that people wish to accomplish. Because of the easy to learn formats, there is no reason or excuses as why one can master any of the before mentioned programs. Oh, and I almost forgot it's FREE too. So check out, enjoy and master!