Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

CSS эффект прошитого нитками блока

Всем привет! Наверняка вы встречали на страницах в сети различные блоки или кнопки, на которых по краю как будто прошито ниткой. Так вот, в этой статье хочу показать, как можно создать такой блок с эффектом прошивки ниткой по краю, используя только свойства CSS.

css обводка блока, css рамка

Сделать такой блок или к примеру, кнопку довольно не сложно. Достаточно внести в код разметку блока и придать ему нужные стили, чем мы и займемся. За основу возьмем html-разметку блока с контентом:

<div class=»stitched_block»>

            <div class=»cont»>CONTENTS</div>

</div>

Осталось дело за малым, добавить стили нашему блоку и для начала мы зададим размеры, фон и скруглим углы нашего блока. Ко всему зададим стиль нашего контента для демонстрации. Используем вот этот код:

.stitched_block {

width: 480px;      /* ширина блока */

height: 200px;    /* высота блока */

background-color:#4682b4;     /* фон блока */

-webkit-border-radius: 4px;      /* уголки блока */

            -moz-border-radius: 4px;

                        border-radius: 4px;

}

В итоге получим вот такой блок с надписью внутри:

CONTENTS

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

.stitched_block {

width: 480px;           /* ширина блока */

height: 200px;         /* высота блока */

background-color:#4682b4;    /* фон блока */

-webkit-border-radius: 4px;     /* уголки блока */

            -moz-border-radius: 4px;

                        border-radius: 4px;

border: 2px dashed #fff;         /* пунктирная граница блока */

   -moz-box-shadow: 0 0 0 4px #4682b4;

-webkit-box-shadow: 0 0 0 4px #4682b4;

              box-shadow: 0 0 0 4px #4682b4;

}

В итоге получаем вот такую картину:

CONTENTS

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

На этом все, будут вопросы или пожелания- пишите в комментариях под статьей.

С уважением, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