Блок с закруглёнными углами и тенью. Эллипс

Здравствуйте уважаемые начинающие веб мастера. Снова Оригинальные эффекты CSS.

Создавать и размещать блоки на странице, мы уже научились. Теперь давайте с помощью CSS придадим этим блокам оригинальную форму.

Закруглить углы изображений, или же сделать эллипс, и даже круг, и поместить в него какую нибудь фразу или картинку.

В этой статье рассмотрим, как претворить Ваше желание в жизнь. И обязательно выделим, как это делается для сайта на WordPress.

Для примера возьмём любой, из известных нам, блок (p, div, li, h1 и так далее), и зададим ему следующие свойства:

border-radius — закругление углов
box-shadow — создание тени под блоком

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

Тень создаётся довольно таки своеобразно. Поэтому, при задании значений тени, нужно протестировать несколько разных комбинаций цифр, чтобы подобрать оптимальный для Вас вариант.

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>

Результат:

91

Только напоминаю, атрибут 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>

92

Вариант для WP:

<h1 stylebackground: #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 основы. Добавьте в закладки постоянную ссылку.

6 комментариев на «Блок с закруглёнными углами и тенью. Эллипс»

  1. starik говорит:

    Thank you. I’m just a beginner blogger. Only six months. I’m from Kazan. Did you hear about our team, «Ruby»?

  2. maillots foot говорит:

    This is actually fascinating, Youa??re a very experienced blogger. I have joined your rss feed and appear forward to searching for far more of your fantastic publish. Also, Ia??ve shared your web internet site in my social networks!

  3. starik говорит:

    I hope that’s true.

  4. chaussure football говорит:

    I am quite appreciated for this site. Its an informative subject matter. It aid me extremely much to solve some difficulties. Its opportunity are so wonderful and operating style so speedy. I think it could be assist all of you.

  5. starik говорит:

    У меня стройка заканчивается, так что теперь будет время на сайт. В ближайшее время будет ещё кое что интересное.

  6. Людмила говорит:

    Спасибо! Я как раз искала такую информацию. Очень хорошо все описано. Буду сглаживать углы.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *