While we avoid a lot of whizbang tricks, we have used a few here and there. Most recently, we discovered some useful tricks when designing a “fancy” version of our web page layout. A major part of these we turned into our CSS Experiments.
As nature photographers and instructors, Brent likes to teach the following when dealing with the use of filters, special effects, and gimmicks in photography, and it applies to web design:
Just remember to use filters like using spices in cooking. A small amount can make the dish but too much will spoil the meal.
Brent VanFossen, nature photographer
To showcase the different techniques, tips, and tricks we’re using for these and our many CSS experiments, many of our examples feature the style codes inline, or inside the HTML tag as if this was the only tag within your website being modified like this. It is preferable to remove this style or presentation code and set it up in a
style tag or linked stylesheet using divisions and classes. We only use this technique of inline styling in our own pages when a unique effect is needed. For more information on linking CSS style sheets, visit our introduction page to our style sheet design and layout.
If you are new to CSS, the following are more articles we’ve written to help you learn more about how CSS works in web page design:
- CSS – The Things You Need To Know
- Understanding CSS Selectors and Attributes
- CSS Unleashed – Experiments Putting It All Together
- CSS Book Recommendations
- CSS Unleashed – Experiments Putting It All Together
- CSS Experiments – How They Were Done and More
- CSS Unleashed – Experiments with CSS Designs
CSS Simple Text-to-Boxes Fun
Before we get to the more serious fun, like our CSS Experiments, let’s look at some simple ways you can jazz up your design without a lot of special bells and whistles. One of the easiest things to do to highlight some content is to give it a background color. This can be done within the text.
This is normal text and this is highlighted text and we are back to normal.
While not a filter, the background declaration can create some interesting effects with text. We can improve this by adding some space on either side of this is highlighted text with a padding declaration.
This can also be done by giving a background color to any container box such as this paragraph:
Going back to the highlighted text created by adding a background span, we can add a border to the span’s style so thefeatures a box effect.
Let’s use the same technique on the paragraph:
We’ve moved from highlighting text with a background effect to creating boxes. Did you make the transition without trouble? Understanding that everything in CSS and HTML is “in a box” – held in check by containers – we have a sense of the possibilities. Let’s do some more CSS experiments with one of those boxes.
To introduce you to the concept of containers and divisions, let’s simply replace the paragraph tag with a division tag and change the border from a thin solid line to a double line.
A border effect you see on many blogs uses dots to line its border. These are no different from the ones we’ve just been playing with, though we changed the background color to a light blue so the border is more evident.
Let’s keep going with some of our container experiments.
The dotted line and the following dashed lines are simple to create and their look can change based upon the width of the border. In the next examples, we’ve used a dashed line with different widths and changed the background color to show the effect dark blue text has on different colored backgrounds.
There are currently thousands of colors and 10 different border styles you can choose from:
The border styles “none” and “hidden” aren’t visually pleasing but they have their purposes. We’re going to continue to concentrate on the visually pleasing choices. We’ve seen a thin solid and played with dotted and dashed, so let’s see what else we can come up with.
Just as dotted and dashed are related in style, groove and ridge are related.
They can also be used in combination for a different effect.
Solid borders can also be interesting, if you play with complementary or contrasting colors with the background. Play with the width for more accent, too, as you move from these examples to your own CSS experiments.
Here is another CSS experiments technique that takes advantange of the background color like we tried in the beginning. It uses a paragraph inside of a container box and both the container and the paragraph have a background color. The
padding declaration creates a “margin” around the paragraph allowing the background color of the parent container to be visible, appearing to look like a border.
This is the paragraph container that will sit inside of the parent container with no border and a background color.
Now, let’s put the two together:
<p style=”background:lightblue“>The 10px padding of the parent container creates the “margin” around the paragraph allowing the background of the parent container to be visible.</p>
Now, let’s take this another step forward and add a border to the paragraph tag and create a “deeper” border effect.
There are two more border styles to play with: inset and outset.
CSS Containers and Borders – Links and Resources
- JQJacobs’ Cascading Style Sheets – Explanation
- Overview of Cascading Style Sheets
- Putting on the Style – an Introduction to the Box Model
- W3.org’s CSS-2 Box Model
- W3.org – CSS-2 Visual Formating Model
CSS Border Effects
- W3 Schools – CSS Borders
- CSS Graphics by Borders – Examples of art created using border effects *****
- CSS Border Style Values ***
- Code_Punk’s Advanced CSS Lesson 2: Borders
- 80Four’s CSS Borders
- Tizag’s CSS Borders
- Mandarian Design’s CSS Boxes ***
- Stu Nicholls’ CSS Colored Borders – Understanding Browser Interpretations
- So, You Want Info On… CSS and Borders, Huh?
- HTMLSource: CSS and Borders