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!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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/

Design Gallery: Vexcom

Tableless design, CSS 2.1 HTML 4.01

CSS Tips & Tricks

Rounded corners and shadowed boxes (fixed Width)
CSS3 will have properties to make rounded borders, borders consisting of images and boxes with shadows, but with some work you can simulate some of them already with CSS2 — and without any tables or extra mark-up. But unfortunatly CSS3 is not supported by IE, here [...]
Source: HPadmin http://hiddenpixels.com/category/css-stuffs/

First Five CSS Tricks You May Not Know

1. CSS font shorthand rule
When styling fonts with CSS you may be doing this:
font-size: 1em;line-height: 1.5em;font-weight: bold;font-style: italic;font-variant: small-caps;font-family: verdana,serif;
There's no need though as you can use this CSS shorthand property:font: 1em/1.5em bold italic small-caps verdana,serif
Much better! Just a couple of words of warning: This CSS shorthand version will only work if you're specifying both the font-size and the font-family. Also, if you don't specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too.
2. Two classes together
Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. In reality, you can assign as many classes as you like! For example:<p class="text side">...</p>
Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.
3. CSS border default value
When writing a border rule you'll usually specify the colour, width and style (in any order). For example, border: 3px solid #000 will give you a black solid border, 3px thick. However the only required value here is the border style.
If you were to write just border: solid then the defaults for that border will be used. But what defaults? Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!
4. !important ignored by IE
Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE. An example of this would be:margin-top: 3.5em !important; margin-top: 2em
So, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em. This can sometimes come in useful, especially when using relative margins (such as in this example) as these can display slightly differently between IE and other browsers.
(Many of you may also be aware of the CSS child selector, the contents of which IE ignores.)
5. Image replacement technique
It's always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you've absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you've got no choice but to use an image.
Say for example, you wanted the top heading of each page to be ‘Buy widgets’, as you're a widget seller and you'd like to be found for this phrase in the search engines. You're pretty set on it being an obscure font so you need to use an image:<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>
This is OK but there's strong evidence to suggest that search engines don't assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:<h1><span>Buy widgets</span></h1>
Now, this obviously won't use your obscure font. To fix this problem place these commands in your CSS document:
h1{background: url(widget-image.gif) no-repeat;}h1 span{position: absolute;left:-2000px;}
The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule.

for more visit:http://evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/ Source: Trenton Moss