FeedBurner FeedCount

Showing posts with label opacity. Show all posts
Showing posts with label opacity. Show all posts

Monday, October 28, 2013

HOW TO CREATE MY OWN LAYOUT IN HTML

<html>
<head>
<title>My Menu Deisgn</title>
<style>
a
{
border-top: 1px solid orange;
border-bottom: 1px solid gold;
border-right: 1px solid orange;
border-top-right-radius: 10px;
background-color: gold;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
color: black;
}
#tbl_bg
{
background-color: rgba(0,0,0,0.0);
}
#blk{
background-color: black;
}
#gl{
background-color: orange;
}
</style>
</head>
<body>

<table align='center' width='700' height='150' border='1' id="blk">
<tr>
<td>

</td>
</tr>
</table>

<table align='center' width='700' id="gl" border="1">
<tr>
<td>
<a href="#">Home</a>
<a href="#">Gallery</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</td>
</tr>
</table>

<table align='center' width='700' height='500' border='1' id="gl">
<tr>
<td>

</td>
</tr>
</table>

<table align='center' width='700' height='100' border='1' id="blk">
<tr>
<td>

</td>
</tr>
</table>

</body>
</html>

Friday, October 25, 2013

HOW TO CREATE BACKGROUND TRANSPARENT

CSS DESIGN - HOW TO DO A TRANSPARENT BACKGROUND-COLOR/ BACKGROUND-IMAGE

1st create this html code and save it as transparent.html
<html>
<head>
<title></title>
<style>
#transparent_effect{
background-color: rgba(0,0,0,0.25);
}
#transparent_image{
background-image:url('asd.jpg');
opacity: 0.5;<!-- this css will make an image, background-image, or even simple image to be transparent-->
}
Note: if your image is in a folder. do this: background-image:url('name_of_folder/your_image.jpg or png')

</style>
</head>

<body>
<!-- Lets implement it in a table -->
<!-- Now let's create the table -->
<table width="500" height="500" id="transparent_effect" border="1">
<tr>
<td>

</td>
</tr>
</table>

<table width="500" height="500" border="1" id="transparent_image">
<tr>
<td>

</td>
</tr>
</table>

</body>
</html>

2.) Run it through the browser
3.) Enjoy what you learn :)
4.) If this blog helps you, pls comment ^_^ I will make more blogs about things like this. You can also write comments about what you want to know :) thank you