🗊 Презентация CSS-recipies

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
CSS-recipies, слайд №1 CSS-recipies, слайд №2 CSS-recipies, слайд №3 CSS-recipies, слайд №4 CSS-recipies, слайд №5 CSS-recipies, слайд №6 CSS-recipies, слайд №7 CSS-recipies, слайд №8 CSS-recipies, слайд №9 CSS-recipies, слайд №10 CSS-recipies, слайд №11 CSS-recipies, слайд №12 CSS-recipies, слайд №13 CSS-recipies, слайд №14 CSS-recipies, слайд №15 CSS-recipies, слайд №16 CSS-recipies, слайд №17 CSS-recipies, слайд №18 CSS-recipies, слайд №19 CSS-recipies, слайд №20 CSS-recipies, слайд №21 CSS-recipies, слайд №22 CSS-recipies, слайд №23 CSS-recipies, слайд №24 CSS-recipies, слайд №25 CSS-recipies, слайд №26 CSS-recipies, слайд №27 CSS-recipies, слайд №28 CSS-recipies, слайд №29 CSS-recipies, слайд №30 CSS-recipies, слайд №31 CSS-recipies, слайд №32 CSS-recipies, слайд №33 CSS-recipies, слайд №34 CSS-recipies, слайд №35 CSS-recipies, слайд №36 CSS-recipies, слайд №37 CSS-recipies, слайд №38 CSS-recipies, слайд №39
Скачать
Вы можете ознакомиться и скачать презентацию на тему CSS-recipies. Доклад-сообщение содержит 39 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1


CSS-recipes presented by Alex Polybinsky & Sergey Zdobnov
Описание слайда:
CSS-recipes presented by Alex Polybinsky & Sergey Zdobnov

Слайд 2


Basic notions main approaches of web-development
Описание слайда:
Basic notions main approaches of web-development

Слайд 3


Progressive enhancement
Описание слайда:
Progressive enhancement

Слайд 4


Mobile First
Описание слайда:
Mobile First

Слайд 5


Adaptive Web
Описание слайда:
Adaptive Web

Слайд 6


Alignment vertical and horizontal positioning
Описание слайда:
Alignment vertical and horizontal positioning

Слайд 7


Vertical Alignment vertical-align and display: inline-block
Описание слайда:
Vertical Alignment vertical-align and display: inline-block

Слайд 8


Vertical Alignment baseline and x-height
Описание слайда:
Vertical Alignment baseline and x-height

Слайд 9


Vertical Alignment vertical-align and display: table-cell
Описание слайда:
Vertical Alignment vertical-align and display: table-cell

Слайд 10


Useful links
Описание слайда:
Useful links

Слайд 11


Horizontal Alignment text-align:center for inline or inline-block
Описание слайда:
Horizontal Alignment text-align:center for inline or inline-block

Слайд 12


Horizontal Alignment margin: 0 auto; and display: block;
Описание слайда:
Horizontal Alignment margin: 0 auto; and display: block;

Слайд 13


Middle of Screen (1st way) strict size, element’s position (absolute)
Описание слайда:
Middle of Screen (1st way) strict size, element’s position (absolute)

Слайд 14


Middle of Screen (2nd way) strict size, parent’s position (relative), element’s position (absolute)
Описание слайда:
Middle of Screen (2nd way) strict size, parent’s position (relative), element’s position (absolute)

Слайд 15


Middle of Screen (3rd way) non-strict size, parent’s position (relative), element’s display (inline-block)
Описание слайда:
Middle of Screen (3rd way) non-strict size, parent’s position (relative), element’s display (inline-block)

Слайд 16


Middle of Screen (4th way) non-strict size, parent’s position (relative), element’s position (absolute)
Описание слайда:
Middle of Screen (4th way) non-strict size, parent’s position (relative), element’s position (absolute)

Слайд 17


Useful links
Описание слайда:
Useful links

Слайд 18


Footer to bottom (1st way) html { height: 100%; }
Описание слайда:
Footer to bottom (1st way) html { height: 100%; }

Слайд 19


Footer to bottom (2nd way) html { height: 100%; } body { height: 100%; }
Описание слайда:
Footer to bottom (2nd way) html { height: 100%; } body { height: 100%; }

Слайд 20


Footer to bottom (3rd way) container { calc(100vh - 70px); box-sizing: border-box; }
Описание слайда:
Footer to bottom (3rd way) container { calc(100vh - 70px); box-sizing: border-box; }

Слайд 21


Useful links
Описание слайда:
Useful links

Слайд 22


Popular recipes necessary practical approaches
Описание слайда:
Popular recipes necessary practical approaches

Слайд 23


Text Overflow overflow (hidden), text-overflow (ellipsis), white-space (nowrap)
Описание слайда:
Text Overflow overflow (hidden), text-overflow (ellipsis), white-space (nowrap)

Слайд 24


Useful links
Описание слайда:
Useful links

Слайд 25


Operations with ::before, ::after
Описание слайда:
Operations with ::before, ::after

Слайд 26


Operations with ::before, ::after .example::before { content: ""; display: block; width: 0px; height: 0px; border-style: solid;...
Описание слайда:
Operations with ::before, ::after .example::before { content: ""; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 100px 100px 100px; border-color: transparent transparent red transparent; }

Слайд 27


Operations with ::before, ::after .tooltip:hover::before { triangle styles }
Описание слайда:
Operations with ::before, ::after .tooltip:hover::before { triangle styles }

Слайд 28


Operations with ::before, ::after .icon::before { circle styles content: ""; position: absolute; top: 3px; left: 3px; width: 6px; height:...
Описание слайда:
Operations with ::before, ::after .icon::before { circle styles content: ""; position: absolute; top: 3px; left: 3px; width: 6px; height: 6px; border: 2px solid #ccc; border-radius: 14px; }

Слайд 29


Operations with ::before, ::after .icon::before { line styles content: ""; display: block; height: 10px; width: 0; border-left: solid 2px...
Описание слайда:
Operations with ::before, ::after .icon::before { line styles content: ""; display: block; height: 10px; width: 0; border-left: solid 2px #ccc; position: absolute; top: 4px; left: 4px; }

Слайд 30


Useful links
Описание слайда:
Useful links

Слайд 31


Customization (input + label) input { display: none; } input + label { custom input styles (inactive) } input:checked + label { custom input styles...
Описание слайда:
Customization (input + label) input { display: none; } input + label { custom input styles (inactive) } input:checked + label { custom input styles (active) }

Слайд 32


Useful links
Описание слайда:
Useful links

Слайд 33


Tables options of table layout
Описание слайда:
Tables options of table layout

Слайд 34


Table Layout table-layout: auto (default)
Описание слайда:
Table Layout table-layout: auto (default)

Слайд 35


Table Layout table-layout: fixed
Описание слайда:
Table Layout table-layout: fixed

Слайд 36


Useful links
Описание слайда:
Useful links

Слайд 37


Emails*
Описание слайда:
Emails*

Слайд 38


Useful links
Описание слайда:
Useful links

Слайд 39


GOOD NIGHT and GOOD LUCK
Описание слайда:
GOOD NIGHT and GOOD LUCK

Скачать

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