Hi All,
This week in presenting you few topics on images i.e., way of presentation of the images and the remaining things.
When we are designing our web pages there is huge headache on the alignment if the images in a paragraph. Regularly our intention is to keep the images besides a paragraph, form just pictorial presentation of the context. for this usually for this we will prefer a table in which one data part contains images and another contains remaining content. actually this is not a exact solution to our problem.
Now, I am presenting float,vertical-align property of CSS that makes you to float images, tables, list,..etc in different alignments.
Align images to the left
This is the way of aligning a image to left for this we have to define
<img src="jadoo.jpg" style="float:left"/>
else we can also define a class that applies to all images
img{
float:left; }
<img src="jadoo.jpg"/>
Align images to the right
Need your image to go to the right of your text and stay there like a good little image
<img src="jadoo.jpg" style="float:right"/>
Align images to the center (vertical)
This will makes your text line up to the middle of an image using CSS, useful for small button images and such.
.middle {
vertical-align:middle;
margin: 5px;
}
<img src="jadoo.jpg" class="middle">
Aligning text to the top of an image using "vertical-align:top;".
Aligning text to the bottom of an image using "vertical-align:bottom;".
Transparency of the Images
The three images above are all from the same source image. The only difference between them is what is called their "opacity level".It is done by make use of opacity CSS.
If you observe in some sites when menu items change when a mouse floats over the image as seen below (move your mouse over the images below to see this effect).
Implementation of Opacity
It just uses a normal image tag.
The above image has opacity 30 applied to it, and to apply that opacity we have added a "class" to image like so...
.opacity30 {
filter:alpha(opacity=30); /* For IE */
-moz-opacity:0.3; /* For Mozilla */
-khtml-opacity: 0.3; /* Other */
opacity: 0.3; /* Other */
}
When we are designing our web pages there is huge headache on the alignment if the images in a paragraph. Regularly our intention is to keep the images besides a paragraph, form just pictorial presentation of the context. for this usually for this we will prefer a table in which one data part contains images and another contains remaining content. actually this is not a exact solution to our problem.
Now, I am presenting float,vertical-align property of CSS that makes you to float images, tables, list,..etc in different alignments.
Align images to the left
This is the way of aligning a image to left for this we have to define<img src="jadoo.jpg" style="float:left"/>
else we can also define a class that applies to all images
img{
float:left; }
<img src="jadoo.jpg"/>
Need your image to go to the right of your text and stay there like a good little image
<img src="jadoo.jpg" style="float:right"/>
Align images to the center (vertical)
This will makes your text line up to the middle of an image using CSS, useful for small button images and such.
.middle {
vertical-align:middle;
margin: 5px;
}
<img src="jadoo.jpg" class="middle">
Aligning text to the top of an image using "vertical-align:top;".
Aligning text to the bottom of an image using "vertical-align:bottom;".
Transparency of the Images
The three images above are all from the same source image. The only difference between them is what is called their "opacity level".It is done by make use of opacity CSS.
If you observe in some sites when menu items change when a mouse floats over the image as seen below (move your mouse over the images below to see this effect).
Implementation of Opacity
It just uses a normal image tag.
<img src="jadoo.jpg" />
Opacity has levels, which means a numerical value. Different browsers have different ways of dealing with this, but for simplicity let's talk in percentage. The below image is the same image as above, but with 30 percent opacity...The above image has opacity 30 applied to it, and to apply that opacity we have added a "class" to image like so...
<img src="image.png" class="opacity30" />
.opacity30 {
filter:alpha(opacity=30); /* For IE */
-moz-opacity:0.3; /* For Mozilla */
-khtml-opacity: 0.3; /* Other */
opacity: 0.3; /* Other */
It works not only for Images but also for other tags as you see below..
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
Source Code
<html>
<head>
<style type="text/css">
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
Reveal Transitions
Reveal transition filters are time-varying visual filters allowing content to be transformed in a prescribed manner. Their role is to visually transition a control from one state to another. Scripting languages must be used to change between the beginning and ending states for the 23 possible Reveal transition types. Transition filters can also be specified using syntax in the HTML META element to create blend transitions between page loads.
Syntax
Selector { filter: revealtrans([duration], [transition-type]) }
[duration] - Floating point value representing the length of time used for the transition. Value is given in seconds and milliseconds
[transition-type] - Integer code value (0-23) indicating the shape of the Reveal transition.
| Transition Type | Description |
|---|---|
| 0 | Box In - Starts at box outside boundary and goes to center in a rectangular transition. |
| 1 | Box Out - Starts at box center and goes to outside boundary in a rectangular transition. |
| 2 | Circle In - Starts at box outside boundary and goes to center in a circular transition. |
| 3 | Circle Out - Starts at box center and goes to outside boundary in a circular increasing radius transition. |
| 4 | Wipe Up - Starts at bottom of box and transition works its way upward. |
| 5 | Wipe Down - Starts at top of box and transition works its way downward. |
| 6 | Wipe Right - Starts at left side of box and transition works its way to the right. |
| 7 | Wipe Left - Starts at right side of box and transition works its way to the left. |
| 8 | Vertical Blinds - Segments the box into vertical strips. Transition moves from left to right. |
| 9 | Horizontal Blinds - Segments the box into horizontal strips. Transition moves from top to bottom. |
| 10 | Checkerboard Across - Segments the box into a grid of squares. Transition moves from left to right. |
| 11 | Checkerboard Down - Segments the box into a grid of squares. Transition moves from top to bottom. |
| 12 | Random Dissolve - Randomly changes pixels in the box to their new state over the course of the duration time. |
| 13 | Split Vertical In - Starts at the left and right sides of the box and moves toward the center (closing sliding double door.) |
| 14 | Split Vertical Out - Starts at the center of the box and moves toward the left and right sides (opening sliding double door.) |
| 15 | Split Horizontal In - Starts at the top and bottom sides of the box and moves toward the center. |
| 16 | Split Horizontal Out - Starts at the center of the box and moves toward the top and bottom sides. |
| 17 | Strips Left Down - Starts at upper right corner of box moving toward the bottom left corner in diagonal line (page turn from top right.) |
| 18 | Strips Left Up - Starts at bottom right corner of box moving toward the top left corner in diagonal line (page turn from bottom right.) |
| 19 | Strips Right Down - Starts at upper left corner of box moving toward the bottom right corner in diagonal line (page turn from top left.) |
| 20 | Strips Right Up - Starts at bottom left corner of box moving toward the top right corner in diagonal line (page turn from bottom left.) |
| 21 | Random Bars Horizontal - Transition to new state occurs horizontal pixel line-by-line in random fashion until complete. |
| 22 | Random Bars Vertical - Transition to new state occurs vertical pixel line-by-line in random fashion until complete. |
| 23 | Random - One of the previous 23 reveal filter types is randomly used. |
Implementation
Download the implementation by clicking here. It works only in IE.
There are few more topics to be discuss.. Let us see them in next week..
Thank Q guys,
regards,
M.Agni,
Assistant Professor,
ACE Team member,
Aditya Edu. Group.
email: agni2020@gmail.com
No comments:
Post a Comment