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

• 

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

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

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

  Использование единиц измерения rem

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

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

  Создание классических типографских эффектов: перенос слов

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

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

  Использование селекторов псевдоклассов

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

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

  Тетрадка в линейку с расположением на ней текста на SVG и CSS

  В этом уроке мы научимся создавать фон SVG со школьной темой. Фон состоит всего лишь из двух прямых линий, тесно связан с другой демонстрацией создания фонов из полосок и довольно прост в создании, так что мы решили добавить задачу, чтобы текст всегда располагался строго на полосках.

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

  Адаптивное фоновое изображение, постепенно исчезающее при прокрутке

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

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

  Полностью симметричное расположенных заголовков при помощи CSS

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

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

  Создание форм HTML стандартных полей ввода текста

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

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

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

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

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