Designerprasad

Jquery – A logo fixed position is positioned relative to the browser window.

2011-09-08T08:18:00.001-07:00

$(function() {
var offset = $(“#logo”).offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$(“#logo”).stop().animate({
marginTop: $(window).scrollTop() – offset.top + topPadding
});
} else {
$(“#logo”).stop().animate({
marginTop: 0
});
};
});
});

Google Chrome to Phone Extension

2011-09-08T08:18:00.000-07:00

This extension adds a button to Chrome that lets you seamlessly pushes links, maps, and currently selected text and phone numbers to your Android device. 

You also need to install the Chrome to Phone Android application on your phone. The application can be downloaded from Market (search for 'Chrome to Phone'). Requires a mobile phone running Android 2.2 ("Froyo") or later. 

Note: By installing this extension, you agree to these terms - http://chrome.google.com/extensions/intl/en/gallery_tos.html. The source code for this product is available under the Apache 2.0 license from the Developer website.

Version history:
2.0.0 - First release
2.1.0 - i18n version
2.1.1 - bug fix for es_419
2.1.2 - bug fix for context menu in Chrome 7
2.1.3 - i18n translation fix for ja
2.3.0 - OAuth - login once only
2.3.1 - Fix character encoding issue

Resize Any image While Maintaining Aspect Ratio and Maximum width & Height

2011-08-11T13:12:00.000-07:00

It works well for resizing but changing the aspect ratio of the original image squashes the new image.

Example :
Convert a 150*100 image into a 150*150 image.
The extra 50 pixels of the height need to be padded with a white background color.

public void ResizeImage(string OriginalFile, string NewFile, int NewWidth, int MaxHeight, bool OnlyResizeIfWider)
{
    System.Drawing.Image FullsizeImage = System.Drawing.Image.FromFile(OriginalFile);

    // Prevent using images internal thumbnail
    FullsizeImage.RotateFlip(System.Drawing.RotateFlipType.Rotate180FlipNone);
    FullsizeImage.RotateFlip(System.Drawing.RotateFlipType.Rotate180FlipNone);

    if (OnlyResizeIfWider)
    {
        if (FullsizeImage.Width <= NewWidth)
        {
            NewWidth = FullsizeImage.Width;
        }
    }

    int NewHeight = FullsizeImage.Height * NewWidth / FullsizeImage.Width;
    if (NewHeight > MaxHeight)
    {
        // Resize with height instead
        NewWidth = FullsizeImage.Width * MaxHeight / FullsizeImage.Height;
        NewHeight = MaxHeight;
    }

    System.Drawing.Image NewImage = FullsizeImage.GetThumbnailImage(NewWidth, NewHeight, null, IntPtr.Zero);

    // Clear handle to original file so that we can overwrite it if necessary
    FullsizeImage.Dispose();

    // Save resized picture
    NewImage.Save(NewFile);
}

Jquery – A logo fixed position is positioned relative to the browser window.

2011-08-02T02:41:00.000-07:00

