HTML Help: 2013

Tuesday, 23 July 2013

An attractive login form..I think.
Colors can be changed acc to your choice..
Check it out

<html>
<head>
<title>

</title>
</head>
<style>
‪#‎loginform‬
{
background-color:rgba(324,100,231,0.4);
padding:20px;
position:absolute;
-webkit-border-radius:10px;
}
form
{
-webkit-border-radius:10px;
background-color:rgba(123,121,123,0.2);
padding:10px;
}
input
{
-webkit-border-radius:5px;
border:none;
padding:3px;
}
‪#‎formone‬:hover
{
-webkit-transform:scale(1.09);
box-shadow:0px 0px 5px white;
}
input:hover
{
box-shadow:0px 0px 5px black;
}
</style>
<body>
<div id="loginform">
<form id="formone">
<input type="text" name="uname" placeholder="Username Here" size="28"><br>
<input type="password" name="password" placeholder="************">
<input type="submit" name="submit" value="Login">
</form>
</div>
</body>
</html>

Monday, 10 June 2013

Pseudo Element In Css

A pseudo-element does exactly what the word implies. It creates a phoney element and inserts it before or after the content of the element that you’ve targeted.

Calling them pseudo-elements is appropriate, because they don’t actually change anything in the document. Rather, they insert ghost-like elements that are visible to the user and that are style-able in the CSS.

Basic Syntax

The :before and :after pseudo-elements are very easy to code (as are most CSS properties that don’t require a ton of vendor prefixes). Here is a simple example:

#example:before {
   content: "#";
}

#example:after {
   content: ".";
}

There are two things to note about this example. First, we’re targeting the same element using#example:before and #example:after. Strictly speaking, they are the pseudo-elements in the code.

Sunday, 9 June 2013

transform property in the html

You can use transform property also to decorate your divs and other ekements on the webpage...

1.If you want to rotate a div on hover you can do it like this
<body>
<form>
<div id="login">
<input type="text" name="uname" placeholder="Enter your Username here" size="30"><br>
<input type="password" name="password" placeholder="********">
<input type="submit" name="submit" value="Sign In!">
</div>
</form>
</body>

now if we want to rotate the login div if any user hover on it we can do it like this..
<style>
input
{
border:none;
background-color:rgba(0,0,0,0.5);
color: white;
border-radius: 4px;
padding: 5px;
}
#login
{
background-color: rgba(189, 183, 45,0.7);
padding: 5px;
border-radius: 5px;
box-shadow:0px 0px 12px white;
}
#login:hover
{
-webkit-transform:rotate(5deg);
//-webkit-transform:scale(1.09);
//-webkit-transform:translate(10px,20px);
}
</style>

2.You can zoom out or zoom in the element using the scale property like

-webkit-transform:scale(1.09);
3.Similarly we can move an element using transform property..
-webkit-transform:translate(10px,20px);

Hope it'll help you...

Tuesday, 21 May 2013

z-index
It is an attribute,usually of the div element by using which we can set the priority of the same..

If two elements are overlapping then the element.will be shown whose z-index is set to higher value..
.
.
.
An important thing is the positions should be absolute.

Monday, 6 May 2013

Using text shadows....

Decorate your texts using Text Shadow ...

Just make a file named index.html

<html>
<head>
<title>
Vivek
</title>
</head>
<style>
body
{
font-size: 100px;
font-family:Gabriola;
color: white;
background-color: black;
text-align: center;
margin-top: 200px;
text-shadow:3px -2px 3px gray,-3px 2px 3px gray;
}
</style>
<body>
Eccentric's
</body>
</html>

Friday, 26 April 2013

Make an attractive drop down list

Create an attractive drop down menu using html and css

make an html file named index.html

