Lecture 1

CSS3
What is CSS3?
Cascading Style Sheets (CSS) is a style sheet
language used for describing the presentation
of a document written in a markup language.
In this blog we will be looking into some of the
properties of CSS3.
2
The main purpose of CSS3
⦁ CSS is designed primarily to enable the separation
of document content from document
presentation, including aspects such as the
layout, colors, and fonts.
⦁ It can also be used to display the web page
differently which can change depending on your
screen size.
⦁ Changes to the design of a document can be
applied quickly and easily. CSS3 is a latest
standard of earlier versions(CSS2).
3
Difference
The main difference between CSS2 and CSS3 is
as follows:
⦁ Media Queries
⦁ Namespaces
⦁ Selectors Level 3
⦁ Color
Some of the most important CSS3 modules are:
⦁ Selectors
⦁ Box Model
⦁ Backgrounds and Borders
⦁ Image Values and Replaced Content
⦁ Text Effects
⦁ 2D/3D Transformations
⦁ Animations
⦁ Multiple Column Layout
⦁ User Interface
4
1. CSS3 Rounded Corners
With CSS3 we have got a new property called border-radius,
which is used to give “rounded corners” to square boxes. With
the rounded corners you can create boxes with background
color or without background-color but with border or it can
be with background-image.
Example: for border-radius property with a background-color:
5
Example
Output
7
CSS3 border-radius - Specify Each
Corner
There are 4 different ways to specify border-radius property.
Here are the rules:
⦁ Four values: first value for top-left, second value for top-right,
third value for bottom-right, and fourth value for bottom-left
corner
⦁ Three values: first value for top-left, second value for top-right
and bottom-left, and third value for bottom-right
⦁ Two values: first value for top-left and bottom-right corner, and
the second value for top right and bottom-left corner
⦁ One value: all four corners are rounded equally
2. CSS3 Border image
By using CSS3 border-image property we can add image boarder
to some elements. It allows to specify an image to be used
instead of the normal border around an element. The border-image
property takes the image and slices it into nine sections. It will then
place the corners at the corners, and the middle sections are repeated
or stretched as you specify.
Some of the properties of border-image:
⦁ border-image-source: Used to set the image path
⦁ border-image-slice: Used to slice the boarder image
⦁ border-image-width: Used to set the boarder image width
⦁ border-image-repeat: Used to set the boarder image as rounded, repeated
and stretched
9
Example
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
padding: 15px;
border-image: url(border.png) 20% round;
}
10
Example
#borderimg3 {
padding: 15px;
border-image: url(border.png) 30% round;
}
</style>
</head>
Example
<body>
<h1>The border-image Property</h1>
<p id="borderimg1">border-image: url(border.png) 50 round;</p>

<p id="borderimg2">border-image: url(border.png) 20% round;</p>
<p id="borderimg3">border-image: url(border.png) 30% round;</p>
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support

the border-image property.</p>
</body>
</html>
Output
3. Multi Background
CSS Multi background property is used to add one or more
images at a time without HTML code.
We can add images as per our requirement. This property can be
used when you are required to
have multiple background images in a single div
The most commonly used values are shown below
⦁ Background: Used to setting all the background image
properties in one section
⦁ background-clip: painting area of the background
⦁ background-origin: position of the background images
⦁ background-size: size of the background images 4.
3. Multi Background
As we know CSS supports color property and in CSS3 we can
apply the color in 4 different ways
i.e.
i) RGBA colors syntax: {background-color: rgba(255, 0, 0, 0.5);}
ii) HSL colors syntax: {background-color: hsl(120, 105%, 58%);}
iii) HSLA colors syntax: {background-color: hsla(120, 10%, 85%,
0.3);}
iv) Opacity syntax: {background-color:rgb(0,255,0);opacity:0.6;}
Example
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right
bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
background-size: 50px, 130px, auto;
}
</style>
</head>
<body>
Example
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.</p>
</div>
</body>
</html>
Output
Introduction to Bootstrap
• Bootstrap is a free front-end framework for
faster and easier web development
• Bootstrap includes HTML and CSS based
design templates for typography, forms,
buttons, tables, navigation, modals, image
carousels and many other, as well as optional
JavaScript plugins
• Bootstrap also gives you the ability to easily
create responsive designs
Advantages of Bootstrap
• Easy to use: Anybody with just basic knowledge of
HTML and CSS can start using Bootstrap
• Responsive features: Bootstrap's responsive CSS
adjusts to phones, tablets, and desktops
• Mobile-first approach: In Bootstrap 3, mobile-first
styles are part of the core framework
• Browser compatibility: Bootstrap is compatible with
all modern browsers (Chrome, Firefox, Internet
Explorer, Edge, Safari, and Opera)
Where to Get Bootstrap?
There are two ways to start using Bootstrap on
your own web site.
• Download Bootstrap from getbootstrap.com
• Include Bootstrap from a CDN
Bootstrap CDN

