Monday, May 31, 2010

Rounded Corners Without Images

CSS
 
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#rou{ margin: 0 10%;background: #9BD1FA}

HTML
<div id="nifty">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<h1>Rounded Corners</h1>
<p>Rounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without images</p>

<h2>Rounded corners without images</h2>
<p>Rounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without images</p>
<p>Rounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without images</p>
<p>Rounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without imagesRounded corners without images</p>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>

Source : www.html.it

Sunday, May 30, 2010

Flip an Image Throuch CSS

You can flip images with CSS! Possible scenario: having only one graphic for an “arrow”, but flipping it around to point in different directions.

img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

Wednesday, May 26, 2010

Simple and Nice Blockquote Styling

The blockquote displays in standards-compliant browsers with the “big quotes before” effect, and in IE with a thick left border and a light grey background.
Unlike other blockquote techniques, this style does not require a nested block-level element (like p). As such, it turns a paragraph into an inline-styled element to keep the content from dropping below the quote.

blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
color:#f00;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}

blockquote:after {
color:#f00;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.5em;
}

blockquote p {
display:inline;
}

Example

How to size text using ems

Update: My more recent article on A List Apart, How to Size Text in CSS, provides more up-to-date info on sizing text using ems.

Text for the screen is sized with CSS in terms of pixels, ems or keywords. As most of us know, sizing with pixels is easy: get your selector and give it a font-size – no more thought required. Sizing with keywords is more complicated and requires a few workarounds, but you’re in luck as the techniques are well documented. That leaves ems. At this point people often leg it. ‘Ems are too inconsistent,’ they say, ‘they’re too hard; they never work.’ Well that may be the received wisdom, but if ever the was a case of FUD then this is it. I will now attempt to show you how ems can be as quick and easy to use as pixels.

Why ems?

If the world were an ideal place, we’d all use pixels. But it’s not, we have the broken browser to contend with. IE/Win will not allow readers to resize text that has been sized in pixels. Like it or not, your readers will want to resize text at some point. Perhaps they are short-sighted, doing a presentation, using a ridiculously high resolution laptop or simply have tired eyes. So unless you know (not think) your audience won’t be using IE/Win or will never wish to resize their text then pixels are not yet a viable solution.

Keyword-based text sizing will allow all browsers to resize text so this is a possibility, but I don’t find it gives me the precision that pixels would give me. Using ems however, allows all browsers to resize text and also provides pixel-level precision and so they tend to be my unit of choice.

Get on with it


OK let’s dive into ems. I’ll show you, from scratch, how to size text in a document using ems. I’ll assume throughout that we are dealing with a browser set to ‘medium’ text. The default size for ‘medium’ text in all modern browsers is 16px. Our first step is to reduce this size for the entire document by setting body size to 62.5%:

BODY {font-size:62.5%}

This takes 16px down to 10px which I’m using purely because it’s a nice round number for example purposes – 10px text is too small for the real world. From now on it’s easy to think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc. If you are laying out your document using CSS (which you are, right?) then you have probably used a few divs to group together elements. Apply text-size to these divs and your job is almost done. Consider a two column layout with header and footer:

<body>
<div id="navigation"> ... </div>
<div id="main_content"> ... </div>
<div id="side_bar"> ... </div>
<div id="footer"> ... </div>
</body>

#navigation {font-size:1em}
#main_content {font-size:1.2em}
#side_bar {font-size:1em}
#footer {font-size:0.9em}

So this would give us a document where text in the navigation and side bar is displayed at 10px, the main content is 12px and the footer is 9px. There now remains a few anomalies to sort out (you’d have to do this even if you were sizing in pixels). In Mozilla-based browsers, all heading elements in our aforementioned #main_content div will be displayed at 12px whether they are an H1 or an H6, whereas other browsers show the headings at different sizes as expected. Applying text-sizes to all headings will give consistency across browsers, for example:

H1 {font-size:2em} /* displayed at 24px */
H2 {font-size:1.5em} /* displayed at 18px */
H3 {font-size:1.25em} /* displayed at 15px */
H4 {font-size:1em} /* displayed at 12px */

A similar job needs to be done on forms and tables to force form controls and table cells to inherit the correct size (mainly to cater for IE/Win):

