Myserver.do.am - Все для игровых серверов! - Скрипт для сайта Круглые изображения как на MyServer.do.am

[Главная · Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

Форум » Myserver.do.am » Для вебмастера » Скрипт для сайта Круглые изображения как на MyServer.do.am (Скрипт для сайта Круглые изображения как на MyServer.do.am)

Скрипт для сайта Круглые изображения как на MyServer.do.am

BELIY

Дата: Понедельник, 07.05.2018, 17:11 | Сообщение # 1

БОМЖ

Группа: Администраторы

Сообщений: 12

Статус:

Любые растровые изображения сами по себе прямоугольны, поэтому для создания сложной формы в картинках применяют прозрачность или фон, совпадающий с фоном веб-страницы. Действительно круглые изображения можно сделать с помощью стилевого свойства border-radius. К таким изображениям применяется рамка через border и она тоже будет круглой, а не квадратной. Если круглую картинку вставить в <a>, то областью ссылки будет круг.

Чтобы сделать произвольное изображение круглым вначале следует превратить его в квадрат, а затем в стилях добавить свойство border-radius со значением 50% (пример 1). Лучше задавать именно в процентах, так мы не привязываемся к размерам картинок.

Пример 1. Круглые изображения

Код

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
   .round {
    border-radius: 50%;
   }
  </style>
</head>
<body>
  <img src="images/meduza1.jpg" alt="" class="round">
</body>
</html>

Результат данного примера показан на рис. 1.

border-radius применяется к любым другим элементам, поэтому мы можем создать пустой квадратный <div> и установить для него фоновую картинку, которую допустимо масштабировать и сдвигать. Само изображение не обязательно должно быть квадратным, потому что оно будет вписано в область заданных размеров. Всё, что не поместится в эту область, будет обрезано. На рис. 2 показана фотографии для добавления её на веб-страницу.

Теперь устанавливаем эту фотографию как фон для класса round, задаём размеры элемента и настраиваем масштаб изображения (пример 2).

Пример 2. Круглый элемент

Код

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
  .round {
   width: 300px; height: 300px; /* Ширина и высота */
   border-radius: 50%; /* Превращаем в круг */
   background: url(images/JPG.jpg) no-repeat -70px 0; /* Параметры фона */
   background-size: auto 300px; /* Высота фотографии равна высоте элемента */
  }
</style>
</head>
<body>
  <div class="round"></div>
</body>
</html>

Результат данного примера показан на рис. 3. Фон по умолчанию устанавливается в левом верхнем углу, так что сдвигаем его на 70 пикселей влево, чтобы акула оказалась в центре круга.

Cygb9I`BELIY:)
(''')о___о(''')
-\ '( о_о )' /-
--\ \_Ш_/ /-- ПРЕВЕД !!!!
---l . . . . l--- Myserver.do.am
--/ ./ U \. \--
-(„„„)__(„„„)-

REKLAMA:

Страница 1 из 1
1