SlideShare une entreprise Scribd logo
1  sur  49
Managing the Graphical Interface
by Using CSS
Lesson 7
Exam Objective Matrix
Skills/Concepts

MTA Exam Objectives

Managing the Graphical
Interface with CSS

Manage the graphical interface by using CSS
(3.4)

2
border-radius Property
• Creates rounded corners around layout
elements, like headers, footers, sidebars,
graphics boxes, and outlines around
images
• border-radius is a length, which is
usually expressed in pixels or ems but can
be a percentage

3
border-radius Example

4
border-radius Example

5
border-radius Property, Single Corners
• Rounding a single corner of a box:
– border-top-left-radius
– border-top-right-radius
– border-bottom-right-radius
– border-bottom-left-radius

6
box-shadow Property
• Creates drop shadows around layout
elements
• CSS syntax for creating a shadow:
box-shadow: h-shadow v-shadow blur
spread color inset;

• Required: h-shadow and v-shadow
attributes set the horizontal and vertical
position of the shadow in relation to the
box
• Optional: blur, spread, color, and inset
7
box-shadow Example

8
Opacity and Transparency
• An opaque item does not let light pass
through, whereas you can see through a
transparent item.
• Syntax for applying a transparency to an
image or other element:
opacity: value

• Value is a floating-point value between 0.0
(100% transparent) and 1.0 (100%
opaque)
9
Transparency Example

Original

With transparency

Photo: © AVTG/iStockphoto

10
CSS Gradients
• Gradient is a smooth change of colors,
within the same hue or starting with one
color and ending with a different color
• Used for subtle shading within
backgrounds, button embellishments, and
more
• Created as methods to the CSS
background property
11
CSS Gradient Methods
• CSS3 gradient methods:
– linear-gradient: Creates a gradient from top

to bottom or vice versa, or from corner to corner
– radial-gradient: Creates a gradient that
radiates out from a central point
– repeating-linear-gradient: Creates a
repeating linear gradient, which results in straight
bands of gradient color
– repeating-radial-gradient: Creates a
repeating radial gradient, which results in circular
bands of gradient color
12
Gradient Examples
Linear gradient: background: lineargradient(black, white);

