Before first post

After first post

Final image

The parts of the (w)hole

A side-on view of the porthole

The final image is made up of:

The original image which has a drop-shadow and border applied via css.

A 5px wide border that is grey on 3 sides and white at the top.

A dark grey 1px border to define the outer edge.

Adding content with pseudo-elements

It’s not possible to add more than one border to the div that displays the image, but we can add more items to get the additional borders we need. Doing this manually would be a pain, and would create extra html elements which we don’t need. Fortunately, we can generate everything that we need in css with the :before and :after pseudo elements. This technique is lifted wholesale from Nicolas Gallagher’s website, so look there for more detail on the technique.

Changes to the original code

The image itself is moved from the image div and put onto the pseudo :after element we create so that it appears on top of the others. All of the sizes are also changed to match the additional size needed for the borders we are adding.

The new css for the portholes is below:

Css

.image
{
/*Rounded edges*/
-moz-border-radius: 33px; /* FF1+ */
-webkit-border-radius: 33px; /* Saf3-4 */
border-radius: 33px; /* Opera 10.5, IE 9, Saf5, Chrome */

background-repeat:no-repeat;
border:1px solid #CCCCCC;
display:block;
height:66px;
overflow:hidden;
position:relative;
margin:10px;
width:66px;
z-index:1;
}

.image:before
{
content:”";

/*Rounded edges*/
-moz-border-radius: 33px; /* FF1+ */
-webkit-border-radius: 33px; /* Saf3-4 */
border-radius: 33px; /* Opera 10.5, IE 9, Saf5, Chrome */

position:absolute;
z-index:-1;
top:0px;
left:0px;
right:0px;
bottom:0px;
border:5px solid #ccc;
border-color:#fefefe #f0f0f0 #eaeaea #f0f0f0;
}

.image:after
{
content:”";
background:#fff url(../images/finance.jpg) no-repeat 0 0;

/*Shadows*/
-moz-box-shadow:inset 0px 2px 8px #333; /* FF3.5+ */
-webkit-box-shadow:inset 0px 2px 8px #000; /* Saf3.0+*/
box-shadow:inset 0px 2px 8px #333; /* Opera 10.5, IE 9 */

/*Glow effect*/
-webkit-mask-box-image:url(../images/circle60pxglow.png);

/*Rounded edges*/
-moz-border-radius: 33px; /* FF1+ */
-webkit-border-radius: 33px; /* Saf3-4 */
border-radius: 33px; /* Opera 10.5, IE 9, Saf5, Chrome */

position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:1px solid #999;
}

Internet Explorer

IE6 and IE7 don’t recognise the Pseudo elements at all which in this case means that our image won’t show at all. To work around this we can use a hack to move the background image back to the image div.

Css
Add the following to the .image{} declaration:

/*IE6/7 hacks*/
*background:#fff url(../images/finance.jpg) no-repeat 0 0;
*width:60px;
*height:60px;


Obviously if you’re using something like Modernizr or conditional comments then you need to drop the hacks and add the appropriate css elsewhere.

If you find this tutorial useful, or have a better way of doing something please let me know in the comments.

References

This design would not have been possible without this excellent article by Nicholas Gallagher:
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Adding an inner-shadow to make it look like the image is embedded into the page is just as easy, but not quite as well supported with just css (Chrome has problems).

Finally adding a shine effect means creating a special image first, and it’s only supported in WebKit based browsers (Chrome and Safari).

The code below lets you achieve the effect, and it degrades gracefully for browsers that don’t support parts of the effect.

Before

After

Getting started

First we create a single 60px by 60px div with an image added into the background via css. This is the basic starting block.

Css:

.image{
background:transparent url(../images/finance.jpg) no-repeat 0 0;
height:60px;
width:60px;
}

Rounding the corners

Then we round the corners enough to make our div into circle. Note: The radius is half the full width of the circle, so to get a 60px circle we have to set the radius to 30px.

background:transparent url(../images/finance.jpg) no-repeat 0 0;
height:60px;
width:60px;
}


Adding a shadow

To make the image appear to be embedded into the page we can add an inset drop-shadow.

.image{

-moz-box-shadow:inset 0px 2px 8px #333; /* FF3.5+ */
-webkit-box-shadow:inset 0px 2px 8px #000; /* Saf3.0+*/
box-shadow:inset 0px 2px 8px #333; /* Opera 10.5, IE 9 */

-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3-4 */
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */

background:transparent url(../images/finance.jpg) no-repeat 0 0;
height:60px;
width:60px;

}

Problems

A problem with this layout occurs from an unexpected source; Chrome (as of  version 8.0.552.224) doesn’t clip the inset shadow properly when used with rounded corners so you get an odd square with our circular image in the middle.

Normally we could just switch the shadow off the for the offending browser and degrade back to something usable. The problem with this is that Safari and Chrome both use the WebKit rendering engine, so both of them would lose the shadow. This doesn’t seem like the right thing to do when Safari supports this fine.

The fix, a new problem and a workaround

It is possible to get Chrome to play ball by doing the clipping ourselves with an image mask.

Initially I tried to do this with an SVG file so that I could apply it to any size circle without having to recreate the image each time. Unfortunately it appears that Chrome also doesn’t support SVG files being used as masks. The work around is to use a png file with a single white 60px circle.

.image{

-webkit-mask-box-image:url(../images/circle60px.png);

-moz-box-shadow:inset 0px 2px 8px #333; /* FF3.5+ */
-webkit-box-shadow:inset 0px 2px 8px #000; /* Saf3.0+*/
box-shadow:inset 0px 2px 8px #333; /* Opera 10.5, IE 9 */

-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3-4 */
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */

background:transparent url(../images/finance.jpg) no-repeat 0 0;
height:60px;
width:60px;

}

Mask:

circle60px.png

Added bonus for WebKit based browsers – Glass effect

Because we’re already using a mask anyway it’s quite simple to add a shine/glow effect to the image using the mask file. This is completely ignored by FireFox, Opera etc.

circle60pxglow.png

If you’ve got any comments, fixes, or suggestions on how to do this better please let me know below.

References:

Css3 shadows and rounded corners:
http://css3please.com/

Masking:
http://webkit.org/blog/181/css-masks/

Since I wrote the original article I found this site, which seems to have the original Flash files for the peel effect, as well as a copy of the non-jQuery version of the files. So, if you want to edit the .fla files, or you don’t want to use jQuery to display the page peel you may want to head over there now.

Updates:

• The most requested feature for the original script was for it to open the link in the same window. This is now a configurable option. (Note: I’ve changed the default to be that the link opens in the same window).
• I’ve changed the default images to make it easier to create your own.
• Stopped the dotted outline from appearing when you click on the advert.
• Assorted other fixes.

To use the new page peel edit the peel.js file to match your set-up:

