Полезный ресурс для веб дизайнера. Часть 2.

Я уже рассказывал про один интересный ресурс для веб-мастеров. Хочу продолжить, и рассказать еще про один похожий сервис.

Это сайт http://www.cssmatic.com. На этом ресурсе вы можете визуально увидеть работу некоторых CSS правил.

Например, на рис. ниже, показана работа такого CSS правила, как box-shadow, с параметрами:

box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

Или border-radius, с параметрами:

border-radius: 85px 85px 85px 85px;

border-radius: 85px 85px 85px 85px;

Полный код примера:

<div style="background: #64a162;
width:400px;
height: 400px;
margin: 0 auto;
position: relative;
border-radius: 85px 85px 85px 85px;">
<div style="box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
background: #e6b34e;
position: absolute;
top:75px;
left: 75px;
width: 250px;
height: 250px;
display: table;
border-radius: 85px 85px 85px 85px;">
<p style="display: table-cell;
vertical-align: middle;
padding:0 10px 0 10px;">
Я уже рассказывал про один интересный ресурс для выб-мастеров. Хочу продолжить, и рассказать еще про один похожий сервис.
</p>
</div>
</div>

<div style="background: #64a162;

width:400px;

height: 400px;

margin: 0 auto;

position: relative;

border-radius: 85px 85px 85px 85px;">

<div style="box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

background: #e6b34e;

position: absolute;

top:75px;

left: 75px;

width: 250px;

height: 250px;

display: table;

border-radius: 85px 85px 85px 85px;">

<p style="display: table-cell;

vertical-align: middle;

padding:0 10px 0 10px;">

Я уже рассказывал про один интересный ресурс для выб-мастеров. Хочу продолжить, и рассказать еще про один похожий сервис.

</p>

</div>