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
549
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