оформление блока с картинкой и текстом

Доброго времени суток. Хочу предложить вам, как можно с помощью CSS. красиво оформить блок с картинкой и нужным текстом. Сразу скажу, что такой вариант оформления, прекрасно отображается на экранах разного размера. Код совершенно простой и всё разберём ниже. 

блок с картинкой и описанием

Вы наглядно можете посмотреть пример. Скопируйте приведённый ниже код и установите в этом редакторе. На размер ширины внимание не обращайте. На вашей странице блога, будет выглядеть, как на картинке выше.

<div class="img-section">
<img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> 

<div class="img-data">
<span style="background-color: white; color: #303030; font-family: &quot;verdana&quot; , sans-serif; font-size: 16px; letter-spacing: 0.3px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid et tempore quae quas pariatur ratione voluptas inventore. Doloremque soluta quisquam natus perspiciatis.</span><br />
<br /></div>
</div>
<style>
.img-section {
    width: 100%;
    background: linear-gradient(135deg, #00897B 0%, #00897B 40%, #FFF 40%, #FFF 100%);
    display: flex;
    align-items: center;
    margin: 20px 0;
} .img-section img {
    border: 12px solid rgba(204, 255, 144, 0.8);
    box-shadow: 5px 7px 16px rgba(0, 0, 0, 0.7);
    margin: 40px;
    box-sizing: border-box;
    flex: 0 0 45%;
    width: 45%;
} .img-section .img-data {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    padding: 20px;
}
@media only screen and (max-width: 700px) {
    .img-section {
        flex-flow: row wrap;
    }
    .img-section .img-data {
        background: #FFF;
        border-bottom: 5px solid #AED581;
    }
    .img-section img {
        margin: 40px auto;
        flex: 0 0 80%;
        width: 80%;
    }
}
</style>


В строке, отмеченной розовым цветом, вставьте адрес вашей картинки.

Синим цветом выделен сам отображаемый текст.

Обратите внимание, что в примере высота картинки height="200". Соответственно высота области с текстом будет такая же.

Можно поэкспериментировать со значением linear-gradient. Почитаете здесь.

Можно подобрать свои решения, относительно цвета и размеров тени  box-shadow: 5px 7px 16px rgba(0, 0, 0, 0.7); и border: 12px solid rgba(204, 255, 144, 0.8) рамки.

Размер текста можно заменить на другой  font-size: 16px;

Вот такие не сложные настройки. И выглядит достаточно красиво, аккуратно и профессионально.

В редакторе сообщения код вставляется в формате HTML. Если пропустили, прочитайте как просто вставлять коды в сообщениях.

Всем добра и до встречи. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


8 комментариев:

  1. Ответы
    1. Наталья,и ещё легко настраиваемое. Спасибо.

      Удалить
  2. В принципе, я, особо, за красотой не гонюсь. Мне хватает возможности вставлять картинки непосредственно в канву.

    ОтветитьУдалить
    Ответы
    1. Семён, да, разработчики об этом позаботились.

      Удалить
  3. Господи! И хватает же фантазии! А я тут по Питеру пошёл вечером прогуливать Серого. Абсолютно мёртвый город! Ни людей ни собак, ни машин. Возможно, Вы видели фильм Крамера из семидесятых "К последнему берегу". Один в один!

    ОтветитьУдалить
    Ответы
    1. Семён, то же самое и у нас. И ничего не поделать. терпения всем.

      Удалить
  4. Привет, Вика. Как-то я пропустила этот пост. Спасибочки 🌹 🌹 🌹 Воспользуюсь! Как раз эти моменты мне всегда интересны. А твой редактор просто класс.

    ОтветитьУдалить
    Ответы
    1. Люба, здравствуй. Ну ты приспособишь, это я знаю. Заходила на твой блог, классно так дистанционку ведёшь.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML