Записи, помеченные ‘css’

• 

  Эффекты прописных и строчных букв с использованием JavaScript или CSS

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

  Далее... Нет комментариев »
• 

  Создание простых media queries для печати

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

  Далее... Нет комментариев »
• 

  Создание эффекта полутонов с использованием SVG

  Визуальный эффект полутонов — построение изображения из крошечных цветных точек — легко создать на веб-странице, используя SVG. Способ, показанный здесь, использует значение свойства множественных фоновых изображений у элемента блока: один повторяющийся решетчатый узор, использованный в нашем уроке «Создание фоновых изображений в стиле поп-арт с помощью SVG и режимов наложения», только с меньшим размером решетки, объединенный [...]

  Далее... Нет комментариев »
• 

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

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

  Далее... Нет комментариев »
• 

  Использование контекстного селектора и селектора прямого потомка в CSS

  В этом уроке мы рассмотрим два селектора CSS, которые относятся к родственным селекторам: контекстный селектор и селектор прямого потомка. Селектор прямого потомка используется довольно часто, хотя, возможно, его следовало бы использовать намного чаще. Он выбирает только элементы, которые являются прямыми потомками определенного элемента. Например, у нас есть элемент статьи HTML5, внутри которого находятся элементы абзаца и элемент [...]

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

  Полноэкранное фонового видео с текстом в режиме наложения

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

  Далее... Нет комментариев »
• 

  Генератор фоновых узоров SVG из пересекающихся кругов

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

  Далее... Нет комментариев »
• 

  Создание встроенной в веб-страницу Google карты

  Карты очень полезны для отображения расположения предприятий и мероприятий на веб-страницах. В этом уроке мы рассмотрим только сервис Google карты, но есть и другие сервисы, например, такие как Яндекс карты. Для начала найдите место на Google карте и настройте подходящую степень приближения.

  Далее... Нет комментариев »
• 

  Создание эффекта набора текста

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

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