Creating simple character icons in CSS using ems

Here’s a quick way of bringing headings and otherwise dull content to life by using simple CSS to create simple single-character icons. Firstly, a quick example:

Circle Icons

And here’s the code, CSS first:

.circled
{
font-weight:bold;
width:1.5em;
height:1.5em;
line-height:1.5;
border-radius:1.5em;
text-align:center;
}

span.circled
{
display:inline-block;
}

.green
{
color: #393;
background-color: #cfc;
border: solid 1px #393;
}

.yellow
{
color: #993;
background-color: #ff9;
border: solid 1px #993;
}

.brown
{
color: #963;
background-color: #fc9;
border: solid 1px #963;
}

And HTML:

<div class=”circled yellow”>Y</div>
<div class=”circled green”>G</div>
<div class=”circled brown”>B</div>

Obviously you can use any colour schemes you like but using the same text and border colour with a lighter background colour seems to work quite nicely.

It’s worth noting the ‘.circled’ CSS class uses ‘ems’ for all its properties – width, height, line-height and border-radius. By using ‘ems’ we make all of these values relative to the size of the original text so they always resize around it. Using line-height is by far the easiest way of vertically aligning the text.

The element needs to have its ‘display’ property set to ‘block’ or ‘inline-block’ in order to handle the width correctly. Therefore, I’ve set ‘span.circled’ with ‘display:inline-block’ so that it can be used inline.

These single-character icons could be used with number characters for denoting sections or a document, letters A-E for grades or index values. You could even leave them blank to just show a circle at the appropriate text size.

If using a single letter, which is an abbreviation for a word or phrase, remember to use the <abbr> tag too, like this:

<div class=”circled brown”><abbr title=”Brown”>B</abbr></div>
Posted in border-radius, css, display, line-height | Tagged , , , , , , , , , , , | Leave a comment

jQuery .on() – How to use it with $(this)

I’m posting this as I found this particular jQuery method quite difficult to understand from the official documentation at jquery.com. Documentation on the use of $(this) with .on() is not easy to find at the time of writing.

‘Normal’ selectors for events

jQuery selectors are used to select page elements which belong to the DOM (Document Object Model), or, more simply, they are part of the page’s HTML. If you try to select an element which is not in the original HTML or has been added by JavaScript then selecting these in the normal way won’t work.

For example, if you want a button click event you’d normally just use:

HTML

<input id=”continue” type=”button” value=”Continue” />

jQuery

$(document).ready(){

$(“#continue”).click(function(){
// your code
});

});

However, if the button was created in JavaScript but not added to the DOM* then this would not work.

.live()

The original way around this was to use a jQuery method called .live(), which worked by selecting an element and giving it an event. Here are a couple of examples:

$(“#continue”).live(“click”, function(){
// your code
});
$(“select”).live(“change”, function(){
// your code
});

This is quite straightforward to understand. You use the selector in the normal way and just put the event name inside the .live() event. Whilst using .live() currently still works (legacy support) there’s no guarantee it will continue to be supported in the future.

.on()

jQuery has found a far more efficient way of handling this with .on() but there’s a little more to it. Here’s an example of the syntax:

$(“li”).on(“click”, “a”, function(){
// your code
});

Here we have an initial selection “li”, an event “click” and a second selection “a”. The function (your code) will fire when a link (a) within a list item (li) is clicked. The first selector gives the context, the second is the actual selection. By using this first context selector it cuts down the search for the second and makes the whole thing run much faster.

If there is no obvious context element then you can go back to the top level by using $(document) like this:

$(document).on(“click”, “p”, function(){
// your code
});

The important point here, which catches out many people is that the first context selector must be part of the DOM.

.on() and $(this)

In the following code example, if you used $(this) in your code then it would refer to the “a”, rather than the “li” as you might expect.

$(“li”).on(“click”, “a”, function(){
// your code
});

* The easiest way of adding a newly created element to the DOM is by using .append() or .appendTo().

Posted in JavaScript, jQuery, on() | Tagged , , , , , , , , , , , | Leave a comment

3D Text Shadow Effects with CSS

The easiest way to create a shadow effect is to use either the text-shadow CSS property. This is very straightfoward (when supported). See the W3 Schools page for more details.

TEXT

<p style=”font-size: 3em; color: #c00; text-shadow: 3px 3px #ccc;”>TEXT</p>

However, using this property the horizontal and vertical distances set are then the same across the whole HTML element. Furthermore, the shadow colour is fixed and does not change depending on the backgournd colour below it.By creating a second identical HTML element and placing it below the original we can control both the shadow distances and the opacity of the shadow.

We can place 2 bits of text one on top of the other using CSS absolute positioning and z-index.

TEXT

TEXT

Here’s the code:

