Today we learn how to create animations in Photoshop! My example is with text because i don’t have photos for this kind of tutorial! Let’s start!
[1] Open Adobe Photoshop and create a new page with the size 350px x 150px!
Today we learn how to create a search form in HTML! You have all files here and the
final result here!
[1] Open Notepad and type the next code.
<html>
<head>
<title>PiticStyle - Create a Search Form</title>
<style type=”text/css”>
body {
background-image: url(”bg.gif”);
}
img {
float: left;
}
</style>
</head>
<body><br>
<form action=”http://www.google.com/search” method=”get”><img src=”search.gif” mce_src=”search.gif”>
<input type=”text” name=”q”>
<input type=”submit” value=”Search”>
</form>
</body>
</html>
Today we learn about opacity in CSS! I made an example here and here you have the files.
Information about opacity in CSS:
The opacity property takes a value of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent - anything below that element will show completely through. 1.0 is 100% opaque - nothing below the element will show through.
So to set an element to 50% transparent, you would write: opacity:0.5;
Neither IE 6 nor 7 support the CSS 3 opacity property. But you’re not out of luck. Instead, IE supports a Microsoft-only property “alpha filter”. Alpha filters in IE accept values from 0 (completely transparent) to 100 (completely opaque). So, to get your transparency in IE, you should multiply your opacity by 100 and add an alpha filter to your styles:
Alpha filter for IE: filter: alpha(opacity=50);
Alpha filter for Mozilla: -moz-opacity:0.5;
Hy! Today we learn how to validate HTML and CSS from your page. This tip is usefull if you have a website about webdesign where you have tools for development! Here is the final result
with a design what i made, you have all files in the archive HERE. Let’s Start.
[1] Open your text editor and type the next HTML code
<html>
<head>
<title>Validate CSS, HTML, XHTML from your page</title>
</head>
<body>
<div>
<form method=”get” action=”http://jigsaw.w3.org/css-validator/validator” target=”_blank”>
<input name=”uri” id=”uri” size=”30″ value=”http://” /></p><br><br>
<label title=”Submit file for validation”><input type=”submit” value=”Validate CSS” /></label>
<label title=”Clear HTML data”><input type=”reset” value=”Clear” /></label>
</form>
</div>
<br>
<div>
<form method=”get” action=”http://validator.w3.org/check” target=”_blank”>
<input name=”uri” id=”uri” size=”30″ value=”http://” /></p><br><br>
<label title=”Submit”><input type=”submit” value=”Validate HTML” /></label>
<label title=”Clear”><input type=”reset” value=”Clear” /></label>
</form>
</div>
</body>
</html>
[1] Open Adobe Photoshop and create a new document with this size 200 px with 200px and with the background TRANSPARENT.
[2] Now you need to select the Custom Shape Tool.
Today we create a simple MENU in CSS. Click here to see the final result!
[1] Let’s to create the CSS:
<style type=”text/css”>
body {
text-align: left;
background-image: url(”bg.gif”);
}
div {
width: 100px;
height: 20px;
background-color: #338ce8;
}
div:hover
{
background-color: #085ea6;
}
a {
color: white;
font-size: 18px;
text-decoration: none;
}
</style>
(more…)
