A New Clearfix Method
From Perishable Press, a new clearfix method to deal with the current crop of browsers. An interesting discussion on clearing in the comments, as well. Worth a look.
A New Clearfix Method » (Perishable Press)
5 Rules for More Readable CSS Files
From Woork Up, a nice article that illustrates five simple practical rules that can help you write well structured and more readable CSS files to make your developer life easier.
5 Rules for More Readable CSS Files » (Woork Up)
Hover Effects in Web Design
Spoonfed Design has a nice article detailing and illustrating the best practises and techniques for using hover effects in web design, complete with 30 examples to show "good use" of hover effects. A good read.
Hover Effects in Web Design: Best Practices and Examples »
Two Nice CSS Reads
From Designer Daily, some tips for making your links better by giving more information to your users before they click. 8 CSS tips for better linking »
From Divittodesign, a Guide to CSS Conditional Comments is a great primer to using conditional comments to target specific css for specific browsers. CSS Conditional Comments Guide »
Simple Scalable CSS Based Breadcrumbs
Veerle Pieters has a great article and "how to" create a simple css-based breadcrumb navigation using only one image and some basic CSS styling with an unordered list as the HTML code. Worth a read.
Simple scalable CSS based breadcrumbs » (Veerle's Blog)
16 Usable CSS Graph and Bar Chart Tutorials
Speckyboy has a great round-up of tutorials detailing how to use CSS (and sometimes a bit of PHP) to create a wide variety of graphs and charts. A great resource for exploring the options for data presentation.
16 Usable CSS Graph and Bar Chart Tutorials and Techniques » (Speckyboy)
2 Nice Web Dev and CSS Reads
From yongfook.com, a nice article with some great tips on streamlining the web develpment process. 10 Dirty Little Web Development Tricks.
From divitodesign, 9 Tips to Smaller and optimized CSS Files. For experiences CSS coders, there may not be anything revolutionary here, but a good read nonetheless. Be sure to read the comments as well for some discussion on these ideas as well as more tips and tricks for optimizing CSS files.
Morning Coffee CSS Links
From All WebDesignBlog, a round-up of online CSS generators at 40 CSS Generators, Creators, and Makers.
From WebDesignerDepot, a nice article on the do's and don'ts of using large website backgrounds. Worth a read.
SixRevisions is starting a series of CSS articles with a look at resetting your styles with CSS Reset. A thorough article with additional resources for learning more about CSS Resets.
How to: CSS Large Background
Web Designer Wall has a nice How-to today, showing how to implement a large background image into a CSS design.
In this tutorial, I will provide various CSS examples on how you can create a large background site using either a single or double images.
A List Apart: CSS Sprites2
A List Apart revisits CSS Sprites and revises it with the help of popular JavaScript Libraries like jQuery, creating some great results for bringing some animation into a page without Flash.
CSS Sprites2 - It's JavaScript Time (A List Apart)
9 Top CSS Essential Skills
Aimed at elementary and intermediate CSS learners, this article from acomment.net is a nice round-up of some learning CSS tutorials.
9 Top CSS Essential Skills That Every Web designer Should Learn
3 CSS Articles Worth a Look
First, from BadBoy Media Design, a look at vertical align with CSS.
If vertical align is a snap using tables, it can prove quite troublesome with CSS layouts. But you shouldn’t let such a small thing discourage you. I, for one, don’t like to see a perfectly valid CSS layout mingled with some tables just for this purpose. So, if you want to know how you can achieve vertical-align functionality the right way, read on.
From Peak Flow Design, 10 Useful CSS Tricks to Conquer the World. A worthwhile read, even if world dominance isn't on your agenda ;)
From Jank at Warp Speed, something I've never seen before - Add Grunge Effect to Text Using simple CSS.
Cool!
Better CSS Font Stacks
Nice article on Unit Blog that takes a look at font stacks and ways to optimize them beyond the standard CSS options.
One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack.
Unit Interactive :: Blog :: Better CSS Font Stacks
CSS Link Round-up
From CSS Newbie, a list based CSS Calendar how-to. A Semantic List-Based CSS Calendar.
Using CSS and GIF's to Animate a menu is an interesting article and technique.
SenCSS "is a sensible standards CSS Framework. This means that SenCSS tries to supply standard styling for all repetitive parts of your CSS, allowing you to focus on the fun parts. In that sense, senCSS is a bit like a large CSS Reset."
Using CSS to Fix Anything: 20+ Common Bugs and Fixes - a nice article from noupe.com, worth a read.
Clean and Pure CSS Form Design
Site woork has a nice how-to today, to produce a good looking, pure css form design. As always, woork tutorials are well illustrated and include all the code you need to reproduce it for your own use.
woork: Clean and pure CSS FORM design
10 Examples of Beautiful CSS Typography and How They Did It
Web Design Blog has a great article today, highlighting great examples of CSS Typography and revealing the CSS behind it. A great read with some nice examples.
ｻ 10 Examples of Beautiful CSS Typography and how they did it.
CSS Decorative Gallery
Web Designer Wall has a great tutorial today, showing how to decorate your images and photo galleries without editing the source images. The technique involves adding an additional span tag to apply a background image to create the overlay effect.
CSS Message Boxes for Different Message Types
Website Janko at Warp Speed has a nice article about how to deliver (with CSS) different informational messages for different message types. A great how-to article and a handy technique.
CSS Message Boxes for different message types
Resizeable Background Image
CSS Tricks has a nice article/how-to create a resizeable background image that will adjust as the browser window changes. Worth a read for a nice technique for when it might be needed.
How To: Resizeable Background Image
A Trio of CSS Links
From the CSS Newbie, The CSS-Only Accordion Effect - without a single line of JavaScript. Really!
Tomorrow's CSS Today: 8 Techniques They Don't Want You to Know - an excellent article from Sitepoint.
With all the hype over new and upcoming browser support for advanced CSS features, developers can be confused about the CSS they can include in web projects today. Many of the more advanced features aren't widely supported by the dominant browsers, but some very useful ones are -- including newer features from CSS3.
CSS - An Absolute Mess is a nice article from Search-This that looks at the problems that can crop up with absolute positioned elements in IE6.
The Amazing LI: Using CSS and Unordered List Items to Do Just About Anything
Site Bits O' NewMedia has a nice article extolling the virtues of the amazing li and unordered lists. Worth a read.
I can still remember the day I discovered thetag. It's not that I had never used list items before—I had built plenty of bulleted lists. What I discovered that day was that with a little CSS, the becomes one of the most powerful and versatile tags in a web designer's arsenal.
The Amazing LI: Using CSS and Unordered List Items to Do Just About Anything
Perfect Pagination Style Using CSS
Website woork has a nice tutorial today, showing how to create a pagination menu using CSS. Included in the tutorial is the html/css to create Flickr/Digg-like clean pagination styles.
This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages. It's a question I often receive, so I decided to publish a very simple post which explains how to design a perfect pagination style using some lines of HTML and CSS code.woork: Perfect pagination style using CSSMarch 16, 2008 in CSS Snippets3 Simple Steps in Coding a Rounded Corners Layout
Looking for a simple and semantic way to code a rounded corners layout? Website CSS Globe has a nice little tutorial (complete with PSD and XHTML/CSS Files).
What we should aim in coding is simplicity and try to avoid any unnecessary markup. Various rounded corners techniques often include several additional elements that are purely presentational. When talking about fixed width, rounded corners layout, there's no need for complications. Let me show you my approach to coding just that, fixed width, rounded corners layout in 3 simple steps.3 Simple Steps in Coding a Rounded Corners Layout (Css Globe)
March 14, 2008 in CSS SnippetsMost Used CSS Tricks
Website StylizedWeb.com has a nice round-up of CSS tricks today, complete with CSS code examples.
Tricks include rounded corners with or without images, tableless forms, double blockquotes and more. Worth a read.
Most used CSS tricks (StylizedWeb.com)
March 13, 2008 in CSS SnippetsGood CSS Articles Round-up
I seem to have a backlog of good css articles that I have bookmarked and not posted yet, so I thought I'd do just that in one post ...
woork: Write a well structured CSS file without becoming crazy
This is a descriptive post about how to write a well structured CSS file. I already spoken about code readability in CSS files, but after several most specific requests about this argument (mainly about the difficult of some readers to manage CSS file with a big quantity of layout elements), I decided to illustrate the process I use in these cases.Combating Classitis with Cascades and Sequential Selectors
There is a disease out there in the CSS world. It can afflict anything from the meanest weblog (or the nicest ones too, I suppose) to the greatest of corporate websites. It’s called Classitis, and I’ve encountered it far too often in my professional work. Perhaps you’ve seen it too. It looks a little something like this:CSS Hover Icon Menu Using CSS Sprites
Swapping icons on hover is traditionally done using JavaScript but this method requires a lot of unnecessary code and a number of different icons in order to achieve what should be really simple. However, there is a solution and this tutorial will explain how to apply different hover over icons to an unordered list using CSS Sprites.Creating Equidistant Objects with CSS
Creating a horizontal row of objects that are equidistant from each other is another one of those things in web design that is much more difficult than it should be. This can be a very useful thing to do, especially in fluid width layouts when you are trying to make the most of whatever horizontal space you have.reForms CSS Form Design Template for Any Layout
The reForms technique is a CSS and Javascript solution I'm working on for form design issues. Although it isn't complete, I'm providing a few code snips from the CSS and HTML that may be useful to other developers. This post describes a form element layout technique that will shrink and grow with the available space. This allows designers to create 2 and 4 column form layouts without breaking the design. It also allows the user to resize their browser window and change font size without rendering the form unusable.CSS Trick: Creating a Body-Border
Hicksdesign has been “fiddling” with their site design. The new design features what someone called in the comments a “Body Border”. It’s basically a stroke of color just inside the entire viewable area, all the way around, in the browser window. I thought it was a nice touch and a pretty spiffy little CSS trick so I thought I’d feature how it was done here.Creating Custom Double Solid Borders for Images
In this brief tutorial I will show you how to create solid double borders for images and style them however you wish.How to Create Beautiful and Elegant HTML Lists Using CSS
HTML list have become one of the most used HTML elements for marking-up various semantic content structures — navigation, comments and even image galleries. This article will explain and show you how to style lists inside blog posts, articles or other basic HTML documents.March 12, 2008 in CSS Snippets8 Premium One Line CSS Tips
CSS Globe has a nice little list of one-line CSS tips today worth a read. It's worth reading through the article comments as well, for more!
8 Premium One Line Css Tips (CSS Globe)
March 10, 2008 in CSS SnippetsLiquid Expandable Section with Rounded Corners using CSS
Website woork has a nice tutorial today, showing how to design a nice, liquid, expandable section with rounded corners using CSS, HTML and Javascript.
woork: Liquid expandable section with rounded corners using CSS
March 5, 2008 in CSS SnippetsPixels to Ems Conversion Table
Designing with ems it necessary to for liquid layouts (or even just setting font sizing) but converting from pixels to ems requires some figuring. This Pixels to Ems Conversion Table makes things a whole lot easier. Worth bookmarking for reference.
Pixels to Ems Conversion Table for CSS
March 1, 2008 in CSS SnippetsVertically Center Content with CSS
A nice how-to vertically center a page with CSS from website Vdot Media.
A convenient benefit of using tables is the ability to vertically center content within a cell using the valign attribute. Unfortunately, acheiving the same effect with CSS isn’t so convenient. So, as we continue to move towards tableless structures, there comes a need for a simple and valid CSS alternative.Vertically center content with CSS (Vdot Media)
February 29, 2008 in CSS Snippets5 Ways to Set You Unordered Lists Apart
Site CSS Newbie has a lot of great articles for beginning to intermediate css and is definitely worth bookmarking or grabbing the RSS feed. This article details how to add some style to basic, unordered css lists.
sometimes, you just need a list to be a list. But that isn’t to say it has to be a boring looking list. Here are five different ways to style your unordered lists with CSS.5 Ways to Set Your Unordered Lists Apart (CSS Newbie)
February 27, 2008 in CSS SnippetsBeautiful CSS Form
This tutorial explains how to design a Facebook-style form using clean CSS design. Works cross browser, as well.
woork: Beautiful CSS Form (woork)
February 26, 2008 in CSS SnippetsFighting Form Spam with CSS
Looking for a simple solution to fight form spam? CSS Globe offers a way to make a captcha using simple CSS background images.
Messy and distorted text can be annoying to users, that it can prevent them from posting a comment. One more thing that can make to think twice when it comes to using some of the existing captcha solutions, is the fact that you can't control their appearance. Generated images can be, well - ugly! To a delicate designer soul that can be even greater issue than spending time every day moderating comments. So how about we call CSS to the rescue.Fighting Form Spam With Css (CSS Globe)
February 18, 2008 in CSS SnippetsCreate Resizing Thumbnails Using CSS Overflow
If you've ever struggled with only having room for a small thumbnail in your entry or article but wish to you could easily show a larger version, this tutorial from CSS Globe might just have the answer for you! And it's all done with html and css.
This tutorial is aimed at controlling the size of the thumbnails appearing on your page. Sometimes we don't have enough space to spare to fit in large thumbnails and yet we would like to avoid small and barely recognizable images. Using this trick we limit the default dimensions of the thumb, and show it in full size when user mouse-overs it.Create Resizing Thumbnails Using Overflow Property | Css Globe
February 17, 2008 in CSS SnippetsUsing Weather Data to Change Your Website's Appearance
A neat trick from CSS-Tricks, showing how to use weather data from Yahoo Weather, some PHP and CSS to change the appearance of your website to reflect your current weather.
The article walks you through what you need to do and worth noting, that while the article uses US zip codes, you can find your own international weather code through the url at Yahoo weather.
Using Weather Data to Change Your Websites Appearance through PHP and CSS (CSS Tricks)
February 17, 2008 in CSS Snippets10 Best CSS Hacks
From website StylizedWeb.com, comes a list of 10 css hacks that can come in handy and is worth browsing as a reminder of some quick fixes when coding.
If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers. ... Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.10 best CSS hacks (Stylized Web)
February 17, 2008 in CSS SnippetsCreate Book-style Chapter Introductions with CSS
Website CSS Newbie has a nice little how-to create Book-style introductions using CSS selectors. The effect creates a drop cap and an uppercase for line that makes for a nice introduction to a special article.
Book-style Chapter Introductions Using Pure CSS – CSSnewbie
February 3, 2008 in CSS SnippetsPure CSS Data Charts
Looking for a simple way to display chart data? CSS Globe has a nice tutorial outlining how to achieve this with pure CSS mark-up.
Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let's say simple data chart? How about giving it a try with nothing but good ol' css?Pure Css Data Chart (CSS Globe)
February 3, 2008 in CSS SnippetsCSS Rounded Corners Revisited Twice
In the past couple of days I have stumbled on two articles on CSS Rounded Corners and both seem to be based on a similar method. I'm not sure what's up with that, but I'll link them both up so you can have a look at both.
Dave Woods - CSS Rounded Corners Revisited.
Simple Round Corners in CSS (revisited) at Search-This.
January 24, 2008 in CSS SnippetsLinks Inside of Larger Clickable Areas
Website CSS-Tricks has a nice article today, outlining how to create clickable links inside of a larger, clickable area.
Imagine the common scenario of a large header containing a horizontal menu. You want the entire header area to be clickable as a “home” button, but obviously you need your menu items to be clickable as well.Links Inside of Larger ClickableAreas - CSS-Tricks
January 24, 2008 in CSS Snippets100% Height Layout Using CSS
CSS layouts don’t have to be complicated but sometimes the things that should be simple and easy to do seem impossible at first.Within this tutorial, I’ll explain how 100% height can be achieved cross browser, using CSS.
And while you're over at Dave Wood's, you might want to check out another article worth a read IE6-CSS Bugs and Fixes Explained. Won't it be nice when we finally get past having to code for IE6?!
January 18, 2008 in CSS SnippetsCSS Gradient Text Effect
Web site Web Designer Wall has another nice article, outlining how to achieve a gradient text effect with only CSS. The method involves the use of an empty span tag or, alternately, using javascript support from jQuery. A nice technique for easy gradient text.
Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6.January 17, 2008 in CSS SnippetsCreate Transparent PNGs in IE6 Using AlphaImageLoader and No Hacks
Create Transparent PNGs in IE6 Using AlphaImageLoader & No Hacks details a nice, hack-free way to get alpha transparency to work in IE6, using default cascade and inheritance.
Thanks Aaron!
January 8, 2008 in CSS SnippetsID Your Body for Greater CSS Control
ID Your Body For Greater CSS Control andSpecificity - a nice article from CSS Tricks that details the design benefits that can be gained from giving body tags a CSS ID.
Worth a read for some detailed information on a handy CSS technique.
December 17, 2007 in CSS SnippetsCSS - Recipe for Success
CSS - A Recipe for Success is a great article that details how to use CSS to create a layout similar to a restaurant menu (with dotted leaders).
Great read for a nice technique that is worthy of bookmarking for future reference.
December 5, 2007 in CSS SnippetsCSS Percentage Bars
pixelspread: CSS Percentage Bars is a great article that details how to create percentage display bars with CSS.
The tutorial is full of code examples and variations (including using a background image to add some colour to the display). Also note the comments regarding the use of classes vs. ids if you want to use these bars more than once on a page.
December 5, 2007 in CSS SnippetsCheckmark Your Visited Links with CSS
Website CSS Tricks details how to "Checkmark" Your Visited Links with Pure CSS.
Web browsers know which links on a page have been visited by a user (until the cache is cleared out, that is). It is up to you the designer to take advantage of that web browser’s knowledge, if you choose to do so. I’m sure you don’t need to guess, this all happens with CSS.Nice technique that takes just a bit of CSS to accomplish.
December 2, 2007 in CSS Snippets7 CSS Hacks That We Should Use
The 7 CSS Hacks that we should use details some useful CSS hacks for dealing with Internet Explorer, in particular.
Worth a read for those times when nothing but a hack will work to get that layout to play nice with IE.
November 19, 2007 in CSS SnippetsLose the Images: How to Get Rounded Corners, Gradients, Drop Shadows and More Using CSS
Lose the Images: How to Get Rounded Corners, Gradients, Drop Shadows and More Using CSS - a nice round-up, showing how to achieve popular design techniques without images.
October 5, 2007 in CSS SnippetsForward Thinking CSS Floats
Agile Ajax: Developer's Notebook: Forward-thinking CSS float-clearing - a look at the current state of float clearing in CSS and the best way forward. Interesting article and be sure to read the comments for other's thoughts on the subject.
September 22, 2007 in CSS SnippetsFade Out Bottom Effect with CSS
"This is a cool effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0%) with a transparent PNG image and a high z-index value."
Cool effect with just a bit of CSS and a transparent PNG.
September 18, 2007 in CSS SnippetsCSS Only DOM Tabs
CSS Only DOM Tabs - is, as titled, a CSS only solution to creating "DOM Tabs", which creates a nice alternative to javascript solutions.
"There are several variations of “dom tabs” out there, and lets be honest they work pretty well. If a user has javascript everything works as planned, and if not you can read all of the content as all laid out vertically. However you can accomplish the same effect using just CSS, saving you the javascript download and dependency."
You can view a demo of CSS Only DOM Tabs here - CSS-TABS | CSS-Only "DOM TABS"
September 12, 2007 in CSS SnippetsDiagnostic Styling
When Eric Meyer speaks about CSS, it's usually worth listening. His latest article Diagnostic Styling looks at developing a set of "diagnostic" css styles that would be used in the development stages of a design to easily diagnose problems or errors.
A good read.
September 7, 2007 in CSS SnippetsAdd Watermarks to Images Using CSS and PNG
Add Watermarks to images using CSS and PNG - a tutorial that shows how to create a transparent PNG image and then use CSS to overlay it on images on your site.
Of course, this watermark would not be part of the actual image file, so doesn't prevent someone lifting and using the image, but for simple uses, it can be used to visually re-enforce image copyright restrictions.
September 7, 2007 in CSS SnippetsA Stripe of List Style Inspiration
A Stripe of List Style Inspiration shows how to turn the basic CSS list into an "Expand-A-Stripe" menu.
"Obviously, the main navigation block isn't the place to go buck wild. Users want to know how to navigate at first glance, but that doesn't mean the rest of the lists on your site have to fit the same mold. We should be trying to do things with CSS that haven't been done before and looking for opportunities to create something unique."
View the page source to see the CSS and html behind the demo.
August 22, 2007 in CSS Snippets125 Code Snippets for Web Designers
125 Code Snippets for web designers is a compiled list of links to useful code snippets that any web designer might find a use for.
Not new resources, but handy to have them compiled in one large list. Worth a bookmark.
August 21, 2007 in CSS SnippetsUsing CSS z-index to make a photo gallery
Give me some Zzzzz's outlines a technique for using CSS z-index property to create a stacking photo gallery that switches position on hover.
You can see a live demo of the gallery here.
August 16, 2007 in CSS SnippetsHow to Spruce up your Search Box with CSS and a Background Image
How to Spruce up your Search Box with CSS and a Background Image is a detailed "how-to", including the code needed to style your site's search box. Works in all major browsers.
August 16, 2007 in CSS SnippetsLots of tips in lots of numbered lists
6 - 6 somewhat lesser known Windows XP tips and tricks. I particularly like tip #5 on how to display album art on a Windows folder.
20 - 20 Free Applications to Increase your Productivity "The Internet is loaded with free software, making it hard to know which one’s you really need. This article will act as your guide to the top 20 free applications (Web and Windows) for increased productivity."
12 - 12 Essential Greasemonkey Hacks for YouTube. Use Greasemonkey scripts in Firefox to add features to YouTube.
20 - 20 Ways to Use Gmail Filters. " One of the coolest things about Gmail is its filters — set up properly, filters can add loads of functionality to your already-powerful Gmail account. Save time and space, rid your inbox of unwanted emails, and turn your Gmail into a multi-functional tool with simple filters."
17 - 17 Firefox Extensions That Make Blogging Easy. If you use Firefox and you're a blogger, definitely worth a read.
10 - 10 Free Ways to Track all your Passwords. Yes, now I can get rid of all the post-it notes on the side of my computer ;)
June 3, 2007 in CSS SnippetsScalable CSS Buttons Using PNG and Background Colors
Scalable CSS Buttons Using PNG and Background Colors is not just another CSS button article.
"I know, it's been a lot of articles lately about CSS buttons. But I simply felt the need to write about something that has not yet been covered in the latest button-trend: Dynamic CSS Buttons using PNG, transparency and background colors that degrades nicely and supports full scalability. With full scalability I mean it should resize in all directions according to the font size and content."
May 30, 2007 in CSS SnippetsSupercharge your image borders
Supercharge your image borders.
"Image borders. Borders - for images. They're not very interesting, right? Sometimes we'll add a border: 1px solid #ccc; if we want our images to stand out from the surrounding text, but apart from that it's not usually an aspect of CSS that gets a great deal of attention. I'm going to show you three ways to spruce up your image borders and add a little more visual interest to your designs - and all without any additional markup."
Some easy ways to spruce up your image borders.
May 29, 2007 in CSS SnippetsStyling the Button Element with Sliding Doors
An interesting follow-up to an article I posted about recently - Rediscovering the Button Element - Styling the Button Element with Sliding Doors.
"While Particle Tree's technique offered a solid solution, it fell short of our needs. We needed a button that used Sliding Doors, actual html text, and did not require javascript for rollovers or form submission. Meeting these conditions meant that the input and anchor elements were ruled out, and it was clear that the button element was our only chance. The following technique demonstrates a cross-browser technique for button elements with sliding doors."
A good read for an alternative approach to styling form buttons.
May 26, 2007 in CSS SnippetsCSS: The Star Matrix Pre-loaded Star Rating System
CSS The Star Matrix Pre-loaded is a nice css star rating system with detailed description and code. You can check out a demo of the CSS Star Rating System here.
The author reports that the effect works across a broad range of browsers, as well!
May 23, 2007 in CSS SnippetsUsing HTML Lists Properly
"If you’re a person who spins around fast when someone shouts “hey, you, web developer,” you probably use HyperText Markup Language (HTML) lists often — or you should anyway. But do you use them correctly and effectively?"
Using HTML Lists Properly - a closer look at the 3 types of list available and when and how to use them properly.
May 21, 2007 in CSS SnippetsA couple of CSS Snippets
Web typography: bottom margins of paragraphs and lists how to create perfect vertical space on screen.
Create Resizable Images with CSS - an image resizing solution to accommodate changes in a browser's text size.
May 12, 2007 in CSS Snippets9 Expert CSS Ideas You Should Think Twice About Using
An interesting follow-up to a link I posted yesterday, offering up some thoughts on SM's tips ...
"Smashing Magazine does an excellent job of providing quality resources for web developers. Today while checking out Digg, I noticed that they have a new article entitled 70 Expert Ideas For Better CSS Coding. The article contains lots of good information on how to improve your CSS, however there are a number of ideas presented that should be taken with a grain of salt."
9 Expert CSS Ideas You Should Think Twice About Before Using
May 11, 2007 in CSS SnippetsCSS Hover Effect on Tabbed Boxes
Veerle's blog | CSS hover effect - a "how-to" create a nice hover effect on tabbed boxes (as illustrated above). Worth a bookmark.
May 7, 2007 in CSS Snippets5 Accessible and Pretty CSS Tips
5 Accessible and pretty CSS tips - worth a read if you are interested in CSS site enhancements such as declaring external links, prettified forms and more.
May 6, 2007 in CSS Snippets25 Code Snippets for Web Designers
25 Code Snippets for Web Designers (Part4) - the latest installment of a list of code snippets.
The list is extensive with images and descriptions. There is probably not a lot "new" for anyone who follows these things but it's always nice to be reminded of them.
May 4, 2007 in CSS SnippetsCSS Reset Reloaded
Since I first linked to Eric Meyer's CSS Reset code, it has gone through several iterations. This current version is being labeled as the "final version" so it's worth going back to take a look.
Eric's Archived Thoughts: Reset Reloaded
May 1, 2007 in CSS SnippetsMost useful CSS Attribute
Most useful CSS Attribute according to Deziner Folio is the one line of CSS code that will remove the ugly dotted outline around a tags (links).
Personally, I'm pleased to be reminded of this because while I had seen it before, I always forget to pop it in to the code.
May 1, 2007 in CSS SnippetsCSS Theme Switcher
CSS style theme switcher is a cool bit of code that, 6 times a day, will change the body to a different class name. So, you could have a different display depending on the time of day - morning, noon, afternoon, evening etc.
The class names are changed via JavaScript and if JS is disabled, the general style will be used, so it degrades nicely. Tested to work in Firefox, IE 6 and 7 and Safari.
April 25, 2007 in CSS SnippetsThe most useful CSS Technique: the Master Stylesheet
"One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling."
There's no doubt that a starter or "master" stylesheet that resets the global CSS is a good idea and this one is very well done and explained.
Master Stylesheet: The Most Useful CSS Technique
April 24, 2007 in CSS SnippetsAdd notes to images (like flickr) using css
If you'd like to add notes to your images (ala flickr), here's a CSS solution. The original article was in Spanish, so I've run it through Google Translate to make it a little easier to understand for us non-Spanish speakers.
Translated version of add notes to images with CSS
April 23, 2007 in CSS SnippetsCross-browser CSS Sticky Footer
A CSS Sticky Footer - with simple and minimal markup that has been tested to work in IE5 and up, Firefox, Safari and Opera.
April 15, 2007 in CSS SnippetsEric Meyer's version of Reset CSS
There are a lot of versions of reset or baseline css floating around - the css used to reset basic css styles to a common point before beginning to code. When it comes to deciding which one to work with, we could do a lot worse than one offered up by css guru Eric Meyer. Here's Eric's Reset CSS Styles.
April 12, 2007 in CSS SnippetsMethods for clearing CSS floats without extra markup
How to clear CSS floats without extra markup - different techniques explained - a good read as Robert's Talk looks at several methods for clearing floats.
April 12, 2007 in CSS Snippets25 Code Snippets for Web Designers
25 Code Snippets for Web Designers (Part1) is a good read, particularly as a reminder of some goodies you or I might have forgotten about. I note that this is Part 1, so worth checking back for Part 2 as well.
March 9, 2007 in CSS SnippetsDisplaying percentages graphically with CSS
Displaying percentages is a detailed explanation of how to achieve a simple, elegant and cross-browser method of displaying a percentage bar image. And from the comments, a link to using the same method to create a pie chart to display the percentage as well. Very nicely done!
February 23, 2007 in CSS SnippetsCSS Speech Bubbles
CSS Speech Bubbles which are easy to customize and coded in CSS and valid XHTML 1.0 strict! There is also some javascript magic at work here, as well, so this is not a CSS only solution. Nonetheless, these CSS Speech Bubbles have also been tested to work in all major browsers, IE6 and 7, Firefox 2, Safari 2 and Opera 9.
You can check out the demo page of CSS Speech Bubbles to see them in action.
February 11, 2007 in CSS SnippetsStylesheets for Print and Handheld
Coding Horror: Stylesheets for Print and Handheld takes a look at how to tweak your css stylesheet to ensure that your pages display nicely on handheld devices and print well. A good read.
February 2, 2007 in CSS SnippetsAttach icons to anything with CSS
Attach icons to anything with CSS. - shows how to use attribute selectors in your CSS file to automatically add icons to well, just about anything. Nice and neat way to identify the target of links or highlight internal links etc.
January 8, 2007 in CSS SnippetsCSS semi rounded corners
CSS semi rounded corners - a technique to produce a CSS box with two of the four corners rounded and which stretches with increased box content, which means it will adjust for larger text sizing.
December 17, 2006 in CSS SnippetsThe easiest way to PNG support in IE6
The easiest way to PNG support in IE6 is definitely easy and painless. Definitely worth bookmarking to extend PNG support to those who won't update to IE7!
December 13, 2006 in CSS SnippetsConsidering Vertical Rhythm with typography for the web
24 ways: Compose to a Vertical Rhythm is a great article about web typography and how to create a "vertical rhythm" through the spacing and arrangement of text as the reader descends the page.
With specific details, we learn how to calculate the font size, line height and margin and padding to create this "rhythm". Great read. I definitely learned something new from this article!
December 12, 2006 in CSS SnippetsCSS Technique to vertically center a div on a page
ex animo: Vertical Centering with a Shiv Div - if you're interested in techniques to vertically center a div on a page, you might want to check out the example here (view source to see how it's done).
November 30, 2006 in CSS SnippetsInline Image Quotes: a how-to
Inline image quotes shows a nice and neat method for inline image quotes. Reading the comments as well offers some alternatives/variable techniques as well.
November 22, 2006 in CSS SnippetsCSS only drop shadows
Looking for a css only drop shadow solution? CSS drop shadow outlines how to achieve just that, with the html and the css to pull it off.
November 18, 2006 in CSS SnippetsA look at CSS Drop Caps
The CSS Guy has a look at CSS drop caps and shows several different methods and examples, with the accompanying CSS and html.
November 9, 2006 in CSS SnippetsIE7 CSS tweak show and tell
If you're interested in CSS and what is (or isn't) working with IE7, you can get a lot of great tips from reading this post and it's associated comments. Jeffrey Zeldman Presents : IE7 CSS tweak show and tell.
On a similar note, here's a handy snippet for IE7 float clearing.
October 30, 2006 in CSS SnippetsTen more CSS tricks you may not know
Ten more CSS tricks you may not know - a nice list and good read, just in case you many not know it already, you know.
October 25, 2006 in CSS SnippetsTarget IE 5.x, 6 and 7 separately in CSS
CSS Tip: Targeting IE 5.x, 6 and 7 Separately - Edward Eliot - a css tip on how to treat each version of IE differently via css.
October 10, 2006 in CSS SnippetsHow to create overlapping CSS tabs
OSResources - How to create CSS overlapping tabs - a how-to, with examples, explanation and downloadable example files.
October 2, 2006 in CSS SnippetsCSS Tips
Snook.ca - Top CSS Tips - always a learning experience to read other people's CSS tips, as I usually come away with something new to me.
September 20, 2006 in CSS SnippetsSnazzy Pullquotes: a how to
Snazzy Pullquotes for your blog how to use CSS to add some snazzy pullquotes to your blog.
September 15, 2006 in CSS SnippetsDifferent CSS for Different Browsers, a how-to
Devlounge | How to Use Different CSS Stylesheets for Different Browsers - a good article on the ins and outs of including and excluding certain browsers with CSS.
September 11, 2006 in CSS SnippetsCSS iframes revisited
CSS Frames v2, full-height | 456 Berea Street - revisiting an older method and updating for today. Seems to be a solid, bug-free and cross-browser new version, featuring full height css frames.
September 5, 2006 in CSS SnippetsHandy CSS Debugging Snippet
A Handy CSS Debugging Snippet, adds the following to the start of a CSS file
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }comments it out with CSS comments (/* */) and removes it to be able to see the CSS structure. Handy indeed!
August 7, 2006 in CSS SnippetsSmart Corners Css Rounded Corners
Mike’s Experiments: Smart Corners - another CSS-only rounded corners technique. This one uses images but offers a lean mark-up.
August 3, 2006 in CSS SnippetsCRIR Checkbox and Radio Input Replacement
I love using CSS to style things and theCRIR: Checkbox Radio Input Replacement is certainly pretty (and fairly easy to implement as well). My only question is "would my mother know the replacement elements are clickable?" Sadly, I doubt it, which brings that whole usability thing in to play, imo.
July 27, 2006 in CSS SnippetsImage Blocking with CSS
A CSS Solution to Image Blocking - a good read, with interesting and useful information on image blocking with CSS.
July 13, 2006 in CSS SnippetsHot Dates, Date Formatting with CSS
Hot Dates with CSS - Christian Montoya shows how to style dates calendar-style, with CSS.
July 5, 2006 in CSS SnippetsCSS Drop Text Shadows for Everyone (almost)
for text aren't a reality for anyone but Safari users, so it's not yet a real tool in the CSS toolbox. Design Meme takes a look at how to achieve a similar effect for Firefox, which isn't bad (looks better bigger and against coloured text, imo). That said though, it doesn't work in IE, so until Firefox has the 85% market share, it probably isn't something to rely too heavily on.
June 13, 2006 in CSS SnippetsEm Calculator
I was just reading an article yesterday on setting max-width in ems and I thought that was a great idea except for the fact that I'm a little math challenged and figuring out how wide something is in ems is frankly, a little beyond me. How coincidental that I stumbled on the Em Calculator today!
Bookmarked.
June 2, 2006 in CSS SnippetsSpiffy Box
Spiffy Box - Simple Rounded Corner CSS Boxes made easy. - using a generator that will spit out the rounded corner image based on your parameters. Method based on the Spiffy Corners technique.
May 27, 2006 in CSS SnippetsCreated dotted image borders with background images
Tired of solid image borders? CSS to the rescue! The method outlined here uses a background image to achieve the desired effect. Check out the method and some examples on their site.
Pixelpusher - Dotted image border
May 27, 2006 in CSS Snippets5 CSS Tips
My 5 CSS Tips - I think everyone has their own CSS "style" (pun intended), but I enjoy seeing how others do it and often find something to take away and use, if not all.
May 25, 2006 in CSS SnippetsMore Rounded Corners with CSS
More Rounded Corners with CSS - Schillmania.com - a new look at rounded corners, using the sliding doors technique.
May 24, 2006 in CSS SnippetsCSS Clearing
Clearance // ShaunInman.com - a new look at and method for css clearing from Shaun Inman.
May 22, 2006 in CSS SnippetsCSS Library
Dynamic Drive CSS Library- Practical CSS codes and examples and illustrations. CSS Menus, Image and Form CSS, Buttons and Links and more, in library form, for all your css snippets needs.
May 8, 2006 in CSS SnippetsUsing Universal Selectors in CSS
Using the universal selector | Bite Size Standards - the first tip (global white space reset) is one I had seen before but I must admit, I'd never seen the second tip (for adding padding to a container by setting a margin on the child element). Nice!
April 29, 2006 in CSS SnippetsPreload Images with CSS
Preload Images with CSS - so simply brilliant. File under check this out and assuming it works as advertised, use regularly.
April 23, 2006 in CSS SnippetsStyling Horizontal Rules with CSS
Styling horizontal rules with CSS | Bite Size Standards - a tasty css tidbit from the new and very promising looking "Bite Size Standards" site.
April 15, 2006 in CSS SnippetsCSS Tricks for Custom Bullets
Macworld: Secrets: CSS tricks for custom bullets - I missed this when it was published back in January, but it's definitely worth a bookmark for a nice overview of using the CSS background property for custom bullets on a website.
April 3, 2006 in CSS SnippetsMulti page CSS Photo Gallery
stu nicholls | CSS PLaY | cross browser multi page photo gallery - valid, cross-browser and only css powered. I think this is a much more practical use of this type of layout that the text on of a few days ago.
March 31, 2006 in CSS SnippetsCSS Curves
[ couchfort.net || articles ] - a css solution for wrapping text around a curve.
March 27, 2006 in CSS SnippetsSpiffy Corners
Spiffy Corners - Making anti-aliased rounded corners with CSS - more fun with rounded corners in this pure CSS version.
March 26, 2006 in CSS SnippetsCSS Grouping Techniques
CSS Code Visual Grouping Techniques at SixThings - I think I linked to a similar article recently but I'm always interested in different ways to organize and layout CSS.
March 25, 2006 in CSS SnippetsSnazzy Borders
stu nicholls | CSS PLaY | snazzy borders - add some snazzy borders to your nifty corners. And still not an image in sight!
March 23, 2006 in CSS SnippetsCross Browser Tabbed Pages
stu nicholls | CSS PLaY | validating drop down cross-browser menu I wasn't sure whether to put this in the CSS Snippets or the CSS Navigation category. It's a bit of both. It's apparently works cross-browser and it's pure CSS (no javascript). And it validates, too :)
March 21, 2006 in CSS SnippetsGradient Progress Bar
slayeroffice | gradient progress bar - purdy. Now to think of a place to use this!
March 21, 2006 in CSS SnippetsEffective Style with em
Effective Style with em | Monday By Noon - using em instead of pixels, revisited as a reminder of why this is the preferred method of styling.
March 14, 2006 in CSS SnippetsHoverbox Image Gallery
SonSpring | Hoverbox Image Gallery - sort of a mini-Lighbox, minus the javascript equalling a nice effect and especially useful for photoblog archive pages, me thinks.
March 1, 2006 in CSS SnippetsBeautiful Numbered Lists with CSS
CSS - Beautifully Numbered Lists. - Pretty numbered lists with CSS, handy snippet for blog comment styling!
February 27, 2006 in CSS SnippetsLogo Color Variations
Design Melt Down - Logo Color Variations - vary the color of your site logo using CSS and pngs.
February 27, 2006 in CSS SnippetsSimple and Accessible Heading Icons
Simple and Accessible Heading Icons - use CSS to add icons to your headings in an efficient and accessible way.
February 15, 2006 in CSS SnippetsThe Triple X Hack for IE7
[brothercake] The "Triple-X hack" - for IE7. The first in what will no doubt be a bunch of hacks for handling IE7. Let the hacking begin.
February 8, 2006 in CSS SnippetsNavigation Magnification
Paul Armstrong Designs - Weblog - CSS - does work cross-browser but a cool effect.
February 7, 2006 in CSS SnippetsThumbnail Gallery 101
CSS Thumbnail Gallery - a how to build a CSS thumbnail gallery for beginners article. A useful reference for those just starting out with CSS.
January 25, 2006 in CSS SnippetsSimple CSS Rounded Boxes
MODx CMS - Content Management System | Simple Rounded Corner CSS Boxes - no doubt about it. They're hot! Here's another method to peruse.
January 23, 2006 in CSS SnippetsOnion Skinned Drop Shadows
Onion Skinned Drop Shadows - you may remember these from a feature article on A List Apart a while back. They have evolved since then and this site offers some code and provides the shadow source images for use as well.
January 19, 2006 in CSS SnippetsRounded Corners Roundup
CSS Rounded Corners 'Roundup' | Smiley Cat Web Design - a comprehensive list of the multitude of rounded corners techniques out there.
January 18, 2006 in CSS SnippetsCSS Bar Graphs
Apples To Oranges Blog - Using CSS to create simple bar graphs - Nice! I don't have much call for producing graphs but I'll be bookmarking this if I ever do.
January 12, 2006 in CSS SnippetsiIR: img Image Replacement
iIR: img Image Replacement - interesting technique for when you want to replace one image with another (for print pages, for example).
January 10, 2006 in CSS SnippetsCSS Star Rating Part Deux
CSS Star Rating Part Deux - more on what was a really popular concept to begin with. A link at the very bottom of the article points also to tutorial that shows how to use this with php/database.
January 9, 2006 in CSS SnippetsSimple Accessible External Links
Simple, accessible external links - a great idea to stay accessible while offering up some link icons through CSS as well.
December 12, 2005 in CSS SnippetsPHP + CSS Dynamic Text Replacement
PHP CSS Dynamic Text Replacement - an interesting method to replace plain text with an image using only PHP and CSS.
December 8, 2005 in CSS SnippetsCSS Shadow Technique
The Shape of Days: My contribution to the CSS shadow kerfuffle - the markup may be ugly but the results are fabulous!
November 30, 2005 in CSS SnippetsKrazy Korners
How to Add Fluid Borders to Your Boxes with CSS - How to add fluid border to your boxes with css. Pretty complex but the results look pretty nice.
November 27, 2005 in CSS SnippetsCSS Forms
stu nicholls | CSS PLaY | CSS styling of forms - some really nice form styling examples.
November 26, 2005 in CSS SnippetsSimple CSS Image Switcher
Simple CSS Image Switcher. Nice.
November 5, 2005 in CSS SnippetsResizable lUnderlines
CollyLogic: Snook's Resizable Underlines - rising to a challenge and offering a good soluation - how to stretch underlines the whole column width.
November 2, 2005 in CSS Snippets
wg:Introducing DomCorners - another rounded corner technique, which uses images - but only one.
October 17, 2005 in CSS SnippetsCuring Float Drops and Wraps
Curing Float Drops and Wraps looks at the common problems with CSS float layouts and how to deal with them.
September 30, 2005 in CSS SnippetsMore CSS Tricks
In keeping with the recent trend, My Top Ten CSS Tricks [CSS Tutorials] offers up more css goodness.
September 27, 2005 in CSS SnippetsPhoto Cards
[ws] Photo Cards - some handy CSS to produce photo insets that float next to text.
September 26, 2005 in CSS SnippetsCSS and round corners: Borders with curves"
CSS and round corners: Borders with curves - not necessarily new, but a nice walkthough on how to create rounded corners with CSS.
September 26, 2005 in CSS SnippetsButtons without the Image part
September 24, 2005 in CSS SnippetsSimple, accessible "more" links
Simple, accessible "more" links - V2
September 24, 2005 in CSS SnippetsCSS Tips and Tricks
CSS Techniques Roundup - 20 CSS Tips & Tricks - not a lot new here but always nice to have all these great CSS tips and tricks in one nice list!
And here's ten more, just in case you hadn't had enough yet!
September 23, 2005 in CSS SnippetsCheck Marking Visited Links
Check marking visited links | 456 Berea Street - a simple solution, but not IE friendly. Yet.
September 20, 2005 in CSS SnippetsCSS3 Columns now
Using Javascript - CSS3 Multi Column - CSScripting allows the CSS3 columng tags now, to create newspaper style layouts. Very refreshing styling - breaking away from the standard web presentation. I'm looking forward to native support for this.
September 16, 2005 in CSS SnippetsFooterStickAlt
The Man in Blue > Experiments alternative mark-up to the footerStick posted a couple of days ago.
August 28, 2005 in CSS SnippetsCSS Star Rating System
Creating a Star Rater using CSS - nice bit of css with a very complete 'how-to'.
August 26, 2005 in CSS SnippetsSexy Tabular Information
CSS = Sexy Tabular Information - the new way to present tabular information.
August 23, 2005 in CSS SnippetsThierry Image Placement
Thierry Image Placement - the latest incarnation in image replacement - image placement! Accessible, cross-browser and more.
August 23, 2005 in CSS SnippetsFooterStick
footerStick › css › Learn › solarDreamStudios - keep the footer at the bottom of any size window.
August 15, 2005 in CSS SnippetsCSS-SSV
CSS-SSV // ShaunInman.com - a method to use php variables in style sheets.
August 5, 2005 in CSS SnippetsCSS Sidenotes
Brand Spanking New: CSS Footnotes revisited: Sidenotes - lovely and neat implementation and apparently cross-browser.
August 1, 2005 in CSS SnippetsRobust CSS Drop Shadows
Six Apart ProNet Articles - yDSF - Robust CSS Drop Shadows - very useful!
July 29, 2005 in CSS SnippetsStyling Forms
Styled Checkboxes - a nice how-to to jazz up your form elements.
July 29, 2005 in CSS SnippetsScroll Fades
COLLYLOGIC: SCROLL FADE - doesn't work with IE but could be modified to hide from IE. (or this might solve the IE problem)
July 29, 2005 in CSS SnippetsCSS Popups, Scalable Tabs and Favelets
Absolutely Positioned Pure CSS PopUps - good cross-browser support.
Pure CSS Scalable Tabs - if you need your tabbed navigation to scale too.
slayeroffice | Style Sheet Tweak Favelet" - another great tool, with a nice interface. Great for debugging layouts.
January 9, 2005 in CSS SnippetsStyling Form Widgets
The Man in Blue > Styling Form Widgets - amazing what a little CSS can do for a submit button!
April 27, 2004 in CSS SnippetsAccessible Stylish form layout
Accessible, stylish form layouts - semantic, accessible and usable. Templates can be seen here.
March 24, 2004 in CSS SnippetsSimple clean CSS rollover menus with lists
::: THE IMPOSTER ::: Simple clean CSS rollover menus with lists is a nice collection of CSS list menus in a variety of styles.
Added: Lots of other CSS goodness on this site as well.
February 18, 2004 in CSS SnippetsStylish CSS iframe lookalikes
Stylish css iframe lookalikes - nice!
January 21, 2004 in CSS SnippetsPure CSS Tooltips
Pure css tooltips that even print. At least in Gecko-based browsers.
January 20, 2004 in CSS SnippetsCSS Frames
About CSS Frames. Works like frames but built with CSS and alternate style sheets. See the demo here.January 7, 2004 in CSS SnippetsStyling Web Forms with CSS
July 15, 2003 in CSS SnippetsCSS Drop Shadow Effects
Lurking in Shadows: CSS and drop shadow effects.
July 11, 2003 in CSS SnippetsSidenotes
From Sidenotes - very nice. (Won't work on IE)
June 17, 2003 in CSS SnippetsCSS Headings 50 ways
CSS Headings 50 ways - Illustrations and css for 50 different ways to do your headings with CSS.
May 1, 2003 in CSS SnippetsCSS Rounded Boxes
Found at Blog-Fu ... CSS Rounded Boxes/Corners ... done six ways!
March 21, 2003 in CSS SnippetsCSS for Form Elements
CSS Form effects tutorial very nicely explains how to spruce up your form elements.
Lots more useful tips on the site as well.
December 31, 2002 in CSS SnippetsAlternate Style Sheets for different screen sizes
In this thread at the mt forum, gdesanto outlines how to serve up different style sheets depending on the screen resolution of the visitor's browser. movabletype.org : Support Forum Link
November 10, 2002 in CSS SnippetsStretchable Graphical Borders
Someone posted a link to this in the mt forums, for someone looking to add shadows to thumbnails of different sizes. Interesting!
GEC | Stretchable Graphical Borders
You can see a gallery of graphical borders here.
November 9, 2002 in CSS SnippetsScrollbar Coloring & Drop Caps CSS
A couple of CSS "how-to" guides:
November 8, 2002 in CSS SnippetsThe Owen Hack: Hiding CSS from Opera
Albin.Net CSS: Owen Hack is a method of hiding CSS from Opera, as a way of increasing viewability in that browser. There is also a link on that page to the "Be Mean to Opera" Hack, which hides CSS from Opera 3-5.
November 7, 2002 in CSS SnippetsCSS Rounded Corners
Albin.Net CSS: Bullet-Proof Rounded Corners. I'm not sure I'm ready to tackle this yet. But it's good to know there's a good CSS option for this out there!
November 5, 2002 in CSS SnippetsTwo styles of links on one page
I have found that I often want to have two styles of links on my blog page - one for the body of the entry (underlined usually) and another for the posted line.
The default MT templates now have underline as the default link style, which I understand is great for visual identification of links. If you'd rather not have your posted line underlined though, for example (as is my preference usually) you can make another class of links in your style sheet.
I like to call my class "noline" (helps me remember!). An example of the CSS that would go into the style sheet follows. Once added to the style sheet, you'll have to find the <a href> tags in your templates that you don't want a line under and add class = "noline" to each one. It should look something like this: <a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" class="noline"><$MTEntryDate format="%x"$></a>
Continue reading "Two styles of links on one page" »
November 4, 2002 in CSS SnippetsText Sizing
This is an excellent site to show the various options for setting text size in CSS - with lots of visual examples. It doesn't reach any definitive conclusions, but lots of food for thought.
November 3, 2002 in CSS SnippetsPutting Two Items on same line
This is the code I use to put the entry title and the category on the same line. It could also be used to put the title and the date on the same line just by switching out the appropriate MT tags. This example has the most of the css inline.
Continue reading "Putting Two Items on same line" »
November 1, 2002 in CSS SnippetsIE Stylesheet Browser
One of my favourite little programs is IE Stylesheet Browser. Once installed, it adds a right-click option to Internet Explorer to "View stylesheets" for any web page you are viewing. I have found this very handy for those "how did they do that?" kind of questions. It's a great way to learn CSS by seeing the look of the finished page and seeing the CSS that produced it.
November 1, 2002 in CSS SnippetsFloats and clearing divs
When using float for CSS elements, they no longer take up any defined space on the page. This can cause problems with subsquent elements not knowing where to place themselves, resulting in overlapping elements. Placing this tag after the floated element, should clear the problem.
<div style="clear:both"></div>
October 28, 2002 in CSS SnippetsIE6 CSS Bug: Dotted Borders
Internet Explorer 6 has a CSS bug that is very annoying. When a 1px dotted border is specified, it is displayed as a dashed border instead.
The fix? Specify a 2px (or greater) border width and it will display as dotted. It's not quite the same but it's close ... if you absolutely demand dots :)
October 27, 2002 in CSS Snippets
Subscribe
Subscribe RSS
Subscribe by Email
Categories
- Blogging
- Color Tools
- CSS Layouts
- CSS Navigation
- CSS Resources
- CSS Snippets
- Del.icio.us
- Design Elements
- Design Resources
- Digital Photography
- End of the Day Digests
- Everything Else
- Firefox
- Flickr
- Photoshop
- RSS
- Scripts and Software
- SEO and Marketing
- Tools and Generators
- Web Design
- Web Development
- Windows and Computing
Search etc.
About
Browse the Archives »