Будьте в курсе последних событий, подпишитесь на обновления сайта

Глава 3. Основы CSS

Функция calc() в CSS

Здравствуйте! В этой статье я хотел бы рассказать о такой полезной функции в css как calc(). Эта функция позволяет производить арифметические вычисления над элементами страницы причем может работать как с абсолютными так и с отностельными размерами CSS. То есть если ширина элемента задана в процентах, то можно от процентов отнять пиксели и наоборот.

Функция calc

 

Читать далее

Как сделать видео в качестве фона сайта

Здравствуйте! В этой статье мы поговорим о том, как сделать видео в качестве заднего фона для вашего сайта на HTML5. Тут все очень просто нужно создать тег <video> и с помощью стилей делаем его фоном как отдельного элемента так и всего <body>. Но давайте обо всем по порядку.

как сделать видео в качестве фона для сайта

 

Читать далее

Фильтры в CSS для редактирования изображений.

Здравствуйте! В этой статье речь пойдет о фильтрах в css.  До появления CSS фильтров вам оставалось или загружать несколько версий изображения, или манипулировать ими при помощи JavaScript. Если вы не хотите сами возиться с изображениями, вам помогут CSS фильтры. С помощью фильтров можно очень гибко редактировать изображения, а именно уменьшать или увеличивать яркость, контрастность, тень  и.т.д. Но давайте обо всем по порядку.

Фильтры в CSS

Читать далее

Как задать вид курсора

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

cursor: [вид];

Стандартных видов у курсора — 14:

  • crosshair — перекрестье
  • help — знак вопроса или воздушный шар (в зависимости от браузера)
  • e-resize, w-resize — двунаправленная горизонтальная стрелка
  • n-resize, s-resize — двунаправленная вертикальная стрелка
  • ne-resize, sw-resize — двунаправленная диагональная стрелка (с нижнего левого угла в верхний правый)
  • se-resize, nw-resize — двунаправленная диагональная стрелка (с нижнего правого угла в верхний левый)
  • move — перекрестье со стрелками на конце
  • pointer — ладошка
  • text — вертикальная линия
  • wait — песочные часы или циферблат (в зависимости от браузера)

И еще два значения:

  • auto — вид по умолчанию
  • default — вид по умолчанию на данной платформе (в основном стрелка)

как задать вид курсора CSS

Читать далее

Радиальный градиент CSS

Здравствуйте! От линейных градиентов переходим к радиальным. Радиальные градиенты в отличие от линейных распространяются от центра наружу по круговой схеме. Для создания радиального градиента достаточно указать цвет, который будет в центре градиента, и цвет, который должен быть снаружи. Эти цвета передаются в функцию radial-gradient(). Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стилизация таблиц в CSS3</title>
        <style>
		div {
			width: 200px;
			height: 200px;
			border-radius: 100px;
			
			background-color: #eee;
			background-image: radial-gradient(white, black);
			background-image: -moz-radial-gradient(white, black);
			background-image: -webkit-radial-gradient(white, black);
		}
		p{
			margin: 0;
			padding-top: 60px;
			text-align: center;
			color: #eee;
		}
        </style>
    </head>
    <body>
		<div><p>Радиальный градиент</p></div>
	</body>
</html>

Просмотреть  пример

Радиальный градиент CSS

Читать далее

Линейный градиент CSS

Здравствуйте! В этом уроке поговорим о градиентах. Градиенты представляют плавный переход от одного цвета к другому. В CSS3 имеется ряд встроенных градиентов, которые можно использовать для создания фона элемента. Градиенты в CSS не представляют какого-то специального свойства. Они лишь создают значение, которое присваивается свойству background-image.

Линейный градиент распространяется по прямой от одного конца элемента к другому, осуществляя плавный переход от одного цвета к другому.

Для создания градиента нужно указать его начало и несколько цветов, например:

background-image: linear-gradient(left,black,white);

В данном случае началом градиента будет левый край элемента, который обозначается значением left. Цвета градиента: черный (black) и белый (white). То есть начиная с левого края элемента до правого будет плавно идти переход из черного цвета в белый.

Линейный градиент CSS

 

Читать далее

Прокрутка элементов CSS

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

Однако свойство overflow позволяет настроить поведение блока в подобной ситуации и добавить возможность прокрутки. Это свойство может принимать следующие значения:

  • auto: если контент выходит за границы блока, то создается прокрутка. В остальных случаях полосы прокрутки не отображаются
  • hidden: отображается только видимая часть контента. Контент, который выходит за границы блока, не отображается, а полосы прокрутки не создаются
  • scroll: в блоке отображаются полосы прокрутки, даже если контент весь помещается в границах блока, и таких полос прокрутки не требуется
  • visible: значение по умолчанию, контент отображается, даже если он выходит за границы блока

Прокрутка элементов на странице

Читать далее

Обтекание элементов CSS

Здравствуйте! В этой статье  я хочу рассказать о таком важном понятие в css как обтекание. Как правило, все блоки и элементы на веб-странице в браузере появляются в том порядке, в каком они определены в коде html. Однако CSS предоставляет специальное свойство float, которое позволяет установить обтекание элементов, благодаря чему мы можем создать более интересные и разнообразные по своему дизайну веб-страницы.

Это свойство может принимать одно из следующих значений:

  • left: элемент перемещается влево, а все содержимое, которое идет ниже его, обтекает правый край элемента
  • right: элемент перемещается вправо
  • none: отменяет обтекание и возвращает объект в его обычную позицию

Обтекание элементов CSS

Читать далее

Контуры элементов

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

Контуры элементов CSS

Читать далее

Тень элемента

Здравствуйте! Сегодня после изучения как в css добавить фон к элементу переходим к созданию тени для элемента.

Свойство box-shadow позволяет создать у элемента тень. Это свойство может принимать сразу несколько значений:

box-shadow: hoffset voffset blur spread color inset

 

  • hoffset: горизонтальное смещение тени относительно элемента. При положительном значении тень смещается вправо, а при отрицательном — влево
  • voffset: вертикальное смещение тени относительно элемента. При положительном значении тень смещается вниз, а при отрицательном — вверх
  • blur: необязательное значение, которое определяет радиус размытия тени. Чем больше это значение, тем более размытыми будут края тени. По умолчанию имеет значение 0.
  • spread: необязательное значение, которое определяет направление тени. Положительное значение распространяет тень во вне во всех направлениях от элемента, а отрицательное значение направляет тень к элементу
  • color: необязательное значение, которое устанавливает цвет тени
  • inset: необязательное значение, которое заставляет рисовать тент внутри блока элемента

Тени в css

 

Читать далее

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: