Презентация Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface абсолютно бесплатно. Урок-презентация на эту тему содержит всего 77 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Презентации » Устройства и комплектующие » Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface
Оцените!
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:77 слайдов
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:4.45 MB
- Просмотров:65
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№3 слайд
![Vendor Prefixes CSS](/documents_6/fd4f2fb64a4835ea813b613afe393030/img2.jpg)
Содержание слайда: 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.
№6 слайд
![Inherited Properties A parent](/documents_6/fd4f2fb64a4835ea813b613afe393030/img5.jpg)
Содержание слайда: 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 }
<p>This paragraph has <em>emphasized text</em> in it.</p>
Sample non-inherited property:
p { border: medium solid }
<p>This paragraph has <em>emphasized text</em> in it.</p>
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](/documents_6/fd4f2fb64a4835ea813b613afe393030/img6.jpg)
Содержание слайда: Browser Default Styles
Web browsers have default CSS styles for HTML elements, consider sample: http://plnkr.co/edit/QgapgI8yuc328XV888Q8?p=preview
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: http://meyerweb.com/eric/tools/css/reset/
Normalize CSS: http://necolas.github.io/normalize.css/
№8 слайд
![Media Queries A media query](/documents_6/fd4f2fb64a4835ea813b613afe393030/img7.jpg)
Содержание слайда: 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: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
Sample: http://plnkr.co/edit/xYTDjomz5JNAvpQjt6LZ?p=preview
Some issues with media queries: it's not so simple to reorder blocks
№10 слайд
![CSS Flexbox Box Model Good](/documents_6/fd4f2fb64a4835ea813b613afe393030/img9.jpg)
Содержание слайда: 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:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
№12 слайд
![CSS Grid Layout Model Gives](/documents_6/fd4f2fb64a4835ea813b613afe393030/img11.jpg)
Содержание слайда: 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
№14 слайд
![Multi-column Layout Main CSS](/documents_6/fd4f2fb64a4835ea813b613afe393030/img13.jpg)
Содержание слайда: 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
№17 слайд
![Hyphenation The process of](/documents_6/fd4f2fb64a4835ea813b613afe393030/img16.jpg)
Содержание слайда: 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
№22 слайд
![box-shadow Property Creates](/documents_6/fd4f2fb64a4835ea813b613afe393030/img21.jpg)
Содержание слайда: 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
№24 слайд
![Opacity and Transparency An](/documents_6/fd4f2fb64a4835ea813b613afe393030/img23.jpg)
Содержание слайда: 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)
№28 слайд
![D and D Transformations A](/documents_6/fd4f2fb64a4835ea813b613afe393030/img27.jpg)
Содержание слайда: 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.
№30 слайд
![CSS Transition A transition](/documents_6/fd4f2fb64a4835ea813b613afe393030/img29.jpg)
Содержание слайда: 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.
№32 слайд
![CSS Animation CSS animations](/documents_6/fd4f2fb64a4835ea813b613afe393030/img31.jpg)
Содержание слайда: 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: http://webdesign.tutsplus.com/articles/15-inspiring-examples-of-css-animation-on-codepen--cms-23937
Details: https://css-tricks.com/almanac/properties/a/animation/
№35 слайд
![SVG Filters Support Small](/documents_6/fd4f2fb64a4835ea813b613afe393030/img34.jpg)
Содержание слайда: 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: http://codepen.io/chriscoyier/pen/evcBu
№42 слайд
![CSS Exclusions Formerly](/documents_6/fd4f2fb64a4835ea813b613afe393030/img41.jpg)
Содержание слайда: 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
№44 слайд
![CSS Exclusions Properties](/documents_6/fd4f2fb64a4835ea813b613afe393030/img43.jpg)
Содержание слайда: 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
№48 слайд
![CSS Gradient Methods CSS](/documents_6/fd4f2fb64a4835ea813b613afe393030/img47.jpg)
Содержание слайда: 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](/documents_6/fd4f2fb64a4835ea813b613afe393030/img48.jpg)
Содержание слайда: 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 слайд
![D Translation To translate an](/documents_6/fd4f2fb64a4835ea813b613afe393030/img49.jpg)
Содержание слайда: 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.
№53 слайд
![D Scaling To scale an element](/documents_6/fd4f2fb64a4835ea813b613afe393030/img52.jpg)
Содержание слайда: 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);
№60 слайд
![D Skewing To skew an element](/documents_6/fd4f2fb64a4835ea813b613afe393030/img59.jpg)
Содержание слайда: 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);
Скачать все slide презентации Understanding CSS. Essentials: layouts, managing text flow, managing the graphical interface одним архивом:
Похожие презентации
-
Understanding CSS essentials: content flow, positioning, and styling
-
CSS Grid Layout (aka "Grid")
-
Software Quality Assurance. Graphic User Interface Testing
-
CSS Properties. The position property
-
HTML and CSS. Site layout. Best practices
-
Introduction to the course. Managing the application life cycle
-
Building the user interface by using HTML 5. Оrganization, input, and validation
-
Введение в CSS. Блочная верстка. . Занятие 2
-
Освоение HTML, CSS, JS (09)
-
Product placement in video games. An analysis of the impact of product placement in video games on customers purchasing decision