RESPONSIVE WEB DESIGN
Download as PPTX, PDF1 like824 views
Документ посвящен адаптивному веб-дизайну с использованием HTML5 и CSS3, описывающим медиазапросы, преимущества новых свойств и семантически значимые элементы. В нем подчеркивается важность создания кросс-браузерных решений и использования современных фреймворков для улучшения работы с кодом и дизайном. Также рассматриваются возможности анимации, переходов и масштабируемых значков с помощью CSS3.
RESPONSIVE WEB DESIGN
- 2. Оглавление: • • • • • • • • • Знакомство с HTML5, CSS3 адаптивным и веб-дизайном Медиазапросы: поддержка разных областей просмотра Использование «резиновых» макетов HTML5 для адаптивных веб-дизайнов CSS3: селекторы, типографика цветовые и режимы Великолепная эстетика использованием с CSS3 CSS3-переходы, трансформации анимации и Покорение форм помощью с HTML5 CSS3 и Решение кросс-браузерных проблем адаптивностью с
- 3. Знакомство с HTML5, CSS3 адаптивным и веб-дизайном Итан Маркотт – разносторонний дизайнер-разработчик. Его работы – это сочетание качественного кода и захватывающего дизайна. Среди его клиентов – New York Magazine, Стэнфордский университет, Кинофестиваль «Сандэнс» и «Консорциум Всемирной паутины» (World Wide Web Consortium, W3C). Он ведет блог unstoppablerobotninja.com и постоянно зависает в Твиттере (@beep). Итан – автор и технический редактор журнала A List Apart – издания для людей, делающих веб-сайты. Вместе с основателем компании Happy Cog, самым известным веб-дизайнером в мире Джеффри Зельдманом, Итан работал над третьей редакцией книги «Web-дизайн по стандартам», которая занимает почетное место на книжных полках каждого опытного дизайнера.
- 4. Преимущества HTML5 • Упрощение разметки • Новые семантически значимые элементы тегов • Новые атрибуты Преимущества CSS3 • Новые свойства • Media queries • Применение css3 не приведет к каким-либо нарушениям
- 5. Можно ли реализовать потенциал HTML5 и CSS3 уже сегодня? • Хочет ли заказчик охватить максимально широкий круг интернет -пользователей, количество которых постоянно растет? • Хочет ли заказчик получить максимально чистую, наиболее быст ро работающую самую и удобную сопровождении в кодовую базу? • Понимает ли заказчик, что взаимодействие может должно и сл егка отличаться при использовании разных браузеров? • Хочет ли заказчик, чтобы нужный ему дизайн выглядел одина
- 6. Медиазапросы: поддержка разных областей просмотра Медиазапросы можно использовать уже сегодня • • • • • • • Firefox 3.6+ Safary 4+ Chrome 4+ Opera 9+ IE 9+ Safari 3.2+ в IOS Android 2.1 + Синтаксис медиазапросов @media screen and (max-width: 960px) <link rel="stylesheet" media="screen and (max-width: 960px) " href="800wide-portrait-screen.css" />
- 7. Что позволяют проверить медиазапросы • • • • • • • • • • • • • Width Height Device-width Device-height Orientation Aspect-ratio Device-aspect-ratio Color Color-index Monochrome Resolution Scan Grid
- 8. Использование «резиновых» макетов ШИРИНА ДОЧЕРНЕГО ЭЛЕМЕНТА __________________________________ * ШИРИНА РОДИТЕЛЬСКОГО ЭЛЕМЕНАТА 100 = РЕЗУЛЬТАТ
- 10. Сеточные системы CSS • • • • • • • Semantic (http://semantic.gs/) Skeleton (http://www.getskeleton.com/) Less Framework (http://lessframework.com/) 1140 Css Grid (http://cssgrid.net/) Clumnal (http://www.columnal.com/) Foundation (http://foundation.zurb.com) Twitter Bootstrap (http://getbootstrap.com/)
- 11. HTML5 для адаптивных веб-дизайнов
- 13. CSS3 типографика: селекторы и цветовые режимы
- 14. Новые цветовые форматы CSS3 и альфа-прозрачность • RGB • HEX • HSL
- 15. Великолепная эстетика использованием с CSS3 • Текст с тенью text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7; • Тени блочных элементов box-shadow:inset 0 0 40px #000000; • Линейные фоновые градиенты background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%); • Радиальные фоновые градиенты background: radial-gradient(center, ellipse farthest-corner, #ffffff 72%, #dddddd 100%); • Повторяющиеся градиенты
- 16. background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px); background: repeating-radial-gradient(2px 2px, ellipse, hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px, hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px);
- 17. body { background-color:white; background-image: radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px), repeating-radial-radient(hsla(0, 0%, 87%, 0.31) 0, hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px, transparent 26px, transparent 50px); background-size: 30px 30px, 90px 90px; background-position: 0 0; } http://lea.verou.me/ Рис. 6.18. Для страницы задан фон в виде узора
- 18. CSS препроцессоры • http://sass-lang.com/ • http://www.lesscss.org/ Масштабируемые значки • http://fico.lensco.be/#see • http://icomoon.io/
- 20. • Трансформации • 2D • scale • translate • rotate • Skew • matrix • 3D • perspective • rotateX & rotateY
- 21. Анимация с помощью CSS3 @keyframes warning { 0% { text-shadow: 0px 0px 4px #000000; } 50% { text-shadow: 0 0 20px #000000; } 100% { text-shadow: 0px 0px 4px #000000; } } animation: warning 1.5s infinite ease-in;
- 22. Покорение форм помощью с HTML5 CSS3 и • Атрибуты • • • • • placeholder required autofocus autocomplete list & datalist • Типы полей ввода • email • number • url • tel • search • pattern • color • date, time, month,week e.t.c • range
- 23. Решение кросс-браузерных проблем адаптивностью с • Плавное сокращение возможностей • Прогрессивное улучшение Modernizr — «швейцарский армейский нож» разработчика клиентских приложений <html class=" js flexbox geolocation postmessage indexeddb history websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localStorage sessionstorage applicationcache" lang="en">
- 24. Выводы, вопросы и дополнения? • Используйте html5 и css3 где возможно • Не забывайте про владельцев мобильных систем – используйте адаптивную верстку • Используйте полизаполнения • Используйте готовые фреймворки • Используйте css препроцессоры