HTML,CSS, PHP tutorial for beginners by Rui Santos: rui

Wednesday, December 18, 2013

How to rotate an image by rui santos

1st do a simple html file with image;

<html>
   <head>
       <title>Rotate my Image</title>
       <link rel="stylesheet" type="text/css" href="rotate_style.css" />
   </head>

   <body>
       <img src="5.png" alt="myImage">
   </body>
</html>

Then: do the rotate_style.css

img{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;

height: 450px;
width: 450px;

-webkit-transition-property: transform;
-moz-transition-property: transform;
transition-property: transform;
}
img:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
height: 900px;
width: 900px;
}

After this code. run index.html in your browser and hover the image. ENJOY! ^_^

Tuesday, October 29, 2013

LAYOUT USING DIV IN HTML + CSS

This is an example of making a layout. In this tutorial we will use <div>

Name: index.html

<html>
<head>
<title>CREATE YOUR OWN LAYOUT USING DIV</title>
<link rel="stylesheet" type="text/css" href="my_design.css">
</head>
<body>
<div id="myHeader"> 
<h1 id="line">HTML, CSS, PHP tutorial</h1>
</div>

<div id="myMenu">

<a>HTML</a></br>
<a>CSS</a></br>
<a>PHP</a>

<div id="inner">
Inner information here
</div>

</div>

<div id="myFooter">
<p>Here is your footer</p>
</div>
</body>
</html>

This code below is for the css of the page

CSS FILE: my_design.css

#myHeader{
background-color: green;
width: 600px;
padding: 1px;
color: white;
}
#line{
text-align: center;
}
#myMenu{
background-color: yellowgreen;
width: 80px;
height: 150px;
text-align: center;
color: white;
}
#myFooter{
background-color: green;
width: 600px;
height: 50px;
text-align: center;
padding: 1px;
color: white;
}
#inner{
color: green;
margin-left: 80px;
margin-top: -60px;
background-color: rgba(0,0,0,0.2);
width: 522px;
height: 150px;
text-align: left;
}

If this code helps you, please comment thank you :)

FeedBurner FeedCount

Wednesday, December 18, 2013

How to rotate an image by rui santos

Tuesday, October 29, 2013

LAYOUT USING DIV IN HTML + CSS