Your Open Source

HTML & CSS

Marquee

The marquee tag allows you to scroll some text of your choice across the screen, and it doesn't need a Javascript to make it work. The only problem with using it is that the marquee tag only works in Internet Explore and Firefox. Netscape will just show the text you wanted to scroll as plain text on the screen. Test

Curve or Round box in HTML without image

You can create a curve or Round box in HTML code without using curve images. The following code used to create a curve box.

How to use CSS Positioning

simple example for CSS positioning In the following example contains two classes. one is test and another one is Relative : position an element relative to its normal position. Absolute: Position an element using an absolute value Fixed : position an element with relative to the browser window. .test1{ position:relative; } .test2{ posit..

HTML Redirection with meta tags

HTML Redirection with meta tags We can redirect the page through HTML tags in the above example the content is used to specify seconds to and the URL is used for target location.

Change down arrow style in SELECT tag and Sourcecode downloads

how to change down arrow in SELECT tag :- You can change the dropdown down arrow through CSS & JS. its possible to change the dropdown box as you like. Please click the downloads link to get the source for this.

CSS IMAGES EFFECTS

hi CSS IMAGE EFFECTS please post the commnets related links http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html#

How to add the your rss feed in Yahoo

Add the your rss feed in Yahoo :- The following to you can add the feed in YAHOO. Add to My Yahoo Output : Add to My Yahoo

Include the style sheet in different ways in html

include the style sheet in different ways --------------------------------------- 1) 2) @import "damu/css/info.css"; @import "damu/css/main.css"; @import "damu/css/daj.css";

How to refresh the page in the same page

to refresh the page in the same page Step 1. Click to refresh the page setep2:

World Currency Symbol in XML

Currency Symbol in XML Speical Charactor HTML XML £ (Pound ) &pound £ € (Euro) € € $ (Dollar) $ $ ¥ (Yen) ¥ &#x00A5 ௹ (Tamil Rupees) ௹ ௹ ₨ ( Rupees) ₨ &#..

Background transparency using RGBA in CSS

Normal transparency code as below in css .transbox { width: 400px; height: 180px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; } Using rgba in CSS to background transparency .transbox{ background-color: rgba(204,204,255,0..

How to do the Flash hidden under DIV ?

Some Javascript menu displayed under flash, if you use wmode="transperent" to resolve the issue, The example code as follows,

Minimum height and width in CSS

you need to expanding height and width if have a content under div element also need to displayed the minimum height and width in the div area. The CSS as follows, .expandDiv{ min-height:200px; } Note :- if use the .expandDiv, the element minimum height is 200 pixels and much more.

Round curve image box like facebook

The HTML and CSS used to create a round box with SPAN tags. The example code as given below, and live demo and downloads also available here, Enjoy!!! In CSS code, .RNDClear{display:block;overflow:hidden;position:relative; width:2px;height:50px;float:left;} .RNDLayout{display:block;background-color:#C4CDE0;overflow:hidden;position:relative..

The basic Structure of CSS

The basic Structure of CSS Now let us have a quick look at a sample CSS rule to refresh our memory on the different parts of CSS and what they are called: _____________Selector | _________ Property | | ____ Value | | | H1 { color: red } |________| Declaration A CSS rule will often de..

HTML group radio button

How to set the GROUP for radio option button in HTML The radio button name is a group of radio buttons the field belongs to. for example:- A1A2A3 B1B2B3 Output is:- A1A2A3 B1B2B3

CSS Font Shortcut

A CSS shortcut that will save you a lot of time coding: Instead of doing this: font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: small-caps; font-family: verdana,serif; do this: font: 1em/1.5em bold italic small-caps verdana,serif Note: Specify both the font-size and the font-family. If you were unab..

Create 3D Button

Who said that only JavaScript can create 3D effects? Well, that were the old days. Today, we can create 3D buttons using CSS in an easier way using this code: a { display: block; border: 1px solid; border-color: #aaa #000 #000 #aaa; width: 8em; background: #fc0; } a:hover { position: relative; top: 1px; left: 1px; border-color: #000 #aaa #..

Cool Photo Gallery Using CSS

Here's a cool css photo effect. It shows an accordion effect; once you hover over an image it expands to full size. CSS: #gallery { padding:0; margin:0; list-style-type:none; overflow:hidden; width:320px; height:425px; border:1px solid #888; background:#fff url(windows/win_back.gif); } #gallery li { float:left; ..

Create Pushbuttons With CSS, No Images Required

Make your website more attractive by adding push buttons to your links without using images. Here's the short CSS Code: ul.cpl a { width : 200px; height : auto; display : block; border : 2px outset #669900; text-decoration : none; background-color : #669900; color : #eee; font-weight : bold; padding : 3px 10px; outline :..

CSS Cheat Sheet

Here's a CSS Cheat Sheet made by Pete Freit that you may find handy specially when you're running out of time: CSS Cheat Sheet Text Color color: green; Set Background Color background-color: black; Repeat Background Image Horizontally background: white url("/images/bk.gif") repeat-x; Repeat Background Image Vertically background: whit..

Add Badge To Your Site Using CSS

Design your website by creating and adding badge or inline buttons. Examples The (X)HTML code: Some Link The CSS code: .inline-button { _width:12em; font: bold 65%/1 Verdana, sans-serif; margin: 0 0.2em; padding: 0.1em 0; _padding:0; border: 1px solid black; white-space:nowrap; text-decoration: none; vertical-align:mid..

Simple RSS Feed Button, No Image Required

Make a simple orange XML or RSS buttons without using an image with CSS. Here's the really simple codes: CSS: .feed { border:1px solid;border-color:#FC9 #630 #330 #F96;padding:0 3px;font:bold 10px verdana,sans-serif;color:#FFF;background:#F60;text-decoration:none;margin:4px; } HTML: FEED

Create Rounded Corners

Pointed corners are things of the past although some still use it for formality. With CSS in hand, you are free to do whatever you want with your web page. Here's the code that will round your pointed corners: .rtop, .rbottom{display:block} .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden} .r1{margin: 0 5px}..

Create Rounded Corners With Images

Here's another rounded corners creator, this time using images: CONTENT .roundcont { width: 250px; background-color: #f90; color: #fff; } .roundcont p { margin: 0 10px; } .roundtop { background: url(tr.gif) no-repeat top right; } .roundbottom { background: url(br.gif) no-repeat top right; } img.corner { width: 15px; height:..

Try This CSS Gradient Text Effect

Try this code and watch what will happen to your text: CSS Gradient Text h1 { font: bold 330%/100% "Lucida Grande"; position: relative; color: #464646; } h1 span { background: url(gradient.png) repeat-x; position: absolute; display: block; width: 100%; height: 31px; }

Iframe border

IFrame border IE/Firefox/Safari/Opera Here can set the iframe border is none for all browser, the following code will support all browsers. Code:- Output :-

Css curved corners

CSS Curve Corners This code will work in all the latest browsers (FireFox, Opera,Netscape ) the CSS and HTML code as follows,<style type="text/css">.curvebox { margin: 10px; background: #666666; color:#FFFFFF; border: 1px solid #CCCCCC; -moz-border-radius: 10px; }.innerCurve{ background: #FFFFFF; color:#000000; border: 1px solid #0066..