HTML Help

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..