Ultimate CSS Gallery

Laptop Giveaway

2011-04-05T13:12:00.000-07:00

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

2011-03-02T08:47:00.000-08:00

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

2010-11-09T10:31:00.000-08:00

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

2009-08-19T07:49:00.000-07:00

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

2009-04-09T11:35:00.001-07:00

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

2009-03-25T12:56:00.000-07:00

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!

Expand Your Comprehension For CSS

2009-03-12T12:35:00.000-07:00

Xyle scope is being decribed as an elegant analysis tool for those interested in keeping up with web standards. This softwaure gives you the ability to surf the web with an x-ray like view. Xyle scope you will aide in intensify ones current perception of CSS and XHTML. Xyle scope allows you to view your own work as well as others and help you see aspects never bever seen.

Here are the features noted on the site:

Features include:
• Immediate display of the HTML and CSS sources of the page being visited.
• Automatic formatting of source files using an unlimited number of customizable CSS style sheets
• Hierarchical navigation in HTML documents.
• WYSIWYG selection of HTML elements via clicking in the web page being displayed.
• Computation of the full CSS cascade for each selected HTML element
• Lists all HTML elements matching a given selector (e.g. by clicking on a selector in a CSS source file or the computed cascade)
• Highlights the formatting box of each selected HTML element
• Live changing of CSS values of any visited site
• Smart groups and search function to filter large CSS files
• DTD viewer to get details on the XHTML standard

To download click here:Xyle scope

More CSS Tips at Your Fingertips

2009-02-23T10:54:00.000-08:00

I constantly try to post CSS tips and tricks that I come across. I do this so that one can have a central hub for anything css related and to help promote others sites. Some of the tips may be familiar but it is always good to review the different explanations and aspects on how to execute them. Here are the first five tips I found on this site:

1. Browser Compatibility Issues
2. Design for Smaller Browser Resolutions
3. Use Generic Classes
4. Validate your HTML
5. Validate your CSS

for the other five tips along with their explanations go to:
http://www.bestsyndication.com/?q=node/24636

SitePoint Introduces “Firescope” A Reference Tool for Firebug

2009-02-04T15:00:00.000-08:00

SitePoint has recently made an exclusive HTML and CSS Reference tool that is great for Web Developers. This new tool gives Developers access to SitePoint's content with its recent launch of “FireScope”. This is a new plug-in for the existing Firefox Web Browser. This will integrate SitePoint CSS and HTML references with Firefox. This tool provides the most precise and current information on browser and usage capabilities in any given user's browser.
For further details on FireScope go to: http://tools.sitepoint.com/firescope

Mozilla Updates Us On What Ubiquity Has To Offer

2009-01-20T13:25:00.000-08:00

Mozilla recently released a major update to the browser “Ubiquity” which made its debut just last year. This extension gives users a context sensitive command interface to various web services and browser functionality. This means increased support for CSS. This will enhance and provide stability. If you are able to write standards-complaint CSS can now create and share a custom Ubiquity skin. Ubiquity will automatically suggest commands based on how frequently and recently they have been used. For more features and information on this new update check out: http://labs.mozilla.com/2009/01/major-ubiquity-update

A Few Useful CSS Guides

2009-01-13T08:54:00.000-08:00

Below are some handy links to commonly used procedures, tags and tools. Having access to this information at your fingertips will hopefully save plenty of time and help with your design efforts.

This is a cheat sheet for creating Cascading Style Sheets (CSS) files.
CSS Cheat Sheet

The CSS cheat sheet is a 1 pager guide that list all the properties of CSS 2.1
CSS Reference Sheet

A great CSS shorthand guide
CSS Shorthand Guide

Useful CSS Properties along with great examples
CSS Useful Properties

A CSS Web Layout Can Make You Money

2008-12-30T13:17:00.000-08:00

Trenton Moss of webcredible in the U.K. offers an interesting article on why a CSS website layout will make you money. With CSS now being more compatible with over 99% of browsers used today, converting your website would be a savvy business move. You can increase your dollars by reduced bandwidth costs, higher search engine ranking, faster download speed and Increase in reach. Change your current table-based layout to a CSS layout if making money is one of your ultimate goals. Is it not everyone’s? For more please click: http://www.free-css.com/css-literature/css-articles/css-articles1/css-website-layout.php

Opera Introduces the Launch of Opera 10

2008-12-10T10:18:00.000-08:00

Opera just released their new version of their browser. This new release will provide support for CSS3, HTML5 as well as support for web fonts that will enable websites to load fonts from a given path or URLs. For Further details check out:
http://www.efluxmedia.com/news_Opera_Launches_Opera_10_30691.html

CSS Free Book Download

2008-12-03T14:29:00.000-08:00

SitePoint is giving away a free download of their book called "The Art and Science of CSS." There are two ways that you can obtain this free download: First you can get it by following SitePoint on Twitter. Second, by signing up with your email.
The book contains 7 chapters (208 pages) that has the fundamentals of Web page headings, images, backgrounds, navigation and applied CSS styles. To download click here: http://twitaway.aws.sitepoint.com/ Hurry this Twitaway will ends in: 6 days, 6 hours!

Another Case of Clickjacking Caught Early

2008-11-25T12:40:00.000-08:00

