PhP-webmarket

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>

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>

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>

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>

Tuesday, April 5, 2016

Polaroid effect with css

Polaroid effect 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>Untitled Document</title>
<style>
#kep{
    margin-top:100px;
    border-color:#Fff;
    border-style: solid;
    transform: rotate(-10deg);
    border-top-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    border-bottom-width:30px;
    box-shadow: 3px 3px 3px #5a5a5b;}
#kep2{
    margin-top:100px;
    border-color:#Fff;
    border-style: solid;
    /*transform: rotate(-10deg);*/
    border-top-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    border-bottom-width:30px;
    box-shadow: 3px 3px 3px #5a5a5b;}

    #kep3{
    margin-top:100px;
    border-color:#Fff;
    border-style: solid;
    transform: rotate(20deg);
    border-top-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    border-bottom-width:30px;
    box-shadow: 3px 3px 3px #5a5a5b;}

</style>
</head>

<body bgcolor="#CCCCCC">

<center>

<img src="kepek/8VIZESES.JPG" width="300" id="kep" />

<img src="kepek/8VIZESES.JPG" width="300" id="kep2" />

<img src="kepek/8VIZESES.JPG" width="300" id="kep3" />

</center>
</body>
</html>

Subscribe to: Posts (Atom)