Words from Alejandro U. Alvarez
Most used CSS tricks
Most used CSS techniques, from stylizedweb.com blog
1. Rounded corners without images
<p id="”container”"> <strong class="”rtop”"> </strong> < !-–content goes here –-> <strong class="”rbottom”"> </strong>
.rtop, .rbottom{display:block} .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden} .r1{margin: 0 5px} .r2{margin: 0 3px} .r3{margin: 0 2px} .r4{margin: 0 1px; height: 2px}

2. Style your order list
<ol> <li><span>This is line one</span></li> <li><span>Here is line two</span></li> <li><span>And last line</span></li> </ol>
ol { font: italic 1em Georgia, Times, serif; color: #999999; } ol span{ font: normal .8em Arial, Helvetica, sans-serif; color: #000000; }

3. Tableless forms
<form> <label for="”name”">Name</label> <input id="”name”" name="”name”" /> <label for="”address”">Address</label> <input id="”address”" name="”address”" /> <label for="”city”">City</label> <input id="”city”" name="”city”" /> </form>
label,input { display: block; width: 150px; float: left; margin-bottom: 10px; } label { text-align: right; width: 75px; padding-right: 20px; } br { clear: left; }

4. Double blockquote
blockquote:first-letter { background: url(images/open-quote.gif) no-repeat left top; padding-left: 18px; font: italic 1.4em Georgia, “Times New Roman”, Times, serif; }

5. Gradient text effect
<h1><span></span>CSS Gradient Text</h1>
h1 { font: bold 330%/100% “Lucida Grande”; position: relative; color: #464646; } h1 span { background: url(gradient.png) repeat-x; position: absolute; display: block; width: 100%; height: 31px; } <!–[if lt IE 7]> <style> h1 span { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’); } <!--[endif]–->

6. Vertical centering with line-height
div{ height:100px; } div *{ margin:0; } div p{ line-height:100px; }

7. Rounded corners with images
<p class="”roundcont”"> <p class="”roundtop”"> CONTENT <p class="”roundbottom”">
.roundcont { width: 250px; background-color: #f90; color: #fff; } .roundcont p { margin: 0 10px; } .roundtop { background: url(tr.gif) no-repeat top right; } .roundbottom { background: url(br.gif) no-repeat top right; } img.corner { width: 15px; height: 15px; border: none; display: block !important; }

8. Multiple class name
<img src=”image.gif” class=”class1 class2″ alt=”" />
.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}
9. Center horizontally
<div id=”container”></div>
#container { margin:0px auto; }

10. CSS Drop Caps
<p class=”introduction”> This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap. </p>
p.introduction:first-letter { font-size : 300%; font-weight : bold; float : left; width : 1em; }

11. Prevent line breaks in links, oversized content to brake
a{ white-space:nowrap; } #main{ overflow:hidden; }
12. Show firefox scrollbar, remove textarea scrollbar in IE
html{ overflow:-moz-scrollbars-vertical; } textarea{ overflow:auto; }
| Print article | This entry was posted by alex on March 17, 2008 at 10:19 pm, and is filed under CSS, Graphic Design, Programming, Web-related. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
iPhone web development [Part 2]
about 2 months ago - No comments
In part one of my tutorial on iPhone web development, we talked about the basic stuff (Recognizing iPhones or iPods, setting up special HTML and CSS tags… ) we will now move on to the really clever bit: Orientation detection.
For many sites, we may just have the same thing both on portrait and landscape. But More >
Fast and dirty CSS trick for IE
about 4 months ago - No comments
I actually think that we the developers need IE, it is like the bad guy in an action movie, the good guy wouldn’t have a life without him, although sometimes you really wish it never existed! Haha just kidding, we all wish it didn’t exist… But well, there are some times when we need something More >
Stylish CSS trick for your Website
about 9 months ago - No comments
Maybe a few of you noticed this on some websites, maybe some of you even use it.
Right now this works in Safari, Opera, and Konqueror and Firefox 3.x. (I think it doesn’t work in Firefox 1 or 2, correct me if I’m wrong)
What I’m talking about is the text-shadow, wisely applied to your design, it More >
CSS3 New features – Interesting info ;)
about 1 year ago - No comments
Hello fellow developers,
I’m sure all of you have heard of the “new” CSS3 stuff, it’s been around for a while now, and it certainly has some very interesting new features.
First, I’ll review some of the things that were the hardest to develop, yet they looked so damn well:
Rounded corners – We all love them, but More >
Apply a background image to an image
about 1 year ago - No comments
this is quite a neat trick, and it can look really good depending on your design and the image you put as background…
To get it to work all you need is to apply a padding and display:block; to the image. So the CSS would be:
img{
display:block;
padding:10px;
background-image:url(image.gif);
}
Here is a very smart use of this technique, where a More >
The 100 Rules of Internet
about 2 years ago - No comments
Do not talk about /b/
Do NOT talk about /b/
We are Anonymous.
Anonymous is legion.
Anonymous does not forgive, Anonymous does not forget.
Anonymous can be horrible, senseless, uncaring monster.
Anonymous is still able to deliver.
There are no real rules about posting.
There are no real rules about moderation either — enjoy your ban.
If you enjoy any rival sites — DON’T.
You More >
How we became web developers…
about 2 years ago - 3 comments
I normally write to those web developers/programmers who are already good, experienced, and thus the articles are somewhat advanced.
But today I got up feeling nostalgic I guess, or I just felt like remembering back on my www birth, on my first impression of the Internet, my first site online, my first steps in w3c standards, More >
Beautiful tab design:
about 2 years ago - No comments
This article is not on how to create tabbed menus, is just about how to style them!
I completely forgot who was the source, so if you happen to be the author comment your URL and I’ll put up a link
Anyway, I found that this is by far the easiest and probably most beautiful More >
Reseting CSS default browser settings:
about 2 years ago - 6 comments
One of the biggest problems when designing a website is that after all work is done it looks different on different browsers.
The solution usually used by most web developers consists on manually changing every bit of CSS they have to make it look all the same, resulting on a very hard and time-consuming approach.
A great More >
New version of the nifty corners script
about 2 years ago - 1 comment
I’m sure you’ve heard of the Nifty Corners js script to create very cool rounded corners, and some of you might even have used it, well there is a new version:
Nifty Corners Cube
It improves most flaws of the first version, plus it adds new features and functionalities. This is the new stuff:
The numbers of parameters More >
about 2 years ago
Nice reminder
The is a mistake on the second trick. The css should be “ol li” not “ol p”.
about 2 years ago
Thanks for spotting it!
I didn’t see that one
about 2 years ago
You should be more careful when you “borrow” from other sites — you’ve done a nice job cleaning up some of the code (like on #1, for example), but #2 won’t work as you’ve rewritten it. Without a containing tag inside those list items (the original article used <p>, but I tend to use <span> in my code), your numbers will inherit their style from the list item, not the ordered list. Also, #3 is missing the <br /> tags that made those clears work properly — without them, any sufficiently wide form will act funny. I tend to put the “clear: left” bit on the labels themselves, if that helps you clean it up.
about 2 years ago
Thanks for the tips!
The fun thing is that I actually use the List trick in my comments, I changed the css to have it work and I forgot to update the topic.
In the original post the code might have been a little different, I added and changed some stuff where I thought it would be better..