Just last week an iPhone clickjacking attack was fixed with the release of the 2.2 software. The previous versions enclosed a CSS transforms bug that created iframe content and give the appearance as being part of the actual page.
The transform bug never had a chance to cause real harm because it was discovered early by developers who immediately alerted Apple. Word about the transform bug was kept under wraps while the problem was being corrected. Click jacking attacks are generally used to get you to inadvertently click on an advertisement or retrieve your password through deceptive methods.

For more on the iPhone clickjacking click here: http://ejohn.org/blog/clickjacking-iphone-attack/

Giving Some Newbie Love

2008-11-18T08:05:00.000-08:00

At http://www.subcide.com/tutorials/csslayout/index.aspx you will find great information for creating CSS layouts from scratch. This tutorial is for those who have a basic understanding of CSS and how it works. If you’re a complete newbie then you may want to check out http://www.w3schools.com in order to get started. This beginner’s guide is great for the newbie’s and for those that want a refresher http://friendlybit.com/css/beginners-guide-to-css-and-standards Next week I will discuss some great reasons to learn CSS if you have not already.

Don't Get Clickjacked

2008-11-06T08:01:00.000-08:00

Using only CSS and HTML, an attacker can create a transparent IFRAME of a victim web page that contains privileged buttons.

A clickjacking attack can be used to direct seemingly benign mouse clicks to ...privileged buttons. For example, you may think you're playing a game, when you're actually starting a webcam recording. Using only CSS and HTML, an attacker can create a transparent IFRAME of a victim web page that contains privileged buttons.
for source & to read more:http://dotnet.sys-con.com/node/731258

Un-Optimized files

2008-10-29T08:28:00.000-07:00

Issue: Un-Optimized files
Another way you can speed up your sites load time is to have clean HTML, CSS, and other included files. Remove extraneous code from your files, and use CSS wherever possible. Every piece of old html code adds up in size, even if it doesn’t impact the visual site itself. I have seen many cases where links have been removed but the code remains accidentally, leaving something like:

This code, while as tiny as it is, does contribute to an increase in load time (and in this specific example, could also be seen as spam by search engines).If your site makes use of CSS, consider compressing it to save on load times. You can do this by grouping identical styles to save space. For instance:

p {font-family:Arial, Helvetica, sans-serif;font-size:12px}

li {font-family:Arial, Helvetica, sans-serif;font-size:12px}

can be compressed by grouping these two styles, reducing the coding by half:

p,li {font-family:Arial, Helvetica, sans-serif;font-size:12px}

Again this may not seem like much, but when you add this up with all of the other little things, it can ultimately result in a significantly increased load time for the page as a whole.
Audio and video can also be compressed. If your site uses a fair bit of multimedia, see if you can compress these files a bit more than you have already. You may be able to save some load time here as well without impacting user experience.

tip taken from: http://www.webpronews.com/expertarticles/2008/10/23/how-does-slow-load-time-affect-you

Nice Art Portfolio CSS Template

2008-10-21T10:56:00.000-07:00

http://www.free-css-templates.com/preview/ArtPortfolio/

WebAssist Debuts SuCasa, a Marketplace for Simplifying Web Design Through Shared Templates

2008-10-15T12:39:00.000-07:00

New online community enables users to freely share, buy, or sell low-cost website templates, page layouts, CSS menus, and more

-A variety of users benefit from SuCasa and its diverse templates:
-Designers looking for a flexible quick start or a fresh look
-Developers who don't have time to invest in web design
-Small business owners in search of an easy fix that looks professional
-Web designers looking for another revenue stream

For Complete Story and Source:http://www.prweb.com/releases/2008/10/prweb1452364.htm

Top 18 CSS Sites

2008-10-08T08:16:00.000-07:00

These 18 sites were taken from cssmania.com Theses sites were voted on and rated manually out of 8700 other websites! My favorite out of the top 18 was:
3. Langkawi-landcruise ( http://langkawi-landcruise.com )
It received 126 Votes I Average: 8 I
For the other 17 please check out:
http://www.dezinerfolio.com/2007/05/30/top-18-websites-on-cssmaniacom/

10 CSS Tricks You May or May Not Know

2008-09-30T08:39:00.000-07:00

1. CSS font shorthand rule
2. Two classes together
3. CSS border default value
4. !important ignored by IE
5. Image replacement technique
6. CSS box model hack alternative
7. Centre aligning a block element
8. Vertically aligning with CSS
9. CSS positioning within a container
10. Background colour running to the screen bottom

for a more in dept breakdown: http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/
source: Trenton Moss

Most Useful 50 CSS Tips And Tools

2008-09-10T11:45:00.000-07:00

I was scrolling through some links and found another neat site:

http://www.emmaalvarez.com/2008/04/most-useful-50-css-tips-and-tools-for.html

CSS Tip of The Week: 53 CSS Techniques You Couldn’t Live Without

2008-09-03T14:52:00.000-07:00

CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actually, it is.

to read more:
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
source: Smashing Magazine

Well Designed CSS Sites

2008-08-19T12:29:00.000-07:00

Andy Budd is Managing Director of Clear: Left out of Brighton, England. His site provides a list of well designed CSS sites as well as information on Web Standards, User Centered Design, Information Architecture and running a successful Web Project.
http://www.andybudd.com/links/well_designed_css_sites/