$(function() {
            var offset = $("#logo").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#logo").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#logo").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });

Comprehensive List of Browser-Specific CSS Hacks

2010-11-04T00:56:00.000-07:00

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

CSS Hack for transparent images in IE6

2010-10-22T04:45:00.000-07:00

/*///Start code for PNG Image////*/

* html img,

* html .png {

azimuth: expression(

this.pngSet?

this.pngSet=true :

(this.nodeName == "IMG" ?

(this.src.toLowerCase().indexOf('.png')>-1 ?

(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",

this.src = "images/blank.gif") :

'') :

(this.currentStyle.backgroundImage.toLowerCase().indexOf('.png')>-1) ?

(this.origBg = (this.origBg) ?

this.origBg :

this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",

this.runtimeStyle.backgroundImage = "none") :

''

), this.pngSet=true

);

}

/*///end code for PNG Image////*/

Html5 ready reset

2010-09-20T07:12:00.000-07:00

Plenty of you will have used Eric Meyer’s css reset before now. It is included in many frameworks and so on, like 960.gs. This is a revamped version of that reset, that brings it into the present with full support for html5. It sets all the new structural tags as block level, and resets all their default styling as expected.

/*   html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)

 v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark  html5doctor.com/html-5-reset-stylesheet/*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */

png behavior

2010-07-01T01:29:00.000-07:00

PNG Behavior

Below is the complete source for the behavior. Notice that the behavior will only do anything if the user is using IE55+ on a Win32 platform.

CODE:

<public:component>
<public:attach event="oncontentready" onevent="filterImage()" />
    <script language="jscript">
    var original = element.src;
    var spacer = "images/blank.gif";
    var htc = /MSIE ((5\.5)|[6])/.test(navigator.userAgent) && navigator.platform == "Win32";
    function filterImage() {
    if(/\.png$/.test(original) && htc) {
    element.style.visibility = 'hidden';
    var preload = new Image();
    preload.onload = function() {
        element.style.height = element.style.height ? element.style.height : this.height;
        element.style.width = element.style.width ? element.style.width : this.width;
        element.src = spacer;
        element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + original + ", sizingMethod='scale', enabled='true')";
        element.style.visibility = 'visible';
    }
    preload.src = element.src;
    }
}
</script>
</public:component>

Usage

The usage is really simple. All you need to do is to add the png behavior to the image element.

<style type="text/css">

img {
   behavior: url("pngbehavior.htc");
}

</style>

CSS hacks

2010-04-30T02:29:00.000-07:00

Most in-CSS hacks deal with selector bugs. The following is a list of browser version ranges and the beginnings of selectors that are known to select elements in them. Note that because these hacks rely on browser bugs or missing features, results may vary in some lesser-known or future browsers. All of these selectors use valid CSS.

IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only

*:first-child+html {}
============================
sup,sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
}

sup {
bottom: 1ex;
}
sub {
top: .5ex;
}

sup.reg {
height: 0;
line-height: 1;
bottom: 1.2ex;
vertical-align: baseline;
position: relative;
text-decoration:none;
font-size:110%;
}
============================
@media print{}
============================
html>/**/body #divid{
margin:280px auto 0px 50px;
}
============================
Reset:
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
============================
IE 6 and below
* html {}
IE 7 and below
*:first-child+html {}, * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}
============================
"" ------ “”
>> ------ »
- ------- —
' ------- ’
& ------- &
============================
img { -ms-interpolation-mode: bicubic; } //scaling of the images
============================

============================
http://www.csszengarden.com/
http://www.meyerweb.com/
http://www.alistapart.com/
http://www.css3.info/
http://positioniseverything.net/
http://css-tricks.com/
http://cssmania.com/
http://cssremix.com/
http://www.css-website.com/
http://cssvault.com/
http://dezwozhere.com/links.html
http://www.w3schools.com/
============================

html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}

css rounded buttons

2010-03-04T05:57:00.000-08:00

css
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

