Записи, помеченные ‘верстка’

• 

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

  При создании веб-приложения нередко может возникнуть необходимость в предоставлении пользователям дружественных всплывающих подсказок, объясняющих особенности интерфейса. Можно сделать это, используя ссылки на отдельные страницы с текстами, разъясняющими соответствующие темы. Но тогда пользователи могут забыть, чем они занимались до перехода по таким ссылкам, что не очень дружественно. Более удачный путь — показать разъясняющий текст прямо там, где [...]

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

  Интересный эффект выделения текста с использованием псевдоэлемента CSS выделения

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

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

  Создание простых масок CSS: изображения в фигурных рамках

  В свадебных и подобных праздничных фотографиях нередко используется осветление или затемнение изображения по краям. В сущности так создается внутренняя рамка для изображения. Для воплощения такого эффекта можно использовать способ, подобный описанному в уроке «Создание простых масок CSS: изображения с закругленными краями»: увеличив радиус закругления рамки, можно создать эффект эллиптической обрезки, показанный ниже.

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

  Создание ссылок со значками социальных сетей с использованием только CSS

  Из этого урока вы узнаете, как создать ссылки со значками социальных сетей, используя CSS   и простой HTML. С помощью современных технологий, без использования изображений или JavaScript сделаем из ненумерованного списка текстовых ссылок набор значков. Это решение поддерживается всем современными версиями браузеров и даже такими старыми, как Internet Explorer версии 8.

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

  Фоновые изображения в стиле поп-арт с помощью SVG и режимов наложения

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

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

  Создание простых масок CSS изображения с закругленными краями

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

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

  Создание закругления рамки

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

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

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

  В этом уроке мы покажем, как создать почтовую рамку из изображения, используя свойство изображения рамки. Если хотите узнать об этом свойстве больше, можете почитать о его технических подробностях. Зачем это может понадобиться? Обычно на конверте наклеена более чем одна марка. Если нам нужно изобразить это на веб-странице, у нас есть два варианта: переделать изображения в почтовые марки [...]

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

  Создание блока с наклонной нижней рамкой

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

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