#element {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}Saturday, 31 January 2015
How to give in CSS Font Border? OR How to give color to text border?
Friday, 23 January 2015
Absolute, Relative, Fixed Positioning: How Do They Differ?
- Static. This is the default for every single page element. Different elements don't have different default values for positioning, they all start out as static. Static doesn't mean much, it just means that the element will flow into the page as it normally would. The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control. This is fairly rare, as positioning doesn't cascade.
- Relative. This type of positioning is probably the most confusing and misused. What it really means is "relative to itself". If you set
position: relative;on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say,top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be. I'm sure you can imagine, the ability to shift an element around based on it's regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to. There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn't really work with statically positioned elements. Even if you don't set a z-index value, this element will now appear on top of any other statically positioned element. You can't fight it by setting a higher z-index value on a statically positioned element. The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block. This brings up some powerful opportunities
- Absolute. This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relatively to the page itself. The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. It's overuse or improper use can limit the flexibility of your site.
- Fixed. This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled, creating an effect a bit like the old school "frames" days. Take a look where the left sidebar is fixed. This site is a perfect example for since it exhibits both good and bad traits of fixed positioning. The good is that it keeps the navigation present at all times on the page and it creates and interested effect on the page. The bad is that there are some usability concerns. On my smallish laptop, the content in the sidebar is cut off and there is no way from me to scroll down to see the rest of that content. Also if I scroll all the way down to the footer, it overlaps the footer content not allowing me to see all of that. Cool effect, can be useful, but needs to be thoroughly tested.
Wednesday, 7 January 2015
How to make simple responsive slider in html....
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src=".jpg" alt="rose" width="460" height="345">
</div>
<div class="item">
<img src=".jpg" alt="lily" width="460" height="345">
</div>
<div class="item">
<img src=".jpg" alt="lotus" width="460" height="345">
</div>
<div class="item">
<img src=".jpg" alt="jasmine" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Friday, 26 December 2014
How do I change the color or text in an anchor tag by targeting the class within the anchor tag?
<a href="http://http://sheetalraina.com/" id= "test">Home ><style type="text/css">
#test {
color: red;
}
#test:hover{
color:blue;
}
</style></a>
#test {
color: red;
}
#test:hover{
color:blue;
}
</style></a>
Wednesday, 8 October 2014
html tutorial
| <a> | ANCHOR tag creates <a href=" ">link</a> to other internet location, or file. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <abbr> | ABBREVIATION tags indicate interpretation of the meaning to the browsers and search engines for such as kind of abbreviations as "Inc.", "etc.". | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <acronym> | ACRONYM tags defines an acronym, like; <acronym title="World Wide Web">WWW</acronym>. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <address> | ADDRESS tags are used to identify the author's contact information for a section or a document. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <applet> | APPLET element tags are used to embed and invoke a Java application within an HTML page. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <area> | AREA tag defines a section of an image. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <b> | BOLD tag is specifying <b>bold section</b> within the text document. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <base> | BASE tag defines information regarding to the links on the page. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <basefont> | BASEFONT tags defines changes of all text appearance on the web page. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <bdo> | BDO tag is specifying the direction of text display by overwriting the default value from Left to Right. <bdo dir="rtl">Right to Left</bdo> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <bgsound> | BGSOUND tag is defining a background sound for a webpage. <html> <head> <bgsound src="JingleBells.wav" loop="3"> </head> <body> </body> </html> Demo • Example |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <big> | BIG tag makes the <big>text larger</big> then the rest of the text. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <blockquote> | BLOCKQUOTE tags <blockquote>separate a section</blockquote>of text from the surrounding text. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <blink> | BLINK tags defines text to <blink>blink</blink> repeatedly. Internet Explorer doesn't support this tag yet. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <body> | <html> <head> </head> <body> Body tags identify the content of a web page. </body> </html> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <br> | Line Break tag is specifying<br> a new line |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <button> | BUTTON tag is used to create a <button type="button">Push Button</button> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <caption> | <table> <caption>CAPTION tag adds a caption to a table.</caption> <tr> <td> </td> </tr> </table> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <center> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <cite> | <cite>CITE tags defines a citation and displaying in italics.</cite> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <code> | CODE tags are used for example, to indicate a code of the current <code>htmltags.html</code> page. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <col> | COL tags are used to define column properties for table columns. <table> <colgroup span="2"> <col width="60" align="left"></col> <col width="80" align="center"></col> </colgroup> <tr> <td>1st Column</td> <td>2nd Column</td> </tr> </table> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <colgroup> | COLGROUP tags are used to define groups of table columns. <table> <colgroup span="2"> <col width="60" align="left"></col> <col width="80" align="center"></col> </colgroup> <tr> <td>1st Column</td> <td>2nd Column</td> </tr> </table> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <dd> | DD tag defines a definition description. <dl> <dt>NASA</dt> <dd>National Aeronautics and Space Administration</dd> <dt>MBA</dt> <dd>Master of Business Administration</dd> </dl> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <dfn> | DFN tags emphasize definition, for example; <dfn>PC</dfn>: Personal Computer. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <del> | DEL tag indicates <del> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <dir> | DIR tags define directory lists. <dir> <li>First</li> <li>Second</li> <li>Third</li> </dir> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <dl> | DL tag defines a definition list. <dl> <dt>CSU</dt> <dd>California State University</dd> <dt>UN</dt> <dd>United Nations</dd> </dl> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <div> | DIV tag is a logical section of a web document. <div> <h1>Home Pets</h1> <p>Cats</p> <p>Dogs</p> </div> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <dt> | DT tags defines a definition term. <dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl>'
|
Friday, 3 October 2014
Special symbols
| ‘ | ‘ | left single quote | |
| ’ | ’ | right single quote | |
| ‚ | ‚ | single low-9 quote | |
| “ | “ | left double quote | |
| ” | ” | right double quote | |
| „ | „ | double low-9 quote | |
| † | † | dagger | |
| ‡ | ‡ | double dagger | |
| ‰ | ‰ | per mill sign | |
| ‹ | ‹ | single left-pointing angle quote | |
| › | › | single right-pointing angle quote | |
| ♠ | ♠ | black spade suit | |
| ♣ | ♣ | black club suit | |
| ♥ | ♥ | black heart suit | |
| ♦ | ♦ | black diamond suit | |
| ‾ | ‾ | overline, = spacing overscore | |
| ← | ← | leftward arrow | |
| ↑ | ↑ | upward arrow | |
| → | → | rightward arrow | |
| ↓ | ↓ | downward arrow | |
| ™ | ™ | trademark sign | |
| Name Code | Number Code | Glyph | Description |
| �- | unused | ||
| 	 | horizontal tab | ||
| | line feed | ||
|  | unused | ||
|   | space | ||
| ! | ! | exclamation mark | |
| " | " | “ | double quotation mark |
| # | # | number sign | |
| $ | $ | dollar sign | |
| % | % | percent sign | |
| & | & | & | ampersand |
| ' | ‘ | apostrophe | |
| ( | ( | left parenthesis | |
| ) | ) | right parenthesis | |
| * | * | asterisk | |
| + | + | plus sign | |
| , | , | comma | |
| - | - | hyphen | |
| . | . | period | |
| Name Code | Number Code | Glyph | Description |
| ⁄ | / | / | slash |
| 0-9 | digits 0-9 | ||
| : | : | colon | |
| ; | ; | semicolon | |
| < | < | < | less-than sign |
| = | = | equals sign | |
| > | > | > | greater-than sign |
| ? | ? | question mark | |
| @ | @ | at sign | |
| A-Z | uppercase letters A-Z | ||
| [ | [ | left square bracket | |
| \ | \ | backslash | |
| ] | ] | right square bracket | |
| ] | ] | caret | |
| _ | _ | horizontal bar (underscore) | |
| ` | ` | grave accent | |
| a-z | lowercase letters a-z | ||
| { | { | left curly brace | |
| | | | | vertical bar | |
| Name Code | Number Code | Glyph | Description |
| } | } | right curly brace | |
| ~ | ~ | tilde | |
| -• | unused | ||
| – | – | – | en dash |
| — | — | — | em dash |
| ˜-Ÿ | unused | ||
| |   | nonbreaking space | |
| ¡ | ¡ | ¡ | inverted exclamation |
| ¢ | ¢ | ¢ | cent sign |
| £ | £ | £ | pound sterling |
| ¤ | ¤ | ¤ | general currency sign |
| ¥ | ¥ | ¥ | yen sign |
| ¦ or &brkbar; | ¦ | ¦ | broken vertical bar |
| § | § | § | section sign |
| ¨ or ¨ | ¨ | ¨ | umlaut |
| © | © | © | copyright |
| ª | ª | ª | feminine ordinal |
| « | « | « | left angle quote |
| ¬ | ¬ | ¬ | not sign |
| ­ | ­ | | soft hyphen |
| ® | ® | ® | registered trademark |
| ¯ or &hibar; | ¯ | ¯ | macron accent |
| Name Code | Number Code | Glyph | Description |
| ° | ° | ° | degree sign |
| ± | ± | ± | plus or minus |
| ² | ² | ² | superscript two |
| ³ | ³ | ³ | superscript three |
| ´ | ´ | ´ | acute accent |
| µ | µ | µ | micro sign |
| ¶ | ¶ | ¶ | paragraph sign |
| · | · | · | middle dot |
| ¸ | ¸ | ¸ | cedilla |
| ¹ | ¹ | ¹ | superscript one |
| º | º | º | masculine ordinal |
| » | » | » | right angle quote |
| ¼ | ¼ | ¼ | one-fourth |
| ½ | ½ | ½ | one-half |
| ¾ | ¾ | ¾ | three-fourths |
| ¿ | ¿ | ¿ | inverted question mark |
| À | À | À | uppercase A, grave accent |
| Á | Á | Á | uppercase A, acute accent |
| Â | Â | Â | uppercase A, circumflex accent |
| Name Code | Number Code | Glyph | Description |
| Ã | Ã | Ã | uppercase A, tilde |
| Ä | Ä | Ä | uppercase A, umlaut |
| Å | Å | Å | uppercase A, ring |
| Æ | Æ | Æ | uppercase AE |
| Ç | Ç | Ç | uppercase C, cedilla |
| È | È | È | uppercase E, grave accent |
| É | É | É | uppercase E, acute accent |
| Ê | Ê | Ê | uppercase E, circumflex accent |
| Ë | Ë | Ë | uppercase E, umlaut |
| Ì | Ì | Ì | uppercase I, grave accent |
| Í | Í | Í | uppercase I, acute accent |
| Î | Î | Î | uppercase I, circumflex accent |
| Ï | Ï | Ï | uppercase I, umlaut |
| Ð | Ð | Ð | uppercase Eth, Icelandic |
| Ñ | Ñ | Ñ | uppercase N, tilde |
| Ò | Ò | Ò | uppercase O, grave accent |
| Ó | Ó | Ó | uppercase O, acute accent |
| Ô | Ô | Ô | uppercase O, circumflex accent |
| Õ | Õ | Õ | uppercase O, tilde |
| Name Code | Number Code | Glyph | Description |
| Ö | Ö | Ö | uppercase O, umlaut |
| × | × | × | multiplication sign |
| Ø | Ø | Ø | uppercase O, slash |
| Ù | Ù | Ù | uppercase U, grave accent |
| Ú | Ú | Ú | uppercase U, acute accent |
| Û | Û | Û | uppercase U, circumflex accent |
| Ü | Ü | Ü | uppercase U, umlaut |
| Ý | Ý | Ý | uppercase Y, acute accent |
| Þ | Þ | Þ | uppercase THORN, Icelandic |
| ß | ß | ß | lowercase sharps, German |
| à | à | à | lowercase a, grave accent |
| á | á | á | lowercase a, acute accent |
| â | â | â | lowercase a, circumflex accent |
| ã | ã | ã | lowercase a, tilde |
| ä | ä | ä | lowercase a, umlaut |
| å | å | å | lowercase a, ring |
| æ | æ | æ | lowercase ae |
| ç | ç | ç | lowercase c, cedilla |
| è | è | è | lowercase e, grave accent |
| Name Code | Number Code | Glyph | Description |
| é | é | é | lowercase e, acute accent |
| ê | ê | ê | lowercase e, circumflex accent |
| ë | ë | ë | lowercase e, umlaut |
| ì | ì | ì | lowercase i, grave accent |
| í | í | í | lowercase i, acute accent |
| î | î | î | lowercase i, circumflex accent |
| ï | ï | ï | lowercase i, umlaut |
| ð | ð | ð | lowercase eth, Icelandic |
| ñ | ñ | ñ | lowercase n, tilde |
| ò | ò | ò | lowercase o, grave accent |
| ó | ó | ó | lowercase o, acute accent |
| ô | ô | ô | lowercase o, circumflex accent |
| õ | õ | õ | lowercase o, tilde |
| ö | ö | ö | lowercase o, umlaut |
| ÷ | ÷ | ÷ | division sign |
| ø | ø | ø | lowercase o, slash |
| ù | ù | ù | lowercase u, grave accent |
| ú | ú | ú | lowercase u, acute accent |
| û | û | û | lowercase u, circumflex accent |
| Name Code | Number Code | Glyph | Description |
| ü | ü | ü | lowercase u, umlaut |
| ý | ý | ý | lowercase y, acute accent |
| þ | þ | þ | lowercase thorn, Icelandic |
| ÿ | ÿ | ÿ | lowercase y, umlaut |
Wednesday, 1 October 2014
gradient
Linear Gradient - Top to Bottom
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
Linear Gradient - Left to Right
background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax */
Linear Gradient - Diagonal
background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
Linear Gradient - Left to Right
background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax */
Linear Gradient - Diagonal
background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
Subscribe to:
Posts (Atom)