Здравствуйте, сегодня продолжим создание иконок, логотипов только с помощью CSS, а именно: создадим лупу, два вида замочков, мишень или цель и домик.

Скачать исходники для статьи можно ниже

Данная статья является продолжением поста – CSS иконки для сайта!

1. Лупа:

CSS код лупы:

<span class="lupa"></span>

Код блока с отображение лупы:

span{height:40px; width:40px; display:block; position:relative;}

.lupa:before, .lupa:after{content:''; height:20px; display:block; position:absolute; top:0; left:0; }

.lupa:before{width:20px; border:3px #333 solid; border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;}

.lupa:after{width:7px; background:#333; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); top:17px; left:24px;}

Демо-пример можете посмотреть здесь – CSS иконка лупы!

2. Замок:

CSS код замка:

<span class="zamok1">
<span class="zamok2">
</span>
</span>

Код блока с отображение замка:

span{height:40px; width:40px; display:block; position:relative;}

.zamok1{width:40px; height:40px; background:#333; border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;}

.zamok1:before{content:''; height:8px; width:12px; display:b; border:6px solid #fff; border-bottom:none; border-radius:50px 50px 0 0;-webkit-border-radius:50px 50px 0 0;-moz-border-radius:50px 50px 0 0; position:absolute; top:4px; left:8px; }

.zamok1:after{content:''; height:16px; width:32px; display:b; background:#fff; border-top:none; border-radius:0 0 50px 50px;-webkit-border-radius:0 0 50px 50px;-moz-border-radius:0 0 50px 50px; position:absolute; top:20px; left:4px; }

.zamok2{width:4px; height:8px; background:#333; border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px; border:6px; position:absolute; top:24px; left:18px; z-index:10}

Демо-пример можете посмотреть здесь – CSS иконка замка!

3. Еще один красивый замочек:

CSS код замка:

<span class="zamok">
</span>

Код блока с отображение замка:

span{height:40px; width:40px; display:block; position:relative;}

.zamok{width:38px; height:25px; margin-top:40px; background:#333; border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px; border-left:1px dashed #fff; border-right:1px dashed #fff}

.zamok:before{content:''; height:10px; width:16px;display:b; border:5px solid #333; border-bottom:none; border-radius:50px 50px 0 0;-webkit-border-radius:50px 50px 0 0;-moz-border-radius:50px 50px 0 0; position:absolute; top:-15px; left:6px; }

.zamok:after{content:'';width:5px; height:7px; background:#fff; border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px; border:5px; position:absolute; top:8px; left:17px; }

Демо-пример можете посмотреть здесь – CSS иконка замка!

4. Мишень:

CSS код мишени, цели:

<span class="target">
+</span>

Код блока с отображение мишени:

span{height:40px; width:40px; display:block; position:relative;}

.target{height:32px; width:32px; border:2px #333 solid; border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px; font-size:14px; font-family:Arial; font-weight:bold; color:#333; text-align:center; line-height:32px;}

.target:before{content:''; height:2px; width:6px; display:block; position:absolute; top:15px; left:-4px; background:#333; box-shadow:34px 0px 0px #333;-webkit-box-shadow:34px 0px 0px #333;-moz-box-shadow:34px 0px 0px #333;}

.target:after{content:''; height:6px; width:2px; display:block; position:absolute; top:-4px; left:15px; background:#333; box-shadow:0px 34px 0px #333;-webkit-box-shadow:0px 34px 0px #333;-moz-box-shadow:0px 34px 0px #333;}

Демо-пример можете посмотреть здесь – CSS иконка цели, мишени!

5. Домик:

CSS код домика:

<span class="home"></span>

Код блока с отображение домика:

span.home {
    height: 0px;
    width: 0px;
    border-width: 16px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    position: absolute;

}

span.home:after {
    content: '';
    width: 5px;
    height: 16px;
    background-color: transparent;
    position: absolute;
    top: 16px;
    right: -11px;
    border-left: 8px solid #333;
    border-right: 8px solid #333;
}

span.home:before {
    content: '';
    width: 9px;
    height: 6px;
    background-color: #333;
    position: absolute;
    top: 16px;
    right: -5px;
}

Демо-пример можете посмотреть здесь – CSS иконка домика!