INPUT, SELECT, TH, TD {font-size:1em}

And so to the final tweak and the bit folks seem to find most tricky: dealing with nested elements. We’ve already touched upon it with our headers, but for now let’s look more closely at what’s going on. First of all we changed our body text to 10px; 62.5% of its default size:

16 x 0.625 = 10

Then we said our main content should be displayed at 12px. If we did nothing, the #main_content div would be displayed at 10px because it would inherit its size from the body element – its parent. This implies that we always size text relative to the parent element when using ems:

child pixels / parent pixels = child ems
12 / 10 = 1.2

Next we wanted our h1 heading to be 24px. The parent to our h1 is the main_content div which we know to be 12px in size. To get our headings to be 24px we need to double that so our ems are:

24 / 12 = 2

And so it goes on. Tricky stuff occurs where rules like this are applied:

#main_content LI {font-size:0.8333em}

This rule implies that all main content list items should be displayed at 10px. We use the same straight forward maths to achieve this:

10 / 12 = 0.8333

But what happens when one list contains another? It gets smaller. Why? Because our rule actually says that any list item in the #main_content div should 0.8333 times the size of its parent. So we need another rule to prevent this ‘inherited shrinkage’:

LI LI {font-size:1em}

This says that any list item inside another list item should be the same size as its parent (the other list item). I normally use a whole set of child selectors to prevent confusion during development:

LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}

And that’s it. When sizing text in ems there’s really one rule to remember: size text relative to its parent and use this simple calculation to do so:

child pixels / parent pixels = child ems

Em calculator : http://riddle.pl/emcalc/

Tuesday, May 25, 2010

CSS display Property

none
The element will generate no box at all

block
The element will generate a block box (a line break before and after the element)

inline
The element will generate an inline box (no line break before or after the element). This is default

inline-block
The element will generate a block box, laid out as an inline box

inline-table
The element will generate an inline box (like <table>, with no line break before or after)

list-item
The element will generate a block box, and an inline box for the list marker

run-in
The element will generate a block or inline box, depending on context

table
The element will behave like a table (like <table>, with a line break before and after)

table-caption
The element will behave like a table caption (like <caption>)

table-cell
The element will behave like a table cell

table-column
The element will behave like a table column

table-column-group
The element will behave like a table column group (like <colgroup>)

table-footer-group
The element will behave like a table footer row group

table-header-group
The element will behave like a table header row group

table-row
The element will behave like a table row

table-row-group
The element will behave like a table row group

inherit
Specifies that the value of the display property should be inherited from the parent element

Sunday, May 23, 2010

Visibility vs Display in CSS

You have an element in your html that you want to temporarily hide. should you change it’s visibility to hidden or its display to none? Is there any difference? How will the rest of the page respond to your element that’s sometimes seen and sometimes not?

The css properties visibility and display may seem to do the same thing on the surface, but they are very different and often confuse those new to web development. I thought a quick walkthrough of the main values associated with each property along with a demo of each in action would help remove that confusion.


Visibility and Display Properties in Action


Here’s a simple demo of visibility and display in action that will open in a new window. Click the two links at the top to toggle the visibility and the display to see how each affects the other elements on the page. I’ll explain what’s going on with each property below.

How the CSS Visibility Property Works

The visibility property has four values associated with it, but let’s focus on the two used most often, visible and hidden.

From W3Schools

visibility: visible
The element is visible. This is default
visibility: hidden
The element is invisible (but still takes up space)

Both values are rather straightforward and behave exactly as you think. You see elements that are visible and don’t see elements that are hidden. That important point to note is that when hidden the element still takes up space.

How the CSS Display Property Works

The display property has quite a few values associated with it, but again let’s focus on a smaller subset. The two values that concern us here are block and none, but I want to quickly mention the inline value too.

Again from W3Schools

display: none
The element will generate no box at all
display: block
The element will generate a block box
(a line break before and after the element)
display: inline
The element will generate an inline box
(no line break before or after the element)

On the surface display: none might seem to be the same is visibility: hidden, but it isn’t. The big difference is in that point I called out above.

visibility: hidden – the element stays in the normal document flow

display: none – the element is removed from normal document flow so surrounding html elements collapse to close the space

