SlideShare a Scribd company logo
1 of 18
Present by :
Deepak Mangal
MCA Student
What Is CSS3?
CSS3
•“CSS” is an acronym for Cascading Style Sheets, A web-based
markup language used to describe the look and formatting of a
website to the browser.
•The first iteration of CSS was published in late 1996, offering
support for font properties, colors for text and backgrounds as well
as alignment of text, images, tables and other web elements.
•The earliest CSS3 drafts were published in June 1999.
•CSS 3 is divided into several separate documents called
"modules".
•CSS3 has been split into "modules". It contains the "old CSS
specification" (which has been split into smaller pieces). In addition,
new modules are added.
• Some of the most important CSS3 modules are:
– Selectors
– Box Model
– Backgrounds and Borders
– Text Effects
– 2D/3D Transformations
– Animations
– Multiple Column Layout
– User Interface
CSS3 Modules
In CSS3, we can create rounded borders, add shadow to boxes, and
use an image as a border - without using a design program, like
Photoshop.
In CSS3 the following border properties are:-
--border-radius
--box-shadow
--border-image
CSS3 Borders
Borders-radius:
Adding rounded corners in CSS2 was tricky. We had to use different images for
each corner.
In CSS3, creating rounded corners is easy.
In CSS3, the border-radius property is used to create rounded corners:
div {
border: 2px solid;
border-radius: 25px;
}
Box-shadow:
In CSS3, the box-shadow property is used to add shadow to boxes:
div {
box-shadow: 10px 10px 5px #888888;
}
Background-size:
•The background-size property specifies the size of the background image.
•Before CSS3, the background image size was determined by the actual size of
the image. In CSS3 it is possible to specify the size of the background image,
which allows us to re-use background images in different contexts.
div {
background: url(img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
}
Text-Effects:
CSS3 contains several new text features.
In this chapter you will learn about the following text properties:
text-shadow
word-wrap
H1 {
text-shadow: 5px 5px 5px #FF0000;
}
Text-shadow:
Word-wrap:
H1 {
word-wrap: break-word;
}
CSS3 Transforms:
In CSS3 transform, we can move, scale, turn, spin, and stretch elements.
A transformation is an effect that lets an element change shape, size and position.
div {
transform: rotate(30deg);
transform: translate(50px,100px);
transform: scale(2,4);
transform: skew(30deg,20deg);
}
•translate()
•rotate()
•scale()
•skew()
CSS3 Transitions:
• In CSS3, we can add an effect when changing from one style to another,
without using Flash animations or Java Scripts.
•CSS3 transitions are effects that let an element gradually change from one style
to another.
div {
transition-delay: 2s;
}
Div:hover {
width: 300px;
}
CSS3 Multiple Columns:
In CSS3, we can create multiple columns for laying out text - like in newspapers!
In CSS3 the following multiple column properties are:
•column-count
•column-gap
•column-rule
div {
column-count: 3;
column-gap: 40px;
column-rule: 3px outset #ff00ff;
}
CSS3 User Interface:
In CSS3, some of the new user interface features are resizing elements, box
sizing, and outlining.
In CSS3 following user interface properties:
•resize
•box-sizing
•outline-offset
CSS3 Resizing:
•In CSS3, the resize property specifies whether or not an element should be
resizable by the user.
div {
border: 2px solid;
padding: 10px 40px;
width: 300px;
height: 100px;
resize: both;
overflow: auto;
}
CSS3 Outline Offset:
The outline-offset property offsets an outline, and draws it beyond the border
edge.
Outlines differ from borders in two ways:
•Outlines do not take up space
•Outlines may be non-rectangular
div {
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
}
CSS3 Browser Support
http://www.w3schools.com/cssref/css3_browsersupport.asp
What Is CSS3? - An Introduction to CSS3 Features
What Is CSS3? - An Introduction to CSS3 Features

More Related Content

What's hot (20)

Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
css.ppt
css.pptcss.ppt
css.ppt
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
CSS selectors
CSS selectorsCSS selectors
CSS selectors
 
Html ppt
Html pptHtml ppt
Html ppt
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 
CSS
CSSCSS
CSS
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
 
Css lecture notes
Css lecture notesCss lecture notes
Css lecture notes
 
javascript objects
javascript objectsjavascript objects
javascript objects
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
JavaScript - Chapter 11 - Events
 JavaScript - Chapter 11 - Events  JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
 

Viewers also liked

CSS3: A practical introduction (FT2010 talk)
CSS3: A practical introduction (FT2010 talk)CSS3: A practical introduction (FT2010 talk)
CSS3: A practical introduction (FT2010 talk)Lea Verou
 
Tutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 SiteTutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 SiteAdam Stewart
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3Gopi A
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptEdureka!
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5Robert Nyman
 
CSS3 secrets: 10 things you might not know about CSS3
CSS3 secrets: 10 things you might not know about CSS3CSS3 secrets: 10 things you might not know about CSS3
CSS3 secrets: 10 things you might not know about CSS3Lea Verou
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Aaron Gustafson
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScriptBryan Basham
 
Introduction to e business
Introduction to e businessIntroduction to e business
Introduction to e businessJohanna Heinonen
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptAmit Tyagi
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An IntroductionManvendra Singh
 

Viewers also liked (20)

CSS3: A practical introduction (FT2010 talk)
CSS3: A practical introduction (FT2010 talk)CSS3: A practical introduction (FT2010 talk)
CSS3: A practical introduction (FT2010 talk)
 
Css3 Presetation
Css3 PresetationCss3 Presetation
Css3 Presetation
 
Tutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 SiteTutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 Site
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
 
CSS3
CSS3CSS3
CSS3
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
New HTML5/CSS3 techniques
New HTML5/CSS3 techniquesNew HTML5/CSS3 techniques
New HTML5/CSS3 techniques
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
CSS3 secrets: 10 things you might not know about CSS3
CSS3 secrets: 10 things you might not know about CSS3CSS3 secrets: 10 things you might not know about CSS3
CSS3 secrets: 10 things you might not know about CSS3
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
Introduction to e business
Introduction to e businessIntroduction to e business
Introduction to e business
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Js ppt
Js pptJs ppt
Js ppt
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 

Similar to What Is CSS3? - An Introduction to CSS3 Features

CSS3 basics for beginners - Imrokraft
CSS3 basics for beginners - ImrokraftCSS3 basics for beginners - Imrokraft
CSS3 basics for beginners - Imrokraftimrokraft
 
Website trends 2012 presentation
Website trends 2012 presentationWebsite trends 2012 presentation
Website trends 2012 presentationFresh_Egg
 
New Elements & Features in CSS3
New Elements & Features in CSS3New Elements & Features in CSS3
New Elements & Features in CSS3Jamshid Hashimi
 
Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3Binu Paul
 
CSS3: The Next Generation Of Style
CSS3: The Next Generation Of StyleCSS3: The Next Generation Of Style
CSS3: The Next Generation Of StylejbellWCT
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksAndolasoft Inc
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondDenise Jacobs
 
Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3Gil Fink
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3Denise Jacobs
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondAndy Stratton
 
FFW Gabrovo PMG - CSS
FFW Gabrovo PMG - CSSFFW Gabrovo PMG - CSS
FFW Gabrovo PMG - CSSToni Kolev
 
SVG - Scalable Vector Graphics
SVG - Scalable Vector GraphicsSVG - Scalable Vector Graphics
SVG - Scalable Vector GraphicsShweta Sadawarte
 
Css3 shubelal
Css3   shubelalCss3   shubelal
Css3 shubelalShub
 

Similar to What Is CSS3? - An Introduction to CSS3 Features (20)

CSS3 basics for beginners - Imrokraft
CSS3 basics for beginners - ImrokraftCSS3 basics for beginners - Imrokraft
CSS3 basics for beginners - Imrokraft
 
Css 3 session1
Css 3 session1Css 3 session1
Css 3 session1
 
Website trends 2012 presentation
Website trends 2012 presentationWebsite trends 2012 presentation
Website trends 2012 presentation
 
New Elements & Features in CSS3
New Elements & Features in CSS3New Elements & Features in CSS3
New Elements & Features in CSS3
 
Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3
 
CSS3: The Next Generation Of Style
CSS3: The Next Generation Of StyleCSS3: The Next Generation Of Style
CSS3: The Next Generation Of Style
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
 
html5_css3
html5_css3html5_css3
html5_css3
 
Css3
Css3Css3
Css3
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
CSS
CSS CSS
CSS
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
 
Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
 
FFW Gabrovo PMG - CSS
FFW Gabrovo PMG - CSSFFW Gabrovo PMG - CSS
FFW Gabrovo PMG - CSS
 
SVG - Scalable Vector Graphics
SVG - Scalable Vector GraphicsSVG - Scalable Vector Graphics
SVG - Scalable Vector Graphics
 
Css3 shubelal
Css3   shubelalCss3   shubelal
Css3 shubelal
 

Recently uploaded

Amazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesAmazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesKrzysztofKkol1
 
Sending Calendar Invites on SES and Calendarsnack.pdf
Sending Calendar Invites on SES and Calendarsnack.pdfSending Calendar Invites on SES and Calendarsnack.pdf
Sending Calendar Invites on SES and Calendarsnack.pdf31events.com
 
VK Business Profile - provides IT solutions and Web Development
VK Business Profile - provides IT solutions and Web DevelopmentVK Business Profile - provides IT solutions and Web Development
VK Business Profile - provides IT solutions and Web Developmentvyaparkranti
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsChristian Birchler
 
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...Akihiro Suda
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsJean Silva
 
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...confluent
 
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Angel Borroy López
 
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Cizo Technology Services
 
Machine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their EngineeringMachine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their EngineeringHironori Washizaki
 
2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shardsChristopher Curtin
 
Patterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencePatterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencessuser9e7c64
 
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Natan Silnitsky
 
How to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationHow to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationBradBedford3
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZABSYZ Inc
 
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfExploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfkalichargn70th171
 
Powering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsPowering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsSafe Software
 
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxUI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxAndreas Kunz
 
SoftTeco - Software Development Company Profile
SoftTeco - Software Development Company ProfileSoftTeco - Software Development Company Profile
SoftTeco - Software Development Company Profileakrivarotava
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogueitservices996
 

Recently uploaded (20)

Amazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesAmazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
 
Sending Calendar Invites on SES and Calendarsnack.pdf
Sending Calendar Invites on SES and Calendarsnack.pdfSending Calendar Invites on SES and Calendarsnack.pdf
Sending Calendar Invites on SES and Calendarsnack.pdf
 
VK Business Profile - provides IT solutions and Web Development
VK Business Profile - provides IT solutions and Web DevelopmentVK Business Profile - provides IT solutions and Web Development
VK Business Profile - provides IT solutions and Web Development
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
 
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero results
 
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
 
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
 
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
 
Machine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their EngineeringMachine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their Engineering
 
2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards
 
Patterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencePatterns for automating API delivery. API conference
Patterns for automating API delivery. API conference
 
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
 
How to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationHow to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion Application
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZ
 
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfExploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
 
Powering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsPowering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data Streams
 
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxUI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
 
SoftTeco - Software Development Company Profile
SoftTeco - Software Development Company ProfileSoftTeco - Software Development Company Profile
SoftTeco - Software Development Company Profile
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogue
 

What Is CSS3? - An Introduction to CSS3 Features

  • 1. Present by : Deepak Mangal MCA Student
  • 3. CSS3 •“CSS” is an acronym for Cascading Style Sheets, A web-based markup language used to describe the look and formatting of a website to the browser. •The first iteration of CSS was published in late 1996, offering support for font properties, colors for text and backgrounds as well as alignment of text, images, tables and other web elements. •The earliest CSS3 drafts were published in June 1999. •CSS 3 is divided into several separate documents called "modules".
  • 4. •CSS3 has been split into "modules". It contains the "old CSS specification" (which has been split into smaller pieces). In addition, new modules are added. • Some of the most important CSS3 modules are: – Selectors – Box Model – Backgrounds and Borders – Text Effects – 2D/3D Transformations – Animations – Multiple Column Layout – User Interface CSS3 Modules
  • 5. In CSS3, we can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop. In CSS3 the following border properties are:- --border-radius --box-shadow --border-image CSS3 Borders
  • 6. Borders-radius: Adding rounded corners in CSS2 was tricky. We had to use different images for each corner. In CSS3, creating rounded corners is easy. In CSS3, the border-radius property is used to create rounded corners: div { border: 2px solid; border-radius: 25px; }
  • 7. Box-shadow: In CSS3, the box-shadow property is used to add shadow to boxes: div { box-shadow: 10px 10px 5px #888888; }
  • 8. Background-size: •The background-size property specifies the size of the background image. •Before CSS3, the background image size was determined by the actual size of the image. In CSS3 it is possible to specify the size of the background image, which allows us to re-use background images in different contexts. div { background: url(img_flwr.gif); background-size: 80px 60px; background-repeat: no-repeat; }
  • 9. Text-Effects: CSS3 contains several new text features. In this chapter you will learn about the following text properties: text-shadow word-wrap H1 { text-shadow: 5px 5px 5px #FF0000; } Text-shadow: Word-wrap: H1 { word-wrap: break-word; }
  • 10. CSS3 Transforms: In CSS3 transform, we can move, scale, turn, spin, and stretch elements. A transformation is an effect that lets an element change shape, size and position. div { transform: rotate(30deg); transform: translate(50px,100px); transform: scale(2,4); transform: skew(30deg,20deg); } •translate() •rotate() •scale() •skew()
  • 11. CSS3 Transitions: • In CSS3, we can add an effect when changing from one style to another, without using Flash animations or Java Scripts. •CSS3 transitions are effects that let an element gradually change from one style to another. div { transition-delay: 2s; } Div:hover { width: 300px; }
  • 12. CSS3 Multiple Columns: In CSS3, we can create multiple columns for laying out text - like in newspapers! In CSS3 the following multiple column properties are: •column-count •column-gap •column-rule div { column-count: 3; column-gap: 40px; column-rule: 3px outset #ff00ff; }
  • 13. CSS3 User Interface: In CSS3, some of the new user interface features are resizing elements, box sizing, and outlining. In CSS3 following user interface properties: •resize •box-sizing •outline-offset
  • 14. CSS3 Resizing: •In CSS3, the resize property specifies whether or not an element should be resizable by the user. div { border: 2px solid; padding: 10px 40px; width: 300px; height: 100px; resize: both; overflow: auto; }
  • 15. CSS3 Outline Offset: The outline-offset property offsets an outline, and draws it beyond the border edge. Outlines differ from borders in two ways: •Outlines do not take up space •Outlines may be non-rectangular div { border: 2px solid black; outline: 2px solid red; outline-offset: 15px; }