Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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




Комментарии

  1. Михаил
    Thumb up Thumb down 0

    Вот бы еще на русском языке эти уроки...

  2. Андрей
    Thumb up Thumb down +3

    Хотелось ты побольше переводов подобных уроков. А вообще спасибо и за такую подборку)

  3. sfanta
    Thumb up Thumb down -1

    Переводы хочу(

  4. Anton
    Thumb up Thumb down 0

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

    Виталий Ответ:

    Thumb up Thumb down 0

    Можно и в посте ставить, чтобы оно было резиновым. Все это решается через php и шаблон вывода поста.

  5. allexandriya
    Thumb up Thumb down 0

    Могу перевести пару статей на русский. Если есть в этом необходимость)

    Только выложите их в массы.

    Пишите на s.allexandriyaСОБАЧКАgmail.com

  6. Василий Чёрный
    Thumb up Thumb down +2

    Я сделал JS снипет, который позволяет адаптировать таблицы без каких либо сторонних плагинов, кроме jQuery.

    Думаю, вашим читателям может пригодиться.

    aterr.net/adaptivnaya-tablita/

  7. Александр
    Thumb up Thumb down 0

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