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

Опубликовано в css, августа 6, 2013
Метки: css, css3, адаптивное меню, адаптивные сайты, адаптивные слайдеры, адаптивный веб дизайн, адаптивный дизайн, меню css, подборка уроков, подборка уроков CSS3, подборка уроков по CSS, урок, урок css3, уроки css, уроки css3

�

Михаил
6 августа 2013 в 9:29
0

Вот бы еще на русском языке эти уроки...
Ответить
Андрей
6 августа 2013 в 16:41
+3

Хотелось ты побольше переводов подобных уроков. А вообще спасибо и за такую подборку)
Ответить
sfanta
26 августа 2013 в 14:43
-1

Переводы хочу(
Ответить
Anton
12 октября 2013 в 9:50
0

Правильно ли я понял что в «Резиновое» видео от webdesignerwall обязательно во время размещения видео нужно оборачивать его в див? Есть ли способы чтобы вставил строчку кода видео в пост и оно становилось автоматически адаптивным? Я знаю что для картинок такое есть, вот и подумал как бы для видео так настроить. Может кто знает в каком направлении копать?
Ответить

Виталий Ответ:
декабря 24, 2013 at 10:57 пп

0

Можно и в посте ставить, чтобы оно было резиновым. Все это решается через php и шаблон вывода поста.
Ответить
allexandriya
13 марта 2014 в 19:52
0

Могу перевести пару статей на русский. Если есть в этом необходимость)
Только выложите их в массы.
Пишите на s.allexandriyaСОБАЧКАgmail.com
Ответить
Василий Чёрный
24 марта 2014 в 16:15
+2

Я сделал JS снипет, который позволяет адаптировать таблицы без каких либо сторонних плагинов, кроме jQuery.
Думаю, вашим читателям может пригодиться.
aterr.net/adaptivnaya-tablita/
Ответить
Александр
1 февраля 2015 в 20:51
0

:-D Вот мне просто интересно.....Хочет несчастный человек научиться верстке...но вот беда — уроки на английском или французском или начинаются с фразы: мы не будем углубляться или вдаваться...в сети полно ресурсов на эту тему...мы вам расскажем вот про это....ну а дальше все как и то, с чего мы начали....и так далее. Так вот....либо вообще не пишите ничего, либо все же делайте нормально или за деньги но честно...ибо дурные вы писать бесплатно что-то. А воды в сети, вы правы, действительно хватает.
Ответить