CSS – No tricks. Just Treats.{Comments Off on CSS – No tricks. Just Treats.}


by Omar N.

CSS-Tricks

Taken from www.toasteggme.com

I wanted to share something cool I found while looking for an article to write about. The article highlights 5 useful tips for using Cascading Style Sheets (CSS) to those who are new to the subject (like me). I’m just going to point out 3 that I thought were good. The article was written by the creator of Pingable, a website dedicated to spreading knowledge about the benefits of using WordPress. Before I commit the most heinous crime of doing a copy and paste job, I just want to say I really enjoyed reading the articles on this website and I recommend checking it out, as you might find helpful ideas for upcoming web design projects (ie. Milestone 2).

Tip 1: How to replace text with an image, yet retain the advantage of SEO by the having keyword in the heading.

—Copy/Paste—

Inline:
<h1>Hello World</h1>

CSS:
h1 {
display:block;
width:100px;
height:0;
padding:30px 0 0 0;
background-image:url(“heading.gif”);
overflow:hidden;}

Tip 2: Create a box behind your text that has rounded corners and do it without using an image file. (More examples can be found here: http://www.html.it/articoli/niftycube/index.html)

–Copy/Paste–

Inline:
<div id=”container”>
<b class=”rtop”><b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b></b>
<!–content goes here –>
<b class=”rbottom”><b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b></b>
</div>

CSS:
.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}

Tip 3: Make an RSS Feed Icon without using an image. This one is neat because with a little work, you can make bunch of clickable icons without using an image at all. (Source can be found here: http://surf11.com/entry/85/css-xml-rss-button)

–Copy/Paste–

Inline:
<a href=”http://pingable.org/feed/” class=”feed”>FEED</a>

CSS:
.feed {border:1px solid;
border-color:#FC9 #630 #330 #F96;
padding:0 3px;
font:bold 10px verdana,sans-serif;
color:#FFF;
background:#F60;
text-decoration:none;
margin:4px;}

Reference:
Ward Simon (2007, November 1). 5 Simple CSS Tricks. Retrieved from http://www.pingable.org/5-simple-css-tricks/