Scribd
Upload
2 views

Actc Css Notes-1

This document is a comprehensive tutorial on Cascading Style Sheets (CSS), covering its syntax, advantages, and various properties like color, borders, and backgrounds. It provides examples of how to implement CSS in HTML documents, including styling elements, using RGBA for transparency, and managing background images. The tutorial also emphasizes the importance of CSS for web design and maintenance, ensuring compatibility with future web standards.

Uploaded by

vermavikas305
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Actc Css Notes-1

This document is a comprehensive tutorial on Cascading Style Sheets (CSS), covering its syntax, advantages, and various properties like color, borders, and backgrounds. It provides examples of how to implement CSS in HTML documents, including styling elements, using RGBA for transparency, and managing background images. The tutorial also emphasizes the importance of CSS for web design and maintenance, ensuring compatibility with future web standards.

Uploaded by

vermavikas305
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 68

Table of Contents

1. Overview
2. Syntax
3. Division Style
4. CSS Color Name
5. Background Color
6. CSS Text & Border Color
7. Transparency using RGBA
8. Background Image and Attachment
9. CSS Border Style
10. CSS Box Model
11. CSS List Properties
12. CSS Shadow Effects
13. CSS 2D Transforms
14. CSS 3D Transforms
15. CSS Animations
16. CSS Style Images
17. CSS masking
18. CSS Buttons
19. Animated Buttons
20. Responsive web Design
CSS (CASCADING STYLE SHEETS)
The CSS stands for Cascading Style Sheets CSS is used to control the style of
a web document in a simple and easy way. CSS stands for Cascading Style
Sheets. This tutorial covers both the versions CSS1 and CSS2 and gives a
complete understanding of CSS, starting from its basics to advanced
concepts.

Advantages of CSS
✓ CSS saves time − You can write CSS once and then reuse the same
sheet in multiple HTML pages. You can define a style for each HTML
element and apply it to as many Web pages as you want.
✓ Easy maintenance − To make a global change, simply change the
style, and all elements in all the web pages will be updated
automatically.
✓ Global web standards − Now HTML attributes are being deprecated
and it is being recommended to use CSS. So it's a good idea to start
using CSS in all the HTML pages to make them compatible with future
browsers.
✓ Platform Independence − The Script offer consistent platform
independence and can support latest browsers as well.

CSS Syntax

The selector points to the HTML element you want to style. The declaration
block contains one or more declarations separated by semicolons. Each
declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.
Program-1

HTML Style Class Style


<html><head> <html>
<style> <Body>
h1 {color:red;} <h1 style="color: blue;">
p {color: blue;} A Blue Heading</h1>
</style> <p style="color:red;">
</head><body> A red paragraph.</p>
<h1>A heading</h1> </body>
<p>A paragraph.</p> </html>
</body>
</html>

DIV Style
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then styled
with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div>tag!
Note: By default, browsers always place a line break before and after
the <div> element.
Program-2
<html>
<head>
<style>
.myDiv
{
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<h1>The div element</h1>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
</body>
</html>
CSS Color Names
In CSS, a color can be specified by using a predefined color name:
Background Color
Program-3
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:Blue;">Blue</h1>
<h1 style="background-color:SeaGreen;">SeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Program-4
<html>
<body>
<h1 style="background-color:DodgerBlue;">
Hello World
</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</body>
</html>
CSS Text Color
Program-5
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>
</body>
</html>
CSS Border Color
Program-6
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>

CSS Backgrounds
Background-color
Program-7
<html>
<head>
<style>
h1 {background-color: green;}
div {background-color: lightblue;}
p {background-color: yellow;}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
Transparency using RGBA
If you do not want to apply opacity to child elements, like in our example
above, use RGBA color values. The following example sets the opacity for the
background color and not the text:

100% opacity

60% opacity

30% opacity

10% opacity

An RGBA color value is specified with: rgba(red, green, blue, alpha).


The alpha parameter is a number between 0.0 (fully transparent) and 1.0
(fully opaque).

Program-8
<html>
<head>
<style>
div {background: rgb(0, 128, 0);}
div.first {background: rgba(0, 128, 0, 0.1);}
div.second {background: rgba(0, 128, 0, 0.3);}
div.third {background: rgba(0, 128, 0, 0.6);}
</style>
</head>
<body>
<h1>Transparent Boxes </h1>
<p>Result with opacity:</p>
<div style="opacity:0.1;">
<h1>10% opacity</h1>
</div>
<div style="opacity:0.3;">
<h1>30% opacity</h1>
</div>
<div style="opacity:0.6;">
<h1>60% opacity</h1>
</div>
<div>100% opacity</h1>
</div>
<p>Result with rgba():</p>
<div class="first">
<h1>10% opacity</h1>
</div>
<div class="second">
<h1>30% opacity</h1>
</div>
<div class="third">
<h1>60% opacity</h1>
</div>
<div>
<h1>default</h1>
</div>
<p>Notice how the text gets transparent as well as the background
color when using the opacity property.</p>
</body>
</html>
Background-image
Program-9
<html>
<head>
<style>
body {background-image: url("bgdesert.jpg");}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
</body>
</html>
Background-attachment
The background-attachment property specifies whether the background
image should scroll or be fixed (will not scroll with the rest of the page):
Specify that the background image should be fixed:

Program-10
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the
background image should scroll or be fixed (will not scroll with the rest
of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to
resize the browser window.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>

Specify that the background image should scroll with the rest of the page:
Program-11
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: scroll;}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the
background image should scroll or be fixed (will not scroll with the rest
of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to
resize the browser window.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
</body>
</html>
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
➢ dotted - Defines a dotted border
➢ dashed - Defines a dashed border
➢ solid - Defines a solid border
➢ double - Defines a double border
➢ groove - Defines a 3D grooved border. The effect depends on the
border-color value
➢ ridge - Defines a 3D ridged border. The effect depends on the border-
color value
➢ inset - Defines a 3D inset border. The effect depends on the border-
color value
➢ outset - Defines a 3D outset border. The effect depends on the border-
color value
➢ none - Defines no border
➢ hidden - Defines a hidden border
The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).

Program-12
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
CSS Border Width
The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using
one of the three pre-defined values: thin, medium, or thick:

Program-13
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
p.five {
border-style: double;
border-width: 15px;
}
p.six {
border-style: double;
border-width: thick;
}
</style>
</head><body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is
used alone.
Always specify the "border-style" property to set the borders first.</p>
</body>
</html>

CSS Border Color


The border-color property is used to set the color of the four borders. The
color can be set by:

➢ name - specify a color name, like "red"


➢ HEX - specify a HEX value, like "#ff0000"
➢ RGB - specify a RGB value, like "rgb(255,0,0)"
➢ HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
➢ transparent
Program-14
<html><head>
<style>
p.one {
border-style: solid;
border-color: red;}
p.two {
border-style: solid;
border-color: green;}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>
<p><b>Note:</b> The "border-color" property does not work if it is
used alone. Use the "border-style" property to set the borders
first.</p>
</body></html>
Specific Side Colors
The border-color property can have from one to four values (for the top
border, right border, bottom border, and the left border).
Program-15
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue
bottom and yellow left */
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>The border-color property can have from one to four values (for
the top border, right border, bottom border, and the left border):</p>
<p class="one">A solid multicolor border</p>
</body>
</html>
CSS Rounded Borders
Program-16
<html>
<head>
<style>
p.normal {
border: 2px solid red;
padding: 5px;}
p.round1 {
border: 2px solid red;
border-radius: 5px;
padding: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
padding: 5px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
padding: 5px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>
<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
</body>
</html>
The CSS Box Model
In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual content.
The image below illustrates the box model:

Explanation of the different parts:

➢ Content - The content of the box, where text and images appear
➢ Padding - Clears an area around the content. The padding is
transparent
➢ Border - A border that goes around the padding and content
➢ Margin - Clears an area outside the border. The margin is transparent

Program-17
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every
HTML element. It consists of: borders, padding, margins, and the actual
content.</p>
<div>This text is the content of the box. We have added a 50px padding,
20px margin and a 15px green border. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.</div>
</body>
</html>
Program-18
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263"
alt="Klematis">
<div>The picture above is 350px wide. The total width of this element
is also 350px.</div>
</body>
</html>
CSS List Properties
Program-19
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>

CSS Shadow Effects


With CSS you can add shadow to text and to elements.
In these chapters you will learn about the following properties:
➢ Text-shadow
➢ Box-shadow
CSS Text Shadow
Program-20
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>

Program-21
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>
<h1>Text-shadow with red neon glow!</h1>
</body>
</html>

Program-22
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body></html>
Program-23
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body></html>
CSS 2D Transforms
CSS transforms allow you to move, rotate, scale, and skew elements.
Mouse over the element below to see a 2D transformation:

CSS 2D Transforms Methods


With the CSS transform property you can use the following 2D
transformation methods:
➢ translate() ➢ skewX()
➢ rotate() ➢ skewY()
➢ scaleX() ➢ skew()
➢ scaleY() ➢ matrix()
➢ scale()

Program-24
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: rotate(20deg);
}
</style>
</head>
<body>
<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element clockwise or counter-
clockwise.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>
</body>
</html>

Program-25
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scale(2,3);
}
</style>
</head>
<body>
<h1>The scale() Method</h1>
<p>The scale() method increases or decreases the size of an
element.</p>
<div>
This div element is two times of its original width, and three times of
its original height.
</div>
</body>
</html>

Program-26
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: skewX(20deg);
}
</style>
</head>
<body>
<h1>The skewX() Method</h1>
<p>The skewX() method skews an element along the X-axis by the
given angle.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>
</body>
</html>

Program-27
<html>
<head><style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv1 {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
div#myDiv2 {
transform: matrix(1, 0, 0.5, 1, 150, 0);}
</style></head>
<body>
<h1>The matrix() Method</h1>
<p>The matrix() method combines all the 2D transform methods into
one.</p>
<div>
This a normal div element.
</div>
<div id="myDiv1">
Using the matrix() method.
</div>
<div id="myDiv2">
Another use of the matrix() method.
</div></body></html>
CSS 3D Transforms
CSS also supports 3D transformations.
Mouse over the elements below to see the difference between a 2D and a
3D transformation:
Program-28
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateX(150deg);
}
</style>
</head>
<body>
<h1>The rotateX() Method</h1>
<p>The rotateX() method rotates an element around its X-axis at a
given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>
</body>
</html>
Program-29
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateY(150deg);
}
</style>
</head>
<body>
<h1>The rotateY() Method</h1>
<p>The rotateY() method rotates an element around its Y-axis at a
given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>
</body>
</html>

Program-30
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<h1>The rotateZ() Method</h1>
<p>The rotateZ() method rotates an element around its Z-axis at a
given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 90 degrees.
</div>
</body>
</html>
CSS Animations
CSS allows animation of HTML elements without using JavaScript or Flash!
In this chapter you will learn about the following properties:
➢ @keyframes ➢ animation-direction
➢ animation-name ➢ animation-timing-function
➢ animation-duration ➢ animation-fill-mode
➢ animation-delay ➢ animation
➢ animation-iteration-count

