- CSS Unleashed – Experiments with CSS Designs
- CSS Book Recommendations
- CSS Experiments Playing With CSS Blocks
- CSS Experiments with CSS Logo Designs
- CSS Experiments with Background Images and Backgrounds
- CSS Experiments with Lists, Menus, Tables of Content, and More
- CSS Experiments – Web Fonts and Embedded Fonts
- CSS Unleashed – Experiments with Quotations, Pull-quotes and Blockquotes
- CSS Unleashed – Experiments Showcasing Your Photography
- CSS Experiments – Variations on a Theme
- CSS Experiments – How They Were Done and More
- CSS Experiments Putting It All Together
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
.
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:
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
<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.
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 ♥
. To create the < and > characters used throughout HTML coding to hold tag names:
> = >
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.
clear:both}
<div class=”spacer”> </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
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
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
with &
and added the “nbsp;” to get the following, which allowed me to represent the invisible visibly.
& + nbsp; = = [non-breaking space]
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.
> = >
& + nbsp; = = [non-breaking space]
Seen on the screen:<div class=”hello”>
Written as: <div class=”hello”>
Seen on the screen:<div class=”spacer”> </div>
Written as: <div class=”spacer”>&nbsp; </div>
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 href=”link.html”>link to nowhere</a>
for you to see the use of this code.</p>
Extended Characters – Entities – Links and References
- Browser News – Resources – Entitites
- W3.or’s HTML 4.0 Character Entities
- Microsoft Developer’s HTML Character Sets
- Digital Web Magazine’s Extended ASCII Characters for HTML
- HTML Codes for Diacritics and Extended Characters
- Special and Extended Characters
- Using national and special characters in HTML
- Browser Support for Extended Characters
- About.com’s Web Design: Using Non-English Letters
- Chami’s Tips: HTML Special Character Reference
- The W3C HTML Internationalization area
- The Unicode Consortium site
- Evolt’s A Simple Character Entities Chart
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
- CSS Vault: Resources
- Eric Meyer’s CSS Edge *****
- Web Building Tips – Collection Of Tips About Html, Css, Javascript, And Other Web Development Issues
- Mandarian Design *****
- Max Design’s CSS site
- D.Keith Robinson’s Gorilla Web Tips and Other Articles
- CSS Zen Garden *****
- How to Image Transition
- Website Design Tips and Tricks – Rounded Corners
- How to Rounded Corners (Albin.Net)
- How to Rounded Corners with CSS (TheImposter)
- A List Apart CSS Article Index
- Max Design Articles
- Chris Hesters’s Tips and Demos
- Website Tips
- Highlighting Current Page with CSS
- CSS to Style Form Buttons
- CSS Help Pile
- Sorehead’s CSS lost and found
- CSSBeauty
- Intensivstation CSS How To
- Weekly Standards
- CSS Play
- CSS Playground with Games
One Comment