🗊 Презентация Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface

Нажмите для полного просмотра!
Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №1 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №2 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №3 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №4 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №5 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №6 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №7 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №8 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №9 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №10 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №11 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №12 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №13 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №14 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №15 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №16 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №17 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №18 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №19 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №20 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №21 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №22 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №23 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №24 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №25 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №26 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №27 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №28 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №29 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №30 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №31 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №32 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №33 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №34 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №35 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №36 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №37 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №38 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №39 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №40 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №41 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №42 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №43 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №44 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №45 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №46 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №47 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №48 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №49 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №50 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №51 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №52 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №53 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №54 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №55 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №56 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №57 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №58 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №59 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №60 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №61 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №62 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №63 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №64 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №65 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №66 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №67 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №68 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №69 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №70 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №71 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №72 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №73 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №74 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №75 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №76 Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface, слайд №77

Содержание

Вы можете ознакомиться и скачать презентацию на тему Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface. Доклад-сообщение содержит 77 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации


Слайд 1


Understanding CSS Essentials: Layouts, Managing Text Flow, Managing the Graphical Interface Vyacheslav Koldovskyy Last update: 01/07/2015
Описание слайда:
Understanding CSS Essentials: Layouts, Managing Text Flow, Managing the Graphical Interface Vyacheslav Koldovskyy Last update: 01/07/2015

Слайд 2


Agenda UI design Traditional CSS Box model Block-level and inline element Parent/child relationships Vendor prefixes CSS Flexbox Box model CSS Grid...
Описание слайда:
Agenda UI design Traditional CSS Box model Block-level and inline element Parent/child relationships Vendor prefixes CSS Flexbox Box model CSS Grid Layout model

Слайд 3


Vendor Prefixes CSS3 specification is still in draft format and undergoing modifications Need to use vendor prefixes with several CSS3 constructs...
Описание слайда:
Vendor Prefixes CSS3 specification is still in draft format and undergoing modifications Need to use vendor prefixes with several CSS3 constructs Internet Explorer uses the -ms- prefix. Firefox supports the -moz- prefix. Chrome and Safari support the -webkit- prefix. Opera supports the -o- prefix.

Слайд 4


Two CSS box models
Описание слайда:
Two CSS box models

Слайд 5


Box model sample
Описание слайда:
Box model sample

Слайд 6


