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

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

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

  • Постоянная ссылка на Создание коммерческих веб-элементов средствами css3

    Создание коммерческих веб-элементов средствами css3

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Создаем адаптивный css-таймлайн c 3d эффектом

    Создаем адаптивный css-таймлайн c 3d эффектом

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

    Далее... 4 Комментариев »
  • Постоянная ссылка на Простой эффект YouTube-меню

    Простой эффект YouTube-меню

     Сегодня мы будем создавать маленькое меню с эффектом, который вы видели в левой части меню на YouTube. Меню состоит из маленькой иконки меню, ярлыка и списка пунктов меню, который появляется при нажатии либо на ярлыку, либо на иконке. Как только пользователь кликнул для открытия меню, ярлык будет перемещаться вверх, а иконку сдвигается вправо. Элементы списка меню будут появляться [...]

    Далее... 1 Комментарий »
  • Постоянная ссылка на Адаптивное Retina-меню

    Адаптивное Retina-меню

    Сегодня мы будем создавать яркое меню для Retina-дисплеев. В зависимости от размера окна браузера меню будет автоматически изменять раскладку. Это десктопная версия — обычное расположение меню, двухколоночное меню для планшетов и мобильная версия со скрытой навигацией. Чтобы адаптировать меню под retina-дисплеи и избежать пикселизации при изменении размеров, мы будем использовать шрифты-иконки. Также обратите внимание, что некоторые эффекты работают [...]

    Далее... 1 Комментарий »
  • Постоянная ссылка на Редактирование jQuery слайдеров

    Редактирование jQuery слайдеров

    Слайдеры являются одними из основных компонентов, которые используются на сайтах для различных целей. Мы можем создавать слайдеры изображений, видео или контента, использую  JQuery. JQuery является самой большой библиотекой JavaScript, которая используется для создания слайдеров. Почти все слайдеры можно разделить на несколько категорий, в которых будет отличаться техника перелистывания слайдов. 

    Далее... 7 Комментариев »
  • Постоянная ссылка на CSS-фреймворки для адаптивного дизайна

    CSS-фреймворки для адаптивного дизайна

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

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

    Создание css-сетки миниатюр с динамическим всплывающим меню

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Создаем шестиугольник с помощью чистого CSS3

    Создаем шестиугольник с помощью чистого CSS3

     В этом уроке мы будем делать шестигранник, который будет иметь фоновое изображение. Для этого будем использовать средства  CSS3. С помощью трансформаций css3 мы можем поворачивать и делать различные манипуляции элементов DOM. Для этого будем использовать otate и masking. В области стилей урок может показаться немного сложным, но он объяснен иллюстрациями. Давайте приступим.

    Далее... 6 Комментариев »
  • Постоянная ссылка на Адаптивная сетка изображений с предварительным просмотром

    Адаптивная сетка изображений с предварительным просмотром

    Если вы в последнее время искали изображение в Google, возможно, заметили интересную технику предварительного просмотра изображений при нажатии на превьюшку. Это очень хороший эффект и он значительно упрощает поиск. Сегодня хотим показать вам, как сделать такой эффект. Идея будет заключаться в том, чтобы при нажатии на маленькое изображение, открывалось большое с некоторыми другими элементами, такими как заголовок, [...]

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