HTML Help: June 2013

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