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

• 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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