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

Basic notions
main approaches of web-development

Progressive enhancement
Graceful degradation
Basic User Interaction for OLDER browsers
Content and functional representation for OLDER browsers
JS
CSS3
JS
CSS3
User Interaction for MODERN browsers
Content and functional representation for MODERN browsers
Support for OLDER browsers

Mobile First
Desktop First
UI focusing on the most important aspects
Simplicity and clarity of interface
JS
Support for OLDER browsers
Applicable for big portals with hundreds of items
Support for OLDER browsers

Adaptive Web
Responsive Web
One version of site
Ability to update design for another devices
Optimal utilization of all devices
Continuity interface
One version of layout
Necessity of initial requirements for whole interface design
Optimal utilization of all devices
Continuity interface

Alignment
vertical and horizontal positioning

vertical-align and display: inline-block
Vertical Alignment
New innovative processes created over industry best practices.
Global solutions for the new interconnected world.
alignment on baseline

baseline and x-height
Vertical Alignment

vertical-align and display: table-cell
Vertical Alignment
New innovative processes created over industry best practices.
Global solutions for the new interconnected world.
alignment on container

Useful links
https://developer.mozilla.org/en/docs/Web/CSS/vertical-align
http://css-tricks.com/what-is-vertical-align/
http://stackoverflow.com/questions/19366401/my-inline-block-elements-are-not-lining-up-properly
https://web-standards.ru/articles/vertical-align/

text-align:center for inline or inline-block
Horizontal Alignment
Global solutions for the new interconnected world.
alignment on container

margin: 0 auto; and display: block;
Horizontal Alignment

strict size, element’s position (absolute)
Middle of Screen (1st way)
left (50%), top (50%), margin (size/2)

strict size, parent’s position (relative), element’s position (absolute)
Middle of Screen (2nd way)
left (0), top (0), bottom (0), right (0), margin (auto)

non-strict size, parent’s position (relative), element’s display (inline-block)
Middle of Screen (3rd way)
::before contains width (1%), height (100%), vertical-align (middle)
::before

non-strict size, parent’s position (relative), element’s position (absolute)
Middle of Screen (4th way)
left (50%), top (50%), transform: translate(-50%, -50%);

Useful links
https://www.w3.org/Style/Examples/007/center.en.html
https://css-tricks.com/centering-css-complete-guide/
https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

body
html { height: 100%; }
Footer to bottom (1st way)
body { min-height: 100%; position: relative; }
container { padding-bottom:70px; }
footer { position: absolute; height: 70px; left:0; bottom:0;}
container
footer

wrapper
html { height: 100%; } body { height: 100%; }
Footer to bottom (2nd way)
wrapper { height: 100%; }
container { min-height: 100%; box-sizing: border-box; padding-bottom: 70px; }
footer { box-sizing: border-box; height: 70px; margin-top: -70px; }
container
footer

Footer to bottom (3rd way)
container { calc(100vh - 70px); box-sizing: border-box; }
footer { box-sizing: border-box; height: 70px; }
container
footer

Useful links
1st way example
2st way example
3st way example

Popular recipes
necessary practical approaches

