Здравствуйте уважаемые начинающие веб мастера. Снова Оригинальные эффекты CSS.
Создавать и размещать блоки на странице, мы уже научились. Теперь давайте с помощью CSS придадим этим блокам оригинальную форму.
Закруглить углы изображений, или же сделать эллипс, и даже круг, и поместить в него какую нибудь фразу или картинку.
В этой статье рассмотрим, как претворить Ваше желание в жизнь.
Для примера возьмём любой, из известных нам, блок (p, div, li, h1 и так далее), и зададим ему следующee свойства:
border-radius — закругление углов
Для красоты я добавлю к закруглённым углам тень (box-shadow), но вы можете её не использовать.
В значении border-radius указывается радиус закругления каждого угла, которые ставятся по часовой стрелке, начиная с верхнего левого угла.
Если нужно сделать все углы одинаковыми, то проставляется только одно значение.
border-radius: 10px 0 10px 0;
box-shadow: 1px 1px 3px 1px #fff;
Пример.
Создадим блок h1, и зададим ему свойства радиус и тень.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Блок с закруглёнными углами</title>
<style>
#blok{
background:#cc7722;
margin:0 0 0 0;
width: 200px;
padding: 10px;
text-align: center;
border-radius:10px 0 10px 0;
box-shadow: 5px 5px 3px 1px;
}
</style>
</head>
<body>
<h1 id="blok">текст текст текст текст</h1>
</body>
</html>
Результат:
Только напоминаю, атрибут style, применяется для отладки изображения, после которой тегу нужно задать класс с любым названием, и все стили перенести в файл style.css.
<h1 style="border-radius: 10px 0; box-shadow: 5px 5px 3px 1px; width: 200px; background: #21cccc; text-align: center; margin-left: 100px;">текст текст</h1>
Сделаем то же самое для изображения
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Блок с закруглёнными углами</title>
<style>
#blok{
background-image:url(images/makak.jpg);
background-repeat: no-repeat;
width: 224px;
height: 150px;
margin:0 0 0 0;
border-radius:10px 10px 10px 10px;
box-shadow: 5px 5px 3px 1px;
}
</style>
</head>
<body>
<h1 id="blok"></h1>
</body>
</html>
Вариант для WordPress, который можно вставить для отладки, прямо в поле редактора, в режиме текст.
<img style="width: 224px; height: 150px; margin-left: 100px; border-radius: 10px 10px 10px 10px; box-shadow: 5px 5px 3px 1px;" title="makak" src="https://starper55plys.ru/wp-content/uploads/2013/10/makak.jpg" width="224" height="150"/>
Картинка вставляется через загрузчик изображений. Ширина и высота блока (width, height), задаются по размеру изображения.
Теперь сделаем эллипс. Для создания эллипса, каждое значение радиуса разделяется на две части — горизонтальное закругление и вертикальное, которые записываются через слэш. Для тени ничего не меняется.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Блок с закруглёнными углами</title>
<style>
#blok{
background: #21cccc;
width: 200px;
height: 50px;
margin: 0 0 0 0;
text-align: center;
border-radius: 50px/20px;
box-shadow: 5px 5px 3px 1px;
}
</style>
</head>
<body>
<h1 id="blok">Текст</h1>
</body>
</html>
Вариант для WP:
<h1 style=»background: #21cccc; width: 200px; height: 50px; margin-left: 100px; text-align: center; border-radius: 50px/20px; box-shadow: 5px 5px 3px 1px;«>Текст</h1>
И, напоследок, сделаем круг. Чтобы получился круг, нужно сначала сделать квадрат, то есть задать блоку одинаковые высоту и ширину, а затем задать значение border-radius, равное половине высоты блока.
И, для полноты ощущений, вставим в круг картинку.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Блок с закруглёнными углами</title>
<style>
#blok{
background: #21cccc;
width: 100px;
height: 100px;
margin: 0 0 0 0;
border-radius: 50px;
box-shadow: 5px 5px 3px 1px;
}
img{
margin:30px auto;
}
</style>
</head>
<body>
<h1 id="blok"><img src="images/i10.png"></h1>
</body>
</html>
Вариант для WordPress
<h1 style="background: #21cccc; width: 100px; height: 100px; margin-left: 100px; border-radius: 50px; box-shadow: 5px 5px 3px 1px;"><img style="margin: 30px; auto;" src="https://starper55plys.ru/wp-content/uploads/2013/10/i10.png" width="35" height="35" /></h1>
В следующей статье продолжим тему теней, и узнаем ещё несколько оригинальных эффектов появляющихся в результате их применения.
Перемена
Муж приходит домой и говорит жене:
— У меня серьезная проблема на работе.
Жена ласково:
— Дрогой, не волнуйся и никогда не говори «у меня проблема», говори «у нас проблема…»
— Хорошо. У нас проблема на работе. У нашей секретарши скоро будет ребенок от нас.
Есть люди у которых есть совесть и есть люди которые имеют совесть.
Как сделать блок с полосой прокрутки < < < В раздел > > > Как разбить страницу на отдельные блоки
Как сделать тень для текста, картинки, блока.;
Выпадающее меню CSS;
В каком смысле? Ссылка на ваш сайт не работает.
Могу вас Рекламировать !!
У меня стройка заканчивается, так что теперь будет время на сайт. В ближайшее время будет ещё кое что интересное.
Спасибо! Я как раз искала такую информацию. Очень хорошо все описано. Буду сглаживать углы.