<div style=”width: 150px; height: 50px; position: relative;”>
  <p style=”position: absolute; top: 10px; left: 10px; font-size: 3em; color: #c00; z-index: 2;”>TEXT</p>
  <p style=”position: absolute; top: 13px; left: 13px; font-size: 3em; color: #ccc; z-index: 1;”>TEXT</p>
</div>

Note that the 2 paragraphs have a containing <div> to use the absolute positioning. You might also notice that the top and left values are 3px higher for the shadow text so that it sticks out to the bottom right and the shadow z-index is set to a lower value than the original text so that it is displayed behind it.

The next thing we can do is to alter the text’s letter-spacing so that the shadow is no longer a carbon copy of the original text but more widely spaced, giving a feel of perspective.

TEXT

TEXT

<div style=”width: 300px; height: 100px; position: relative;”>
  <p style=”position: absolute; top: 10px; left: 10px; font-size: 5em; color: #c00; z-index: 2;”>TEXT</p>
  <p style=”position: absolute; top: 13px; left: 13px; font-size: 5em; color: #ccc; z-index: 1; letter-spacing: 2px;”>TEXT</p>
</div>

You can now see that the horizontal shadow distance is greater on the last letter than it is on the first – the shadows get longer from left to right, which makes it appear as if the light source is further to the left.

Using a grey colour for the shadow text is ok on a plain white background but it would look odd over a darker background:

TEXT

TEXT

Therefore, we should not use grey but black and set the opacity of the text to something low.

TEXT

TEXT

<div style=”width: 300px; height: 100px; position: relative; background-color: #666;”>
  <p style=”position: absolute; top: 10px; left: 10px; font-size: 5em; color: #c00; z-index: 2;”>TEXT</p>
  <p style=”position: absolute; top: 13px; left: 13px; font-size: 5em; color: #000; opacity: 0.1; z-index: 1; letter-spacing: 2px;”>TEXT</p>

It’s worth experimenting with different letter-spacing, positioning and opacity to see what works best for you.

Posted in css, letter-spacing, opacity, positioning, text-shadow | Tagged , , , , , , , , | Leave a comment

3D Effects with Borders in CSS

First up, when I say 3D, I’m talking about making things appear to stick out from the page by using shadow effects, not proper 3D involving glasses, etc.

Here are 3 very simple examples of giving a box (a <div>) some appearance of depth.

1. Border-bottom only

This is by far the simplest method. We just add a border-bottom style with a colour slightly darker than that of the box. Here’s the code:

<div style=”width:50px;height:50px;background-color:#090;border-bottom:solid 10px #060″></div>

2. Border-bottom with border-left and border-right set

By also setting the border-left and border-right to the colour of the box it creates a small diagonal where the sides and bottom meet. This gives a slight impression of a beveled edge. Here’s the code:

<div style=”width:50px;height:50px;background-color:#090;border-bottom:solid 10px #060;border-left:solid 10px #090;border-right:solid 10px #090″></div>

3. Border-top of another box

For this method we place another box immediately below the first and set the colours of the top and side borders. The top will be our shadow colour – slightly darker than the first box and the sides will be set to the page background, in this case white. Notice the differing width of the second box to accommodate the border. This final method might not work consistently in all browsers and is harder to apply to elements of different sizes. Here’s the code:

<div style=”width: 50px; height: 50px; background-color: #090;”></div>
<div style=”width: 30px; height: 10px; border-top: solid 10px #060; border-left: solid 10px #fff; border-right: solid 10px #fff;”></div>

Here I’ve done the styling inline but it would work much better to create a class called something like ’3d’ and then apply it to all boxes you want to have the effect across your site.

These examples have the border width set to 10px to make them obvious but the effect actually works much better when it is a lower value and more subtle. I’d suggest playing around with different widths on the sides too to see what works best for you.

Posted in border, css | Tagged , , , , , , , , , , | Leave a comment

Making ‘option’ element wider than its ‘select’ with CSS

By default a dropdown menu (select HTML tag) will display at the width of its widest option. Here are a couple of examples:

A select box with options shorter than the initial displayA select box with options longer than the initial display

A lot of the time, to save on screen space, what we actually would want would be something more like this:

A shorter select box with longer options

 This can be done with JavaScript but there’s a simple solution using just a bit of CSS. You can set the width of the select and option elements using CSS but the option width is always bound by the select width so that won’t work.

The way we get around it is to set the width of the select element when it is in use, using :focus. Firstly, here’s the simple HTML:

<select>
 <option>Please Select</option>
 <option>Option One is much longer than the select box</option>
 <option>Option Two is much longer than the select box</option>
 <option>Option Three is much longer than the select box</option>
 <option>Option Four is much longer than the select box</option>
</select>

and the CSS:

select {width:120px;}
select:focus {width:300px;}

This should work in any common browser from IE8 onwards though IE8 will require a
<!DOCTYPE> in order to support :focus.

Posted in :focus, css, html, select | Tagged , , , , , , , , , , , | 1 Comment