Scribd
Upload
4 views2 pages

CSS Positioning and Shadow Effects

The document contains two web programming practicals focusing on CSS. Program 4 demonstrates various CSS positioning and layout techniques including static, relative, absolute, and fixed positioning, as well as flexbox and grid layouts. Program 5 showcases CSS shadow effects, including normal, multiple, hover, and inset shadows applied to styled boxes.

Uploaded by

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

CSS Positioning and Shadow Effects

The document contains two web programming practicals focusing on CSS. Program 4 demonstrates various CSS positioning and layout techniques including static, relative, absolute, and fixed positioning, as well as flexbox and grid layouts. Program 5 showcases CSS shadow effects, including normal, multiple, hover, and inset shadows applied to styled boxes.

Uploaded by

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

WEB PROGRAMMING PRACTICAL – Program 4 & 5

Program 4: CSS Positioning and Layout

<!DOCTYPE html>
<html>
<head>
<title>CSS Positioning and Layout</title>
<style>
.box {
width: 160px;
height: 80px;
padding: 10px;
color: white;
font-weight: bold;
margin: 10px;
}
.static { background: #1abc9c; position: static; }
.relative { background: #3498db; position: relative; left: 30px; top: 10px; }
.absolute { background: #9b59b6; position: absolute; top: 250px; left: 40px; }
.fixed { background: #e74c3c; position: fixed; right: 10px; bottom: 10px; }
.flex-container { display: flex; gap: 10px; background: #ddd; padding: 10px; margin-top:
220px; }
.flex-item { background: #2ecc71; padding: 20px; flex: 1; text-align: center; font-weight:
bold; }
.grid-container { display: grid; grid-template-columns: auto auto auto; gap: 10px;
background: #ddd; padding: 10px; margin-top: 20px; }
.grid-item { background: #f39c12; padding: 20px; font-weight: bold; text-align: center; }
</style>
</head>
<body>
<h2>CSS Positioning Examples</h2>
<div class="box static">Static Position</div>
<div class="box relative">Relative Position</div>
<div class="box absolute">Absolute Position</div>
<div class="box fixed">Fixed Position</div>
<h2>Flexbox Layout</h2>
<div class="flex-container">
<div class="flex-item">Flex 1</div>
<div class="flex-item">Flex 2</div>
<div class="flex-item">Flex 3</div>
</div>
<h2>Grid Layout</h2>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>

Program 5: CSS Shadow Effects

<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Effects</title>
<style>
body { font-family: Arial; }
.text-shadow { font-size: 40px; text-align: center; margin-top: 20px; color: #2c3e50;
text-shadow: 3px 3px 5px gray; }
.box { width: 200px; padding: 20px; margin: 20px auto; background: #3498db; color:
white; font-size: 20px; border-radius: 8px; text-align: center; box-shadow: 5px 5px 10px
#555; }
.multi-shadow { background: #e74c3c; box-shadow: 3px 3px 8px #444, -3px -3px 8px
#999; }
.hover-box { background: #2ecc71; transition: 0.4s; }
.hover-box:hover { box-shadow: 0px 0px 20px black; }
.inset-shadow { background: #f1c40f; box-shadow: inset 4px 4px 8px #7f8c8d; }
</style>
</head>
<body>
<h2 class="text-shadow">Shadow Effects in CSS</h2>
<div class="box">Normal Shadow</div>
<div class="box multi-shadow">Multiple Shadows</div>
<div class="box hover-box">Hover Shadow</div>
<div class="box inset-shadow">Inset Shadow</div>
</body>
</html>

You might also like