Inherited Properties A parent box can contain one or more child boxes. A child can inherit CSS styles from a parent. Sample inherited property: p {...
Описание слайда:
Inherited Properties A parent box can contain one or more child boxes. A child can inherit CSS styles from a parent. Sample inherited property: p { color: green } This paragraph has emphasized text in it. Sample non-inherited property: p { border: medium solid } This paragraph has emphasized text in it. Using inherit property: /* make second-level headers green */ h2 { color: green; } /* ...but leave those in the sidebar alone so they use their parent's color */ #sidebar h2 { color: inherit; }

Слайд 7


Browser Default Styles Web browsers have default CSS styles for HTML elements, consider sample: Also these styles are different for different...
Описание слайда:
Browser Default Styles Web browsers have default CSS styles for HTML elements, consider sample: Also these styles are different for different browsers, so same markup may look different To ensure same markup looks the same it is recommended to use "reset" or "normalize" stylesheets (second is preferred): Reset CSS: Normalize CSS:

Слайд 8


Media Queries A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as...
Описание слайда:
Media Queries A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries allow to create responsive websites Details: @media (max-width: 600px) { .facet_sidebar { display: none; } } Sample: Some issues with media queries: it's not so simple to reorder blocks

Слайд 9


UI Challenges Developers have used float property for relative positioning of UI elements for years CSS3 Provides two new options: CSS3 Flexbox Box...
Описание слайда:
UI Challenges Developers have used float property for relative positioning of UI elements for years CSS3 Provides two new options: CSS3 Flexbox Box model ideal for items that should resize or reposition themselves CSS3 Grid Layout model good for complex layouts

Слайд 10


CSS Flexbox Box Model Good for controls, toolbars, menus, and forms that resize and reposition automatically when the user changes the size of the...
Описание слайда:
CSS Flexbox Box Model Good for controls, toolbars, menus, and forms that resize and reposition automatically when the user changes the size of the browser window Browser takes the available space into account and calculates the dimensions for the user Enables relative sizes and positioning Good tutorial:

Слайд 11


CSS Flexbox Model Reordering Sample
Описание слайда:
CSS Flexbox Model Reordering Sample

Слайд 12


CSS3 Grid Layout Model Gives developers greater control over complex layouts than the flexbox model Lets you control the design of sections or entire...
Описание слайда:
CSS3 Grid Layout Model Gives developers greater control over complex layouts than the flexbox model Lets you control the design of sections or entire HTML-based documents using CSS3 Grid layouts use columns, rows, and cells, but you can move blocks of content from one part of page or application to another by moving code lines in CSS

Слайд 13


Multi-column Layout Create columns by dividing text across multiple columns Specify the amount of space that appears between columns (the gap) Make...
Описание слайда:
Multi-column Layout Create columns by dividing text across multiple columns Specify the amount of space that appears between columns (the gap) Make vertical lines (rules) appear between columns Define where columns break

Слайд 14


Multi-column Layout Main CSS properties for creating multiple columns in an HTML document: column-count: Sets the number of columns Alternative: Use...
Описание слайда:
Multi-column Layout Main CSS properties for creating multiple columns in an HTML document: column-count: Sets the number of columns Alternative: Use columns property with column-count and column-width properties column-gap: Specifies the gap between the columns, known as the gutter or alley column-rule: Creates a vertical line in the gap between columns and sets the width, style (single or double line, solid, dashed, 3D, etc.) and color of the rule

Слайд 15


Multi-column Layout Example
Описание слайда:
Multi-column Layout Example

Слайд 16


Practice Task:
Описание слайда:
Practice Task:

Слайд 17


Hyphenation The process of connecting two words with a hyphen mark (-) or breaking words between syllables at the end of a line. CSS3 hyphens...
Описание слайда:
Hyphenation The process of connecting two words with a hyphen mark (-) or breaking words between syllables at the end of a line. CSS3 hyphens property controls hyphenation Values: auto: Enables automatic hyphenation of words based on line-break opportunities within words or by a “language-appropriate hyphenation resource” manual: Enables hyphenation of words based only on line-break opportunities within words none: Prevents hyphenation

Слайд 18


Language Declaration W3C requires a language declaration for correct automatic hyphenation to occur: or
Описание слайда:
Language Declaration W3C requires a language declaration for correct automatic hyphenation to occur: or

Слайд 19


border-radius Property Creates rounded corners around layout elements, like headers, footers, sidebars, graphics boxes, and outlines around images...
Описание слайда:
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

Слайд 20


border-radius Example
Описание слайда:
border-radius Example

Слайд 21


border-radius Example
Описание слайда:
border-radius Example

Слайд 22


box-shadow Property Creates drop shadows around layout elements CSS syntax for creating a shadow: box-shadow: h-shadow v-shadow blur spread color...
Описание слайда:
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

Слайд 23


box-shadow Example
Описание слайда:
box-shadow Example

Слайд 24


Opacity and Transparency An opaque item does not let light pass through, whereas you can see through a transparent item. Syntax for applying a...
Описание слайда:
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)

Слайд 25


Transparency Example
Описание слайда:
Transparency Example

Слайд 26


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...
Описание слайда:
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

Слайд 27


Gradient Examples
Описание слайда:
Gradient Examples

Слайд 28


2D and 3D Transformations A transform is an effect that lets you change the size, shape, and position of an element. Transformations use the...
Описание слайда:
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.

Слайд 29


Transformations Sample
Описание слайда:
Transformations Sample

Слайд 30


CSS 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...
Описание слайда:
CSS 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.

Слайд 31


Transition Sample
Описание слайда:
Transition Sample

Слайд 32


CSS Animation CSS animations animates transitions between CSS styles to another. Consist of two components: a style describing the CSS animation and...
Описание слайда:
CSS Animation CSS animations animates transitions between CSS styles to another. Consist of two components: a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible waypoints. There are three key advantages to CSS animations over traditional script-driven animation: Easy to use for simple animations. The animations run well, even under moderate system load. The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible. Some cool samples: Details:

Слайд 33


Simple Animation Example
Описание слайда:
Simple Animation Example

Слайд 34


Timing Functions Details:
Описание слайда:
Timing Functions Details:

Слайд 35


SVG Filters Support Small file sizes that compress well Scales to any size without losing clarity (except very tiny) Looks great on high-res displays...
Описание слайда:
SVG Filters Support Small file sizes that compress well Scales to any size without losing clarity (except very tiny) Looks great on high-res displays 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. Sample:

Слайд 36


Styling forms
Описание слайда:
Styling forms

Слайд 37


Styling Tables
Описание слайда:
Styling Tables

Слайд 38


Practice Task
Описание слайда:
Practice Task

Слайд 39


Advanced Topics
Описание слайда:
Advanced Topics

Слайд 40


CSS Regions Feature allows developers to dynamically flow content across multiple boxes, or containers, in HTML documents with fluid layouts Content...
Описание слайда:
CSS Regions Feature allows developers to dynamically flow content across multiple boxes, or containers, in HTML documents with fluid layouts Content adjusts and displays properly whether viewed on large or small

Слайд 41


