Красивый блок

Начнем с простого. Напишем такой код.


<h2>Кто сказал Мяу</h2>
<p>Уже несколько столетий человечество пытается разгадать загадку века: Кто сказал Мяу!
В поисках ответа люди смотрели на небо. А ответ-то был под ногами.</p>

Выглядеть текст будет так:

Кто сказал Мяу

Уже несколько столетий человечество пытается разгадать загадку века: Кто сказал Мяу!
В поисках ответа люди смотрели на небо. А ответ-то был под ногами.

Ничего необычного. Внесём небольшую правку и сделаем блоки цветными.


<style>
h2 {
    background: #569099;
}
p {
    background: #cad8d0;
}
</style>

Теперь текст выглядит так:

Кто сказал Мяу

Уже несколько столетий человечество пытается разгадать загадку века: Кто сказал Мяу!
В поисках ответа люди смотрели на небо. А ответ-то был под ногами.

Мы видим, что между заголовком и параграфом есть зазор. Устраняем его при помощи свойства margin. Для заголовка мы сделаем нулевой отступ снизу (margin-bottom), а для параграфа нулевой отступ сверху (margin-top):


<style>
h2 {
    background: #569099;
    margin-bottom:0;
}
p {
    background: #cad8d0;
    margin-top:0;
}
</style>

Смотрим на результат:

Кто сказал Мяу

Уже несколько столетий человечество пытается разгадать загадку века: Кто сказал Мяу!
В поисках ответа люди смотрели на небо. А ответ-то был под ногами.

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


<style>
h2 {
    background: #569099;
    margin-bottom:0;
    border-radius: 20px 20px 0 0;
}
p {
    background: #cad8d0;
    margin-top:0;
    border-radius: 0 0 20px 20px;
}
</style>

Смотрим на результат:

Кто сказал Мяу

Уже несколько столетий человечество пытается разгадать загадку века: Кто сказал Мяу!
В поисках ответа люди смотрели на небо. А ответ-то был под ногами.

Ага, мы сразу видим шероховатости. Нужно подвинуть текст от края, чтобы закругления не мешали словам. Заодно сделаем фиксированную ширину у наших блоков.


<style>
h2 {
    background: #569099;
    margin-bottom:0;
    border-radius: 20px 20px 0 0;
    padding: 10px;
    color: #fff;
    width: 500px;
}
p {
    background: #cad8d0;
    margin-top: 0;
    border-radius: 0 0 20px 20px;
    padding: 10px;
    width: 500px;
}
</style>

Смотрим еще раз:

Кто сказал Мяу

Уже несколько столетий человечество пытается разгадать загадку века: Кто сказал Мяу!
В поисках ответа люди смотрели на небо. А ответ-то был под ногами.

Естественно, при желании вы можете добавить обводку, тени и другие красивости. Используя данную технику на div, вы получаете в свое распоряжение красивые информационные блоки, которые можно использовать, например, в сайдбаре. Удачи!

Реклама