Elements set to display as block or inline both fill a space. The difference being that block elements have line breaks around them and inline elements don’t. Some elements are block elements by default and some are inline elements.


When Should You Use Visibility and When Should You Use Display?


While both can be used to “hide” an element each does so in a different way. Again that difference is in how each responds to the normal document flow.

You want to use visibility when you want the element to hold its space even when it’s not seen. You want to use display when you want the element to give back its space allowing the other elements on your page to collapse around it.

In practice I tend to use display more than visibility. Usually when you want an element not to show you don’t want to leave an empty space in its place. You do need to understand that other html elements will move to fill the now unoccupied space and develop your layout accordingly.

SEO Effects of Visibility and Display

A sometimes used spam tactic is to stuff keywords on a page and make them invisible in some way. Often this is done not through either of the css properties above, but rather by giving the text the same color as the background it sits on or making the font so small as to render it invisible.

Because these tactics are frowned up by search engines, some people worry about using either the visibility or the display property to “hide” html.

There are many good reasons why you want some elements in your design to sometimes be seen and sometimes not be seen and search engines understand that. As long as you aren’t trying to trick search engines in any way you shouldn’t encounter any problems using either visibility or block to show and hide an element.

Source : http://www.vanseodesign.com/

Saturday, May 22, 2010

CSS Transparency Settings for All Browsers

Transparency is one of those weird things that is treated completely differently in all browsers. To cover all your bases, you need four separate CSS statements. Fortunately they don’t interfere with each other really, so using them all every time you wish to add transparency is no big hassle and worry-free. Here they are, and are currently set to 50% transparency:

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

UPDATE: I wanted to pull this post out of the archives and update it a bit because it there seems to be a good amount of interest in this subject.

Here is what each of those CSS properties is for:

* opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.

* filter:alpha(opacity=50); This one you need for IE.

* -moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.

* -khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit.

Thursday, May 20, 2010

How to Use CSS Display Properties for Grid Layouts

The CSS display property allows you to set up rules for display that make your content display as a grid or as if it were a table, when in fact the material is not a table. Using CSS to create a grid layout gives you control over the layout without putting any table tags into the HTML. The display properties that relate to a table-like appearance, including each possible property and value, will be described in this article.

display:table
Makes the element act like a table element. If you nest rows or columns of grids within this element, you should use one or more of the properties described next.

display:table-row
Makes the element act like a table row element. It is possible to use display:table-row effectively without having it nested in an element set to display:table. This is because the browser assumes the existence of an "anonymous" table element and behaves as if it were there. (See Tips below for more about "anonymous" elements.) Remember, you aren't creating an actual table of tabular data; you are merely creating a grid-like display.

display:table-cell
Makes the element act like a table cell element. It is possible to use display:table-cell effectively without having the element nested in an element set to display:table-row or display:table.

display:table-row-group
Makes the element act like a table row group element. Use it for an element that groups one or more rows. It's the CSS way of expressing what tbody does in HTML.

display:table-header-group
Makes the element act like a table header row group element. It's the CSS way of expressing what thead does in HTML. With CSS, the table-header-group is always displayed before all other rows and rowgroups and after any top captions.

display:table-footer-group
Makes the element act like a table footer row group element. With CSS, the table-footer-group does what tfoot does in HTML. The table-footer-group is always displayed after all other rows and rowgroups and before any bottom captions. Printers may repeat footer rows on each page spanned by a table.

display:table-caption
Makes the element act like a table caption element.

display:table-column
Makes the element act like a table column element. It's the CSS way of expressing what col does in HTML.

display:table-column-group
Makes the element act like a table column group. Use it to group one or more columns. It's the CSS way of expressing what colgroup does in HTML.

Wednesday, May 19, 2010

CSS Clear Property

The clear property is as important when building a website based on float. The float property could be described as ignoring the line breaks, this does not only mean that the floating elements may be placed beside each other, but also that the web browser can't know where your elements end if you don't set a specific height; which is seldom an optimal solution. So how do we solve this?

The clear property

The clear property could be described as telling the web browser where your floating elements end by "clearing the row". For example, if you put two images inside a layer without specifying the layer height; the layer would normally adjust to the images, but not if the images are floating.

