И давайте приступать к реализации. Первую на примере создадим давайте иконку камера, просмотрим пример:
Иконка камера в div:
Красивая иконка фотокамера, созданная css. Как ее создать просмотрите код ниже:
Код CSS
<style>
.camera {
background-image: -webkit-radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);
background-image: -moz-radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);
background-image: -o-radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);
background-image: -ms-radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);
background-image: radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);
border-radius: .25em;
height: 2em;
position: relative;
width: 3em;
}
.camera::after {
border: .25em solid #2C2C2C;
border-bottom: none;
border-radius: .25em .25em 0 0;
content: '';
height: .25em;
left: .875em;
position: absolute;
top: -.5em;
width: .75em;
}
.camera::before {
background-color: #2C2C2C;
content: '';
height: .25em;
left: .25em;
position: absolute;
top: -.25em;
width: .5em;
}
</style>
Выводим ее следующим html-кодом с классом, который и назовем - camera. Смотрим пример ниже:
Код HTML
<div class="camera"></div>
Двигаемся далее.
Нарисуем монитор, например:
Получился вот такой вот монитор на простом css. Как его реализовать, смотрим код ниже. Создадим одноименный класс monitor
Код CSS
/*Монитор*/
.monitor {
border-radius: .25em;
box-shadow: inset 0 0 0 .25em #2C2C2C,
inset 0 -.25em 0 .25em #2C2C2C;
height: 2.25em;
position:relative;
margin-top:-0.5em;
width: 3em;
}
.monitor:after {
background-color: #2C2C2C;
content: '';
height: .25em;
left: 1em;
position: absolute;
top: 100%;
width: 1em;
}
.monitor:before {
background-color: #2C2C2C;
bottom: -.5em;
content: '';
height: .25em;
left: .75em;
position: absolute;
width: 1.5em;
}
Я надеюсь здесь не сложный код. Поехали далее. Нарисуем сердечко. Просмотрим пример реализации сердце на чистом css без использования картинок изображений.
Пример сердечко на css 3
Просмотрим код реализации сердечка методом чистого css стиля:
Код CSS
/*Сердце*/
.heart {
position: relative;
font-size: 24px;
margin-top:-0.5em;
width0;
height:0;
margin-left: 50px;
}
.heart::before, .heart::after {
position: absolute;
content: "";
width: 1em;
height: 1.6em;
background: #F06;
-moz-border-radius: 1em 1em 0 0;
border-radius: 1em 1em 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart::after {
left: -0.96em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
Далее создадим призрака, смотрим пример ниже:
Пример реализации призрак:
Код CSS
.ghost {
background-image: -webkit-linear-gradient(45deg, transparent 50%, #2C2C2C 50%), -webkit-linear-gradient(135deg, transparent 50%, #2C2C2C 50%), -webkit-linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
background-image: -moz-linear-gradient(45deg, transparent 50%, #2C2C2C 50%), -moz-linear-gradient(315deg, transparent 50%, #2C2C2C 50%), -moz-linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
background-image: -o-linear-gradient(45deg, transparent 50%, #2C2C2C 50%), -o-linear-gradient(135deg, transparent 50%, #2C2C2C 50%), -o-linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
background-image: -ms-linear-gradient(45deg, transparent 50%, #2C2C2C 50%), -ms-linear-gradient(135deg, transparent 50%, #2C2C2C 50%), -ms-linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
background-image: linear-gradient(45deg, transparent 50%, #2C2C2C 50%), linear-gradient(315deg, transparent 50%, #2C2C2C 50%), linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
background-position: 50% 100%, 50% 100%, 50% 0;
background-repeat: repeat-x;
-webkit-background-size: 1em 1em;
-moz-background-size: 1em 1em;
background-size: 1em 1em;
position: relative;
margin-top: 1.5em;
height: 1.5em;
width: 3em;
}
.ghost:after,.ghost:before {
background-image: -webkit-radial-gradient(transparent 35%, #2C2C2C 35%);
background-image: -moz-radial-gradient(transparent 35%, #2C2C2C 35%);
background-image: -o-radial-gradient(transparent 35%, #2C2C2C 35%);
background-image: -ms-radial-gradient(transparent 35%, #2C2C2C 35%);
background-image: radial-gradient(transparent 35%, #2C2C2C 35%);
border-top: .5em solid #2C2C2C;
content: \'\';
height: 1em;
position: absolute;
top: -1.5em;
width: 1em;
}
.ghost:after {
background-position: 75% 75%;
border-left: .5em solid #2C2C2C;
border-radius: 3em 0 0 0;
left: 0;
}
.ghost:before {
background-position: 0% 100%;
border-right: .5em solid #2C2C2C;
border-radius: 0 3em 0 0;
right: 0;
}
Продолжаем и создаем чашку с жидкостью. Смотрим пример ниже:
Чашка прозрачная с жидкостью внутри на чистом css 3:
Просмотрим код реализации иконки на чистом css:
Код CSS
.mug {
background-image: -webkit-linear-gradient(transparent 33%, #2C2C2C 33%);
background-image: -moz-linear-gradient(transparent 33%, #2C2C2C 33%);
background-image: -o-linear-gradient(transparent 33%, #2C2C2C 33%);
background-image: -ms-linear-gradient(transparent 33%, #2C2C2C 33%);
background-image: linear-gradient(transparent 33%, #2C2C2C 33%);
border: .25em solid #2C2C2C;
border-radius: 0 0 .25em .25em;
height: 2.5em;
margin-top:-0.25em;
position: relative;
width: 1.5em;
}
.mug:after {
border: .25em solid #2C2C2C;
border-right: none;
border-radius: .75em 0 0 .75em;
content: \'\';
height: 1.5em;
left: -1em;
position: absolute;
top: .25em;
width: .75em;
}
Вставляем класс к тегу див и получаем следующее:
Код HTML
<!-- Простой пустой блок div с классом mug -->
<div class="mug"></div>
На этом данную публикацию завершаю.