0

CSS3 Generator

CSS3 Generator | Useful Web Apps for Designers/Developers

A simple CSS3 generator.

Image

Go to the app

Advertisements
0

Cross-Browser Testing Tools

The chart below shows the basic features offered by these cross-browser testing services and applications, making it quick and easy to compare.

Tool Number of browser versions supported IE? Interactive testing? Side-by-side testing? Pricing
Adobe BrowserLab 13 IE6+ No Yes Free
Browsershots 60+ IE6+ No No Free
SuperPreview Varies IE6+ Yes Yes Free
Lunascape 3 IE6+ Yes Yes Free
IETester 6 versions of IE IE5.5+ Yes Yes Free
IE NetRenderer 5 versions of IE IE5.5+ No No Free
Spoon 16+ no IE Yes No Free
Browsera 9 IE6+ No Yes Free – $99/month
Browserling 9 IE5.5+ No No Free – $20/month
Mogotest 7+ IE6+ No Yes $15 – $4,499/month
Cloud Testing 4+ IE6+ Yes Yes Not specified
BrowserCam 90+ IE5.2+ No Yes $19.95 – $89.95/month
Multi-Browser Viewer 80+ IE6+ For some browsers Yes $139.95
CrossBrowserTesting 100+ IE6+ Yes Yes $29.95 – $199.95/month

Source: smashingmagazine.com

0

Vertical Centering with CSS

Vertical centering with CSS isn’t an easy thing to do. There are many different ways that may not work in some browsers.

The below method sets some <div>s to display like a table, so we can use the table’s vertical-align property (which works very differently for other elements).

<div id="wrapper">
   <div id="cell">
     <div>
     Content goes here
     </div>
   </div>
</div>

CSS

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

Pros:
* The content can dynamically change height (doesn’t have to be defined in CSS)
* Content doesn’t get cut off when there isn’t enough room in the wrapper

Cons
* Doesn’t work in Internet Explorer (not even the IE 8 beta)
* Lots of nested tags (not really that bad, this is a subjective topic)

0

Multiple borders

An element must be relatively positioned and have sufficient padding to contain the width of the extra border you will be creating with pseudo-elements.

#borders {
   position:relative;
   z-index:1;
   padding:30px;
   border:5px solid #f00;
   background:#ff9600;
}

The pseudo-elements are positioned at specific distances away from the edge of the element’s box, moved behind the content layer with the negative z-index, and given the border and background values you want.

#borders:before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}

#borders:after {
content:"";
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
background:#fff;
}

DEMO

0

CSS: Centering a DIV of Unknown Width

You can easily center a DIV by using margin:auto; property when you have mentioned its width in your CSS. But in case you wanted to center a DIV with unknown width, here is the code to do so :

.content {
 margin: 0 auto 8px;
 display: table;
 }

.content div {
 display: table-cell;
 }

<!--[if IE]>
.content {
 display: block;
 text-align: center;
 }

.content div {
 display: inline;
 zoom: 1;
}
<![endif]-->
0

CSS: Avoid style-less border values

Borders can add a nice touch to any design, but without a style, the border you meant your border declaration to create will be missing in action.

When I say “without a style,” I don’t mean CSS styles; I mean a border-style value. For example, suppose you write:

form { border: 2px gray; }

Great, except that no border will be placed around your forms. The reason is simple: the omission of a border-style value means that the default value for border-style was used. And what is that default value? none. So the preceding rule is exactly equivalent to saying:

form { border: 2px gray none; }

A border with a border-style of none will never be drawn, no matter how wide you make its border-width value—because a border that doesn’t exist can’t have any width.

Property Values