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

• 

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

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

  Далее... 1 Комментарий »
• 

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

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

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

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

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

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

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

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

  Далее... 1 Комментарий »
• 

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

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

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

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

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

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

  Создание выпадающих списков

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

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

  Текстовые эффекты средствами CSS3

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

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

  Создаем «аккордеон»-меню на css3

  В этом уроке мы будем создавать «аккордеон»-меню. По сколько мы будем создавать меню на чистом css, оно будет работать в браузерах, которые поддерживают селектор псевдо-класса :target.

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