Code below.

CSS

.first_div { background-color: #8BC792; padding: 20px; }
.float_left { float: left; }

XHTML

<div class='first_div'>
<img class='float_left' src='flower.jpg' alt='' />
<img class='float_left' src='icetap.jpg' alt='' />
</div>

Demo: Div containing two floating images.

As you can see the layer don't recognizes the images height because they are floating. The only visible part of the layer is caused by padding specified in the CSS class applied to the layer.

How are we going to fix this problem? As you might have guessed; we will apply the float property by adding a div with the CSS property applied to it beneath the images. As you can float elements to the left or to the right, you can also clear the row to the left or to the right but you are also able to clear both. I prefer to always use both to avoid confusion.

<div style='clear: both;'> </div< /* left, right or both */

With this placed in the right place; the browser will recognize the height of the floating elements, in this case two images.

example code below.

CSS

.first_div { background-color: #8BC792; padding: 20px; }

.float_left { float: left; }

.clear { clear: both; }

XHTML

<div class='first_div'>
<img class='float_left' src='flower.jpg' alt='' />
<img class='float_left' src='icetap.jpg' alt='' />
<div class='clear'></div> /* A div with the CSS class applied to it */
</div>

Demo: Div containing two floating images with "clear".

As you can see the layer now recognize the height of the images which makes you able to place other elements beneath it.

Another use for float on images is also to replace the html align='left/right' attribute which isn't valid in either XHTML 1.0 Strict or XHTML 1.1. Simple float the image instead of aligning it.

Source from : dashdev

What is a float ?

CSS Float

Floating is often used to push an image to left or right, while having the text of a paragraph wrap around it.

Float Image

Wrapping text around an image is easy when using the CSS Float attribute. You have a choice to either float the picture to the left or to the right and the rest is done for you. Below is an example of an image that is floated to different sides of a paragraph.

CSS Code:

img.floatLeft { float: left; margin: 4px; }
img.floatRight { float: right; margin: 4px; }

html Code:

<body>
<img src="sunset.gif" class="floatLeft">
<p>The images are contained with...</p>

<img src="sunset.gif" class="floatRight">
<p>This second paragraph has an...</p>
</body>




Floating Multiple Images

If you were to simply float three images to the right, they would appear alongside one another. If you wish to have the next image start below the end of the previous image, then use the CSS Clear attribute.

CSS Code:

img.floatRightClear {float: right; clear: right; margin: 4px; }

html Code:
<body>
<img src="sunset.gif" class="floatRightClear">
<img src="sunset.gif" class="floatRightClear">
<p>The images are appearing...</p>
<p>If we had specified...</p>
<p>The number of paragraphs...</p>
</body>

Meaning of the !important in CSS

Cascading Style Sheets cascade. This means that the styles are applied in order as they are read by the browser. The first style is applied and then the second and so on. What this means is that if a style appears at the top of a style sheet and then is changed lower down in the document, the second instance of that style will be the one applied, not the first. For example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red:

p { color: #ff0000; }
p { color: #000000; }

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example, you would write:

p { color: #ff0000 !important; }
p { color: #000000; }

Monday, May 17, 2010

Valid Embedding Flash OBJECT Tag

This code is different than flash provides and it is fully valid XHTML

<object type="application/x-shockwave-flash" data="file-name.swf" width="0" height="0">
<param name="movie" value="file-name.swf" />
<param name="quality" value="high"/>
</object>

CSS BOX WITH SHADOW EFFECT

Shadow effect without creating any image through CSS

.text{
width:500px; height:100px; Line-height:100px; font-family:"Trebuchet MS", Verdana, Arial; font-size:1.1em; text-transform:uppercase; color:#fff; text-align:center; font-weight:bold;
}

.shadow {
background-color:#000; box-shadow: 5px 5px 5px #ccc; -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc;
}

.inshadow {
width:500px; height:100px; background-color:#f00; box-shadow:inset 0 0 10px #000000; -moz-box-shadow:inset 0 0 10px #000000; -webkit-box-shadow:inset 0 0 10px #000000;
}

<div class="shadow text">Shadow Outside</div>
<br />
<div class="inshadow text">Shadow Inside</div>

Rotate Text Using CSS