<link rel="stylesheet"href="https://maxcdn.bootstra
pcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jq
uery/3.3.1/jquery.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/boot
strap/3.4.0/js/bootstrap.min.js"></script>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet“
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.m
in.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></s
cript>
Example
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.
js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the
entire width of the viewport.</p>
</div>
</body>
</html>
Output
Carousel Example
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
in.css">
<script
cript>
<script
js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="ny.jpg" alt="New york" style="width:100%;">
</div>
</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Output
Bootstrap Template
<!DOCTYPE html>
<html lang="en">
<head>
in.css">
<script
cript>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></sc
ript>
<style>
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 550px}
/* Set gray background color and 100% height */

.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* On small screens, set height to 'auto' for the grid */

@media screen and (max-width: 767px) {
.row.content {height: auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse visible-xs">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Dashboard</a></li>
<li><a href="#">Age</a></li>
<li><a href="#">Gender</a></li>
<li><a href="#">Geo</a></li>
</ul>
</div>
</div>
</nav>
<div class="row content">
<div class="col-sm-3 sidenav hidden-xs">
<h2>Logo</h2>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">Dashboard</a></li>
<li><a href="#section2">Age</a></li>
<li><a href="#section3">Gender</a></li>
<li><a href="#section3">Geo</a></li>
</ul><br>
</div>
<br>
<div class="col-sm-9">
<div class="well">
<h4>Dashboard</h4>
<p>Some text..</p>
</div>
<div class="row">
<div class="well">
<h4>Users</h4>
<p>1 Million</p>
</div>
</div>
<div class="well">
<h4>Pages</h4>
<p>100 Million</p>
</div>
</div>
<div class="well">
<h4>Sessions</h4>
<p>10 Million</p>
</div>
</div>
<div class="well">
<h4>Bounce</h4>
<p>30%</p>
</div>
</div>
</div>
<div class="row">
<div class="well">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
</div>
<div class="well">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
</div>
<div class="well">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
</div>
</div>
<div class="row">
<div class="well">
<p>Text</p>
</div>
</div>
<div class="well">
<p>Text</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap Theme
<!DOCTYPE html>
<html lang="en">
<head>

<title>Bootstrap Theme Simply Me</title>
in.css">
<script
cript>
<script
js"></script>
<style>
.bg-1 {
background-color: #1abc9c;
color: #ffffff;
}
.bg-2 {
background-color: #474e5d;
color: #ffffff;
}
.bg-3 {
background-color: #ffffff;
color: #555555;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
</head>
<body>
<div class="container-fluid bg-1 text-center">

<h3>Who Am I?</h3>
<img src="bird.jpg" class="img-circle" alt="Bird" width="350" height="350">
<h3>I'm an adventurer</h3>
</div>
<h3>What Am I?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. </p>
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
</div>

<h3>Where To Find Me?</h3><br>
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="birds1.jpg" alt="Image" width="350" height="300">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JQuery
• JQuery is a lightweight, "write less, do more",
JavaScript library.
• The purpose of jQuery is to make it much easier to
use JavaScript on your website.
• jQuery takes a lot of common tasks that require
many lines of JavaScript code to accomplish, and
wraps them into methods that you can call with a
single line of code.
• jQuery also simplifies a lot of the complicated things
from JavaScript, like AJAX calls and DOM
manipulation.
JQuery
The JQuery library contains the following
features:
• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities
Why JQuery?
There are lots of other JavaScript frameworks
out there, but jQuery seems to be the most
popular, and also the most extendable.
Many of the biggest companies on the Web use
jQuery, such as:
• Google
• Microsoft
• IBM
• Netflix
Example
<!DOCTYPE html>
<html>
<head>
<script
cript>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none; }
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
Output
Output

Lecture 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 1

Uploaded by

Copyright:

Available Formats

CSS3

<h1>The border-image Property</h1>

<p id="borderimg1">border-image: url(border.png) 50 round;</p>

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support

/* Set gray background color and 100% height */

/* On small screens, set height to 'auto' for the grid */

<div class="container-fluid bg-1 text-center">

<div class="container-fluid bg-3 text-center">

You might also like