20 CSS-уроков для адаптивного веб-дизайна
6 августа 2013 | Опубликовано в css | 8 Комментариев »
Сегодняшняя подборка уроков для CSS посвящена адаптивному веб-дизайну. Как самому сделать так, чтобы ваш сайт отображался корректно на любом экране? Вы наверняка найдете ответ ниже. Вас ждут уроки для начинающих и продвинутых кодеров. Вы научитесь создавать адаптивный сайт, а также его отдельные элементы.
Для начала немного уроков общего характера:
Урок от Jason Michael
Урок от Shay Howe
Урок на line25
Используем Media Queries
Урок от Harry Atkins
Русский вариант урока смотрите на Дежурке
Урок от Nikola Lazarevic
Видео-урок от Christian Vasile
Урок на 9lessons
А теперь детальнее:
Адаптивная горизонтальная верстка от Mary Lou
Создаем адаптивную навигацию с Thoriq Firdaus
Делаем картинки адаптивными с Nicolas Gallagher
Рамки для картинок в адаптивном дизайне на csswizardry
Хорошее решение для связок картинка-текст от zomigi
Как сделать так, чтобы расстояние между картинками менялось соответственно высоте текста? Ответ в уроке:
«Отзывчивая» мини-галерея от Joshua Johnson
«Резиновое» видео от webdesignerwall
Слайд-шоу с эффектом Paralax от Ring Wing
Делаем адаптивное меню на webdesign
Или смотрим урок в русском варианте на Дежурке
Адаптивные таблицы данных на css-tricks
Адаптивный таймлайн c 3d эффектом от Mary Lou
Адаптивное резюме! Автор Jake Rocheleau
Сайт на печать от Adrian Roselli
Оказывается адаптивный веб-дизайн нужен не только для корректного отображения на любом экране. Как на счет того, чтобы распечатать сайт?
Были использованы материалы Aritra Roy
Комментарии
Оставить ответ
Похожие статьи
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- Футуризм в иллюстрации
193
6 августа 2013 в 9:29
Вот бы еще на русском языке эти уроки...
Ответить
6 августа 2013 в 16:41
Хотелось ты побольше переводов подобных уроков. А вообще спасибо и за такую подборку)
Ответить
26 августа 2013 в 14:43
Переводы хочу(
Ответить
12 октября 2013 в 9:50
Правильно ли я понял что в «Резиновое» видео от webdesignerwall обязательно во время размещения видео нужно оборачивать его в див? Есть ли способы чтобы вставил строчку кода видео в пост и оно становилось автоматически адаптивным? Я знаю что для картинок такое есть, вот и подумал как бы для видео так настроить. Может кто знает в каком направлении копать?
Ответить
декабря 24, 2013 at 10:57 пп
Можно и в посте ставить, чтобы оно было резиновым. Все это решается через php и шаблон вывода поста.
Ответить
13 марта 2014 в 19:52
Могу перевести пару статей на русский. Если есть в этом необходимость)
Только выложите их в массы.
Пишите на s.allexandriyaСОБАЧКАgmail.com
Ответить
24 марта 2014 в 16:15
Я сделал JS снипет, который позволяет адаптировать таблицы без каких либо сторонних плагинов, кроме jQuery.
Думаю, вашим читателям может пригодиться.
aterr.net/adaptivnaya-tablita/
Ответить
1 февраля 2015 в 20:51
Ответить