Блок с тенью

CSS
Это блок с тенью, созданный с помощью кода CSS
<div style="background-color:#8DC692;color:#fff;margin:0 auto;width:200px;padding:10px;text-align:center;border-radius:10px 0 10px 0;box-shadow:5px 5px 3px 1px rgba(0,0,0,.25);">Это блок с тенью, созданный также с помощью кода CSS</div>
Это параграф с тенью, созданный также с помощью кода CSS. Эллипсоидная фигура нарисована с помощью свойства CSS border-radius.
<div style="max-width:400px;margin:0 auto;padding:40px;box-shadow:0 2px 4px rgba(0,0,0,.25);border-radius:63% 37% 54% 46% / 55% 48% 52% 45%;background-color:#3CB371;color:#fff;">Это параграф с тенью, созданный также с помощью кода CSS. Эллипсоидная фигура нарисована с помощью свойства CSS border-radius.</div>

MediumSeaGreen #3CB371

Это параграф с тенью, созданный также с помощью кода CSS. Эллипсоидная фигура нарисована с помощью свойства CSS border-radius.
<div style="max-width:400px;margin:0 auto;padding:40px;box-shadow:0 2px 4px rgba(0,0,0,.25), inset 0 0 20px 2px rgba(8,87,1,0.2);border-radius:63% 37% 54% 46% / 55% 48% 52% 45%;background-color:#3CB371;color:#fff;text-align:center;"><div style="transform:rotate(-3deg);text-shadow:1px 1px 0 rgba(0,0,0,.55);">Это параграф с тенью, созданный также с помощью кода CSS. Эллипсоидная фигура нарисована с помощью свойства CSS border-radius.</div></div>

Блок 1

Блок 2

Блок 3

Блок 4

Блок 5

Блок 6

<div style="display: inline; width: 600px;">
<p style="float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;">Блок 1</p>
<p style="float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;">Блок 2</p>

<p style="float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;">Блок 3</p>
</div>

<div style="display: inline; width: 600px;">
<p style="float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;">Блок 4</p>

<p style="float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;">Блок 5</p>

<p style="float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;">Блок 6</p>
</div>

Update! I can’t believe I missed this: we can use bloginfo() to get the current version number: get_bloginfo('version'). Thanks to Piet B. </update>

<style>
.update {
    margin: 30px 0 40px 0;
    padding: 20px;
    font-size: 14px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 1px;
    color: rgba(39,34,45,0.7);
    background-color: rgba(255,204,0,0.2);
    box-shadow: 0 20px 25px -20px rgba(0,0,0,0.7);
}
</style>
<p class="update"><strong>Update!</strong> I can’t believe I missed this: we can use <code class="code">bloginfo()</code> to get the current version number: <code class="code">get_bloginfo('version')</code>. Thanks to Piet B. <code class="code">&lt;/update&gt;</code></p>

Источник

Articoli correlati