block
overflow (hidden), text-overflow (ellipsis), white-space (nowrap)
Text Overflow
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae massa sed arcu...
td
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae massa sed arcu...
+ table-layout (fixed) for
Слайд 24
Useful links
https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
https://software.intel.com/en-us/html5/hub/blogs/ellipse-my-text/
http://dev.mobify.com/blog/multiline-ellipsis-in-pure-css/
Слайд 25
Operations with ::before, ::after
Слайд 26
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;
}
Button with Up Arrow
Слайд 27
Operations with ::before, ::after
.tooltip:hover::before {
triangle styles
}
some information for our tooltip.”>
CSS3 Tooltip
.tooltip:hover::after {
tooltip’s box styles (background and font)
}
Слайд 28
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;
}
.icon::after {
line styles
content: "";
position: absolute;
top: 9px;
left: 11px;
width: 3px;
height: 7px;
margin-top: 0;
background: #ccc;
transform: rotate(-45deg);
border-radius: 2px;
}
Слайд 29
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;
}
.icon::after {
triangle styles
content: "";
height: 0;
width: 0;
border-style: solid;
border-width: 5px 9px 5px 0;
border-color: transparent #ccc transparent transparent;
position: absolute;
top: 4px;
left: 8px;
}
Слайд 30
Useful links
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
https://css-tricks.com/almanac/selectors/a/after-and-before/
https://css-tricks.com/pseudo-element-roundup/
https://www.amazeelabs.com/en/blog/three-things-you-can-do-with-css-pseudo-elements
https://www.smashingmagazine.com/2011/03/styling-elements-with-glyphs-sprites-and-pseudo-elements/
TOOLTIP
ICONS
Слайд 31
Customization (input + label)
Custom style
input {
display: none;
}
input + label {
custom input styles (inactive)
}
input:checked + label {
custom input styles (active)
}
Слайд 32
Useful links
https://css-tricks.com/float-labels-css/
http://htmlbook.ru/blog/kartinka-vmesto-chekboksa
Слайд 33
Tables
options of table layout
Слайд 34
Table Layout
table-layout: auto (default)
table-layout: auto + width: 100%
Слайд 35
Table Layout
table-layout: fixed
table-layout: fixed + width: 100%
Слайд 36
Useful links
Scrolling in table
https://www.w3.org/wiki/CSS/Properties/table-layout
https://css-tricks.com/almanac/properties/t/text-overflow/
Слайд 37
Emails*
Table structure of frame and content items (
inside
)
Fixed size
of main container
Use and support of obsolete properties and attributes (align, bg-color, width)
Possibility of adaptive layout
Слайд 38
Useful links
Example #1
Adaptive email-letters
https://litmus.com/community/templates
Имя файла: CSS-recipies.pptx
Количество просмотров: 84
Количество скачиваний: 0
Скачать
- Предыдущая
Структура исполняемого файла Portable Executable Часть 1
Следующая -
Релігієзнавство
Похожие презентации
Поточные шифры (потоковые)
Интегрированная система информационного обеспечения деятельности исполнительных органов государственной власти Санкт-Петербурга
Build and Gated Check-in
Памятка по информационной безопасности в виртуальном пространстве для детей
01. Введение. Лексика языка Java
Быстрый старт для игроков D&D Next
Программный продукт ЭкоСфера-предприятие
Порядок учета документов, входящих в состав библиотечного фонда
Алгоритмдеу. Алгоритм командалары
Правила поведения в компьютерном классе и работы за компьютером
Операторы графики на языке программирования QBasik Диск
VPN. Виртуальные частные сети
Язык программирования СИ
Yandex Market
Разработка информационной системы для контроля эффективности сотрудников
Интернет-предпринимательство. Команда. Лекция 3
Testing. Testing types
Итоговая работа по модулю 4: Интернет-магазин
Пользовательский интерфейс
Опасности в интернете
Современные САПР в России
Введение в разработку мобильных приложений Введение в разработку приложений для смартфонов на ОС Android
Особенности программирования на объектно-ориентированных языках
Web-страницы и Web-сайты. Структура Web-страницы
Welcome to CAD/CAM services
Базы данных в электронных таблицах
Информационная безопасность
Графический интерфейс Windows. Основные элементы и принципы работы
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q){return {data:{meta:{result:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F}},item:{result:{id:203201,name:m,category:G,count:39,jpg:"jpg\u002F203201",hits:84,download:b,h1:"CSS-recipies презентация",meta:{h1:m,title:m,description:"CSS-recipies презентация на тему, доклад, Информатика",keywords:"CSS-recipies, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему CSS-recipies из раздела Информатика. Презентация на заданную тему содержит 39 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EBasic notions \u003Cbr\u003E\u003Cp\u003Emain approaches of web-development\u003Cbr\u003E \u003Cp\u003EProgressive enhancement\u003Cbr\u003E\u003Cp\u003EGraceful degradation \u003Cbr\u003E\u003Cp\u003EBasic User Interaction for OLDER browsers\u003Cbr\u003EContent and functional representation for OLDER browsers\u003Cbr\u003EJS\u003Cbr\u003ECSS3\u003Cbr\u003E\u003Cp\u003EJS\u003Cbr\u003ECS",file:"CSS-recipies.pptx",texts:["\u003Cp\u003ECSS-recipes\u003Cbr\u003E\u003Cp\u003Epresented by Alex Polybinsky & Sergey Zdobnov\u003Cbr\u003E\u003Cp\u003Efebruary, 2017 \u003Cbr\u003E\u003Cp\u003Ekey strategic tips\u003Cbr\u003E","\u003Cp\u003EBasic notions \u003Cbr\u003E\u003Cp\u003Emain approaches of web-development\u003Cbr\u003E","\u003Cp\u003EProgressive enhancement\u003Cbr\u003E\u003Cp\u003EGraceful degradation \u003Cbr\u003E\u003Cp\u003EBasic User Interaction for OLDER browsers\u003Cbr\u003EContent and functional representation for OLDER browsers\u003Cbr\u003EJS\u003Cbr\u003ECSS3\u003Cbr\u003E\u003Cp\u003EJS\u003Cbr\u003ECSS3\u003Cbr\u003EUser Interaction for MODERN browsers\u003Cbr\u003EContent and functional representation for MODERN browsers\u003Cbr\u003ESupport for OLDER browsers\u003Cbr\u003E","\u003Cp\u003EMobile First\u003Cbr\u003E\u003Cp\u003EDesktop First\u003Cbr\u003E\u003Cp\u003EUI focusing on the most important aspects\u003Cbr\u003ESimplicity and clarity of interface\u003Cbr\u003EJS\u003Cbr\u003ESupport for OLDER browsers\u003Cbr\u003E\u003Cp\u003EApplicable for big portals with hundreds of items\u003Cbr\u003ESupport for OLDER browsers\u003Cbr\u003E","\u003Cp\u003EAdaptive Web\u003Cbr\u003E\u003Cp\u003EResponsive Web\u003Cbr\u003E\u003Cp\u003EOne version of site\u003Cbr\u003EAbility to update design for another devices\u003Cbr\u003EOptimal utilization of all devices\u003Cbr\u003EContinuity interface\u003Cbr\u003E\u003Cp\u003EOne version of layout\u003Cbr\u003ENecessity of initial requirements for whole interface design\u003Cbr\u003EOptimal utilization of all devices\u003Cbr\u003EContinuity interface\u003Cbr\u003E","\u003Cp\u003EAlignment\u003Cbr\u003E\u003Cp\u003Evertical and horizontal positioning\u003Cbr\u003E","\u003Cp\u003Evertical-align and display: inline-block\u003Cbr\u003E\u003Cp\u003EVertical Alignment\u003Cbr\u003E\u003Cp\u003ENew innovative processes created over industry best practices.\u003Cbr\u003E\u003Cp\u003EGlobal solutions for the new interconnected world.\u003Cbr\u003E\u003Cp\u003Ealignment on baseline\u003Cbr\u003E","\u003Cp\u003Ebaseline and x-height\u003Cbr\u003E\u003Cp\u003EVertical Alignment\u003Cbr\u003E","\u003Cp\u003Evertical-align and display: table-cell\u003Cbr\u003E\u003Cp\u003EVertical Alignment\u003Cbr\u003E\u003Cp\u003ENew innovative processes created over industry best practices.\u003Cbr\u003E\u003Cp\u003EGlobal solutions for the new interconnected world.\u003Cbr\u003E\u003Cp\u003Ealignment on container\u003Cbr\u003E","\u003Cp\u003EUseful links\u003Cbr\u003E\u003Cp\u003Ehttps:\u002F\u002Fdeveloper.mozilla.org\u002Fen\u002Fdocs\u002FWeb\u002FCSS\u002Fvertical-align\u003Cbr\u003Ehttp:\u002F\u002Fcss-tricks.com\u002Fwhat-is-vertical-align\u002F\u003Cbr\u003Ehttp:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F19366401\u002Fmy-inline-block-elements-are-not-lining-up-properly\u003Cbr\u003Ehttps:\u002F\u002Fweb-standards.ru\u002Farticles\u002Fvertical-align\u002F\u003Cbr\u003E","\u003Cp\u003Etext-align:center for inline or inline-block\u003Cbr\u003E\u003Cp\u003EHorizontal Alignment\u003Cbr\u003E\u003Cp\u003EGlobal solutions for the new interconnected world.\u003Cbr\u003E\u003Cp\u003Ealignment on container\u003Cbr\u003E","\u003Cp\u003Emargin: 0 auto; and display: block;\u003Cbr\u003E\u003Cp\u003EHorizontal Alignment\u003Cbr\u003E","\u003Cp\u003Estrict size, element’s position (absolute)\u003Cbr\u003E\u003Cp\u003EMiddle of Screen (1st way)\u003Cbr\u003E\u003Cp\u003Eleft (50%), top (50%), margin (size\u002F2)\u003Cbr\u003E","\u003Cp\u003Estrict size, parent’s position (relative), element’s position (absolute)\u003Cbr\u003E\u003Cp\u003EMiddle of Screen (2nd way)\u003Cbr\u003E\u003Cp\u003Eleft (0), top (0), bottom (0), right (0), margin (auto)\u003Cbr\u003E","\u003Cp\u003Enon-strict size, parent’s position (relative), element’s display (inline-block)\u003Cbr\u003E\u003Cp\u003EMiddle of Screen (3rd way)\u003Cbr\u003E\u003Cp\u003E::before contains width (1%), height (100%), vertical-align (middle)\u003Cbr\u003E\u003Cp\u003E::before\u003Cbr\u003E","\u003Cp\u003Enon-strict size, parent’s position (relative), element’s position (absolute)\u003Cbr\u003E\u003Cp\u003EMiddle of Screen (4th way)\u003Cbr\u003E\u003Cp\u003Eleft (50%), top (50%), transform: translate(-50%, -50%);\u003Cbr\u003E","\u003Cp\u003EUseful links\u003Cbr\u003E\u003Cp\u003Ehttps:\u002F\u002Fwww.w3.org\u002FStyle\u002FExamples\u002F007\u002Fcenter.en.html\u003Cbr\u003Ehttps:\u002F\u002Fcss-tricks.com\u002Fcentering-css-complete-guide\u002F\u003Cbr\u003Ehttps:\u002F\u002Fwww.smashingmagazine.com\u002F2013\u002F08\u002Fabsolute-horizontal-vertical-centering-css\u002F\u003Cbr\u003E","\u003Cp\u003Ebody\u003Cbr\u003E\u003Cp\u003Ehtml { height: 100%; }\u003Cbr\u003E\u003Cp\u003EFooter to bottom (1st way)\u003Cbr\u003E\u003Cp\u003Ebody { min-height: 100%; position: relative; }\u003Cbr\u003E\u003Cp\u003Econtainer { padding-bottom:70px; }\u003Cbr\u003E\u003Cp\u003Efooter { position: absolute; height: 70px; left:0; bottom:0;}\u003Cbr\u003E\u003Cp\u003Econtainer\u003Cbr\u003E\u003Cp\u003Efooter\u003Cbr\u003E","\u003Cp\u003Ewrapper\u003Cbr\u003E\u003Cp\u003Ehtml { height: 100%; } body { height: 100%; }\u003Cbr\u003E\u003Cp\u003EFooter to bottom (2nd way)\u003Cbr\u003E\u003Cp\u003Ewrapper { height: 100%; }\u003Cbr\u003E\u003Cp\u003Econtainer { min-height: 100%; box-sizing: border-box; padding-bottom: 70px; }\u003Cbr\u003E\u003Cp\u003Efooter { box-sizing: border-box; height: 70px; margin-top: -70px; }\u003Cbr\u003E\u003Cp\u003Econtainer\u003Cbr\u003E\u003Cp\u003Efooter\u003Cbr\u003E","\u003Cp\u003EFooter to bottom (3rd way)\u003Cbr\u003E\u003Cp\u003Econtainer { calc(100vh - 70px); box-sizing: border-box; }\u003Cbr\u003E\u003Cp\u003Efooter { box-sizing: border-box; height: 70px; }\u003Cbr\u003E\u003Cp\u003Econtainer\u003Cbr\u003E\u003Cp\u003Efooter\u003Cbr\u003E","\u003Cp\u003EUseful links\u003Cbr\u003E\u003Cp\u003E1st way example\u003Cbr\u003E2st way example\u003Cbr\u003E3st way example\u003Cbr\u003E","\u003Cp\u003EPopular recipes\u003Cbr\u003E\u003Cp\u003Enecessary practical approaches\u003Cbr\u003E","\u003Cp\u003Eblock\u003Cbr\u003E\u003Cp\u003Eoverflow (hidden), text-overflow (ellipsis), white-space (nowrap)\u003Cbr\u003E\u003Cp\u003EText Overflow\u003Cbr\u003E\u003Cp\u003ELorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae massa sed arcu...\u003Cbr\u003E\u003Cp\u003Etd\u003Cbr\u003E\u003Cp\u003ELorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae massa sed arcu...\u003Cbr\u003E\u003Cp\u003E+ table-layout (fixed) for \u003Ctable\u003E\u003Cbr\u003E","\u003Cp\u003EUseful links\u003Cbr\u003E\u003Cp\u003Ehttps:\u002F\u002Fcss-tricks.com\u002Fsnippets\u002Fcss\u002Ftruncate-string-with-ellipsis\u002F\u003Cbr\u003Ehttps:\u002F\u002Fsoftware.intel.com\u002Fen-us\u002Fhtml5\u002Fhub\u002Fblogs\u002Fellipse-my-text\u002F\u003Cbr\u003Ehttp:\u002F\u002Fdev.mobify.com\u002Fblog\u002Fmultiline-ellipsis-in-pure-css\u002F\u003Cbr\u003E","\u003Cp\u003EOperations with ::before, ::after\u003Cbr\u003E","\u003Cp\u003EOperations with ::before, ::after\u003Cbr\u003E\u003Cp\u003E.example::before { \t\u003Cbr\u003E content: \"\";\u003Cbr\u003E display: block;\u003Cbr\u003E width: 0px;\u003Cbr\u003E height: 0px;\u003Cbr\u003E border-style: solid;\u003Cbr\u003E border-width: 0 100px 100px 100px;\u003Cbr\u003E border-color: transparent transparent red transparent;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003E\u003Cdiv class=\"example\"\u003EButton with Up Arrow\u003C\u002Fdiv\u003E\u003Cbr\u003E","\u003Cp\u003EOperations with ::before, ::after\u003Cbr\u003E\u003Cp\u003E.tooltip:hover::before { \u003Cbr\u003E triangle styles\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003E\u003Ca class=\"tooltip\" title=”This is some information for our tooltip.”\u003E\u003Cbr\u003E\u003Cspan\u003ECSS3 Tooltip\u003C\u002Fspan\u003E\u003Cbr\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\u003Cp\u003E.tooltip:hover::after { \u003Cbr\u003E tooltip’s box styles (background and font)\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EOperations with ::before, ::after\u003Cbr\u003E\u003Cp\u003E.icon::before { \u003Cbr\u003E circle styles\u003Cbr\u003Econtent: \"\";\u003Cbr\u003Eposition: absolute;\u003Cbr\u003Etop: 3px;\u003Cbr\u003Eleft: 3px;\u003Cbr\u003Ewidth: 6px;\u003Cbr\u003Eheight: 6px;\u003Cbr\u003Eborder: 2px solid #ccc;\u003Cbr\u003Eborder-radius: 14px;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003E.icon::after { \u003Cbr\u003E line styles\u003Cbr\u003Econtent: \"\";\u003Cbr\u003Eposition: absolute;\u003Cbr\u003Etop: 9px;\u003Cbr\u003Eleft: 11px;\u003Cbr\u003Ewidth: 3px;\u003Cbr\u003Eheight: 7px;\u003Cbr\u003Emargin-top: 0;\u003Cbr\u003Ebackground: #ccc;\u003Cbr\u003Etransform: rotate(-45deg);\u003Cbr\u003Eborder-radius: 2px;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EOperations with ::before, ::after\u003Cbr\u003E\u003Cp\u003E.icon::before { \u003Cbr\u003E line styles\u003Cbr\u003Econtent: \"\";\u003Cbr\u003Edisplay: block;\u003Cbr\u003Eheight: 10px;\u003Cbr\u003Ewidth: 0;\u003Cbr\u003Eborder-left: solid 2px #ccc;\u003Cbr\u003Eposition: absolute;\u003Cbr\u003Etop: 4px;\u003Cbr\u003Eleft: 4px;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003E.icon::after { \u003Cbr\u003E triangle styles\u003Cbr\u003Econtent: \"\";\u003Cbr\u003Eheight: 0;\u003Cbr\u003Ewidth: 0;\u003Cbr\u003Eborder-style: solid;\u003Cbr\u003Eborder-width: 5px 9px 5px 0;\u003Cbr\u003Eborder-color: transparent #ccc transparent transparent;\u003Cbr\u003Eposition: absolute;\u003Cbr\u003Etop: 4px;\u003Cbr\u003Eleft: 8px;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EUseful links\u003Cbr\u003E\u003Cp\u003Ehttps:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FPseudo-elements\u003Cbr\u003Ehttps:\u002F\u002Fcss-tricks.com\u002Falmanac\u002Fselectors\u002Fa\u002Fafter-and-before\u002F\u003Cbr\u003Ehttps:\u002F\u002Fcss-tricks.com\u002Fpseudo-element-roundup\u002F\u003Cbr\u003Ehttps:\u002F\u002Fwww.amazeelabs.com\u002Fen\u002Fblog\u002Fthree-things-you-can-do-with-css-pseudo-elements\u003Cbr\u003Ehttps:\u002F\u002Fwww.smashingmagazine.com\u002F2011\u002F03\u002Fstyling-elements-with-glyphs-sprites-and-pseudo-elements\u002F\u003Cbr\u003ETOOLTIP\u003Cbr\u003EICONS\u003Cbr\u003E","\u003Cp\u003ECustomization (input + label)\u003Cbr\u003E\u003Cp\u003E\u003Cinput id=”inputId” \u002F\u003E \u003Cbr\u003E\u003Clabel for=”inputId”\u003ECustom style\u003C\u002Flabel\u003E\u003Cbr\u003E\u003Cp\u003Einput { \t\u003Cbr\u003E display: none;\u003Cbr\u003E}\u003Cbr\u003Einput + label {\u003Cbr\u003E\tcustom input styles (inactive)\u003Cbr\u003E}\u003Cbr\u003Einput:checked + label {\u003Cbr\u003E\tcustom input styles (active)\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EUseful links\u003Cbr\u003E\u003Cp\u003Ehttps:\u002F\u002Fcss-tricks.com\u002Ffloat-labels-css\u002F\u003Cbr\u003Ehttp:\u002F\u002Fhtmlbook.ru\u002Fblog\u002Fkartinka-vmesto-chekboksa\u003Cbr\u003E","\u003Cp\u003ETables\u003Cbr\u003E\u003Cp\u003Eoptions of table layout\u003Cbr\u003E","\u003Cp\u003ETable Layout\u003Cbr\u003E\u003Cp\u003Etable-layout: auto (default)\u003Cbr\u003E\u003Cp\u003Etable-layout: auto + width: 100%\u003Cbr\u003E","\u003Cp\u003ETable Layout\u003Cbr\u003E\u003Cp\u003Etable-layout: fixed\u003Cbr\u003E\u003Cp\u003Etable-layout: fixed + width: 100%\u003Cbr\u003E","\u003Cp\u003EUseful links\u003Cbr\u003E\u003Cp\u003EScrolling in table\u003Cbr\u003Ehttps:\u002F\u002Fwww.w3.org\u002Fwiki\u002FCSS\u002FProperties\u002Ftable-layout\u003Cbr\u003Ehttps:\u002F\u002Fcss-tricks.com\u002Falmanac\u002Fproperties\u002Ft\u002Ftext-overflow\u002F\u003Cbr\u003E","\u003Cp\u003EEmails*\u003Cbr\u003E\u003Cp\u003ETable structure of frame and content items (\u003Ctable\u003E inside \u003Ctable\u003E)\u003Cbr\u003EFixed size of main container\u003Cbr\u003EUse and support of obsolete properties and attributes (align, bg-color, width)\u003Cbr\u003EPossibility of adaptive layout\u003Cbr\u003E","\u003Cp\u003EUseful links\u003Cbr\u003E\u003Cp\u003EExample #1\u003Cbr\u003EAdaptive email-letters\u003Cbr\u003Ehttps:\u002F\u002Flitmus.com\u002Fcommunity\u002Ftemplates\u003Cbr\u003E","\u003Cp\u003EGOOD NIGHT and\u003Cbr\u003EGOOD LUCK\u003Cbr\u003E"],href:"\u002Finformatika\u002Fcss-recipies",href_category:"\u002Finformatika",date:1633784784,related:[{id:375873,name:"Поточные шифры (потоковые)",href:"\u002Finformatika\u002Fpotochnye-shifry-potokovye",jpg:"jpg\u002F375873"},{id:405261,name:"Интегрированная система информационного обеспечения деятельности исполнительных органов государственной власти Санкт-Петербурга",href:"\u002Finformatika\u002Fintegrirovannaya-sistema-informatsionnogo-obespecheniya-deyatelnosti-ispolnitelnyh",jpg:"jpg\u002F405261"},{id:319276,name:"Build and Gated Check-in",href:"\u002Finformatika\u002Fbuild-and-gated-check-in",jpg:"jpg\u002F319276"},{id:302063,name:"Памятка по информационной безопасности в виртуальном пространстве для детей",href:"\u002Finformatika\u002Fpamyatka-po-informatsionnoy-bezopasnosti-v-virtualnom-2",jpg:"jpg\u002F302063"},{id:91822,name:"01. Введение. Лексика языка Java",href:"\u002Finformatika\u002F01-vvedenie-leksika-yazyka-java",jpg:"jpg\u002F91822"},{id:426107,name:"Быстрый старт для игроков D&D Next",href:"\u002Finformatika\u002Fbystryy-start-dlya-igrokov-dampd-next",jpg:"jpg\u002F426107"},{id:586003,name:"Программный продукт ЭкоСфера-предприятие",href:"\u002Finformatika\u002Fprogrammnyy-produkt-ekosfera-predpriyatie",jpg:"jpg\u002F586003"},{id:403987,name:"Порядок учета документов, входящих в состав библиотечного фонда",href:"\u002Finformatika\u002Fporyadok-ucheta-dokumentov-vhodyashchih-v-sostav-1",jpg:"jpg\u002F403987"},{id:395788,name:"Алгоритмдеу. Алгоритм командалары",href:"\u002Finformatika\u002Falgoritmdeu-algoritm-komandalary",jpg:"jpg\u002F395788"},{id:192835,name:"Правила поведения в компьютерном классе и работы за компьютером",href:"\u002Finformatika\u002Fpravila-povedeniya-v-kompyuternom-klasse-i",jpg:"jpg\u002F192835"},{id:495926,name:"Операторы графики на языке программирования QBasik Диск",href:"\u002Finformatika\u002Foperatory-grafiki-na-yazyke-programmirovaniya-qbasik",jpg:"jpg\u002F495926"},{id:97852,name:"VPN. Виртуальные частные сети",href:"\u002Finformatika\u002Fvpn-virtualnye-chastnye-seti",jpg:"jpg\u002F97852"},{id:17270,name:"Язык программирования СИ",href:"\u002Finformatika\u002Fyazyk-programmirovaniya-si",jpg:"jpg\u002F17270"},{id:585171,name:"Yandex Market",href:"\u002Finformatika\u002Fyandex-market",jpg:"jpg\u002F585171"},{id:581064,name:"Разработка информационной системы для контроля эффективности сотрудников",href:"\u002Finformatika\u002Frazrabotka-informatsionnoy-sistemy-dlya-kontrolya-effektivnosti",jpg:"jpg\u002F581064"},{id:223101,name:"Интернет-предпринимательство. Команда. Лекция 3",href:"\u002Finformatika\u002Finternet-predprinimatelstvo-komanda-lektsiya-3",jpg:"jpg\u002F223101"},{id:259312,name:"Testing. Testing types",href:"\u002Finformatika\u002Ftesting-testing-types",jpg:"jpg\u002F259312"},{id:577956,name:"Итоговая работа по модулю 4: Интернет-магазин",href:"\u002Finformatika\u002Fitogovaya-rabota-po-modulyu-4-internet",jpg:"jpg\u002F577956"},{id:259383,name:"Пользовательский интерфейс",href:"\u002Finformatika\u002Fpolzovatelskiy-interfeys-7",jpg:"jpg\u002F259383"},{id:172673,name:"Опасности в интернете",href:"\u002Finformatika\u002Fopasnosti-v-internete-3",jpg:"jpg\u002F172673"},{id:164138,name:"Современные САПР в России",href:"\u002Finformatika\u002Fsovremennye-sapr-v-rossii",jpg:"jpg\u002F164138"},{id:580310,name:"Введение в разработку мобильных приложений Введение в разработку приложений для смартфонов на ОС Android",href:"\u002Finformatika\u002Fvvedenie-v-razrabotku-mobilnyh-prilozheniy-vvedenie",jpg:"jpg\u002F580310"},{id:315766,name:"Особенности программирования на объектно-ориентированных языках",href:"\u002Finformatika\u002Fosobennosti-programmirovaniya-na-obektno-orientirovannyh-yazykah",jpg:"jpg\u002F315766"},{id:226987,name:"Web-страницы и Web-сайты. Структура Web-страницы",href:"\u002Finformatika\u002Fweb-stranitsy-i-web-sayty-struktura",jpg:"jpg\u002F226987"},{id:93961,name:"Welcome to CAD\u002FCAM services",href:"\u002Finformatika\u002Fwelcome-to-cadcam-services-2",jpg:"jpg\u002F93961"},{id:334322,name:"Базы данных в электронных таблицах",href:"\u002Finformatika\u002Fbazy-dannyh-v-elektronnyh-tablitsah",jpg:"jpg\u002F334322"},{id:360062,name:"Информационная безопасность",href:"\u002Finformatika\u002Finformatsionnaya-bezopasnost-26",jpg:"jpg\u002F360062"},{id:200537,name:"Графический интерфейс Windows. Основные элементы и принципы работы",href:"\u002Finformatika\u002Fgraficheskiy-interfeys-windows-osnovnye-elementy-i",jpg:"jpg\u002F200537"}],navigation:{next:"\u002Fobshchestvoznanie\u002Frelgznavstvo",next_name:"Релігієзнавство",prev:"\u002Finformatika\u002Fstruktura-ispolnyaemogo-fayla-portable-executable-chast",prev_name:"Структура исполняемого файла Portable Executable Часть 1"}}},categories:{result:[{id:H,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:H,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:j,name:"Литература",pseudoname:"literatura"},{id:119,ordering:k,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:I,SITE_HOST:"mypreza.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",10,11,"#ffffff","CSS-recipies","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images_before","category","both",88,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика",1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Useful links
https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
https://software.intel.com/en-us/html5/hub/blogs/ellipse-my-text/
http://dev.mobify.com/blog/multiline-ellipsis-in-pure-css/

Operations with ::before, ::after

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;
}
Button with Up Arrow

Operations with ::before, ::after
.tooltip:hover::before {
triangle styles
}
some information for our tooltip.”>
CSS3 Tooltip
.tooltip:hover::after {
tooltip’s box styles (background and font)
}

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;
}
.icon::after {
line styles
content: "";
position: absolute;
top: 9px;
left: 11px;
width: 3px;
height: 7px;
margin-top: 0;
background: #ccc;
transform: rotate(-45deg);
border-radius: 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;
}
.icon::after {
triangle styles
content: "";
height: 0;
width: 0;
border-style: solid;
border-width: 5px 9px 5px 0;
border-color: transparent #ccc transparent transparent;
position: absolute;
top: 4px;
left: 8px;
}

Useful links
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
https://css-tricks.com/almanac/selectors/a/after-and-before/
https://css-tricks.com/pseudo-element-roundup/
https://www.amazeelabs.com/en/blog/three-things-you-can-do-with-css-pseudo-elements
https://www.smashingmagazine.com/2011/03/styling-elements-with-glyphs-sprites-and-pseudo-elements/
TOOLTIP
ICONS

Customization (input + label)
Custom style
input { display: none;
}
input + label {
custom input styles (inactive)
}
input:checked + label {
custom input styles (active)
}

Useful links
https://css-tricks.com/float-labels-css/
http://htmlbook.ru/blog/kartinka-vmesto-chekboksa

Tables
options of table layout

Table Layout
table-layout: auto (default)
table-layout: auto + width: 100%

Table Layout
table-layout: fixed
table-layout: fixed + width: 100%

Useful links
Scrolling in table
https://www.w3.org/wiki/CSS/Properties/table-layout
https://css-tricks.com/almanac/properties/t/text-overflow/

Emails*
Table structure of frame and content items (

Useful links
Example #1
Adaptive email-letters
https://litmus.com/community/templates