26. Effects Frames and Controls in CSS

Changing image transparency with mouse events
transparency or opacity of an image can be made to change with the invocations of mouse events
<!DOCTYPE HTML>
<HEAD>
<TITLE>Applying Rounded Corners</TITLE>
<STYLE>
.trans{
border:1px solid #000;
border-radius:50px 0px 50px 0px;
background:gray
}
img{
opacity:0.3;
height:250px;
width:300px;
}
</STYLE>
</HEAD>
<BODY>
<H1 style="text-align:center">Working with Image Trasparency </H1>
<IMG src="Penguins.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=20">
<IMG src="Desert.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=20">
<IMG src="jellyfish.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=20">
<IMG src="koala.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=20">
<IMG src="Tulips.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=20">
<IMG src="Chrysanthemum.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=20">
</BODY>
</HTML>

Writing text in a transparent box
you can change the transparency of any element by using the opacity property
<!DOCTYPE HTML>
<HEAD>
<TITLE>Transparent Box</TITLE>
<STYLE type="text/css">

body{
background:url(Penguins.jpg);
}

.trans{
width:500px;
height:400px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.5;
color:red;
font-weight:Bold;
font-size:20px;
text-align:justify;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Transparent Box</H1>

<TEXTAREA class="trans" type="text">Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text </TEXTAREA>

</BODY>
</HTML>

Applying the transformation effects
is used to change the position of the content of a webpage or rotate the content.
<!DOCTYPE HTML>
<HEAD>
<TITLE> Rotating Images </TITLE>
<STYLE type="text/css">
img {
width: 300px;
height: 200px;
}

#transform {
position: relative;
margin: 10px auto;
width: 300px;
height: 200px;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
}

#transform:hover {
-webkit-transform: rotateZ(35deg);
-webkit-box-shadow: -5px 5px 5px #aaa;
}

</STYLE>
</HEAD>

<BODY>
<H1>Working with Transformation </H1>
<DIV id="transform">
<IMG src="Tulips.jpg"/>
</DIV>

<DIV id="transform">
<IMG src="Koala.jpg"/>
</DIV>

<DIV id="transform">
<IMG src="Penguins.jpg"/>
</DIV>
</BODY>
</HTML>

Applying the transition effects
 the passage of an act from one state to another is called transition
<!DOCTYPE HTML>
<HEAD>
<TITLE>Transition </TITLE>
<STYLE type="text/css">

div{
background:url(Tulips.jpg);
}

.area {
border-bottom: 6px solid #dbdfcd;
height: 500px;
position: relative;
}

.item {
background: red;
color: #444;
margin: 0 20px;
height: 30px;
line-height: 30px;
position: absolute;
text-align: center;
width: 90px;
height:90px;
opacity:0.9;
}

.area .item {
-webkit-transition: all 1s linear;
}

.area .item-1 {
bottom: 10px;
-webkit-transition-duration: 1.0s;
}

.area .item-2 {
bottom: 110px;
-webkit-transition-duration: .75s;
}

.area .item-3 {
bottom: 220px;
-webkit-transition-duration: .5s;
}

.area .item-4 {
bottom: 330px;
-webkit-transition-duration: .25s;
}

.item:hover,
.item:focus {
color: white;
width: 400px;
opacity:0.6;

}
</STYLE>
</HEAD>

<BODY>

<DIV class="area">
<H1>Working with Transition </H1>
<DIV class="item item-1">1.0 second</DIV><BR />
<DIV class="item item-2">0.75 second</DIV><BR />
<DIV class="item item-3">0.5 second</DIV><BR />
<DIV class="item item-4">0.25 second</DIV>
</DIV>


</BODY>
</HTML>

bordertransition.html
<!DOCTYPE HTML>
<HEAD>
<TITLE>Transition </TITLE>
<STYLE type="text/css">
div{
background:#444;
}

.area {
border-bottom: 6px solid #dbdfcd;
height: 500px;
position: relative;
}

.item {
width: 240px;
height:200px;
opacity:0.9;
border-radius:5px 5px 5px 5px;
}

.area .item {
-webkit-transition: all 0.5s linear;
}

.item:hover,
.item:focus {
-webkit-border-radius:500px;

}
</STYLE>
</HEAD>

<BODY>
<DIV class="area">
<H1>Working with Transition </H1>
<IMG class="item item-1" src="Tulips.jpg">
<IMG class="item item-2"  src="Jellyfish.jpg"><BR/>
<IMG class="item item-3" src="Koala.jpg">
<IMG class="item item-4" src="Desert.jpg">
</DIV>
</BODY>
</HTML>