Program-31
<html>
<head>
<style>
div
{
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example
{
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p>
<b>Note:</b> When an animation is finished, it goes back to its
original style.
</p>
</body>
</html>

Program-32
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its
original style.</p>
</body>
</html>

Program-33
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its
original style.</p>
</body>
</html>
Program-34
<html>
<head>
<style>
div {
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s infinite;
}
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-timing-function property specifies the speed curve
of the animation. The following example shows some of the different
speed curves that can be used:</p>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>
CSS Styling Images
Program-35
<html>
<head>
<style>
img {
border-radius: 20px;
border: 3px solid blue;
}
</style>
</head>
<body>
<h2>Rounded Image</h2>
<img src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg"
alt="Online Compiler" width="300" height="300">
</body>
</html>
Program-36
<html>
<head>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
</style>
</head>
<body>
<h2>Thumbnail Image</h2>
<p>Use the border property to create thumbnail images:</p>
<img src="paris.jpg" alt="Paris" style="width:150px">
</body>
</html>
Program-37
<html>
<head>
<style>
body {margin:25px;}
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,
0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
</style>
</head>
<body>
<h2>Responsive Polaroid Images / Cards</h2>
<div class="polaroid">
<img src="img_5terre.jpg" alt="5 Terre" style="width:100%">
<div class="container">
<p>Cinque Terre</p>
</div>
</div>
<div class="polaroid">
<img src="lights600x400.jpg" alt="Norther Lights"
style="width:100%">
<div class="container">
<p>Northern Lights</p>
</div>
</div>
</body>
</html>

CSS Image Reflections


The box-reflect property is used to create an image reflection.
The value of the box-reflect property can be: below, above, left , or right.
Program-38
<html>
<head>
<style>
img {
-webkit-box-reflect: right;
}
</style>
</head>
<body>
<h1>CSS Image Reflection</h1>
<p>Show the reflection to the right of the image:</p>
<img src="img_tree.png">
</body>
</html>

Program-39
<html>
<head>
<style>
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom,
rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
</style>
</head>
<body>
<h1>CSS Image Reflection</h1>
<p>Show the reflection with gradient (to make a fade-out effect):</p>
<img src="img_tree.png">
</body>
</html>

CSS Masking
Program-40
<html>
<head>
</head>
<body>
<h1>The mask-image Property</h1>
<h3>An SVG mask layer (formed as a triangle):</h3>
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image
xlink:href="img_5terre.jpg"
mask="url(#svgmask1)"></image></svg>
<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600"
height="400">
</body>
</html>

Program-41
<html>
<head>
</head>
<body>
<h1>The mask-image Property</h1>
<h3>An SVG mask layer (formed as a star):</h3>
<svg width="600" height="400">
<mask id="svgmask2">
<polygonfill="#ffffff"points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image
xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600"
height="400">
</body>
</html>

Program-42
<html>
<head>
</head>
<body>
<h1>The mask-image Property</h1>
<h3>An SVG mask layer (formed as circles):</h3>
<svg width="600" height="400">
<mask id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
<circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
<circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
</mask>
<image
xlink:href="img_5terre.jpg" mask="url(#svgmask3)"></image>
</svg>
<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600"
height="400">
</body>
</html>
CSS Buttons
Program-43
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
</style>
</head><body>
<h2>Button Colors</h2>
<p>Change the background color of a button with the background-
color property:</p>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>
Button Sizes
Program-44
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;}
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>
<h2>Button Sizes</h2>
<p>Change the font size of a button with the font-size property:</p>
<button class="button button1">10px</button>
<button class="button button2">12px</button>
<button class="button button3">16px</button>
<button class="button button4">20px</button>
<button class="button button5">24px</button>
</body>
</html>

Rounded Buttons
Program-45
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style></head>
<body>
<h2>Rounded Buttons</h2>
<p>Add rounded corners to a button with the border-radius
property:</p>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>
</body> </html>
Button on Image
Program-46
<html>
<head>
<style>
.container
{
position: relative;
width: 100%;
max-width: 400px;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #f1f1f1;
color: black;
font-size: 16px;
padding: 16px 30px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Button on Image</h2>
<p>Add a button on an image:</p>
<div class="container">
<img src="img_lights.jpg" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>
</body>
</html>

Animated Buttons
Program-47
<html>
<head>
<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<h2>Animated Button</h2>
<buttonclass="button"style="vertical-align:middle"><span>Hover
</span></button>
</body>
</html>

Responsive Web Design


Program-48
<html>
<head>
<style>
*{
box-sizing: border-box;
}

video {
width: 100%;
height: auto;
}
.row:after {
content: "";
clear: both;
display: table;
}

[class*="col-"] {
float: left;
padding: 15px;
width: 100%;
}

@media only screen and (min-width: 600px) {


.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {


.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

html {
font-family: "Lucida Sans", sans-serif;
}

.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}

.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
background-color: #0099cc;
}

.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<h1>ACTC COMPUTER EDUCATION</h1>
</div>
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>EACCOUNTING</li>
<li>DCA/WD</li>
<li>TALLY PRIME</li>
<li>ADV. EXCEL</li>
</ul>
</div>
<div class="col-6 col-s-9">
<h1>PREFACE</h1>
<p>The prestigious ACTC a career institute is runs since 1999.
This chain is started by Mr.B.S Negi.It is situated admidst the
commercial centres on the khanpur,badarpur,ashram,faridabad &
noida. </p>
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>What?</h2>
<p>Computer Education</p>
<h2>Where?</h2>
<p>215 Devli road Khanpur New delhi 110062</p>
<h2>Highlighted Course</h2>
<p>D.C.A/W.D,D.C.A/TALLY,E-ACCOUNTING,ADVANCE
EXCEL,GRAPHIC DESIGNING,WEB DESIGNING,SPOKEN
ENGLISH,C,C++,MIS,CORE JAVA,PYTHON, </div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the
resizing.</p>
</div>
</body>
</html>

You might also like