чилка HTML

Каскадные таблицы стилей (CSS)

Создании иконок (логотипов, лого) только с помощью CSS

WEB - страница

Код в документе HTML

1. Лупа

<style> 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;} </style> ======================== CSS код Лупы: <span class="lupa"></span>

 

WEB - страница

Код в документе HTML

2. Замок

<style> 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; } </style> ======================== CSS код Замка: <span class="zamok"></span>

 

WEB - страница

Код в документе HTML

3. Домик

<style> span.home { height: 0px; width: 0px; border-width: 16px; border-style: solid; border-color: transparent transparent #333 transparent; position: relative; } 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; } </style> ======================== CSS код Домика: <span class="home"></span>

 

WEB - страница

Код в документе HTML

4. Аптечка

<style> .heal { width: 2em; margin: 2em auto; height:1.5em; border-radius:0.2em; position:relative; border: 0.2em solid #2c2c2c; } .heal::before { position: absolute; content: ""; top: -0.4em; right: 0.4em; width: 0.4em; height: 0em; border-bottom: 0.4em solid #2C2C2C; border-left: 0.4em solid transparent; border-right: 0.4em solid transparent; } .heal::after { box-shadow: 0.3em 0 0 #FF0016,-0.3em 0 0 #FF0016,0 0.3em 0 #FF0016,0 -0.3em 0 #FF0016; left: 0.85em; top: 0.6em; position: absolute; background: #FF0016; height: 0.3em; width: 0.3em; content: ""; } </style> ======================== CSS код Аптечки: <span class="heal"></span>