• smartredfox.link_url – This is the full url (including http://) that you want users to go to when they click your advert.
• smartredfox.newWindow – Set this to true if you want the link_url to be opened in a new window.
• smartredfox.small_image – This is the full path to the image users see when the image loads.
• smartredfox.big_image – This is the full path to the big image that appears when users roll over the page peel.
• smartredfox.small_path – This is the full path to the small.swf file.
• smartredfox.big_path – This is the full path to the large.swf file.

Then include the peel.js file and jQuery in the head of your website:

	  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	  <script src="peel.js" type="text/javascript"></script>

Download now View demo

If you have any feedback or feature requests please post them in the comments below.

SmartRedFox is pleased to announce it’s first ever jQuery plugin – the Totaliser.

It’s a simple plugin that takes a text box and turns it into a fruit machine style number updater. It’s easier to see than explain, so take a look at the demo.

There are a couple of things you need to know to use it:

1> Include the js file after your jquery include:

<script type=”text/javascript” src=”YOURPATHHERE/jquery.totaliser.js”></script>

2> Call the totaliser against a textbox to create it:

$(‘#textboxid’).totaliser();

3> When you want to update it just call UpdateTotaliser with a new number:

$(‘#textboxid’).totaliser(45545666);

or

$.fn.totaliser(45545666);

There are a few configurable options for the totaliser:

• digits – this sets how many digits the totaliser displays (default is 9)
• currency – set this to false if you don’t want to show the currency symbol
• currencySign – this sets what currency symbol shows before the number (default is british pounds).

So for example to load it up with the dollar sign and only 6 digits you’d call the following:

$(‘#textboxid’).totaliser({digits:6,currencySign:”$”});

Download Totaliser View demo
If you have any bugs, suggestions, improvements, or just want to let me know that you’re using it, please leave a comment.

First, the problem

This is a real example from a project I’m working on at the moment. This layout worked perfectly in FF3, Chrome, and IE8. It was only when I came to look at the layour in IE6 that I saw the problem.

When first loading the page the following shows:

Broken in IE6

As you can see the box with the tick in it is in completely the wrong place – it’s supposed to be just above the “read more” link. Now is where IE6 shows it’s real strangeness. When I hovered over the read more link, or the item itself, it moved to the right place.

I’d seen this problem a few times before, and thought I knew what I was doing to fix it – a light smattering of Position:relative, and Zoom:1 and I’d be done. Unfortunately, it wasn’t that simple. My next step was a search around the internet-o-web where lots of people seem to describe something very similar, and most of them recommend applying Position:relative to the parent of the float. This didn’t work for me.

A bit more playing with my setup revealed that applying Position:relative to the list item (the parent’s, parent’s, parent) fixed the problem. One to file away for the future!

Here it is where it’s supposed to be.

Timebot is an automated system that checks to see if someone is onsite by looking for their mobile phone or bluetooth enabled device. Timebot is easy and quick to configure, and saves a users time out to Google Calendar for easy management and sharing.

Take a look now – any feedback is greatly appreciated.

A few weeks back I was looking for a nice simple way of adding tooltips to some buttons on a site – sometimes an image alone doesn’t quite convey what the button does in enough detail.

I found the excellent coda popup bubbles on jQuery for designers, this seemed to do everything I wanted it to, but it meant going through all of my html and adding an additional div with the popup content. That’s fine for me, but other developers are never going to remember to do this and we really want a consistent user interface.

A little bit more looking led to Web Designer Wall (#5 in the list). They have a very simple technique that pulls the Title text from an image and creates the popup out of this. All of dev’s are told to add title text to images so this was almost perfect. I say almost perfect because unlike the code bubbles the hover events queue up. This means that if you run you cursor back and forth over the buttons the popups keep firing for a few seconds/minutes after you stop.

So my final stop was to combine the two. I also incorporated any fixes I saw in the comments section of jQuery for Designers.

You can download the script here.

Or see a demo here.

The image file I use for the tooltips can be downloaded here, and is free for anyone to use.

Just recently I had to style an asp datagrid that another developer had created. Now almost all of our default styles for this site use simple image buttons for actions but the datagrid automatically pumps out the Edit, Cancel, and Delete buttons as plain text. Unfortunately Microsoft have given very little control to designers/developers over what is pumped out onto the page, so it’s pretty much a link, or an input button as standard.

I had a brief look for a way around this and found lots of people with similar problems but no perfect way round this problem.

The simplest way I found around the problem is to put an image tag into the text attribute. E.g.:

<asp:EditCommandColumn HeaderText=”Actions” ButtonType=”LinkButton” UpdateText=”<img src=’../images/buttons/small/updatesmall.png’ alt=’Update’ />” CancelText=”<img src=’../images/buttons/small/cancelsmall.png’ alt=’Cancel’ />” EditText=”<img src=’../images/buttons/small/editsmall.png’ alt=’Edit’ />“></asp:EditCommandColumn>

This does work but it doesn’t have any hover effects on mouse over,  nor does it allow you to use css sprites to keep load times down. In this case it also meant that I’d have to create seperate images for every action.

So what I did instead was the following; I added an itemStyleCssClass attribute to the EditCommandColumn with my button style on it, then I put span’s into the text for Edit, Cancel, and Update that have a specific class for each button type:

<asp:EditCommandColumn HeaderText=”Actions” ItemStyle-CssClass=”grey_small_circle” ButtonType=”LinkButton” UpdateText=”<span class=’tick’>Update</span>” CancelText=”<span class=’cancel’>Cancel</span>” EditText=”<span class=’edit’>Edit</span>“></asp:EditCommandColumn>

Then I added the following CSS:

/*Create buttons and add hover effect */

.grey_small_circle a{background:url(/admin/images/buttons/medium/grey_small_circle.png) no-repeat 0 0;display:block;line-height:30px;margin-top:1px;outline:none;width:31px}
.grey_small_circle a:hover,a:hover.grey_small_circle{background-position:0 -30px;color:#00affc;text-decoration:none}

/* Add the image inside */

.grey_small_circle span{background:transparent url(/images/icons/medium/all.png) no-repeat -288px -252px;display:block;height:30px;text-indent:-9000px;width:32px}

.grey_small_circle span.edit{background-position:-242px -201px}
.grey_small_circle span.redcross{background-position:-13px -252px}
.grey_small_circle span.remove{background-position:-427px -357px}

This css adds the grey circle in the background of the buttons (see the screenshot) and makes the hover work using the sliding doors technique.

I then use css sprites for putting an action image onto each button (using the class we assigned to the span), this technique speeds up load times and stops the unstyled pauses when a user hovers over a button. The last lines of the css attach a sheet of sprites  (in this case the excellent PI Diagona icons from pinvoke) and moves them depending on which button needs to be displayed.

Just recently I needed a page peel script for a client. A look around the ‘net lead me to a script that seemed to do everything I needed it to, but it used the document.write method which I’m not a big fan of, and it all seemed a bit inefficient.

My client was already including jQuery in their pages so it made sense to rewrite the javascript using jQuery. This also has the added benefit of meaning you no longer have to include the script inside the body tag to get it work in IE7.

While we were testing with users I also spotted a problem with some earlier versions of flash not showing the pictures. The simple but strange solution for this was to use two large images, instead of one small and one large. If you’re not worried about users with old versions of flash you can just use a 100px x 100px image instead of two 650px x 650px images.

You can download the script here.

Or see a demo here.

To use this script you need to edit the peel.js file and put the link and image paths in that you want to use, then put the following in the head of your page:

<script src="/pathtojquery/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/pathtopeel/peel.js" type="text/javascript"></script>

That’s it. Just add those lines and the script does the rest. Obvisously change /pathtojquery/ to the path to jQuery for your site, and change /pathtopeel/to point to where you uploaded the peel.js file.

So with that little disclaimer out of the way, here’s my take on the rather excellent YAML CSS framework, and my first foray into using it to layout a site.

First things first; YAML seems to be very well thought out. It claims to be cross browser compliant in almost every browser that’s still in use by more than one man and his dog, and it fixes most of the major problems web developers run into with the older browsers.

Unlike YUI and some of the other Frameworks you’ll need to download the css files etc. and host them yourself. These can all be downloaded from here.

YAML lets you get off to a flying start without any real work creating css reset files etc. After slicing and dicing a design I’ve been working on for a week I managed to get a site up and running cross-browser on the first attempt. This seems to happen very rarely for me. I’ll admit there were a few tweaks here and there to make it perfect, but overall it just worked.

It’s got a few default styles that are well thought out and I’m already finding myself duplicating them in other projects I work on that don’t use YAML. I’ll cover details of some of these styles and a bit more on how to use the framework in later posts.