53 CSS-Techniques You Couldn’t Live Without

Sun, 21 Jan 2007 09:12:26 GMT

clipped by: Scattered_Fusion

Clip Source: www.smashingmagazine.com

1. CSS Based Navigation

2. Navigation Matrix Reloaded

3. CSS Tabs

4. CSS Bar Graphs (CSS For Bar Graphs)

5. Collapsing Tables: An Example

6. Adam’s Radio & Checkbox Customisation Method

7. CSS Image Replacement

8. CSS Shadows (CSS Shadows Roundup)

9. CSS Rounded Corners Roundup (Nifty Corners)

10. Drop Cap - Capital Letters with CSS

11. Define Image Opacity with CSS

12. How to Create a Block Hover Effect for a List of Links

13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS

14. CSS Diagrams

15. CSS Curves

16. Footer Stick allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.

17. CSS Image Map

18. CSS Image Pop-Up

19. CSS Image Preloader

20. CSS Image Replacement for Buttons

21. Link Thumbnail

22. CSS Map Pop

23. PHP-based CSS Style Switcher

24. CSS Unordered List Calender (CSS Styled Calender)

25. CSS-Based Forms: Techniques

26. CSS-Based Tables: Techniques

27. Printing Web-Documents and CSS

28. Improved Links-Display for Print-Layouts with CSS

29. CSS-Submit Buttons

30. CSS Teaser Box

31. CSS Tricks for Custom Bullets

32. Ticked Off Links Reloaded

33. CSS Zooming

34. Creating a Star Rater using CSS

35. The ways to style visited Links

36. PDF, ZIP, DOC Links Labeling

37. Displaying Percentages with CSS

38. Image Floats without the Text Wrap

39. Let visitors decide, whether or not will they open link in a new window

40. Simple accessible external links

41. Zebra Table with JavaScript and CSS

42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS

43. Unobtrusive Sidenotes

44. Image Caption with CSS (Styled Images with Caption)

45. Dynamic Piechart with CSS

46. Format Footnotes with CSS

47. Hierarchical Sitemap with CSS

48. Snook’s Resizable Underlines

49. Switchy McLayout: An Adaptive Layout Technique

50. StyleMap: CSS+HTML Visual Sitemap

51. Custom Reading Width

52. CSS Alert Message

53. CSS Production Notes

Tags: website, code, technology, css, tips, education

Adding a CSS StyleSheet to your RSS Feed

Mon, 08 Jan 2007 17:22:25 GMT

clipped by: lightblack

Clip Source: www.petefreitag.com

Adding a CSS StyleSheet to your RSS Feed

It's pretty easy to add a CSS stylesheet to your RSS feeds. I created one in about 10 minutes for my RSS feed. You can do a lot more with an XSL stylesheet (turn links into clickable links, etc), but CSS can make your feed look much less scary for the non-technical crowd. And the good news is you probably already know CSS, so setting one up is trivial...

To start you need to add a xml-stylesheet tag to your RSS feed:

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>
...

Next you need to create a CSS file called rss.css, inside it you can define how each RSS tag is displayed. Here's an example that will work for an RSS 2.0 file, you may need to add a few more elements to the display: none rule:

rss {
display: block;
font-family: verdana, arial;
}
title {
display: block;
margin: 5px;
padding: 2px;
color: gray;
border-bottom: 1px solid silver;
}
link {
display: block;
font-size: small;
padding-left: 10px;
}
item {
display: block;
padding: 2px 30px 2px 30px;
}
docs {
display: block;
background-color: #ffffe6;
margin: 20px;
text-align: center;
padding: 5px;
color: #7f7f7f;
border: 1px solid silver;
}
/* all hidden elements */
language, lastBuildDate, ttl, guid, category, description, pubDate {
display: none;
}

You will notice that I use the docs tag to tell the user that they are looking at a RSS feed, and provide a url for more information. This is probably a good thing to do, you could include that info in the description tag, but that tag often is used by aggregators.

Tags: css, rss, rss feed

Clipmarks | Scattered_Fusion's CSS collection

53 CSS-Techniques You Couldn’t Live Without

Adding a CSS StyleSheet to your RSS Feed

Adding a CSS StyleSheet to your RSS Feed