Categories
css html

Css portholes

This tutorial builds on a previous post for creating a rounded inset image from a square picture, this tutorial adds a complex border to make the image look like a stylish porthole.

Square image with no rounding or shadowing.
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/

Categories
css html

Rounded, shadowed, and shiny pictures with CSS3

It’s easy to create round pictures from square ones using just CSS. It does mean using some proprietary css, but it’s relatively well supported  – FireFox, Chrome, Safari, Opera, and IE9 are all OK with it.

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.

Square image with no rounding or shadowing.
Before
After

Getting started

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


Html:
<div class="image"></div>

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.


Css:
.image{
-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;
}

Internet Explorer

Versions of Internet Explorer prior to version 9 ignore this css completely so we gracefully degrade back to the plain square image.

Adding a shadow


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


Css:

.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.


Css:

.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.


New mask:

circle60pxglow.png

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

Update

I’ve created a new post showing how to add a porthole style borders onto the image.

References:

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

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

http://www.smartredfox.com/2011/01/css-portholes/
Categories
css featured html jQuery

Free jQuery page peel (updated)

There is now a javascript based WordPress plugin for adding Page Peels to your site. Take a look at it on Code Canyon.

The jQuery version of the page peel script has been very popular on SmartRedFox.com, and I’ve finally got round to making some updates and changes to it.

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.

[ad#ad-3]

Categories
css Development Frameworks html Notes YAML

First impressions of YAML

YAML logoOkay, I’ll be honest I’m a bit of a magpie when it comes to web development, and in particular css frameworks. One week I’ll be telling everyone that’ll listen (which isn’t many people) about how great YUI is, and the next week I’ll be waxing lyrical about the excellent Blueprint framework.

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.

[ad#ad-2]

Categories
css html IE6

Min-height in IE6

We all know the problem: You need to set a minimum height on an object but IE6 ignores it and ruins your layout. Well worry no more, there is a simple fix:

selector {
min-height:500px;
height:auto !important;
height:500px;
}

This takes advantage of two IE6 bugs:

  1. IE6 ignores the !important and sets the height using the last line.
  2. IE6 treats height like it should treat min-height and lets child objects cause the parent to expand.

I found this helpful solution here.

Categories
css html

Keeping your footer at the bottom of the page

Created a site design but keep getting white space showing below your loving crafted footer? Me too, a bit of research later and I’ve found a fix that works well, integrates with the yui framework, and seems to work well cross-browser.

The basic principle is pretty simple.

  • Make the body 100% tall no matter what.
  • Give it a negative bottom margin the size of your footer.
  • Move you footer up into the space left by the bottom margin

There’s a few other steps to make it work cross-browser (ie6+) but that’s basically it.

I found the solution here.


Categories
css html

Image button not aligning vertically with input box

Mis-aligned button in IE7

This is an odd problem. You have a perfectly normal search box with a go button next to it – a classic layout some might say. The problem is that the go button seems to sit about half-way up the side of the search box. Now, having tried to fix css/html problems cross-browser before, I was fully expecting to spend a few hours looking for solutions trying them in FF, IE etc. and then mixing and matching my perfect solution… In this case I was stopped short… Very short in fact. The fix is simple as adding a position:absolute to the button. Problem solved. See here for where I found the fix.

Categories
css Firefox html Safari

Removing spaces below images in FF & Safari

Here’s an annoying problem. A site renders perfectly in IE6 (this alone is surprising) but in Firefox2 and Safari it shows a 4px space below each image:

Images naturally sit on the baseline. This means that they’re about 4px up from the bottom normally. Setting vertical-align: bottom or display:block seems to clear it.

The solution for this was found here.

Categories
css html

Centering absolutely positioned elements

Having problems setting auto margins on an absolutely positioned element? Me too… until I found that I was missing one simple bit of css.

When centering an absolutely positioned element horizontally you have to specify the left and right properties as zero for this to work!

I found the solution here but I thought I’d note it down for all those people that may not have come across this themselves. Somehow it seems to have passed me by…

Auto-margins can center an absolutely positioned element inside its containing block.

For this to work, you have to

  • specify the offset properties (of opposite sides) with same values, i.e. by setting left:0; right:0; for horizontal centering and top:0; bottom:0; for vertical centering,
  • set dimensions along the axis you want to center along,
  • enable auto-margins along the axis you want to center along.

Internet Explorer note: IE6 can not relate absolutely positioned elements to opposite sides of containing block, so only one of the offset properties is used. This brings the element out of balance and renders auto-margins useless.

I hope someone finds this useful…