with Lorelle and Brent VanFossen

CSS Experiments – How They Were Done and More

We’ve been showing off our CSS experiments and how we created our pages and some other special effects, and you are probably wondering how we did all these popular CSS experiments. Displaying all the code and samples involved a few CSS techniques in addition to our CSS experiments so we could help you understand how this all works.

To display the code for the CSS experiment pages, we created a simple division container with a very light background and border so it would blend into the content rather than stand out. We also added font styles that made the code look like computer code, so it would stand out against the regular content. We also added a line-height rule so the code would be well spaced and easier to read, as it does get confusing. This rule wouldn’t work within the main class selector, so we had to add a child div for the line-height.

.demo {
position:relative; display:block; clear:both; border:2px solid #CCCCFF; margin:5px 0 25px 5px; padding:10px 5px; background:#F4FFF0; font-size:1em; font-family:Courier, “Courier New”, serif; color:black}

.demo div {
line-height:140%; position:relative}

The HTML structure to display the code was kept very simple:

This is the display of the code within this box.
<div class=”demo”><div>This is the display of the code within this box.</div></div>

To highlight a specific code reference, we added a span set to our class rule “red” like this:

<p>This is an example of what we want to <b>highlight in red</b> with a span.</p>

<p>This is an example of what we want to
<span class=”red”><b></span>highlight in red
<span class=”red”></b></span>
with a span.</p>

To create the code within our content, highlighting tags and CSS references used within our CSS experiments, we used the <code> tag set to the keyboard font known as “monospace” or Courier. We use it in our normal articles at a smaller font size, so we changed it to 1em to make it match the font size of the content.

Here is an example of a tag inside a sentence.

code {
font-family:monospace, “Courier New”, Courier, serif; color:black; font-size:1em}

<p>Here is an example of a <code>tag</code> inside a sentence.</p>

Reproducing the code took even more talent and skill. More so than some of our CSS experiments! If I write a piece of code, even though I’m using it inside the text content, it will become the code. So I had to substitute some of the code elements so it would appear as code. This substitutions are known as extended characters or entities. Similar to ascii, they are combinations of letters and symbols that represent characters of the alphabets. There is not a keyboard key for the heart symbol ♥ but there are extended characters which the browser will recognize and translate into the symbol. For ♥, the extended character is &hearts; . To create the < and > characters used throughout HTML coding to hold tag names:

&lt; = <
&gt; = >

This is fairly simple. Most HTML Editors feature a list of extended characters for the designer to choose from instead of remembering the character code. But things get a little more challenging when trying to actually reproduce the extended character on the page such as with this spacer division.

.spacer {
clear:both}

<div class=”spacer”>&nbsp;</div>

For example, to create a “space” on a page, between the division start and end tag there needs to be a non-breaking space. The equivalent of a tap of the keyboard space bar – a tap of the keyboard space bar just won’t do in HTML. There has to be a physical representation of that “tap on the space bar” to create the “space”.

If I write the extended character code for non-breaking space ( ), you wouldn’t see anything because the code is designed to represent “space” or nothing visible. To understand how the code works, you have to be able to physically see the space.

The physcial representation of a space is &nbsp; and to reproduce the extended characters in a visible form, I had to break the extended character down into its basic elements and reproduce those. I can’t simply hold down the shift key and select 7 on the keyboard and then type the “amp;” and expect it to become visible to the viewer. It will become the code. In order for the extended character code to be visible on the web page, the ampersand must be translated into the extended character that represents it.

Let’s break this down to its smallest details. I want to recreate the &nbsp; so it will be seen on a webpage. The extended character code consists of an ampersand and four letters and a semi-colon (nbsp;). If I recreate the ampersand extended character, then type the remaining letters, the extended character will then be visible on the page. So I replace the beginning ampersand of the &nbsp; with &amp; and added the “nbsp;” to get the following, which allowed me to represent the invisible visibly.

&amp; = &

&amp; + nbsp; = &nbsp; = [non-breaking space]

RED represents character code
DARK GREEN represents character code replacement

Let’s put this into use so you can see what the magic is behind what you see on the screen.

&lt; = <
&gt; = >
&amp; + nbsp; = &nbsp; = [non-breaking space]

Seen on the screen:<div class=”hello”>
Written as: &lt;div class=”hello”&gt;

Seen on the screen:<div class=”spacer”> &nbsp;</div>
Written as: &lt;div class=”spacer”&gt;&amp;nbsp; &lt;/div&gt;

RED represents character code
DARK GREEN represents character code replacement

It takes a little time to figure it out, especially when we need the extended character code visible. The only time we’ve needed an extended character visible is for the non-breaking space character (and within this section’s description of the extended characters). Here is another example of how we generate the visible code you see within these pages:

<p>This is some text <span class=”red”>with a span</span> and a <a title=”link” href=”link.html”>link to nowhere</a> for you to see the use of this code.</p>

&lt;p&gt;This is some text
&lt;span class=”red”&gt;with a span&lt;/span&gt;
and a &lt;a href=”link.html”&gt;link to nowhere&lt;/a&gt;
for you to see the use of this code.&lt;/p&gt;

Extended Characters – Entities – Links and References

Want Even More CSS Fun?

There are so many things you can do with CSS. We had a blast designing these CSS experiments and encourage you to experiment with CSS yourself. We’ve just shown you the tip of the ice berg. The newest version of CSS-3 should be available for most web browsers soon and it brings with it even more bells and whistles and fun.

There are a variety of websites on the Internet that will help you explore all the fun and games CSS has to offer. The three I most highly recommend are CSS Zen Garden, Eric Meyer’s CSS Edge, and Mandarian Design for seeing the possibilities in Cascading Style Sheets web design.

CSS Tips, Techniques and Tricks

One Comment

  • Posted July 12, 2011 at 22:39 | Permalink

    it is a great post,I’ll try to do them and see is there any improvements, thanks for the tip

5 Trackbacks

  • [...] Think of CSS divisions and spans as children’s toy building blocks. Give them a background. Fill them with text. Flip them around and see what you can come up with through the creative use of CSS in your CSS experiments. As with many of these CSS experiments, they don’t all work equally under different web browsers. Sideways text using the flipv and fliph filters don’t work equally across the browsers. Currently, these will only work with Microsoft Internet Explorer as they are proprietary to that browser. These can also “break”. Narrow the window size or change the browser’s font size and these might fall apart. Still, they are CSS experiments and ideas worth exploring. For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together. To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design. If you find a way of improving or expanding upon these CSS experiements, let us know by leaving a comment below. CSS Experiments CSS Unleashed – Experiments with CSS Designs [...]

  • [...] We’ve played with blocks and a wide variety of CSS experiments designs. Now let’s apply these techniques to creating business and web page logos. Your website should have a logo, whether it is your company logo or one specific to the web page. Our company is called VanFossen Productions, but our sebsite is called “Taking Your Camera on the Road”. We’ve created a graphic logo for the site, and below we’ve made a few attempts to reproduce it with CSS as part of our CSS experiments. A pure CSS logo loads faster and saves bandwidth. But there are some limits. Unless you use embedded fonts, a technique limited to only a few web browsers, fonts are limited to a select few fonts available on most people’s computers. With a limited selection of fonts, the logo designs must concentrate on the graphic display of the content rather than the typographics. That still leaves the field wide open to a powerful imagination and a wide variety of CSS experiments in design. For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together. To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design. CSS Experiments CSS Unleashed – Experiments with CSS Designs [...]

  • [...] The background element in CSS offers a wide range of possibilities including embedded background images, content over backgrounds, and backgrounds as art. As you play with your CSS experiments with backgrounds and background images, it’s important to understand how they work, where they work, and how to control their appearance. Let’s start with a few CSS experiments in placement. For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together. To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design. CSS Experiments CSS Unleashed – Experiments with CSS Designs [...]

  • [...] There are many ways of arranging content. Articles often feature tip boxes, pull-quotes, blockquotes, lists, tables of contents, and menu items helping people get the information they need within and without of the scope of the article. These can also include step-by-step instructions pulled from the article to help take people through the process. We decided to experiment with a few of these content handling designs to find ways of moving beyond the pull-quote or blockquote to actually presenting bits and pieces of information in an interesting and eye catching fashion with CSS as part of our CSS experiments. In general, the HTML is simple, but the design elements can be sophisticated. As mentioned before, these are CSS experiments, so test them thoroughly within your own design to make sure they work. Most of these content handling designs begin with a list. It’s what you do with the list that makes the design interesting and part of our CSS experiments. For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together. To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design. CSS Experiments CSS Unleashed – Experiments with CSS Designs [...]

  • [...] on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All [...]

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>