Web Design and

development
Lecture 7
Course Instructor: Wardah Mahmood
Email Id: wardah.mahmood@riphah.edu.pk
CSS3
• CSS3 is the latest version of the CSS specification. It adds new features to help
developers solve a number of problems without the need for non-semantic markup,
complex scripting, or extra images.
What You Already Know?
A CSS rule has two main parts:
a selector, and one or more declarations:

• The selector is normally the HTML element you want to style.

• Each declaration consists of a property and a value.

• The property is the style attribute you want to change. Each property has a value.

W3Schools: http://www.w3schools.com/css/
What New in CSS3?
• Box-sizing
Method of specifying whether or not an element's borders and padding should be included in size units
• Opacity
Method of setting the transparency level of an element
• Text-overflow
Append ellipsis when text overflows its containing element
• @font-face Web fonts
Method of displaying fonts downloaded from websites
• Colors
Method of describing colors using Hue, Saturation and Lightness (hsl()) rather than just RGB, as well as allowing
alpha-transparency with rgba() and hsla().
• Media Queries
Method of applying styles based on media information. E.g., device dimensions
What New in CSS3?
• Selectors
Advanced element selection using selectors like :nth-child(), :last-child, etc.
• Multiple backgrounds
Method of using multiple images as a background
• Background-image options
New properties to affect background images, including background-clip, background-origin and background-size
• Border-radius
Method of making the border corners round
• Transforms
Method of transforming an element including rotating, scaling, etc.
• Box-shadow
Method of displaying an inner or outer shadow effect to elements
• Text-shadow
Method of applying one or more shadow or blur effects to text
What New in CSS3?
• Transitions
Simple method of animating certain properties of an element
• Animation
Complex method of animating certain properties of an element
• Border images
Method of using images for borders
• Multiple column layout
Method of flowing information in multiple columns
• 3D Transforms
Method of transforming an element in the third dimension
Vendor Prefixes
• Web browser vendors can implement their own extensions to the CSS specifications
that are proprietary to their browser.
• Usually these extensions are used to test browser features that have been developed in
the preparation of W3C drafts that have not yet reached Candidate Recommendation
status
Vendor Prefixes
Example:
div {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}

Prefix Browser
-ms- Microsoft
-o- Opera
-moz- Mozilla
-webkit- Safari
CSS3 Border Radius
• With CSS3 you can use border-radius property to create rounded corners on borders
• For different radius on different corners, specify radius in the following order: top-
left, top-right, bottom-right, and bottom-left

div.same {
-webkit-border-radius: 25px;
border-radius: 25px;
}
div.different {
-webkit-border-radius: 5px 15px 20px 10px;
border-radius: 5px 15px 20px 10px;
}
CSS3 Backgrounds
• The background-size property specifies the size of the background image, which
allows us to re-use background images in different contexts.
• You can specify the size in pixels or in percentages. If you specify the size as a
percentage, the size is relative to the width and height of the parent element.

div.small {
background: #fff url(logo.jpg) no-repeat center center;
background-size: 50% 50%;
}
div.fit {
background: url(logo.jpg) no-repeat center center;
background-size: 100% 100%;
}
Full Size CSS3 Backgrounds
• To have a background image on a website that covers the entire browser
window at all times, we can set a fixed and centered background on html
element (better than body as it is always at least the height of the browser
window), then adjust its size with the background-size: cover keyword

html {
background: url(logo.jpg) no-repeat center center fixed;
background-size: cover;
}
CSS3 Box Shadow
• The box-shadow property allows designers to easily implement multiple drop shadows
(outer or inner) on box elements, specifying values for color, size, blur and offset.

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

.box {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
div.different {
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}
CSS3 Opacity & RGBA
• The most widely implemented feature of CSS3 up till now is opacity. It sets the
transparency of an element.
• RGBA color values are an extension of RGB color values with an alpha channel - which
specifies the opacity for a color.

.usingOpacity {
background-color: rgb(255,204,0);
opacity: 0.5;
}
.usingRGBA {
background-color: rgba(255,204,0,0.5);
}
CSS3 Text Shadows
• The CSS3 text-shadow property applies shadow to text.
• In its simplest use, you only specify the horizontal shadow and the vertical
shadow.

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

h1.txtshadow {
text-shadow: 2px 2px 2px #ccc;
}

See Example: CSS3 Text Shadow

CSS3 Web Fonts
• Web fonts allow Web designers to use fonts that are not installed on the user's computer.
• When you have found/bought the font you wish to use, just include the font file on your
web server, and it will be automatically downloaded to the user when needed.

@font-face {
font-family: myFont;
src: url(FrancoisOne.ttf);
}

div {
font-family: myFont;
}
CSS3 Media Queries
• Media queries allow you to customize the presentation of your web pages
for a specific range of devices like mobile phones, tablets, desktops, etc.
without any change in markups.
• A media query consists of a media type and zero or more expressions that
match the type and conditions of a particular media features such as
device width or screen resolution.
• Example:
• https://www.tutorialrepublic.com/codelab.php?topic=css3&file=media-
queries
Web Browser Support
• Not all web browsers support all new features.

• Different version of a web browser support different features.

• Difficult to keep up with which web browser support which feature.

• Equally important is changing market share of different web browsers.

Web Browser Market Share

January-February 2017 (Desktop Browser Version Market Share)