Scribd
Upload
13 views

CSS 3

Uploaded by

shahmirwordpress11
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

CSS 3

Uploaded by

shahmirwordpress11
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

Navigation Bar

Vertical Navigation Bar


Create a basic vertical navigation bar with a gray background
color and change the background color of the links when the
user moves the mouse over them:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px; <ul>
background-color: #f1f1f1; <li><a href="#home">Home</a></li>
} <li><a href="#news">News</a></li>
li a { <li><a href="#contact">Contact</a></li>
display: block; <li><a href="#about">About</a></li>
color: #000; </ul>
padding: 8px 16px;
text-decoration: none;}
li a:hover {
background-color: #555;
color: white;
}
Active/Current Navigation Link

Add an "active" class to the current link to let the user know
which page he/she is on:

li a.active {
background-color: #04AA6D;
color: white;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}
Horizontal Navigation Bar
Create a basic horizontal navigation bar with a dark background
color and change the background color of the links when the
user moves the mouse over them:
<style> text-decoration: none;
ul { }
list-style-type: none; <body>
margin: 0; li a:hover:not(.active) {
padding: 0; background-color: #111; <ul>
overflow: hidden; } <li><a class="active"
background-color: #333; href="#home">Home</a></li>
} .active { <li><a href="#news">News</a></li>
background-color: #04AA6D; <li><a href="#contact">Contact</a></li>
li { } <li><a href="#about">About</a></li>
float: left; </style> </ul>
}
</body>
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
Right-Align Links
Right-align links by floating the list items to the right (float:right;):
<style> li a:hover:not(.active) {
ul { background-color: #111;
list-style-type: none; }
margin: 0;
padding: 0; .active {
overflow: hidden; background-color: #04AA6D;
background-color: #333; }
} </style>
</head>
li { <body>
float: left;
} <ul>
<li><a href="#home">Home</a></li>
li a { <li><a href="#news">News</a></li>
display: block; <li><a href="#contact">Contact</a></li>
color: white; <li style="float:right"><a class="active"
text-align: center; href="#about">About</a></li>
padding: 14px 16px; </ul>
text-decoration: none;
} </body>
Fixed Navigation Bar
Make the navigation bar stay at the top or the bottom of the
page, even when the user scrolls the page: <body>
<style> li a {
body {margin:0;} display: block; <ul>
color: white; <li><a class="active"
ul { text-align: center; href="#home">Home</a></li>
list-style-type: none; padding: 14px 16px; <li><a href="#news">News</a></li>
margin: 0; text-decoration: none; <li><a href="#contact">Contact</a></li>
padding: 0; } <li><a href="#about">About</a></li>
overflow: hidden; </ul>
background-color: #333; li a:hover:not(.active) {
position: fixed; background-color: #111; <div style="padding:20px;margin-
top: 0; } top:30px;background-
width: 100%; color:#1abc9c;height:1500px;">
} .active { <h1>Fixed Top Navigation Bar</h1>
background-color: #04AA6D; <h2>Scroll this page to see the effect</h2>
li { } <h2>The navigation bar will stay at the top of the
float: left; </style> page while scrolling</h2>
}
<p>Some text some text some text some
text..</p>
</body>
Sticky Navbar
Add position: sticky; to <ul> to create a sticky navbar.
A sticky element toggles between relative and fixed, depending on the scroll position.
It is positioned relative until a given offset position is met in the viewport - then it "sticks" in
place (like position:fixed).
<style>
body { li a {
font-size: 28px; display: block;
} color: white;
text-align: center;
ul { padding: 14px 16px;
list-style-type: none; text-decoration: none;
margin: 0; }
padding: 0;
overflow: hidden; li a:hover {
background-color: #333; background-color: #111;
position: -webkit-sticky; /* Safari */ }
position: sticky;
top: 0; .active {
} background-color: #4CAF50;
}
li { </style>
float: left;
}>
<body> <p>In publishing and graphic design, Lorem ipsum is a
placeholder text commonly used to demonstrate the visual form
<ul> of a document or a typeface without relying on meaningful
<li><a class="active" href="#home">Home</a></li> content. Lorem ipsum may be used as a placeholder before final
<li><a href="#news">News</a></li> copy is available..</p>
<li><a href="#contact">Contact</a></li> <p>In publishing and graphic design, Lorem ipsum is a
</ul> placeholder text commonly used to demonstrate the visual form
of a document or a typeface without relying on meaningful
<h3>Sticky Navigation Bar Example</h3> content. Lorem ipsum may be used as a placeholder before final
<p>The navbar will <strong>stick</strong> to the top when copy is available..</p>
you reach its scroll position.</p> <p>In publishing and graphic design, Lorem ipsum is a
<p><strong>Note:</strong> Internet Explorer do not support placeholder text commonly used to demonstrate the visual form
sticky positioning and Safari requires a -webkit- prefix.</p> of a document or a typeface without relying on meaningful
<p>In publishing and graphic design, Lorem ipsum is a content. Lorem ipsum may be used as a placeholder before final
placeholder text commonly used to demonstrate the visual form copy is available..</p>
of a document or a typeface without relying on meaningful <p>In publishing and graphic design, Lorem ipsum is a
content. Lorem ipsum may be used as a placeholder before final placeholder text commonly used to demonstrate the visual form
copy is available..</p> of a document or a typeface without relying on meaningful
content. Lorem ipsum may be used as a placeholder before final
copy is available.</p>
<p>In publishing and graphic design, Lorem ipsum is a
placeholder text commonly used to demonstrate the visual form
of a document or a typeface without relying on meaningful
content. Lorem ipsum may be used as a placeholder before final
copy is available..</p>
<p>In publishing and graphic design, Lorem ipsum is a
placeholder text commonly used to demonstrate the visual form
of a document or a typeface without relying on meaningful
content. Lorem ipsum may be used as a placeholder before final
copy is available..</p>