Radial gradient: radial-gradient(50% 50%,
70% 70%, #99CCFF, #3D5266);

13
Color Interpolation and Color Stops
• CSS gradients support color interpolation
in the alpha color space
– Part of the red blue green alpha (RGBA)
color model

• Can specify multiple color stops, with an
RGBA color and position for each one
• Example of the use of rgba colors:
linear-gradient(to right,
rgba(255,255,255,0)
14
CSS Font-related Properties
• font-family specifies the font for an

element
• font-size specifies the size of a font
• font-style specifies the style of a font,

such as normal italics, or oblique
• font-variant specifies whether text
should be displayed in small caps
• font-weight specifies the thickness of
font characters
15
Web-safe Fonts
• A set of standard fonts typically located on
a user’s computer and that generally
render consistently in the majority of
browsers
• Not appropriate for brand identity for many
companies
• Limited choices

16
Web Open Font Format (WOFF)
• Allows developers to use almost any font
• Are compressed True Type, OpenType, or
Open Font Format fonts that contain
additional metadata
• Are usually hosted on a server; CSS
references font and server or URL

17
Web Open Font Format (WOFF)
• To use a WOFF font from a font vendor’s
site, for example, include the @font-face
rule in CSS:
<style>
@font-face {
font-family: "font-family-name";
src: url("http://website/fonts/fontfile")
}
</style>

18
2D and 3D Transformations
• A transform is an effect that lets you change
the size, shape, and position of an element.
• Transformations use the transform
property.
– Methods: matrix, perspective, rotate,
scale, skew, translate

• To see the ―action‖ of a transformation
requires JavaScript; using only CSS shows
the before and after effects of properties and
their values.
19
2D Translation
• To translate an element means to move it
without rotating, skewing, or otherwise
turning the image.
• Use the translate() method in CSS and
provide x- and y-axis values to position the
element relative to its original or default
position.
– x-axis value specifies the left position of
the element
– y-axis value specifies the top position.
20
2D Translation Example

21
2D Translation Example

22
2D Scaling
• To scale an element is to increase or
decrease its size.
• Use the scale() method in CSS and
provide x-axis (width) and y-axis (height)
values.
• The example on the following two slides
increases the width of the element two
times its original size, and increases the
height four times its original size:
transform: scale(2,4);

23
2D Scaling Example

24
2D Scaling Example

25
2D Rotation
• To rotate an element turns it clockwise by
a specified number of degrees.
• Use the rotate() method in CSS and
specify the degrees of rotation.
• The example on the following two slides
rotates an element by 30 degrees in the
2D plane:
transform: rotate(30deg);
26
2D Rotation Example

27
2D Example

28
3D Rotation
• 3D rotation uses the rotateX() and
rotateY() methods.
– rotateX(): Element rotates around its x-

axis
– rotateY(): Element rotates around its y-

axis

29
2D Skewing
• To skew an element is to stretch it in one
or more directions.
• Use the skew() method and provide x-axis
and y-axis values, in degrees, to create an
angular shape.
• The example on the following two slides
turns an element 20 degrees around the xaxis and 30 degrees around the y-axis:
transform: skew(20deg,30deg);
30
2D Skewing Example

31
2D Skewing Example

32
3D Skewing
• 3D skewing uses the skewX() and
skewY() methods to skew an element
around its x-axis and y-axis, respectively.
• As an example, the following code skews
an element 45 degrees:
transform: skewX(45deg);

33
3D Perspective
• The CSS3 3D perspective property
defines how a browser renders the depth
of a 3D transformed element.
• The property takes on a number value:
lower values (in the range of 1 to 1000)
create a more pronounced effect than
higher values.

34
Transition
• A transition is a change from one thing to
another; in CSS, a transition is the change
in an element from one style to another.
• In CSS3, the action of a transition renders
onscreen—no JavaScript is needed!
• The transition property requires the
CSS property to be acted upon during the
transition.
35
Transition Example

36
Transition Example

Transition

37
Animation
• An animation is the display of a sequence of
static images at a fast enough speed to
create the illusion of movement.
• Transitions and animations are similar in that
they both use timings.
• Many properties used in animations are
similar to transitions.
• An important difference is that animations
use keyframes, which give you control over
parts of the animation.
38
Animation (Continued)
• Specify a CSS style within the
@keyframes rule
• An example of a rule for a fadeout:
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}

39
Animation (Continued)
• Code snippet that configures animation
properties for a fadeout:
div { animation-duration: 3s;
animation-delay: 0s;
animation-timing-function: ease; }
div:hover { animation-name: fadeout; }

40
SVG Filters
• An SVG filter is a set of operations that
use CSS to style or otherwise modify an
SVG graphic.
• The enhanced graphic is displayed in a
browser while the original graphic is left
alone.

41
SVG Filters
•
•
•
•
•
•
•
•
•
•

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage

•
•
•
•
•
•
•
•
•

feMerge
feMorphology
feOffset
feTile
feTurbulence
feDistantLight
fePointLight
feSpecularLighting
feSpotLight
42
SVG Filters Gaussian Blur Example

43
SVG Filters Offset Example

44
Canvas
• Use canvas to draw pixel-based shapes.
• The canvas element accepts only two
attributes—height and width.
• You can use most CSS properties to style
the canvas element, adding color,
gradients, pattern fills, transformation,
animation, and much more.

45
Canvas Example 1

46
Canvas Example 2
• context.rotate(20*Math. PI/180);

47
Canvas Example 3

48
Recap
•
•
•
•
•

Graphics effects
Transparency and opacity
Background gradients
Web-safe fonts and the Web Open Font Format
2D and 3D transformations
–
–
–
–
–

Translation
Scaling
Rotation
Skewing
3D perspective

• Transitions and animations
• SVG filters
• Canvas
49

Contenu connexe

En vedette

Chemical Bonding In Sports ♥
Chemical Bonding In Sports ♥Chemical Bonding In Sports ♥
Chemical Bonding In Sports ♥unicorn12
 
Estruturação de Linguagens de Programação (Pascal e C++)
Estruturação de Linguagens de Programação (Pascal e C++)Estruturação de Linguagens de Programação (Pascal e C++)
Estruturação de Linguagens de Programação (Pascal e C++)Mauricio Volkweis Astiazara
 
POO y MVC en PHP (por Eugenia Bahit)
POO y MVC en PHP (por Eugenia Bahit)POO y MVC en PHP (por Eugenia Bahit)
POO y MVC en PHP (por Eugenia Bahit)Eugenia Bahit
 
Baromètre du Retail Mobile 2013
Baromètre du Retail Mobile 2013Baromètre du Retail Mobile 2013
Baromètre du Retail Mobile 2013Mobilosoft
 
Blogging and social media in Brussels for FutureLab Europe
Blogging and social media in Brussels for FutureLab EuropeBlogging and social media in Brussels for FutureLab Europe
Blogging and social media in Brussels for FutureLab EuropeJon Worth
 
HR Technology Trend
HR Technology TrendHR Technology Trend
HR Technology Trendwilsonten
 
Programación orientada a objetos para php5
Programación orientada a objetos para php5Programación orientada a objetos para php5
Programación orientada a objetos para php5Erik Gur
 
Pensamentos
PensamentosPensamentos
PensamentosG. Gomes
 
CH. 4 Operating Systems and Utility Programs
CH. 4 Operating Systems and Utility ProgramsCH. 4 Operating Systems and Utility Programs
CH. 4 Operating Systems and Utility Programsmalik1972
 
Lecture 01 an overview of computers
Lecture 01   an overview of computersLecture 01   an overview of computers
Lecture 01 an overview of computersAt Tarmizi
 

En vedette (20)

Java script
Java scriptJava script
Java script
 
Chemical Bonding In Sports ♥
Chemical Bonding In Sports ♥Chemical Bonding In Sports ♥
Chemical Bonding In Sports ♥
 
Estruturação de Linguagens de Programação (Pascal e C++)
Estruturação de Linguagens de Programação (Pascal e C++)Estruturação de Linguagens de Programação (Pascal e C++)
Estruturação de Linguagens de Programação (Pascal e C++)
 
POO y MVC en PHP (por Eugenia Bahit)
POO y MVC en PHP (por Eugenia Bahit)POO y MVC en PHP (por Eugenia Bahit)
POO y MVC en PHP (por Eugenia Bahit)
 
Baromètre du Retail Mobile 2013
Baromètre du Retail Mobile 2013Baromètre du Retail Mobile 2013
Baromètre du Retail Mobile 2013
 
Cassio manual
Cassio manualCassio manual
Cassio manual
 
Blogging and social media in Brussels for FutureLab Europe
Blogging and social media in Brussels for FutureLab EuropeBlogging and social media in Brussels for FutureLab Europe
Blogging and social media in Brussels for FutureLab Europe
 
Necrose avascular
Necrose avascularNecrose avascular
Necrose avascular
 
HR Technology Trend
HR Technology TrendHR Technology Trend
HR Technology Trend
 
Delitos InformáTicos
Delitos InformáTicosDelitos InformáTicos
Delitos InformáTicos
 
Enfermedades maiz
Enfermedades maizEnfermedades maiz
Enfermedades maiz
 
Programación orientada a objetos para php5
Programación orientada a objetos para php5Programación orientada a objetos para php5
Programación orientada a objetos para php5
 
Masa
MasaMasa
Masa
 
Palestra - Capacitação e Atualização ANCP-SAM 2012
Palestra - Capacitação e Atualização ANCP-SAM 2012Palestra - Capacitação e Atualização ANCP-SAM 2012
Palestra - Capacitação e Atualização ANCP-SAM 2012
 
Pensamentos
PensamentosPensamentos
Pensamentos
 
Week 6
Week 6Week 6
Week 6
 
CH. 4 Operating Systems and Utility Programs
CH. 4 Operating Systems and Utility ProgramsCH. 4 Operating Systems and Utility Programs
CH. 4 Operating Systems and Utility Programs
 
Lecture 01 an overview of computers
Lecture 01   an overview of computersLecture 01   an overview of computers
Lecture 01 an overview of computers
 
Udc Marzo De 2005
Udc Marzo De 2005Udc Marzo De 2005
Udc Marzo De 2005
 
Modelo de solicitud
Modelo de solicitudModelo de solicitud
Modelo de solicitud
 

Similaire à MTA managing the graphical interface by using css

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
 
CSS3 basics for beginners - Imrokraft
CSS3 basics for beginners - ImrokraftCSS3 basics for beginners - Imrokraft
CSS3 basics for beginners - Imrokraftimrokraft
 
Interactive Graphics
Interactive GraphicsInteractive Graphics
Interactive GraphicsBlazing Cloud
 
CSS3 TTA (Transform Transition Animation)
CSS3 TTA (Transform Transition Animation)CSS3 TTA (Transform Transition Animation)
CSS3 TTA (Transform Transition Animation)창석 한
 
CSS3 Animation for beginners - Imrokraft
CSS3 Animation for beginners - ImrokraftCSS3 Animation for beginners - Imrokraft
CSS3 Animation for beginners - Imrokraftimrokraft
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondAndy Stratton
 
Unit-3-CSS-BWT.pptx
Unit-3-CSS-BWT.pptxUnit-3-CSS-BWT.pptx
Unit-3-CSS-BWT.pptxTanu524249
 
Website trends 2012 presentation
Website trends 2012 presentationWebsite trends 2012 presentation
Website trends 2012 presentationFresh_Egg
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and ReadyDenise Jacobs
 
CSS tutorial chapter 2
CSS tutorial chapter 2CSS tutorial chapter 2
CSS tutorial chapter 2jeweltutin
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3Denise Jacobs
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondDenise Jacobs
 
Flexbox, Grid and Sass
Flexbox, Grid and SassFlexbox, Grid and Sass
Flexbox, Grid and SassSeble Nigussie
 

Similaire à MTA managing the graphical interface by using css (20)

CSS and CSS3
CSS and CSS3CSS and CSS3
CSS and CSS3
 
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
 
CSS3 basics for beginners - Imrokraft
CSS3 basics for beginners - ImrokraftCSS3 basics for beginners - Imrokraft
CSS3 basics for beginners - Imrokraft
 
Interactive Graphics
Interactive GraphicsInteractive Graphics
Interactive Graphics
 
Css3
Css3Css3
Css3
 
CSS3 TTA (Transform Transition Animation)
CSS3 TTA (Transform Transition Animation)CSS3 TTA (Transform Transition Animation)
CSS3 TTA (Transform Transition Animation)
 
Iagc2
Iagc2Iagc2
Iagc2
 
Css3
Css3Css3
Css3
 
Css3
Css3Css3
Css3
 
CSS3 Animation for beginners - Imrokraft
CSS3 Animation for beginners - ImrokraftCSS3 Animation for beginners - Imrokraft
CSS3 Animation for beginners - Imrokraft
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
 
Unit-3-CSS-BWT.pptx
Unit-3-CSS-BWT.pptxUnit-3-CSS-BWT.pptx
Unit-3-CSS-BWT.pptx
 
slides-students-C04.pdf
slides-students-C04.pdfslides-students-C04.pdf
slides-students-C04.pdf
 
Website trends 2012 presentation
Website trends 2012 presentationWebsite trends 2012 presentation
Website trends 2012 presentation
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready
 
CSS tutorial chapter 2
CSS tutorial chapter 2CSS tutorial chapter 2
CSS tutorial chapter 2
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
 
Flexbox, Grid and Sass
Flexbox, Grid and SassFlexbox, Grid and Sass
Flexbox, Grid and Sass
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 

Dernier

Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 

Dernier (20)

Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 

MTA managing the graphical interface by using css

  • 1. Managing the Graphical Interface by Using CSS Lesson 7
  • 2. Exam Objective Matrix Skills/Concepts MTA Exam Objectives Managing the Graphical Interface with CSS Manage the graphical interface by using CSS (3.4) 2
  • 3. border-radius Property • Creates rounded corners around layout elements, like headers, footers, sidebars, graphics boxes, and outlines around images • border-radius is a length, which is usually expressed in pixels or ems but can be a percentage 3
  • 6. border-radius Property, Single Corners • Rounding a single corner of a box: – border-top-left-radius – border-top-right-radius – border-bottom-right-radius – border-bottom-left-radius 6
  • 7. box-shadow Property • Creates drop shadows around layout elements • CSS syntax for creating a shadow: box-shadow: h-shadow v-shadow blur spread color inset; • Required: h-shadow and v-shadow attributes set the horizontal and vertical position of the shadow in relation to the box • Optional: blur, spread, color, and inset 7
  • 9. Opacity and Transparency • An opaque item does not let light pass through, whereas you can see through a transparent item. • Syntax for applying a transparency to an image or other element: opacity: value • Value is a floating-point value between 0.0 (100% transparent) and 1.0 (100% opaque) 9
  • 11. CSS Gradients • Gradient is a smooth change of colors, within the same hue or starting with one color and ending with a different color • Used for subtle shading within backgrounds, button embellishments, and more • Created as methods to the CSS background property 11
  • 12. CSS Gradient Methods • CSS3 gradient methods: – linear-gradient: Creates a gradient from top to bottom or vice versa, or from corner to corner – radial-gradient: Creates a gradient that radiates out from a central point – repeating-linear-gradient: Creates a repeating linear gradient, which results in straight bands of gradient color – repeating-radial-gradient: Creates a repeating radial gradient, which results in circular bands of gradient color 12
  • 13. Gradient Examples Linear gradient: background: lineargradient(black, white); Radial gradient: radial-gradient(50% 50%, 70% 70%, #99CCFF, #3D5266); 13
  • 14. Color Interpolation and Color Stops • CSS gradients support color interpolation in the alpha color space – Part of the red blue green alpha (RGBA) color model • Can specify multiple color stops, with an RGBA color and position for each one • Example of the use of rgba colors: linear-gradient(to right, rgba(255,255,255,0) 14
  • 15. CSS Font-related Properties • font-family specifies the font for an element • font-size specifies the size of a font • font-style specifies the style of a font, such as normal italics, or oblique • font-variant specifies whether text should be displayed in small caps • font-weight specifies the thickness of font characters 15
  • 16. Web-safe Fonts • A set of standard fonts typically located on a user’s computer and that generally render consistently in the majority of browsers • Not appropriate for brand identity for many companies • Limited choices 16
  • 17. Web Open Font Format (WOFF) • Allows developers to use almost any font • Are compressed True Type, OpenType, or Open Font Format fonts that contain additional metadata • Are usually hosted on a server; CSS references font and server or URL 17
  • 18. Web Open Font Format (WOFF) • To use a WOFF font from a font vendor’s site, for example, include the @font-face rule in CSS: <style> @font-face { font-family: "font-family-name"; src: url("http://website/fonts/fontfile") } </style> 18
  • 19. 2D and 3D Transformations • A transform is an effect that lets you change the size, shape, and position of an element. • Transformations use the transform property. – Methods: matrix, perspective, rotate, scale, skew, translate • To see the ―action‖ of a transformation requires JavaScript; using only CSS shows the before and after effects of properties and their values. 19
  • 20. 2D Translation • To translate an element means to move it without rotating, skewing, or otherwise turning the image. • Use the translate() method in CSS and provide x- and y-axis values to position the element relative to its original or default position. – x-axis value specifies the left position of the element – y-axis value specifies the top position. 20
  • 23. 2D Scaling • To scale an element is to increase or decrease its size. • Use the scale() method in CSS and provide x-axis (width) and y-axis (height) values. • The example on the following two slides increases the width of the element two times its original size, and increases the height four times its original size: transform: scale(2,4); 23
  • 26. 2D Rotation • To rotate an element turns it clockwise by a specified number of degrees. • Use the rotate() method in CSS and specify the degrees of rotation. • The example on the following two slides rotates an element by 30 degrees in the 2D plane: transform: rotate(30deg); 26
  • 29. 3D Rotation • 3D rotation uses the rotateX() and rotateY() methods. – rotateX(): Element rotates around its x- axis – rotateY(): Element rotates around its y- axis 29
  • 30. 2D Skewing • To skew an element is to stretch it in one or more directions. • Use the skew() method and provide x-axis and y-axis values, in degrees, to create an angular shape. • The example on the following two slides turns an element 20 degrees around the xaxis and 30 degrees around the y-axis: transform: skew(20deg,30deg); 30
  • 33. 3D Skewing • 3D skewing uses the skewX() and skewY() methods to skew an element around its x-axis and y-axis, respectively. • As an example, the following code skews an element 45 degrees: transform: skewX(45deg); 33
  • 34. 3D Perspective • The CSS3 3D perspective property defines how a browser renders the depth of a 3D transformed element. • The property takes on a number value: lower values (in the range of 1 to 1000) create a more pronounced effect than higher values. 34
  • 35. Transition • A transition is a change from one thing to another; in CSS, a transition is the change in an element from one style to another. • In CSS3, the action of a transition renders onscreen—no JavaScript is needed! • The transition property requires the CSS property to be acted upon during the transition. 35
  • 38. Animation • An animation is the display of a sequence of static images at a fast enough speed to create the illusion of movement. • Transitions and animations are similar in that they both use timings. • Many properties used in animations are similar to transitions. • An important difference is that animations use keyframes, which give you control over parts of the animation. 38
  • 39. Animation (Continued) • Specify a CSS style within the @keyframes rule • An example of a rule for a fadeout: @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } 39
  • 40. Animation (Continued) • Code snippet that configures animation properties for a fadeout: div { animation-duration: 3s; animation-delay: 0s; animation-timing-function: ease; } div:hover { animation-name: fadeout; } 40
  • 41. SVG Filters • An SVG filter is a set of operations that use CSS to style or otherwise modify an SVG graphic. • The enhanced graphic is displayed in a browser while the original graphic is left alone. 41
  • 43. SVG Filters Gaussian Blur Example 43
  • 44. SVG Filters Offset Example 44
  • 45. Canvas • Use canvas to draw pixel-based shapes. • The canvas element accepts only two attributes—height and width. • You can use most CSS properties to style the canvas element, adding color, gradients, pattern fills, transformation, animation, and much more. 45
  • 47. Canvas Example 2 • context.rotate(20*Math. PI/180); 47
  • 49. Recap • • • • • Graphics effects Transparency and opacity Background gradients Web-safe fonts and the Web Open Font Format 2D and 3D transformations – – – – – Translation Scaling Rotation Skewing 3D perspective • Transitions and animations • SVG filters • Canvas 49

Notes de l'éditeur

  1. Tip: Add your own speaker notes here.
  2. Tip: Add your own speaker notes here.
  3. Tip: Add your own speaker notes here.
  4. Tip: Add your own speaker notes here.
  5. Tip: Add your own speaker notes here.
  6. Tip: Add your own speaker notes here.
  7. Tip: Add your own speaker notes here.
  8. Tip: Add your own speaker notes here.
  9. Tip: Add your own speaker notes here.
  10. Tip: Add your own speaker notes here.
  11. Tip: Add your own speaker notes here.
  12. Tip: Add your own speaker notes here.
  13. Tip: Add your own speaker notes here.
  14. Tip: Add your own speaker notes here.
  15. Tip: Add your own speaker notes here.
  16. Tip: Add your own speaker notes here.
  17. Tip: Add your own speaker notes here.
  18. Tip: Add your own speaker notes here.
  19. Tip: Add your own speaker notes here.
  20. Tip: Add your own speaker notes here.
  21. Tip: Add your own speaker notes here.
  22. Tip: Add your own speaker notes here.
  23. Tip: Add your own speaker notes here.
  24. Tip: Add your own speaker notes here.
  25. Tip: Add your own speaker notes here.
  26. Tip: Add your own speaker notes here.
  27. Tip: Add your own speaker notes here.
  28. Tip: Add your own speaker notes here.
  29. Tip: Add your own speaker notes here.
  30. Tip: Add your own speaker notes here.
  31. Tip: Add your own speaker notes here.
  32. Tip: Add your own speaker notes here.
  33. Tip: Add your own speaker notes here.
  34. Tip: Add your own speaker notes here.
  35. Tip: Add your own speaker notes here.
  36. Tip: Add your own speaker notes here.
  37. Tip: Add your own speaker notes here.
  38. Tip: Add your own speaker notes here.
  39. Tip: Add your own speaker notes here.
  40. Tip: Add your own speaker notes here.
  41. Tip: Add your own speaker notes here.
  42. Tip: Add your own speaker notes here.
  43. Tip: Add your own speaker notes here.
  44. Tip: Add your own speaker notes here.
  45. Tip: Add your own speaker notes here.
  46. Tip: Add your own speaker notes here.
  47. Tip: Add your own speaker notes here.