At some point, you may have a situation where you want to center multiple elements (maybe <div> elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center.
There really should be a similar simple way to center multiple elements evenly spaced. It would be nice if CSS had a property called “box-align” which you could set to “center” then the child elements would be centered evenly within their parent.
Well, you can achieve something similar by taking advantage of CSS’s flexibity with “recasting” elements (for lack of a better term).
Print This Post
The other day I came across a useful site called ScriptSrc.net that allows you to get up-to-date script tag links that point to your favourite JavaScript libraries.
The site has a clickable corner ad promo to get people to “spread the word”. I thought using CSS3 there would be a better way to position such a corner advertisement (or promo, or whatever), because the clickable area for the ad on ScriptSrc.net is actually too big. In some cases, you might prefer the clickable area to be bigger, but I think it’s always best to keep the clickable area limited to the actual ad.
Print This Post
Why slice a new image for each item in a navigation when you can use the same image for all of them? If you’re thinking you can’t do that without sacrificing rollovers, think again. By creating a navigation using an image sprite, you can have a complete navigation, rollovers and all, by only using one image.
Print This Post
A new feature is included in the Cascading Style Sheets (or CSS) level 2 and CSS 2.1. This feature is called generated content and it represents content which is created by the browser, but which is not represented either by markup or content.
An example of a generated content is list markers. When it comes to representing the markers, nothing in the markup of a list item can be used and the appropriate marker in generated automatically by the browser, thus eliminating the need for the author to write the markers into the document�s content. When the lists are ordered, the marker appears under the form of an incremental counter. Its value is grown one by one for each item present in the list. When the lists are unordered, the marker appears under the form of a bullet (square, circle, and disk).
Print This Post
This article will tell you how to make your CSS files a bit smaller. You can ask yourself one question; Why shouldn’t you? Read on to find out how to do this.
There are only advantages of making your CSS files some smaller. When your website uses a 5k CSS file, you might not see the difference in loading time, but when using bigger (25k) files, you can notice your website will load a bit faster when using some of the steps below. Another thing is that your file will become more organized and clean. Read on to get tips of improvement.
The main idea of this article is to reduce the number of characters you have used in your CSS. The less characters, the smaller your file.
Print This Post
When writing your CSS, it is possible to write neater, more readable code by making use of CSS shortcuts. A shortcut is a feature of CSS that allows the developer to specify a number of related properties on a single line rather than specify them all separately. Lets look at the following example:
Print This Post
One of the most common layouts on the web is a fixed width site that stretches to the bottom of the page, with a footer sitting at the bottom. If the content of the page stretches past the bottom, the site container needs to stretch with it. If the content does not fill the page, the footer needs to remain at the bottom. With a table based layout, this would be a simple task, but who wants to use tables for layout? With some nifty CSS tricks we can accomplish this very well using CSS alone and once you know how its done, you will use it over and over again.
Print This Post
In this quick tutorial, I'm going to discuss how to create a neat little menu effect. I'm dubbing it the liDock, because elements in the menu resize as the mouse moves over them, similar to the dock on OS-X, and because it's a list menu.
We're going to create a horizontal row of boxes containing link text. When we move the mouse over one of these boxes, it's going to get taller and the text larger and bold. I'll link to a finished example at the end of the tutorial.
Let's begin by setting up the XHTML for the menu. This is pretty straightforward and simple. We just want to make an unordered list and give it an id of "navlist".
Print This Post
Hanging Punctuation refers to the technique of positioning certain typographical elements, such as bullets, quotation marks on pull quotes, etc. into the margin of a document, so that the main text that the glyph highlights remains flush with the rest of the body copy around it. Often seen in print, rarely used on the web, hanging punctuations can help keep the flow of your document and make the text easier to read.
Print This Post
When designing a web site, it's generally a good idea to keep your sites navigational elements text-based. This has several advantages, like being search engine friendly and easily accessible to screen readers and hand-held devices. Let's face it, though, sometimes that's not always practical and what the site design really calls for is a nice menu comprised of graphics in which the actual menu text is stylized. So, here's a little trick that will give you the best of both worlds. We're going to build a graphically-based navigation menu out of an unordered list.
Print This Post
Menus are a very important part of contemporary web design, for the simple reason that if there’s no menu, people can’t do much really, like a shopping centre or mall with no floor. The hard part when making a menu is to make it look good and make it accessible… (you don’t want an amazing Flash menu as a main nav because people may not have Flash Player, hence it’ll be inaccessible). Luckily for us though CSS is vastly cross-browser, yes i know even supported in IE believe it or not!
Print This Post
Here’s a neat effect that will allow you to display a thumbnail image for a link on hover.
This technique works in IE6, FireFox and Opera. I haven’t had the opportunity to test it in Safari, though I suspect it will work fine there as well. If someone would like to test it out and let me know, that would be great.
Print This Post
The CSS border property gives you the option to specify the style and color of the border of an element. With this property, we now can create borders with nice effects, which can also be applied to any element.
Print This Post
Coding CSS can quickly run into difficulties with different browsers interpreting code in different ways. Designs will never look the same in every browser but you can help yourself by using a default style set when you start coding.
Print This Post
Speech bubbles are a common sight in comic books, video games and web pages. People have been using them for many years, so it?s only natural that they would crawl their way onto the web. Unfortunately, creating speech bubbles which expand according to its content has been something which was normally achieved using tables. However, creating the neat little bubbles is a simple enough task with the use of CSS by using a series of nested divs. In this tutorial, I?ll describe one manner of creating the speech bubbles with CSS and a few images.
Print This Post
