Oldalak

Monday, June 27, 2016

Transform with CSS





Transform with CSS


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css TRANFORM</title>
<style>
#transform1{
    transform: rotate( -20deg );}
   
#transform2{
    transform: rotateX( -45deg );}
   
#transform3{
    transform: rotateY( -45deg );}
   
#transform4{
    transform: rotate3d( 30, 0, 0, 30deg);}

#transform5{
    transform: scaleX( 0.8 );}
   
#transform6{
    transform: scaleY( 0.8 );}
   
#transform7{
    transform: skewX( 20deg );}
   
#transform8{
    transform: skewY( 20deg );}
   
#transform9{
    transform-origin:20% 40%;}
   

</style>
</head>

<body>
<table width="500" height="500" border="0" align="center">
  <tr>
    <td align="center" valign="middle"><img id="transform1" src="madarka.jpg" width="150" height="120" /></td>
    <td align="center" valign="middle"><img id="transform2" src="madarka.jpg" width="150" height="120" /></td>
    <td align="center" valign="middle"><img id="transform3" src="madarka.jpg" width="150" height="120" /></td>
  </tr>
  <tr>
    <td align="center" valign="middle"><img id="transform4" src="madarka.jpg" width="150" height="120" /></td>
    <td align="center" valign="middle"><img id="transform5" src="madarka.jpg" width="150" height="120" /></td>
    <td align="center" valign="middle"><img id="transform6" src="madarka.jpg" width="150" height="120" /></td>
  </tr>
  <tr>
    <td align="center" valign="middle"><img id="transform7" src="madarka.jpg" width="150" height="120" /></td>
    <td align="center" valign="middle"><img id="transform8" src="madarka.jpg" width="150" height="120" /></td>
    <td align="center" valign="middle"><img id="transform9" src="madarka.jpg" width="150" height="120" /></td>
  </tr>
</table>
</body>
</html>



at No comments:

Friday, June 24, 2016

Image Tooltip with CSS





Image Tooltip with CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>image tooltip</title>
<style>

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}


.tooltip .tooltipimage {
    top: 85px;
    left: 0px;
    visibility: hidden;
    width: 120px;
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltipimage {
    visibility: visible;
}
</style>
</head>

<body>

<div class="tooltip"><img src="ten1.jpg" height="80"  border="0" /> <span class="tooltipimage"><img src="ten1.jpg" width="300" border="0" /></span></div>
<div class="tooltip"><img src="Rain Drops Wallpaper(05).jpg" height="80" /><span class="tooltipimage"><img src="Rain Drops Wallpaper(05).jpg" width="300" border="0" /></span></div>
</body>
</html>



at No comments:

Thursday, June 23, 2016

Text Tooltip with CSS






Text Tooltip with CSS

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tooltip</title>
<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}


.tooltip .tooltiptext {
    top: 25px;
    left: 105%;
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    z-index: 1;
}


.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
</head>

<body>

<div class="tooltip"><a href="#" >this is one link with tooltip <span class="tooltiptext">Hello, this is a link</span>
</div>
</body>
</html>



at No comments:

Monday, June 20, 2016

Box Shadow with CSS





Box Shadow with CSS

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Box Shadow</title>

<style>
    div{
        width:300px;
        height:200px;
        background-color:#0F0;
        box-shadow:8px 8px 0 #F30;}
</style>

</head>

<body>

    <div>
        THIS IS BOX AND SHADOW
    </div>

</body>
</html>





at No comments:

CSS Programing


Animation with CSS

Atributes Selector

Advenced backround example



Background Image

Box Shadow with CSS

Polaroid effect with css

Text Tooltip with CSS

Image Tooltip with CSS


at No comments:

Sunday, June 19, 2016

Background Image with CSS






Background Image with CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Backround Image</title>

<style>

    body{
        background-image:url(19.JPG);}

</style>

</head>

<body>

    <h1>This is a Backround image</h1>

</body>
</html>




at No comments:

Advenced backround example with CSS





Advenced backround example with CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Advenced backround example</title>

<style>
   
    body{
        margin-left:200px;
        background:#5d9ab2;}
       
    .container{
        text-align:center;}
       
    .center_div{
        border:1px solid gray;
        margin-left:auto;
        margin-right:auto;
        width:40%;
        background-color:#d0f0f6;
        text-align:left;
        padding:10px;}


</style>



</head>

<body>

    <div class="container">
   
        <div class="center_div">
       
            <h1>Hello CSS Programmers</h1>
            <p>Advenced backround example</p>
       
        </div>
   
    </div>

</body>
</html>




at No comments:

Saturday, June 18, 2016

Atributes Selector with CSS






Atributes Selector with CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Atributes Selector</title>

<style>

label[for]
{
    background:yellow;}
   
fieldset{
    width:300px;}

</style>

</head>

<body>

    <form>
        <fieldset>
            <legend> Sign in Form </legend>
           
            <label for="user"> Username </label><br />
            <label for="password"> Password </label><br /><br />
           
            <input type="submit" value="SEND" />
        </fieldset>
    </form>

</body>
</html>


 
at No comments:

Animation with CSS




Animation with CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Transform</title>

<style type="text/css">

#div1{
    width:300px;
    height:300px;
    background:skyblue;}
   
#div2{
    width:100px;
    height:100px;
    line-height:100px;
    background:blue;
    transition:all 1s ease-in-out;}
   
#div2 p{
    color:white;
    text-align:center;}

#div2:hover{
    width:200px;
    border-radius:30px;
    background:red;
    transform:scale(0.8);}

</style>


</head>

<body>


<div id="div1">
    <div id="div2">
        <p>Hello</p>
    </div>
</div>

</body>
</html>




at No comments:
Subscribe to: Posts (Atom)