как сделать тень блока с помощью CSS

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

как сделать блок с тенью

Наверняка, вы уже читали пост несколько вариантов красивого оформления текста. Там мы использовали элемент text-shadow:, который задаёт тень для текста. Для придания тени блоку использовать будем   box-shadow:. Так же зададим параметры направления, толщины, цвета границы тени. Постараюсь подробнее на этом остановиться.

Чтобы попробовать самим вставить свои значения, откройте черновик и в режиме HTML вставьте следующий код. На его примере и разберёмся, что к чему.

 <div style="background: #FAFFFF; border-radius: 8px 0; box-shadow: 5px 5px 2px 1px; text-align: center; width: 140px;">
здесь пишем наш текст </div>

И сейчас перейдите в режим создать. Вот что должно получиться

здесь пишем наш текст

Давайте будем колдовать. В коде поменяем значение #FAFFFF- это общий фон блока. Генератор цвета здесь.
Значение 8px 0- мы закруглили нижний угол. Если заменим на такое  border-radius: 5px 5px 5px 5px то закруглёнными станут все углы.
box-shadow: 5px 5px 2px 1px;- здесь обязательно попробуйте поиграться с цифрами. Именно они отвечают за размеры тени.
Добавим в этот код margin-left: 100px;- зададим отступ  с левого края.
Поменяем ширину всего блока width: 140px на 280. Тоже подгоняйте.

И в результате должно получиться то, что видите в первом примере. А код уже будет таким  (значения у вас могут быть свои).

<div style="background: #DD7561; border-radius: 10px 10px 10px 10px; box-shadow: 5px 5px 3px 1px burlywood; margin-left: 100px; text-align: center; width: 280px;">
здесь наш текст</div>

Здесь ещё обращу ваше внимание. По умолчанию цвет тени получается такой же, что и цвет текста. И его легко можно поменять если в box-shadow: 5px 5px 2px 1px добавить название цвета. В моём случае это burlywood. Посмотрите их таблицу здесь. И пойдём дальше.

Можно изменить текст в блоке. Я просто скопировала один код из сообщения , где мы оформляли текст. Ссылка выше. Получилось так

здесь наш текст

Это код

<div style="background: #DD7561; border-radius: 10px 10px 10px 10px; box-shadow: 5px 5px 3px 1px burlywood; color: blue; filter: glow(color:00FFFF Strength=5); font-family: Monotype Corsiva; font-size: 45pt; margin-left: 100px; text-align: center; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb, 0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); width: 100%; width: 480px;">
здесь наш текст</div>

Сделаем нечто подобное с картинками.



Код

<img height="150" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNy3rm5GeIZBcvIqbuBP7VyCSag5e7ED3tVtgDH2JWhk-hvsBnEw " style="border-radius: 10px 10px 10px 10px; box-shadow: 5px 5px 3px 1px darkgray; height: 150px; margin-left: 150px; width: 224px;" width="224" />

Синим я выделила адрес изображения. Зелёным параметры тени, красным отступ слева. Здесь обязательным условием является , чтобы значения ширины width и высоты height картинки и блока были одинаковые.

Ну и ещё один вариант. Картинка внутри блока с тенью.

Код

<h2 style="background: #E4CD00; border-radius: 50px; box-shadow: 5px 5px 3px 1px darkgreen; height: 200px; margin-left: 200px; width: 200px;">
<img height="100" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRNNDl4EI96vSISaOBDOmc_5ngj5fWmT9bM1PiDKc1VC6OpGEg9gecZ_A " style="margin: 50px;" width="100" /></h2>

Выделенное красным-цвет фона, синим -параметры тени, зелёным-адрес изображения,сиреневым-расстояние картинки от края.

Наверняка возникает вопрос и что же с этим делать. Когда всё поменяли на свой вкус, сохраните эти коды в черновике или блокноте. И потом при написании сообщения нужно перейти в режим HTML и в нужном месте вставить этот код. Возвращаетесь в режим создать и пишите дальше. Результат сразу будет виден.

Если захотите сделать изображения круглой формы, то этот пост для вас. И сегодня больше я вас утомлять не стану. За окном дождь льёт стеной. А я вот обратила внимание, что в такую погоду я с таким удовольствием копаюсь в CSS кодах.
Удачи нам всем.

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

введите пожалуйста свой адрес электронной почты :