CSS

CSS

Уроки CSS предназначены  на тех, кто знает HTML. Здесь Вы найдете уроки о том как сделать Ваши сайты адаптивными, стильными, красивыми и добавить эффекты анимации и переходов на Ваши страницы.

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

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

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

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

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

 

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

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

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

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

  • scroll: в блоке отображаются полосы прокрутки, даже если контент весь помещается в границах блока, и таких полос прокрутки не требуется

  • visible: значение по умолчанию, контент отображается, даже если он выходит за границы блока

 

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

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

  • left: элемент перемещается влево, а все содержимое, которое идет ниже его, обтекает правый край элемента

  • right: элемент перемещается вправо

  • none: отменяет обтекание и возвращает объект в его обычную позицию

 

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

 

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

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

 box-shadow: hoffset voffset blur spread color inset

 

  • hoffset: горизонтальное смещение тени относительно элемента. При положительном значении тень смещается вправо, а при отрицательном - влево

  • voffset: вертикальное смещение тени относительно элемента. При положительном значении тень смещается вниз, а при отрицательном - вверх

  • blur: необязательное значение, которое определяет радиус размытия тени. Чем больше это значение, тем более размытыми будут края тени. По умолчанию имеет значение 0.

  • spread: необязательное значение, которое определяет направление тени. Положительное значение распространяет тень во вне во всех направлениях от элемента, а отрицательное значение направляет тень к элементу

  • color: необязательное значение, которое устанавливает цвет тени

  • inset: необязательное значение, которое заставляет рисовать тент внутри блока элемента

 

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

  • background-color: устанавливает цвет фона

    background-color: #ff0507;
    
  • background-image: в качестве фона устанавливается изображение

    background-image: url(dubi.png);
    

    Это свойство принимает одно значение: ключевое слово url, после которого в скобках идет путь к файлу изображения. В данном случае имеется в виду, что в одной папке рядом с веб-страницей находится файл dubi.png.

    Также можно использовать абсолютные адреса URL, например:

    background-image: url(http://localhost.com/someimage.png);
    

    Либо можно использовать относительные адреса - относительно html-документа или корневого каталога сайта:

    background-image: url(../images/someimage.png); /* путь относительно html-документа */
    
  • background-repeat: устанавливает режим повторения фонового изображения по всей поверхности элемента

  • background-size: устанавливает размер фонового изображения

  • background-position: указывает позицию фонового изображения

  • background-attachment: устанавливает стиль прикрепления фонового изображения к элементу

  • background-clip: определяет область, которая вырезается из изображения и используется в качестве фона

  • background-origin: устанавливает начальную позицию фонового изображения

 

Здравствуйте! От границ элемента переходим к размерам элемента. Размеры элементов задаются с помощью свойств width (ширина) и height (высота).

Значение по умолчанию для этих свойств - auto, то есть браузер сам определяет ширину и высоту элемента. Можно также явно задать размеры с помощью единиц измерения (пикселей, em) или с помощью процентов:

width: 150px;
width: 75%;
height: 15em;

Пиксели определяют точные ширину и высоту. Единица измерения em зависит от высоты шрифта в элементе. Если размер шрифта элемента, к примеру, равен 16 пикселей, то 1 em для этого элемента будет равен 16 пикселям. То есть если у элемента установить ширину в 15em, то фактически она составит 15 * 16 = 230 пикселей. Если же у элемента не определен размер шрифта, то он будет взят из унаследованных параметров или значений по умолчанию.

Здравствуйте! От внутренних отсутпов в CSS плавно переходим к границам элемента. Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.

Для настройки границы могут использоваться сразу несколько свойств:

  • border-width: устанавливает ширину границы

  • border-style: задает стиль линии границы

  • border-color: устанавливает цвет границы

 

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

  • padding-top: отступ сверху

  • padding-bottom: отступ снизу

  • padding-left: отступ слева

  • padding-right: отступ справа

 

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

  • margin-top: отступ сверху

  • margin-bottom: отступ снизу

  • margin-left: отступ слева

  • margin-right: отступ справа