</body
CSS Image Gallery
Execute Image gallery code example to understand
Forms Styling
The look of an HTML form can be greatly improved with CSS:
<h3>Using CSS to style an HTML Form</h3>
<style>
<div>
input[type=text], select {
<form action="/action_page.php">
width: 100%;
<label for="fname">First Name</label>
padding: 12px 20px;
<input type="text" id="fname" name="firstname"
margin: 8px 0;
placeholder="Your name..">
display: inline-block;
border: 1px solid #ccc;
input[type=submit]:hover { <label for="lname">Last Name</label>
border-radius: 4px;
background-color: #45a049; <input type="text" id="lname" name="lastname"
box-sizing: border-box;
} placeholder="Your last name..">
}
div { <label for="country">Country</label>
input[type=submit] {
border-radius: 5px; <select id="country" name="country">
width: 100%;
background-color: #f2f2f2; <option value="australia">Australia</option>
background-color: #4CAF50;
padding: 20px; <option value="canada">Canada</option>
color: white;
} <option value="usa">USA</option>
padding: 14px 20px;
</style> </select>
margin: 8px 0;
border: none;
<input type="submit" value="Submit">
border-radius: 4px;
</form>
cursor: pointer;
</div>
}
Padded input fields Bordered Inputs
<style>
<style>
input[type=text] {
input[type=text] {
width: 100%;
width: 100%;
padding: 12px 20px;
padding: 12px 20px;
margin: 8px 0;
margin: 8px 0;
box-sizing: border-box;
box-sizing: border-box;
border: 2px solid red;
}
border-radius: 4px;
</style>
}
</head>
</style>
<body>
</head>
<body>
<h2>Padded input fields</h2>
<h2>Input fields with borders</h2>
<form>
<label for="fname">First Name</label>
<form>
<input type="text" id="fname" name="fname">
<label for="fname">First Name</label>
<label for="lname">Last Name</label>
<input type="text" id="fname" name="fname">
<input type="text" id="lname" name="lname">
<label for="lname">Last Name</label>
</form>
<input type="text" id="lname" name="lname">
</form>
</body>
</body>
Input field with an icon inside
If you want an icon inside the input, use the background-image property and position it
with the background-position property. Also notice that we add a large left padding to reserve
the space of the icon:
<head>
<style>
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('search.png');
<form>
background-position: 10px 10px;
<input type="text" name="search" placeholder="Search..">
background-repeat: no-repeat;
</form>
padding: 12px 20px 12px 40px;
}
</body>
</style>
</head>
<body>

<h2>Input field with an icon inside</h2>


Animated Search Input
use the CSS transition property to animate the width of the search input when it gets focus
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc; <body>
border-radius: 4px;
font-size: 16px; <h2>Animate width of search input</h2>
background-color: white;
background-image: url('searchicon.png'); <form>
background-position: 10px 10px; <input type="text" name="search" placeholder="Search..">
background-repeat: no-repeat; </form>
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out; </body>
}

input[type=text]:focus {
width: 100%;
}
</style>
</head>
Styling textarea
Use the resize property to prevent textareas from being resized
(disable the "grabber" in the bottom right corner)

<style> <h2>Styling textarea</h2>


textarea {
width: 100%; <p><strong>Tip:</strong> Use the resize property to prevent
height: 150px; textareas from being resized (disable the "grabber" in the
padding: 12px 20px; bottom right corner):</p>
box-sizing: border-box;
border: 2px solid #ccc; <form>
border-radius: 4px; <textarea>Some text...</textarea>
background-color: #f8f8f8; </form>
font-size: 16px;
resize: none;
}
</style>
Styling Select Menus

<style> <h2>Choose a Country</h2>


select {
width: 100%; <form>
padding: 16px 20px; <select id="country" name="country">
border: none; <option value="pk">Pakistan</option>
border-radius: 4px; <option value="ban">Bangladesh</option>
background-color: #f1f1f1; <option value="ind">India</option>
} <option value="sri">Srilanka</option>
</style> </select>
</form>
Styling Input Buttons

<style>
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px; <h2>Styling Buttons</h2>
text-decoration: none;
margin: 4px 2px; <input type="button" value="Button">
cursor: pointer; <input type="reset" value="Reset">
border-radius: 5px; <input type="submit" value="Submit">
}
</style>
Responsive Form
Resize the browser window to see the effect. When the screen is
less than 600px wide, make the two columns stack on top of
each other instead of next to each other.

Execute the responsive form examole

You might also like