The Kiermans » css

CSS3

darren — Fri, 23 Jul 2010 11:15:22 +0000

So what is CSS3? Firefox has it, Internet Explorer hasn’t!

Have you noticed on some sites that when you view it on Firefox compared to Internet Explorer it seems to look better, the reason behind this could be CSS3 support.

CSS3 support allows a web designer to create a wide range of extra effects to be applied which CSS2 never did. Effects including curves and shadows.

JQuery will allow a lot of these effects to be applied on a CSS2 based browser like Internet Explorer but you are still restricted to what you can do and requires additional modules to be installed and ends up taking a lot longer to do it.

Microsoft have announced that CSS3 support will appear in Internet Explorer 9, but we’ll wait and see if full support is actually added.

Want to know about CSS3? More information on CSS3 is available at http://www.css3.info/

CSS – Its !important

darren — Wed, 24 Feb 2010 21:25:39 +0000

CSS styling will always cascade – meaning if you have more than one declaration of the same style – the last one it finds will always be used.

You can override this functionality by using the !important function. A CSS rule which has !important on the end will always be applied no matter where that rule appears in the CSS document.

For example … the following CSS rule will always make sure paragraph text is always red, regardless if the paragraph text colour is changed (to blue) later on in the CSS document.

p { color: #ff0000 !important; }
…
p { color: #0000ff; }

jQuery Cycle Extras

darren — Thu, 04 Feb 2010 14:39:50 +0000

Yesterday I told you about an excellent Jquery script called Cycle. I’ve been using this recently on a lot of sites – mostly as a header.

It works well as a header slideshow except when you want to put a logo on it – the first idea would be to just put the logo on the actual images – but this requires you to do it on all images, and future images, if you decide to change the images at a later date.

A solution is to overlay the image using a transparent image ……

After the

which adds the images add …

Note: Make sure the logo image file is the same size as the images in the slideshow.

Now style the new class with the following …

.logo {
    height: 175px;
    width: 960px;
    overflow: hidden;
    z-index: 10;
    position: relative;
    top: -175px;
}

Note: Make sure that the height, width and top match the height and the width of the slideshow.

Examples of this …

http://www.graemehowefencing.co.uk/
http://www.svlhire.co.uk/home.html