Веб-мастерская Ларисы ВоронинойСтилизация изображений CSS. Изображения CSS.
WEB-мастерская Ларисы Ворониной logo

Стилизация изображений CSS. Ноя 8 2016


В документе HTML мы только определяем, что на сайте в каком-то месте будет изображение, а размер изображения, его координаты на сайте, рамку и обтекание текста будут прописываться в файле style.css.

Размер изображения.

Чтобы понять нагляднее, создайте два файла index.html и style.css.

В файле index.html элементарно пропишем путь к картинке, как мы это делали в прошлом уроке.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <link rel= "stylesheet" type= "text/css" href= "style.css" />
          <title>Изображения</title>
     </head>
     <body>
          <img src="images/img1.jpg">
     </body>
</html>

А в файле style.css задаём размер.

Размер изображения можно задать в пикселях, тогда он (размер) будет фиксированным, и  в процентах, тогда он будет резиновым.  При этом, если мы указываем только ширину, то высота выставляется автоматически, зависимо от пропорций изображения.

img {
width: 300px;
}

Если мы укажем высоту, то автоматически выставится ширина изображения.

img {
height: 150px;
}

Ну а если мы укажем и высоту и ширину, то изображение будет иметь те размеры, которые мы указали.

img {
width: 300px;
height: 150px;
}

izobrazheniya-css

Рамка изображения.

Рамку для изображения можно сделать с помощью свойства border.

Рамке можно задать толщину, стиль и цвет (как мы делали рамку для таблицы).

img {
width: 300px;
height: 150px;
border: 1px solid #000;
}

izobrazheniya-css

Закруглённые углы.

Для закругления углов используется свойство border-radius.

img {
width: 300px;
height: 150px;
border: 1px solid #000;
border-radius: 10px;
}

izobrazheniya-css

Тень от изображения.

Чтобы создать эффект тени, используется свойство box-shadow.

Первое значение -  это сдвиг тени по оси X.

Второе значение – это сдвиг тени по оси Y.

Третье значение – размытие тени. Если этот параметр не указывается, то по умолчанию тень не будет размытой.

Четвёртое значение – растяжение тени. По умолчанию тень того же размера, что и элемент.

Пятое значение – цвет тени. Цвет тени можно задать как в  RGB-формате так и в RGBA-формате. По умолчанию цвет чёрный.

img {
width: 300px;
height: 150px;
border: 1px solid #000;
border-radius: 10px;
box-shadow:5px 5px 10px #2B1015;
}

izobrazheniya-css

Обтекание изображения текстом.

Для наглядности в index.html добавьте текст.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <link rel= "stylesheet" type= "text/css" href= "style.css" />
          <title>Изображения</title>
     </head>
     <body>
          <img src="images/img1.jpg">
          <p>Это текст, который обтекает изображение справа.</p>
          <p>Для наглядности напишем несколько абзацев</p>
          <p>Абзац первый</p>
          <p>Абзац второй</p>
          <p>Абзац третий</p>
          <p>А этот абзац обтекает изображение уже снизу.</p>
     </body>
</html>

Если мы хотим, чтобы изображение располагалось слева, а текст обтекал его справа, используем свойство float , значением которого будет left.

А для того, чтобы текст не прилипал к изображению, используем свойство margin-right.

img {
width: 300px;
height: 150px;
border: 1px solid #000;
border-radius: 10px;
box-shadow:5px 5px 10px #2B1015;
float: left;
margin-right: 20px;
}

izobrazheniya-css

Изображения в качестве фона.

Чтобы использовать изображение в качестве фона для всей страницы, используем свойство background для селектора html. В значении прописываем путь к изображению. Правилом хорошего тона является вместе с изображением задавать ещё и цвет фона на случай, если картинка вдруг не загрузится.

html {
background: #D2BFB0 url(images/img1.jpg);
}

Повторяемость фонового изображения.

По умолчанию фоновое изображение повторяется как по горизонтали так и по вертикали. Чтобы это отменить для свойства background пишем значение no-repeat.

html {
background: #D2BFB0 url(images/img1.jpg) no-repeat;
}

Чтобы картинка повторялась только по горизонтали, пишем:

background: repeat-x;

по вертикали:

background: repeat-y;

Расположение фонового изображения.

Картинка в левом верхнем углу:  background: left top;

В правом верхнем углу: background: right top;

В левом нижнем углу: background: left bottom;

В правом нижнем углу: background: right bottom;

По центру: background: center;

По центру вверху: background: center top;

По центру внизу: background: center bottom;

Фиксация фонового изображения.

По умолчанию фоновое изображение прокручивается вместе с контентом.

Чтобы его зафиксировать, свойству background задаём значение fixed.

html {
background: #D2BFB0 url(images/img1.jpg) no-repeat center fixed;
}

Слайдеры и галереи.

С помощью CSS можно делать чудеса. Об этих чудесах вы узнаете из следующих статьях:

Слайдер на чистом CSS
Слайдер карусель
Фотогалерея
Галерея карусель
Простая галерея для сайта

Weblinks.dsr2.ru


Рейтинг@Mail.ru