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

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

Архив рубрики ‘css’

  • Постоянная ссылка на Адаптивный веб-дизайн с использованием CSS3

    Адаптивный веб-дизайн с использованием CSS3

    Революция смартфонов привнесла новые особенности в веб-разработку, пришло время преобразовать дизайн вашего веб-сайта в адаптивный дизайн вместо того, чтобы поддерживать отдельную мобильную версию. Адаптивный дизайн автоматически подстроится, основываясь на размере экрана используемого устройства. Этот урок объясняет, как использовать свойство CSS3 @media и работать с Internet Explorer, используя библиотеку JavaScript Modernizr.

    Далее... 3 Комментариев »
  • Постоянная ссылка на Многоуровневое меню

    Многоуровневое меню

    Сегодня мы хотим поделиться с вами экспериментальным многоуровневым меню, которое может стать полезным для сайтов с большим количеством контента (например, интернет-магазинов). В результате получается меню, которое может содержать теоретически бесконечное количество вложенных подменю. Когда вы открываете подменю, главное меню частично скрывается под ним. При необходимости этот срез может быть видимым или же нет. Если нет — то [...]

    Далее... 4 Комментариев »
  • Постоянная ссылка на Создаем стильное плоское меню при помощи CSS

    Создаем стильное плоское меню при помощи CSS

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

    Далее... 4 Комментариев »
  • Постоянная ссылка на Создание 3D эффекта на примере простых объектов

    Создание 3D эффекта на примере простых объектов

    В данном уроке пойдет речь о технике, что может быть применена к объектам, у которых есть несколько сторон. Нашим примером будет 3D киногалерея с глянцевыми плакатами. Когда плакаты будут вращаться, стороны будут отображать матовые информационные карты с метаданными о фильме.

    Далее... 3 Комментариев »
  • Постоянная ссылка на Интерактивная инфографика с SVG и CSS анимацией

    Интерактивная инфографика с SVG и CSS анимацией

    В данном уроке мы научимся строить интерактивную инфографику с помощью SVG, CSS и JavaScript. Одной из менее обсуждаемых тем является свойство новых браузеров в увеличении поддержки файлов в формате SVG. В отличие от растровых изображений, например, PNG, JPG или GIF, векторная графика в файлах SVG абсолютно масштабируемая к любому размеру и будет отображаться при любом разрешении или плотности [...]

    Далее... 5 Комментариев »
  • Постоянная ссылка на Создаем адаптивное резюме при помощи HTML5/CSS3

    Создаем адаптивное резюме при помощи HTML5/CSS3

    Почти каждый в определенный момент нуждается в создании резюме. Когда работаешь фрилансером и соперничаешь за новые проекты с другими, возникает вопрос о том, как лучше всего кратко и быстро предоставить сведения о своих навыках и опыте потенциальному клиенту. Что может быть лучше, чем онлайн резюме? В данном уроке показано как построить адаптивное одностраничное резюме. Код [...]

    Далее... 6 Комментариев »
  • Постоянная ссылка на Создаем стильную кнопку, используя только CSS3

    Создаем стильную кнопку, используя только CSS3

    Сегодня мы будем рисовать кнопку, используя исключительно CSS. В работе будут использованы градиенты, тени, границы и переходы. Кнопка основана на стандартном стиле, который встречается практически на всех сайтах. Мы выполним ее в закругленном прямоугольном стиле, похожем по форме на табличку. Тексту же на кнопке придадим небольшую тень, чтобы создать впечатление эффекта углубления.

    Далее... 4 Комментариев »
  • Постоянная ссылка на Создаем адаптивный веб-дизайн с использованием Media Queries

    Создаем адаптивный веб-дизайн с использованием Media Queries

    Если Вы еще не имели дела с Media Queries, сейчас самое время создать Ваш первый адаптивный дизайн веб-сайта. В этом уроке мы рассмотрим преобразование дизайна темы WordPress в адаптивную верстку, принимая во внимание исходную сетчатую структуру дизайна. Надеемся, урок окажется вам полезен.

    Далее... 3 Комментариев »
  • Постоянная ссылка на Слайдер на CSS3 с эффектом параллакса

    Слайдер на CSS3 с эффектом параллакса

    В этом обучающем уроке мы создадим слайд-шоу с эффектом параллакса, используя несколько свойств CSS3. Идея состоит в том, чтобы перемещать положение двух фонов, двигая слайды, чтобы таким образом создавать незначительный эффект параллакса.

    Далее... 7 Комментариев »