Content Flow with CSS Regions
Описание слайда:
Content Flow with CSS Regions

Слайд 42


CSS Exclusions Formerly referred to as positioned floats Enables positioning of images, text, and boxes anywhere in an HTML document and wrapping of...
Описание слайда:
CSS Exclusions Formerly referred to as positioned floats Enables positioning of images, text, and boxes anywhere in an HTML document and wrapping of text completely around these elements Can control the position of a float precisely, at a specified distance from the top, bottom, left, or right sides of a container

Слайд 43


CSS Exclusions Example 1
Описание слайда:
CSS Exclusions Example 1

Слайд 44


CSS Exclusions Properties wrap-flow:both displays content on all sides of the exclusion wrap-flow:clear displays content above and below the...
Описание слайда:
CSS Exclusions Properties wrap-flow:both displays content on all sides of the exclusion wrap-flow:clear displays content above and below the exclusion but leaves the sides blank shape-inside and shape-outside define the content and the general shape of an exclusion, respectively -ms- vendor prefix required for Internet Explorer 10; Exclusions not supported in Internet Explorer 9

Слайд 45


CSS Exclusions Example 2
Описание слайда:
CSS Exclusions Example 2

Слайд 46


CSS Exclusions Step-by-step
Описание слайда:
CSS Exclusions Step-by-step

Слайд 47


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-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

Слайд 48


CSS Gradient Methods CSS3 gradient methods: linear-gradient: Creates a gradient from top to bottom or vice versa, or from corner to corner...
Описание слайда:
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

Слайд 49


Gradient Color Interpolation and Color Stops CSS gradients support color interpolation in the alpha color space Part of the red blue green alpha...
Описание слайда:
Gradient 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)

Слайд 50


2D Translation To translate an element means to move it without rotating, skewing, or otherwise turning the image. Use the translate() method in CSS...
Описание слайда:
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.

Слайд 51


2D Translation Example
Описание слайда:
2D Translation Example

Слайд 52


2D Translation Example
Описание слайда:
2D Translation Example

Слайд 53


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)...
Описание слайда:
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);

Слайд 54


2D Scaling Example
Описание слайда:
2D Scaling Example

Слайд 55


2D Scaling Example
Описание слайда:
2D Scaling Example

Слайд 56


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...
Описание слайда:
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);

Слайд 57


2D Rotation Example
Описание слайда:
2D Rotation Example

Слайд 58


2D Example
Описание слайда:
2D Example

Слайд 59


3D Rotation 3D rotation uses the rotateX() and rotateY() methods. rotateX(): Element rotates around its x-axis rotateY(): Element rotates around its...
Описание слайда:
3D Rotation 3D rotation uses the rotateX() and rotateY() methods. rotateX(): Element rotates around its x-axis rotateY(): Element rotates around its y- axis

Слайд 60


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...
Описание слайда:
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 x-axis and 30 degrees around the y-axis: transform: skew(20deg,30deg);

Слайд 61


2D Skewing Example
Описание слайда:
2D Skewing Example

Слайд 62


2D Skewing Example
Описание слайда:
2D Skewing Example

Слайд 63


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...
Описание слайда:
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);

Слайд 64


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...
Описание слайда:
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.

Слайд 65


Transition Example
Описание слайда:
Transition Example

Слайд 66


Transition Example
Описание слайда:
Transition Example

Слайд 67


Animation (Continued) Specify a CSS style within the @keyframes rule An example of a rule for a fadeout: @keyframes fadeout { from { opacity: 1; } to...
Описание слайда:
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; } }

Слайд 68


Animation (Continued) Code snippet that configures animation properties for a fadeout: div { animation-duration: 3s; animation-delay: 0s;...
Описание слайда:
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; }

Слайд 69


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...
Описание слайда:
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.

Слайд 70


SVG Filters feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feFlood feGaussianBlur feImage...
Описание слайда:
SVG Filters feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feFlood feGaussianBlur feImage feMerge feMorphology feOffset feTile feTurbulence feDistantLight fePointLight feSpecularLighting feSpotLight

Слайд 71


SVG Filters Gaussian Blur Example
Описание слайда:
SVG Filters Gaussian Blur Example

Слайд 72


SVG Filters Offset Example
Описание слайда:
SVG Filters Offset Example

Слайд 73


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...
Описание слайда:
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.

Слайд 74


Canvas Example 1
Описание слайда:
Canvas Example 1

Слайд 75


Canvas Example 2 context.rotate(20*Math. PI/180);
Описание слайда:
Canvas Example 2 context.rotate(20*Math. PI/180);

Слайд 76


Canvas Example 3
Описание слайда:
Canvas Example 3

Слайд 77


Contacts
Описание слайда:
Contacts



Похожие презентации
Mypresentation.ru
Загрузить презентацию