a.ovalbutton{
background: transparent url('media/oval-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}

a.ovalbutton span{
background: transparent url('media/oval-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

a.ovalbutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.ovalbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

</style>

Note: The image paths referenced in the CSS above assumes you're using the gray ovals. If you're using another, be sure to update the image paths accordingly.

HTML

<h4>Single button:</h4>

<div class="buttonwrapper">
<a class="ovalbutton" href="http://www.dynamicdrive.com/style/"><span>Dynamic Drive CSS Library</span></a>
</div>

<h4>Side by Side:</h4>

<div class="buttonwrapper">
<a class="ovalbutton" href="#"><span>Submit</span></a> <a class="ovalbutton" href="#" style="margin-left: 6px"><span>Reset</span></a>
</div>
IMAGES

Rounded Corner Boxes the CSS3 Way

2009-12-11T22:23:00.000-08:00

To create a CSS3 rounded corner box, simply start with your box element and apply your 4 corner images, separated by commas.

.box {
background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
}

We don’t want these background images to repeat, which is the normal behaviour, so lets set all their background-repeat properties to no-repeat.

.box {
background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

Lastly, we need to define the positioning of each corner image.

.box {
background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top left, top right, bottom left, bottom right;
}

Advanced CSS Text Effects Tips

2009-12-09T03:55:00.001-08:00

1. Create a Letterpress Effect with CSS Text-Shadow

View Demo

2. Text Rotation with CSS

3. Date Display Technique with Sprites

4. CSS Gradient Text Effect

View Demo

5. CSS Text Gradients

Yet another very similar tutorial about text gradients, but maybe you’ll like both variants trying to explain really how CSS text gradient effects work.

6. Add grunge effect to text using simple CSS

Article is based on the same technique as CSS text gradients using it to add grunge type effect to your typo!

View Demo

7. Two simple ways to create text embossing effect

8. Text Embossing Technique With CSS

Example from AlexBuga homepage.

9. Codename Rainbows

Beautiful CSS&Javascript code offered by DragonInteractive teaching how to get two-color gradient text effects, shadows and highlights.

View Demo

10. CSS Drop Shadows

11. Text-Shadow Exposed

Make cool and clever text effects with css text-shadow. Very detailed article teaching you a lot of hidden tips how to achieve text glowing, embossing,shadowing with just few steps.

12. Background gradients and CSS

Pretty cool CSS background effect, which can be applied on hover giving a lot of options use it in creative way!

13. CSS Text-Shadow in Safari, Opera, Firefox and more

14. Text-overflow

15. How To Implement sIFR3 Into Your Website

16. How To Use Any Font You Wish With FLIR

View Demo

For Further Reading – More Typography Tips In Sucessful Web Designs

17. How to use headings in HTML

18. Advanced Typography techniques using CSS

19. 10 Examples of Beautiful CSS Typography and how they did it…

Beautiful article explaining simple but very effective CSS tricks how to achieve beautiful typography effects with just a few lines of code.

20. Typographic Contrast and Flow

Nick La teaches how to apply right contrasts and flow in your webdesigns explaining why and what works and how to achieve that effect.
View Demo Overview

21. The Elements of Typographic Style applied in Webdesign

22. 5 Principles And Ideas Of Setting Type On The Web

Text Rotation with CSS

2009-12-09T03:31:00.000-08:00

Once again, after reading somebody else's article, I felt inspired to put together an alternative example. In this case: Text Rotation.
Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. It's like the top fell off the pepper shaker and you've suddenly got a large pile of pepper on your food. It makes me want to sneeze.
Thankfully, many of the popular browsers of today support the ability to rotate HTML elements. Even better? We can make it work in Internet Explorer (back to version 5.5 even). How you might ask? Okay, let's look at the HTML.

31 
  July 
  2009

Nice and clean without too many extras. I conscientiously chose the date order I did to avoid having to use a comma. Otherwise, an extra span would be required to remove the comma from our final design.

The Magical CSS

For Webkit and Firefox (as of 3.5), you can take advantage of the proposed transform property to handle the rotation. Each browser requires its property prefix for now.

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

In order to perform a transformation, the element has to be set to display:block. In this case, just add the declaration to the span that you want to rotate.
When it comes to effects in Internet Explorer, there is a surprising amount of power (and untapped at that, I'd say) in using filters. Although misleading, there is a filter called BasicImage that offers up the ability to rotate any element that has layout.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.
The BasicImage filter has other properties that can be set such as mirroring, masking, greyscale and others. Alternatively, you can take advantage of the Matrix filter but the coordinates still don't make any sense to me.

In action

31 July 2009

What does this look like in action? Take a look at this page in Safari, Firefox or Internet Explorer and you should see something that looks like the following image. Probably the biggest downfall is the lack of consistency in text rendering. Internet Explorer will drop ClearType on any text that has a filter applied to it. You can also see the spacing between the day and the year is different between Safari and Firefox. The differences in text rendering make it more difficult to create "pixel perfect" layout.

Here's hoping the article has offered up a little inspiration and shown that even IE has a few tricks up its sleeve, allowing us to pull off some layout fun.

Date Display Technique with Sprites

2009-12-09T03:24:00.000-08:00

The typeface and the year being vertical should tip you off right away that images are being used to accomplish this. But also note that the date information is presented as text, as it should be, in the markup:

A quick peak in Firebug reveals the beautiful simplicity!

Sprites at Their Best

Hopefully it’s fairly obvious that each date doesn’t have it’s own unique graphic. The dates are pieced together from a single graphic (css sprites!), where different smaller parts of the graphic are shown in the three different regions: day, month, and year. Perhaps you’ll recognize this from a similar technique Joost de Valk posted about nearly a year ago.
Take a look at this beauty:

The HTML:

The end result HTML is going to be like this:

We have a wrapper, and three regions. This gives us what we need to match these schematics:

In a CMS like WordPress, the backend code to produce that would be like this:

The CSS

The CSS is where the sprite action really happens. With those special class names that we have set up in the HTML, we can set which portions of the image to use.
First, we set relative positioning on the parent. Then we absolutely position each of the three regions within. We set all three of them to use the same background image (our sprite), set their respective widths and heights, and kick the text off the page.
Then, we set each of the months (12 possibilities), days (31 possibilities), and years (goes 10 years out) with the specific background positioning needed to show the specific region we need.

.postdate {
  position: relative;
  width: 50px;
  height: 50px;
  float: left;
}
.month, .day, .year {
  position: absolute;
  text-indent: -1000em;
  background-image: url(/wp-content/themes/ljq/images/dates.png);
  background-repeat: no-repeat;
}
.month { top: 2px; left: 0; width: 32px; height: 24px;}
.day { top: 25px; left: 0; width: 32px; height: 25px;}
.year { bottom: 0; right: 0; width: 17px; height: 48px;}

.m-01 { background-position: 0 4px;}
.m-02 { background-position: 0 -28px;}
.m-03 { background-position: 0 -57px;}
... more like this ...

.d-01 { background-position: -50px 0;}
.d-02 { background-position: -50px -31px;}
.d-03 { background-position: -50px -62px;}
... more like this ...

.y-2006 { background-position: -150px 0;}
.y-2007 { background-position: -150px -50px;}
.y-2008 { background-position: -150px -100px;}
... more like this

CSS Menus

2009-12-07T21:43:00.000-08:00

Vertical Menu

Read the rest of this entry »

Blue Panel With Menu

Read the rest of this entry »

Vertical Blue and orange menu

Read the rest of this entry »

Gray Vertical Menu

More...

CSS Effects/Solutions to Make JavaScript Angry

2009-12-01T04:21:00.000-08:00

1. CSS Hover Effect

Learn how to use CSS to make hover effects for your content boxes.
Visit Article

2. CSS Gradient Text Effect

Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).
Visit Article

3. Blurry Background Effect

Utilizing two images and CSS background-attachment property you can make a great CSS effect easily.
Visit Article

4. The CSS letterpress effect

This effect is getting so popular in today web design. With the help of the text-shadow CSS property you can easily implement this effect in your website/blog.
Visit Article

5. 3-state Button using CSS

Learn how to create a 3-state button using pure CSS image sprites.
Visit Article

6. Pure CSS Polaroid Photo Gallery

Make the beautiful photo gallery above just using CSS properties.
Visit Article

7. Pure CSS Animated Progress Bar

Here’s a simple demonstration of how you can create animated progress bar using pure css.
Visit Article

8. CSS Text Gradient

Improve your site appearance by using this technique by CSSG which uses a transparent PNG and some lines of pure CSS!
Visit Article

9. 4 Uber Cool CSS Techniques For Links

Including Pure CSS Tooltip, Pure CSS Image Gallery, Pure CSS Image Resizer, and 3d Button Effect.
Visit Article

10. Bubble Effect with CSS

In this tutorial you will learn how to make bubble effect with CSS something like apple dock.
Visit Article

11. Create Resizing Thumbnails Using CSS

“This tutorial is aimed at controlling the size of the thumbnails appearing on your page. Sometimes we don’t have enough space to spare to fit in large thumbnails and yet we would like to avoid small and barely recognizable images. Using this trick we limit the default dimensions of the thumb, and show it in full size when user mouse-overs it.”
Visit Article

12. Pure Css Line Graph

Learn how to make line graphs with CSS and definition list elements (DL).
Visit Article

13. Pure CSS Data Chart

Data visualization is mostly achieved with flash applications or with help of some programming languages. But this tutorial will teach you create one by pure CSS.
Visit Article

14. CSS for Bar Graphs

In this tutorial, you will use CSS & XHTML to make beautiful bar graphs both vertical and horizontal. Another CSS Graph.
Visit Article

15. CSS Image Maps

Above is a sample image map that’s built entirely using CSS and XHTML
Visit Article

16. Pure CSS Lightbox

Yes, it’s a CSS-only lightbox effect right click on the demo page and view it’s source.
Visit Article

17. Change Text Selection Color With CSS

Learn how to override the default text selection color using CSS.
Visit Article

18. CSS Bubble Tooltips

Avoid cross-browser javascript when you can use css to make tooltips with less code. More Pure CSS Tooltips: 1 , 2 , 3
Visit Article

19. CSS Hover Effect

Multi-level drop-down menu that’s built entirely with CSS (without any JS).
More:

Visit Article

20. How to Create CSS Menu using Image Sprites

The number 19 was for multi-level CSS Menu, here you will learn how to create on-level image-based CSS menu with hover effect.
Visit Article

21. CSS Tabs

DOM tabs which will still work for javascript-disabled browsers
Visit Article

22. The CSS-Only Accordion Effect

Most JavaScript frameworks make such an effect fairly easy to pull off – heck, MooTools even built their reputation on it in the early days. So what makes this accordion effect special? It doesn’t require a single line of JavaScript.
Visit Article

23. Cross-browser drop shadows using pure CSS

This tutorial tries to provide a solution to make a cross-browser drop shadows using CSS. There are some advantages and disadvantages using the technique.
Visit Article

Approximate Conversion from Points to Pixels (and Ems and %)

2009-11-05T22:59:00.000-08:00

Here's a chart that converts points to pixels (and ems and %). It's an approximation, which will depend on font, browser and OS, but it's a good starting point.

Points	Pixels	Ems	Percent
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

CSS CODING

2009-10-08T23:04:00.000-07:00

1. Padding vs. Margin

Most beginners get padding and margins mixed up and use them incorrectly. Practices such as using the height to create padding or margins also lead to bugs and inconsistencies. Understanding padding and margins is fundamental to using CSS.

What Is Padding and Margin?

Padding is the inner space of an element, and margin is the outer space of an element.

The difference becomes clear once you apply backgrounds and borders to an element. Unlike padding, margins are not covered by either the background or border because they are the space outside of the actual element.

Take a look at the visual below:

Margin and padding values are set clockwise, starting from the top.

Practical example: Here is an

heading between two paragraphs. As you can see, the margin creates white space between the paragraphs, and the padding (where you see the background gray color) gives it some breathing room.

Margin and Padding Values

In the above example of the heading, the values for the margin and padding would be:

margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

To optimize this line of code further, we use an optimization technique called “shorthand,” which cuts down on repetitive code. Applying the shorthand technique would slim the code down to this:

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

Here is what the complete CSS would look like for this heading:

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

Quick Tip

Keep in mind that padding adds to the total width of your element. For example, if you had specified that the element should be 100 pixels wide, and you had a left and right padding of 10 pixels, then you would end up with 120 pixels in total.

100px (content) + 10px (left padding) + 10px (right padding) = 120px (total width of element)

Margin, however, expands the box model but does not directly affect the element itself. This tip is especially handy when lining up columns in a layout!

Additional resources:

2. Floats

Floats are a fundamental element in building CSS-based websites and can be used to align images and build layouts and columns. If you recall how to align elements left and right in HTML, floating works in a similar way.

According to HTML Dog, the float property “specifies whether a fixed-width box should float, shifting it to the right or left, with surrounding content flowing around it.”

The float: left value aligns elements to the left and can also be used as a solid container to create layouts and columns. Let’s look at a practical situation in which you can use float: left.

The float: right value aligns elements to the right, with surrounding elements flowing to the left.

Quick tip: Because block elements typically span 100% of their parent container’s width, floating an element to the right knocks it down to the next line. This also applies to plain text that runs next to it because the floated element cannot squeeze in the same line.

You can correct this issue in one of two ways:

Reverse the order of the HTML markup so that you call the floated element first, and the neighboring element second.
Specify an exact width for the neighboring element so that when the two elements sit side by side, their combined width is less than or equal to the width of their parent container.

Internet Explorer 6 (IE6) has been known to double a floated element’s margin. So, what you originally specified as a 5-pixel margin becomes 10 pixels in IE6.

A simple trick to get around this bug is to add display: inline to your floated element, like so:

.floated_element {
float: left;
width: 200px;
margin: 5px;
display: inline; /*--IE6 workaround--*/
}

.floated_element {
float: left;
width: 200px;
margin: 5px;
display: inline; /*--IE6 workaround--*/
}

Additional resources:

3. Center Alignment

The days of using the HTML tag are long gone. Let’s look at the various ways of center-aligning an element.

Horizontal Alignment

You can horizontally align text elements using the text-align property. This is quite simple to do, but keep in mind when center-aligning inline elements that you must add display: block. This allows the browser to determine the boundaries on which to base its alignment of your element.

.center {
text-align: center;
display: block; /*--For inline elements only--*/
}

.center {
text-align: center;
display: block; /*--For inline elements only--*/
}

To horizontally align non-textual elements, use the margin property.
The W3C says, “If both margin-left and margin-right are auto, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.”
Horizontal alignment can be achieved, then, by setting the left and right margins to auto. This is an ideal method of horizontally aligning non-text-based elements; for example, layouts and images. But when center-aligning a layout or element without a specified width, you must specify a width in order for this to work.
To center-align a layout:

.layout_container {
margin: 0 auto;
width: 960px;
}

.layout_container {
margin: 0 auto;
width: 960px;
}

To center-align an image:

img.center {
margin: 0 auto;
display: block; /*--Since IMG is an inline element--*/
}

img.center {
margin: 0 auto;
display: block; /*--Since IMG is an inline element--*/
}

Vertical Alignment

You can vertically align text-based elements using the line-height property, which specifies the amount of vertical space between lines of text. This is ideal for vertically aligning headings and other text-based elements. Simply match the line-height with the height of the element.

h1 {
font-size: 3em;
height: 100px;
line-height: 100px;
}

h1 {
font-size: 3em;
height: 100px;
line-height: 100px;
}

To vertically align non-textual elements, use absolute positioning.
The trick with this technique is that you must specify the exact height and width of the centered element.
With the position: absolute property, an element is positioned according to its base position (0,0: the top-left corner). In the image below, the red point indicates the 0,0 base of the element, before a negative margin is applied.
By applying negative top and left margins, we can now perfectly align this element both vertically and horizontally.

Here is the complete CSS for horizontal and vertical alignment:

.vertical {
width: 600px; /*--Specify Width--*/
height: 300px; /*--Specify Height--*/
position: absolute; /*--Set positioning to absolute--*/
top: 50%; /*--Set top coordinate to 50%--*/
left: 50%; /*--Set left coordinate to 50%--*/
margin: -150px 0 0 -300px; /*--Set negative top/left margin--*/
}

.vertical {
width: 600px; /*--Specify Width--*/
height: 300px; /*--Specify Height--*/
position: absolute; /*--Set positioning to absolute--*/
top: 50%; /*--Set top coordinate to 50%--*/
left: 50%; /*--Set left coordinate to 50%--*/
margin: -150px 0 0 -300px; /*--Set negative top/left margin--*/
}

Related articles:

4. Ordered vs. Unordered Lists

An ordered list, , is a list whose items are marked with numbers. An unordered list, , is a list whose items are marked with bullets. By default, both of these list item styles are plain and simple. But with the help of CSS, you can easily customize them. To keep the code semantic, lists should be used only for content that is itemized in a list-like fashion. But they can be extended to create multiple columns and navigation menus.

Customizing Unordered Lists

ul.product_checklist {
list-style: none; /*--Takes out the default bullets--*/
margin: 0;
padding: 0;
}
ul.product_checklist li {
padding: 5px 5px 5px 25px; /*--Adds padding around each item--*/
margin: 0;
background: url(icon_checklist.gif) no-repeat left center; /*--Adds a bullet icon as a background image--*/
}

ul.product_checklist {
list-style: none; /*--Takes out the default bullets--*/
margin: 0;
padding: 0;
}
ul.product_checklist li {
padding: 5px 5px 5px 25px; /*--Adds padding around each item--*/
margin: 0;
background: url(icon_checklist.gif) no-repeat left center; /*--Adds a bullet icon as a background image--*/
}

Resources for list items:

Using Unordered Lists for Navigation

Most CSS-based navigation menus are now built as lists. Here is a breakdown of how to turn an ordinary list into a horizontal navigation menu. HTML: begin with a simple unordered list, with links for each list item.

Home

Services

Portfolio

About

Contact

CSS: we remove the default bullets (as we did when we made custom bullets) by specifying list-style: none. Then, we float each list item to the left so that the navigation menu appears horizontal, flowing from left to right.

ul#topnav {
list-style: none;
float: left;
width: 960px;
margin: 0; padding: 0;
background: #f0f0f0;
border: 1px solid #ddd;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #ddd;
}
ul#topnav li a {
float: left;
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
ul#topnav li a:hover {
background: #fff;
}

Additional resources:

5. Styling Headings

The heading HTML tag is important for SEO. But regular headings can look dull. Why not spice them up with CSS and enjoy the best of both worlds?

Once you have the main styling properties set for your headings, you can now nest inline elements to target specific text for extra styling.

Your HTML would look like this:

1>CSS Back to Basics <small>Tips, Tricks, & Practical Uses of CSSsmall>1>

CSS Back to Basics Tips, Tricks, & Practical Uses of CSS

And your CSS would look like this:

h1 {
font: normal 5.2em Georgia, "Times New Roman", Times, serif;
margin: 0 0 20px;
padding: 10px 0;
font-weight: normal;
text-align: center;
text-shadow: 1px 1px 1px #ccc; /*--Not supported by IE--*/
}
h1 span {
color: #cc0000;
font-weight: bold;
}
h1 small {
font-size: 0.35em;
text-transform: uppercase;
color: #999;
font-family: Arial, Helvetica, sans-serif;
text-shadow: none;
display: block; /*--Keeps the small tag on its own line--*/
}

h1 {
font: normal 5.2em Georgia, "Times New Roman", Times, serif;
margin: 0 0 20px;
padding: 10px 0;
font-weight: normal;
text-align: center;
text-shadow: 1px 1px 1px #ccc; /*--Not supported by IE--*/
}
h1 span {
color: #cc0000;
font-weight: bold;

}
h1 small {
font-size: 0.35em;
text-transform: uppercase;
color: #999;
font-family: Arial, Helvetica, sans-serif;
text-shadow: none;
display: block; /*--Keeps the small tag on its own line--*/
}

Additional typography-related resources:

6. Overflow

The overflow property can be used in various ways and is one of the most useful properties in the CSS arsenal.

What Is Overflow?

According to W3Schools.com, “the overflow property specifies what happens if content overflows an element’s box.”

Take a look at the following examples to see how this works.

Visually, overflow: auto looks like an iframe but is much more useful and SEO-friendly. It automatically adds a scroll bar (horizontal, vertical or both) when the content within an element exceeds the element’s box or boundary.

The overflow: scroll property works the same but forces a scroll bar to appear regardless of whether or not the content exceeds the element’s boundary.

And the overflow: hidden property masks or hides an element’s content if it exceeds the element’s boundary.

Quick tip: have you ever had a parent element that did not fully wrap around its child element? You can fix this by making the parent container a floated element.

In some cases, though, floating left or right is not a workable solution — for example, if you want to center-align the container or do not want to specify an exact width. In this case, use overflow: hidden on your parent container to completely wrap any floated child elements within it.

Additional resources:

7. Position

Positioning (relative, absolute and fixed) is one of the most powerful properties in CSS. It allows you to position an element using exact coordinates, giving you the freedom and creativity to design out of the box.

You have to do three basic things when using positioning:

Set the coordinates (i.e. define the positioning of the x and y coordinates).
Choose the right value for the situation: relative, absolute, fixed or static.
Set a value for the z-index property: to layer elements (optional).

With position: relative, an element is placed in its natural position. For example, if a relatively positioned element sits to the left of an image, setting the top and left coordinates to 10px would move the element just 10 pixels from the top and 10 pixels from the left of that exact spot.

Relative positioning is also commonly used to define the new point of origin (the x and y coordinates) of absolutely positioned nested elements. By default, the base position of every element is the top-left corner (0,0) of the browser’s view port. When you give an element relative positioning, then the base position of any child elements with absolute positioning will be positioned relative to their parent element — i.e. 0,0 is now the top-left corner of the parent element, not the browser’s view port.

An element with a value of position: absolute can be placed anywhere using x and y coordinates. By default, its base position (0,0) is the top-left corner of the browser’s view port. It ignores all natural flow rules and is not affected by surrounding elements.

The base position of an element with a position: fixed value is also the top-left corner of the browser’s view port. The difference with fixed positioning is that the element will be fixed to its location and remain in view even when the user scrolls up or down.

The z-index property specifies the stack order of an element. The higher the value, the higher the element will appear.

Think of z-index stacking as layering. Check out the image below for an example:

Additional resources:

Adding Flavor With CSS

Now that you understand the basics, step up your game by adding a bit of flavor to your CSS. Below are some common techniques for enhancing and polishing your layout and images. We’ll also challenge you to create your own website from scratch using pure CSS.

9. Background Images

Background images come in handy for many visual effects. Whether you add a repeating background image to cover a large area or add stylish icons to your navigation, the property makes your page come to life.

Note, though, that the default print setting excludes the background property. When creating printable pages, be mindful of which elements have background images and include image tags.

Using Large Backgrounds

With monitor sizes getting bigger and bigger, large background images for websites have become quite popular.

Check out this detailed tutorial by Nick La of WebDesigner Wall on how to achieve this effect:

Also be sure to read the article on Webdesigner Depot about the “Do’s and Don’ts of Large Website Backgrounds.”

Text Replacement

You may be aware that not all standard browsers yet support custom fonts embedded on a website. But you can replace text with an image in various ways. One rather simple technique is to use the text-indent property.

Most commonly seen with headings, this technique replaces structured HTML text with an image.

view plain copy to clipboard print ?

h1 {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
}

h1 {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
}

You may sometimes need to specify a width and height (as well as display: block if the element is inline).

.replacethis {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
width: 100%;
height: 60px;
display: block; /*--Needed only for inline elements--*/
}

.replacethis {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
width: 100%;
height: 60px;
display: block; /*--Needed only for inline elements--*/
}

Articles on text replacement:

CSS Sprites

CSS Sprites is a technique in which you use background positioning to show only a small area of a larger single background image (the larger image being actually multiple images laid out in a grid and merged into one file).

CSS Sprites are commonly used with icons and the hover and active states of images that have replaced links and navigation items.

Why use CSS Sprites? CSS Sprites save loading time and cut down on CSS and and HTTP requests. To learn more about CSS Sprites, check out the resources below!

Articles on CSS Sprites:

10. Image Enhancement

You can style images with CSS in various ways, and some designers have made a lot of effort to create very stylish image templates.

One simple trick is the double-border technique, which does not require any additional images and is pure CSS.

Your HTML would look like this:

"double_border" src="sample.jpg" alt="" />

And your CSS would look like this:

img.double_border {
border: 1px solid #bbb;
padding: 5px; /*Inner border size*/
background: #ddd; /*Inner border color*/
}

img.double_border {
border: 1px solid #bbb;
padding: 5px; /*Inner border size*/
background: #ddd; /*Inner border color*/
}

Nick La of WebDesigner Wall has a great tutorial on clever tricks to enhance your images. Do check it out!

11 Classic CSS Techniques Made Simple with CSS3

2009-09-10T04:45:00.000-07:00

CSS3? What's that?!
I'm sure you've heard of CSS in general. CSS3 isn't that much different, in terms of syntax; however, the power of CSS3 is much greater. As you'll see in these eleven techniques, you can have multiple backgrounds, dynamically resize those backgrounds, border radiuses, text shadows, and more!
Here's what the official (or at least, what I consider official) website of CSS3, css3.info, has to say about CSS3:
CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more.
What We'll Be Covering
Here are the 11 techniques that I'll be showing you how to recreate with CSS3. I'll show you how to create them using CSS2 (or JavaScript), and then with CSS3 properties. Remember - these effects will only work in modern browsers that implement these CSS3 features. Your best option is to view these with Safari 4.
Rounded Corners
Box Shadow
Text Shadow
Fancy Font
Opacity
RGBA
Background Size
Multiple Backgrounds
Columns
Border Image
Animations