Applying the animation effects
optical illusions created by animating images and other elements in a web page are referred as animation.
<!DOCTYPE HTML>
<HEAD>
<TITLE> Animation </TITLE>
<STYLE type="text/css">
@-webkit-keyframes resize {
0% {
height:220px;
width:220px;
opacity:0.7;
}
50% {
height:240px;
width:240px;
opacity:0.4;
}
}
#heart:hover {
-webkit-animation-name: resize;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(0,0.5,0,0);
}

#heartinf {
-webkit-animation-name: resize;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(0,0.5,0,0);
position: absolute;
left:250px;
top:80px;
width: 200px;
height:200px;

}

img{
height:200px;
width:200px;
opacity:1;
}

</STYLE>
</HEAD>

<BODY>
<H1>Working with Animation </H1>
<IMG id="heart" src="Heart.jpg" >
<IMG id="heartinf" src="Heart.jpg" >
<P style="position:absolute;left:60px;top:280px;text-align:center">Hover on this image <BR/> to animate.</P>
<P style="position:absolute;left:300px;top:280px;text-align:center">Continoustly Animating <BR/>Image </P>
</BODY>
</HTML>

Creating Frames
CSS allows you to segregate the content of webpage into different frames, which can appear on a web page in the form of side bar, header, or footer.
note that the frames, being a segregated content, do not scroll when you scroll the web page.
there is no special property to create frames in CSS;
you can use the position, height,overflow and other properties to create them.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Creating Frames</TITLE>
<STYLE type="text/css">

#frame{
position: absolute;
top:0px;
left:0px;
bottom: 0px; 
right:0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; 
background: Black;
color: white;
}

#main{
position: fixed;
top: 0px; 
left:210px; 
right: 0;
bottom: 0px;
overflow: auto;
}


</STYLE>


</HEAD>

<BODY>

<DIV id="frame">
<H1>This is the Left Frame</H1>
</DIV>


<DIV id="main">
<H1>Heading of the main content</H1>
<P>Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text </P>
<IMG src="Penguins.jpg" style="width:100%;height:100%;">
</DIV>

</BODY>
</HTML>

rightframe.html
<!DOCTYPE HTML>
<HEAD>
<TITLE>Creating Frames</TITLE>
<STYLE type="text/css">

#frame{
position: absolute;
top:0px;
bottom: 0px; 
right:0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; 
background: Black;
color: white;
}

#main{
position: fixed;
top: 0px; 
right:210px;
bottom: 0px;
overflow: auto;
}



</STYLE>


</HEAD>

<BODY>

<DIV id="frame">
<H1>This is the Right Frame</H1>
</DIV>


<DIV id="main">
<H1>Heading of the main content</H1>
<P>Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text </P>
<IMG src="Penguins.jpg" style="width:100%;height:100%;">
</DIV>

</BODY>
</HTML>

topbottomframe.html
<!DOCTYPE HTML>
<HEAD>
<TITLE>Creating Frames</TITLE>
<STYLE type="text/css">

#topframe{
position: absolute;
top:0px;
left:0px;
bottom: 0px; 
right:0;
width: 100%; 
height: 100px;
overflow: hidden; 
background: Black;
color: white;
}

#main{
position: fixed;
top: 100px; 
left:10px; 
bottom: 100px;
overflow: auto;
}

#bottomframe{
position: absolute;
left:0px;
bottom: 0px; 
right:0;
width: 100%; 
height: 100px;
overflow: hidden; 
background: Black;
color: white;
}
</STYLE>


</HEAD>

<BODY>

<DIV id="topframe">
<H1>This is the Top Frame</H1>
</DIV>


<DIV id="main">
<H1>Heading of the main content</H1>
<P>Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text Demo Text </P>
<IMG src="Penguins.jpg" style="width:500px;height:500px;">
</DIV>

<DIV id="bottomframe">
<H1>This is the Bottom Frame</H1>
</DIV>

</BODY>
</HTML>

Changing the appearance of buttons
<!DOCTYPE HTML>
<HEAD>
<TITLE>CSS Style on Buttons </TITLE>
<style type="text/css">
#round{
border-radius:60px;
background:lime;
height:80px;
width:80px;
}

#square{
background: aqua;
display: block;
float: left;
font: normal 12px Arial; 
line-height: 15px; 
height: 23px; 
padding-left: 9px; 
text-decoration: none;
width:100px;
}
#oval{
background: gray;
color:white;
display: block;
float: left;
font: normal 13px Tahoma;
line-height: 16px;
height: 24px;
padding-left: 11px; 
text-decoration: none;
width:100px;
border-radius:60px;
}


#bold{
padding: 5px 7px;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: #3282c2;
border-radius: 8px; 
box-shadow: 3px 3px 4px rgba(0,0,0,.5); 
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); 
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
width:100px;
}

</style>
</HEAD>
<BODY>
<H1>Applying CSS on Buttons </H1>
<H3>Round Shaped Buttons</H3>
<BUTTON id="round"> Button 1 </BUTTON>
<BUTTON id="round"> Button 2 </BUTTON>
<BR/><HR/>
<H3>Sqaure Shaped Button</H3>
<BUTTON id="square" > Button 1 </BUTTON> <BUTTON id="square" > Button 2 </BUTTON> <BR/>
<BR/><HR/>

<H3>Oval Shaped Button</H3>
<BUTTON id="oval" > Button 1 </BUTTON> <BUTTON id="oval" > Button 2 </BUTTON><BR/>

<BR/><HR/>
<H3>Gradient Buttons</H3>
<BUTTON id="bold" > Button 1 </BUTTON> <BUTTON id="bold" > Button 2 </BUTTON>
</BODY>
</HTML>

Changing the appearance of vertical menus
<!DOCTYPE HTML>
<HEAD> 
<STYLE type="text/css">

.Vmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; 
}

.Vmenu li {
background: #333 no-repeat right top; 
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; 
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black; 
width:180px;
}

.Vmenu li{
background: #333 no-repeat right top; 
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; 
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black; 
}

.Vmenu li:hover{
background-color: white; 
color: black;
border-bottom: 1px solid black; 
}

</STYLE>
</HEAD>
<BODY>
<H1>Working with Vertical menus</H1>
<DIV class="Vmenu">
<MENU >
<LI>Home</LI>
<LI>HTML</LI>
<LI>CSS</LI>
<LI>JavaScript</LI>
<LI>Contact Us</LI>
<LI>Feedback</LI>
</MENU>
</DIV>
</BODY>
</HTML>


verticalmenu2.html
<!DOCTYPE HTML>
<HEAD> 
<STYLE type="text/css">
.bevelmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}

.bevelmenu li{
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
text-decoration:none;
width:180px;
}

.bevelmenu li:hover{
color: black;
background-color: #FFE271;
border-style: outset;
}

</STYLE>
</HEAD>
<BODY>
<H1>Working with Vertical menus</H1>
<DIV class="bevelmenu">
<MENU>
<LI>Home</LI>
<LI>HTML</LI>
<LI>CSS</LI>
<LI>JavaScript</LI>
<LI>Contact Us</LI>
<LI>Feedback</LI>
</MENU>
</DIV>
</BODY>
</HTML>

Changing the appearance of horizontal menus
<!DOCTYPE HTML>
<HEAD> 
<style type="text/css">

.hmenu{
font-weight: bold;
width: 100%;
}

.hmenu menu{
padding: 6px 0 7px 0;
margin: 0;
}

.hmenu li{
display: inline;
}
.hmenu li{
color: #494949;
padding: 6px 3px 4px 3px;
margin-right: 20px;
text-decoration: none;
border-bottom: 5px solid gray; 
}

.hmenu li:hover{
border-bottom-color:black;
color: black;
}
</style>
</HEAD>
<BODY>
<H1>Working with Horizontal menus</H1>
<div class="hmenu">
<Menu >
<LI>Home</LI>
<LI>HTML</LI>
<LI>CSS</LI>
<LI>JavaScript</LI>
<LI>Contact Us</LI>
<LI>Feedback</LI>
</Menu>
</div>
</BODY>
</HTML>

Changing the appearance of scroll bars
<!DOCTYPE HTML>
<HEAD>
<TITLE>CSS on Scroll Bars </TITLE>
<STYLE type="text/css">
html, body{
scrollbar-face-color:Blue;
scrollbar-base-color:yellow;
scrollbar-arrow-color:black;
scrollbar-track-color:gray;
scrollbar-shadow-color:#EBF5FF;
scrollbar-highlight-color:#EBF5FF;
scrollbar-3dlight-color:#78AAFF;
scrollbar-darkshadow-Color:#78AAFF;
scrollbar-size:10px;
}
p{width:600px;}
</STYLE>

</HEAD>
<BODY>
<H1>Applying CSS on Scroll Bars</H1>
<P>This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph. </P>


</BODY>
</HTML>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

My Favorite Books

  • C and Data Structures by Ashok N. kamthane
  • Web Technologies by A. A. Puntambekar
  • Learn HTML and CSS with W3Schools
  • Learn JavaScript and Ajax with W3Schools
  • HTML5 Black Book: Covers Css3, Javascript,XML, XHTML, Ajax, PHP And Jquery
  • HTML5 Application Development Fundamentals: MTA Exam 98-375
  • .NET 4.0 Programming 6-In-1, Black Book
  • SQL Server 2008 R2 Black Book
  • Asp.net 4.0 Projects Covers: net 3.5 And .net 4.0 Codes, Black Book
  • UNIX Shell Programming 1 Edition by Yashavant Kanetkar
  • UNIX and Shell Programming 1 Edition by Richard F. Gilberg, Behrouz A. Forouzan
  • Computer Networks by Andrew S. Tanenbaum
  • Multiple Choice questions in computer science by Timothy J Williams