Рубрика «Веб-дизайн»

Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?

Как сделать, чтобы цвет маркеров в списке отличался от цвета текста? На этом уроке мы попробуем задать цвет маркеров в списке не изменяя цвет текста. Существует два способа изменения цвета маркеров, условно назовем их простой и хитрый. Простой метод состоит в том, что внутрь <li> вкладываем тег <span>, а уже внутрь него помещаем текст. Иными словами вместо традиционной …

Как для каждого абзаца добавить отступ первой строки?

Как мне для каждого абзаца добавить отступ первой строки? На этом уроке мы научимся добавлять отступ к первой строке каждого абзаца.      1.Открываем блокнот: 2.Стилевое свойство text-indent используется для добавления абзацного             отступа(красной строки). Величину отступа можно указывать в пикселах, процентах или других доступных единицах. Вставляем данные с картинки: 3.Сохраняем файл: Вот, что …

Как сделать слой полупрозрачным?

Как сделать слой полупрозрачным? Сегодня мы сделаем блочный элемент со всем его содержимым полупрозрачным. Для изменения степени прозрачности элемента применяется стилевое свойство opacity со значением от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, непрозрачности объекта. В браузере Internet Explorer это свойство не работает, поэтому специально для него приходится использовать filter, свойство, не входящее в …

Как вывести термин и определение в одну строк?

Как вывести термин и определение в одну строкy? На этом уроке мы научимся выводить термин и определение в одну строку. 1.  Заходим в блокнот.       2. Вводим данные с картинки.                 3. Сохраняем этот файл.               4. Результаты нашей работы.

Как добавить всплывающую подсказку к изображению?

Как добавить всплывающую подсказку к изображению? На этом уроке мы научимся добавлять всплывающую подсказку к изображению, которая появляется при наведении на него курсора мыши. Всплывающая подсказка обычно используется для краткого комментирования содержания изображений и появляется при наведении курсора мыши на картинку. Добавление такой подсказки происходит с помощью атрибута title тега <img>. Открываем блокнот Вводим данные …

Как сделать горизонтальное меню с наклоном? 

Как сделать горизонтальное меню с наклоном? На этом уроке мы научимся делать горизонтальное меню, пункты которого имеют произвольный наклон. За трансформацию элемента отвечает стилевое свойство transform, в качестве его значения используется функция skewX, которая и задаёт нужный наклон. Угол наклона проще устанавливать в градусах, к примеру, 30deg — это 30º от вертикали. Текст внутри элемента также …

Как сделать вложенный список?

Как сделать вложенный список? На этом уроке мы сделаем один маркированный список, находящийся внутри другого. 1.    Открываем блокнот 2.  Вводим данные с картинки 3. Сохраняем блокнот Результат нашей работы:

Как отразить изображение?

Как отразить изображение? На этом уроке мы научимся отражать изображение по горизонтали или вертикали. Для отражения изображения или другого элемента, в том числе текстового, применяется свойство transform и функция scale() с отрицательным значением. Варианты такие: Первый вариант:transform: scale(-1, 1) — отражение по горизонтали; Второй вариант:transform: scale(1, -1) — отражение по вертикали; Третий вариант:transform: scale(-1, -1) …

Хочу изменить цвет первой буквы в каждом абзаце HTML CSS

Хочу изменить цвет первой буквы в каждом абзаце HTML CSS. Что мне для этого надо сделать?   Мы изменим цвет первой буквы в каждом абзаце. Для начала создадим html файл и напишем все так как показано на скриншоте.               2. Сохраняем как показано на скриншоте.             …

Как добавить рамку к изображению?

Как добавить рамку к изображению? На этом уроке мы научимся добавлять рамку вокруг изображения заданной толщины и цвета.        1.Открываем блокнот: 2. Свойство border используется для добавления рамки вокруг картинки. Его следует добавить к селектору IMG. В качестве значения одновременно указывается толщина границы, её стиль и цвет.   Вставляем данные с картинки: Вот,что у нас получилось: На …