<div id="nav">
<div id="home" class="onnav"><a href="#">Home</a>
<div id="list1" class="list">
<ul>
<li><a href="#">Home1</a></li><br>
<li>Home2</li><br>
<li>Home3</li><br>
<li>Home4</li>
</ul>
</div>
</div>
<div id="product" class="onnav"><a href="#">Product</a>
<div id="list2" class="list">
<ul>
<li>Product1</li><br>
<li>Product2</li><br>
<li>Product3</li><br>
<li>Product4</li>
</ul>
</div>
</div>
<div id="gallery" class="onnav"><a href="#">Gallery</a>
<div id="list3" class="list">
<ul>
<li>Gallery1</li><br>
<li>Gallery2</li><br>
<li>Gallery3</li><br>
<li>Gallery4</li>
</ul>
</div>
</div>
<div id="sitemap" class="onnav"><a href="#">Site Map</a>
<div id="list4" class="list">
<ul>
<li>Sitemap1</li><br>
<li>Sitemap1</li><br>
<li>Sitemap1</li><br>
<li>Sitemap1</li>
</ul>
</div>
</div>
<div id="aboutus" class="onnav"><a href="#">About Us</a>
<div id="list5" class="list">
<ul>
<li>About us</li><br>
<li>About us</li><br>
<li>About us</li><br>
<li>About us</li>
</ul>
</div>
</div>
<div id="contactus" class="onnav"><a href="#">Contact Us</a>
<div id="list6" class="list">
<address>Vill. Mahilo,Post-jawa,<br>Dist rewa Mp</address>
</div>
</div>
<div id="joinus" class="onnav"><a href="#">Join/Login</a>
<div id="list7" class="list">
<ul>
<li>Login</li><br>
<li>Join Us</li><br>

</ul>
</div>
</div>
</div>

and the css file would be

body
{
background-color:gray;
color:white;
}
#nav
{
background-color:#333;
width:1216px;

height:auto;
margin:auto;
-webkit-border-radius:5px;
padding-left:10px;
text-align:center;
}
a
{
text-decoration:none;
color:white;
}
#home
{
margin-left:50px;}
#product
{
margin-left:190px;
margin-top:-35px;

}
#gallery
{
margin-left:330px;
margin-top:-35px;

}
#sitemap
{
margin-left:470px;
margin-top:-35px;

}
#aboutus
{
margin-left:610px;
margin-top:-35px;

}
#contactus
{
margin-left:750px;
margin-top:-35px;

}
#joinus
{
margin-left:890px;
margin-top:-35px;
}

.onnav
{

height:25px;
width:140px;
padding:5px;

}
.onnav:hover
{
background-color:#000;
font-size:17px;
box-shadow:0px -6px 12px #CCCCCC;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.list
{
background:rgba(0,0,0,0.86);
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
width:300px;
padding:10px;
margin-top:10px;
margin-left:-4px;
display:none;
position:absolute;
z-index:100;
}

ul li
{
list-style:none;
}
#home:hover #list1
{
display:block;
}
#product:hover #list2
{
display:block;
}
#gallery:hover #list3
{
display:block;
}
#sitemap:hover #list4
{
display:block;
}
#aboutus:hover #list5
{
display:block;
}
#contactus:hover #list6
{
display:block;
}
#joinus:hover #list7
{
display:block;
}

Monday, 18 February 2013

Support

It will be my pleasure if u people will be sending feedback and suggestions ..
You can post your spcifiic problems also..

Change Color Of the div on Mouse over

Here is the html page say index.html

<html>
<head><title>Change Color</title>
</head>
<body>
<div id="header"></div>
</body>
</html>

and the css is style.css

#header
{
width:100px;
height:100px;
background-color:red;
-webkit-border-radius:10px;
}
#header:hover
{
background-color:purple;
}

hope it will be helping you...

Rounded corners Using Html and CSS

Friends today I am going to tell u, how to create rounded corners on any div..

here is the html file index.html
<html>
<head>
<title>Rounded Corner</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header"></div>
</body>
</html>

and here is the css style.css

#header
{
width:100px;
height:100px;
background-color:purple;
-webkit-border-radius:10px;
}

Friday, 8 February 2013

Image Slider Using HTML and CSS only

Friends today Iwill tell you how to make a slide show on your web page using only html and CSS......
Here is the code..
This is the page index.html

<html>
      <head>
             <title>Slide Show</title>
             <link rel="stylesheet" type="text/css" href="index.css">
      </hrad>
<body>
              <div id="slide">
                    <marquee behavior="alternate" scrollamount="8">
   <img src="image pathand name">
                                   <img src="image pathand name">
<img src="image pathand name">
                     </marquee>
              </div>
</body>
</html>

and here is the css for above web page index.css

#slide
{
height:300px;
width:300px;
    margin:auto;
}

/*make sure that the sizeof images should be 300*300in this case*/