BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Бесплатный набор CSS-иконок для сайта/блога. Коллекция №1

Бесплатный набор CSS-иконок для сайта/блога. Коллекция №1

2014-06-08 / Вр:02:10 / просмотров: 6704

Бесплатный набор CSS-иконок для сайта/блога. Коллекция №1

С помощью CSS любой веб-мастер или верстальщик сайтов сможет создать красивые иконки для сайта или блога, не используя графических элементов. Это отличная возможность!
Я подготовил для вас, мои дорогие читатели блога и любители CSS, бесплатный набор иконок с готовым CSS и HTML кодом.

Преимущества CSS-иконок:

1). Высокое качество иконок;
2). Подходит к любому дизайну сайта;
3). Легко и быстро меняется цвет иконок;
4). Возможность обходиться без картинок;
5). 99,9% совместимость с любым браузером;
6). CSS-иконока будет отображаться даже тогда, когда в браузере отключена загрузка картинок.

Итак, CSS-иконки для ваших сегодняшних и будущих проектов.

Иконка-загрузчик №1 (анимированная)

Иконка-загрузчик

В HTML вставьте код между тегами
<body> здесь будет код </ body >

<div class="ajax-loader"></div>

В CSS

@-webkit-keyframes ajax-loader-rotate {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes ajax-loader-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes ajax-loader-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ajax-loader {
  opacity: .8;
  display: block;
  border-radius: 50%;

  font-size: 29px;
  width: .25em;
  height: .25em;

  box-shadow:
    0 -.4em       0 0 rgba(0,0,0,1),
    -.28em -.28em 0 0 rgba(0,0,0,.75),
    -.4em 0       0 0 rgba(0,0,0,.50),
    -.28em .28em  0 0 rgba(0,0,0,.25)
  ;

  -webkit-animation: .85s ajax-loader-rotate steps(8) infinite;
  -moz-animation: .85s ajax-loader-rotate steps(8) infinite;
  animation: .85s ajax-loader-rotate steps(8) infinite;
}

Иконка-загрузчик №2 (анимированная)

Иконка-загрузчик

В HTML

<div class="animatedload"></div>

В CSS

@keyframes "anim" {
 0% {
    filter: alpha(opacity=0);
   	opacity: 0;
   	-webkit-box-shadow: none;
   	box-shadow: none;
 }
 25% {
    filter: alpha(opacity=100);
   	opacity: 1;
   	-webkit-box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c;
   	box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c;
 }
 50% {
    filter: alpha(opacity=100);
   	opacity: 1;
   	-webkit-box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c;
   	box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c;
 }
 75% {
    filter: alpha(opacity=100);
   	opacity: 1;
   	-webkit-box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c, 0 0 0 1em #EDEEE8, 0 0 0 1.2em #2c2c2c;
   	box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c, 0 0 0 1em #EDEEE8, 0 0 0 1.2em #2c2c2c;
 }
 100% {
    filter: alpha(opacity=100);
   	opacity: 1;
   	-webkit-box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c, 0 0 0 1em #EDEEE8, 0 0 0 1.2em #2c2c2c, 0 0 0 1.4em #EDEEE8, 0 0 0 1.6em #2c2c2c;
   	box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c, 0 0 0 1em #EDEEE8, 0 0 0 1.2em #2c2c2c, 0 0 0 1.4em #EDEEE8, 0 0 0 1.6em #2c2c2c;
 }

}

@-moz-keyframes anim {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   box-shadow: none;
 }
 25% {
   filter: alpha(opacity=100);
   opacity: 1;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c;
 }
 50% {
   filter: alpha(opacity=100);
   opacity: 1;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c;
 }
 75% {
   filter: alpha(opacity=100);
   opacity: 1;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c, 0 0 0 1em #EDEEE8, 0 0 0 1.2em #2c2c2c;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c, 0 0 0 1em #EDEEE8, 0 0 0 1.2em #2c2c2c, 0 0 0 1.4em #EDEEE8, 0 0 0 1.6em #2c2c2c;
 }

}

@-webkit-keyframes "anim" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
 }
 25% {
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c;
 }
 50% {
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c;
 }
 75% {
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c, 0 0 0 1em #EDEEE8, 0 0 0 1.2em #2c2c2c;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c, 0 0 0 1em #EDEEE8, 0 0 0 1.2em #2c2c2c;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c, 0 0 0 1em #EDEEE8, 0 0 0 1.2em #2c2c2c, 0 0 0 1.4em #EDEEE8, 0 0 0 1.6em #2c2c2c;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c, 0 0 0 1em #EDEEE8, 0 0 0 1.2em #2c2c2c, 0 0 0 1.4em #EDEEE8, 0 0 0 1.6em #2c2c2c;
 }

}

@-ms-keyframes "anim" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   box-shadow: none;
 }
 25% {
   filter: alpha(opacity=100);
   opacity: 1;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c;
 }
 50% {
   filter: alpha(opacity=100);
   opacity: 1;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c;
 }
 75% {
   filter: alpha(opacity=100);
   opacity: 1;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c, 0 0 0 1em #EDEEE8, 0 0 0 1.2em #2c2c2c;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c, 0 0 0 1em #EDEEE8, 0 0 0 1.2em #2c2c2c, 0 0 0 1.4em #EDEEE8, 0 0 0 1.6em #2c2c2c;
 }

}

@-o-keyframes "anim" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   box-shadow: none;
 }
 25% {
   filter: alpha(opacity=100);
   opacity: 1;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c;
 }
 50% {
   filter: alpha(opacity=100);
   opacity: 1;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c;
 }
 75% {
   filter: alpha(opacity=100);
   opacity: 1;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c, 0 0 0 1em #EDEEE8, 0 0 0 1.2em #2c2c2c;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   box-shadow: 0 0 0 0.2em #EDEEE8, 0 0 0 0.4em #2c2c2c, 0 0 0 0.6em #EDEEE8, 0 0 0 0.8em #2c2c2c, 0 0 0 1em #EDEEE8, 0 0 0 1.2em #2c2c2c, 0 0 0 1.4em #EDEEE8, 0 0 0 1.6em #2c2c2c;
 }

}

.animatedload {
	position: relative;
	width: 0.5em;
	height: 0.5em;
	margin: 30% auto;
	background: #2c2c2c;
	border-radius: 50%;

	-webkit-animation: anim 800ms alternate infinite linear;
	-moz-animation: anim 800ms alternate infinite linear;
	-ms-animation: anim 800ms alternate infinite linear;
	-o-animation: anim 800ms alternate infinite linear;
	animation: anim 800ms alternate infinite linear;
}

Иконка-загрузчик №3 (анимированная)

Иконка-загрузчик

В HTML

<div class="loading"></div>

В CSS

@keyframes "loading" {
 from {
    background-position: 0 0;
 }
 to {
    background-position: 200%;
 }

}

@-moz-keyframes loading {
 from {
   background-position: 0 0;
 }
 to {
   background-position: 200%;
 }

}

@-webkit-keyframes "loading" {
 from {
   background-position: 0 0;
 }
 to {
   background-position: 200%;
 }

}

@-ms-keyframes "loading" {
 from {
   background-position: 0 0;
 }
 to {
   background-position: 200%;
 }

}

@-o-keyframes "loading" {
 from {
   background-position: 0 0;
 }
 to {
   background-position: 200%;
 }

}

.loading {
	position: relative;
	width: 3.5em;
	height: 0.5em;
	margin: 30% auto;
	border: solid 0.13em #2c2c2c;
	border-radius: 0.3em;

	background: -webkit-linear-gradient(140deg, transparent 25%, #2c2c2c 50%, transparent 75%) 0 0 repeat-x;
	background: -moz-linear-gradient(140deg, transparent 25%, #2c2c2c 50%, transparent 75%) 0 0 repeat-x;
	background: -o-linear-gradient(140deg, transparent 25%, #2c2c2c 50%, transparent 75%) 0 0 repeat-x;
	background: -ms-linear-gradient(140deg, transparent 25%, #2c2c2c 50%, transparent 75%) 0 0 repeat-x;
	background: linear-gradient(140deg, transparent 25%, #2c2c2c 50%, transparent 75%) 0 0 repeat-x;

	-webkit-background-size: 0.8em 0.6em;
	-moz-background-size: 0.8em 0.6em;
	background-size: 0.8em 0.6em;

	-webkit-animation: loading 5s linear infinite;
	-moz-animation: loading 5s linear infinite;
	-ms-animation: loading 5s linear infinite;
	-o-animation: loading 5s linear infinite;
	animation: loading 5s linear infinite;
}

Монитор в CSS

Монитор в CSS

В HTML

<div class="monitor"></div>

В 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

В HTML

<div class="cloud"></div>

В CSS

.cloud {
	background-color: #2C2C2C;

	background-image: -webkit-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.1));
	background-image: -moz-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.1));
	background-image: -o-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.1));
	background-image: -ms-linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.1));
	background-image: linear-gradient(hsla(0,0%,0%,0), hsla(0,0%,0%,.1));
	border-radius: 1em;
	height: 1em;
       margin-top: 0.5em;
	position: relative;
	width: 3em;
}

.cloud:after,.cloud:before {
	background-color: #2C2C2C;
	content: '';
	border-radius: 100%;
	position: absolute;
}

.cloud:after {
	background-image: -webkit-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.025));
	background-image: -moz-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.025));
	background-image: -o-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.025));
	background-image: -ms-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.025));
	background-image: linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.025));
	height: 1em;
	right: .4em;
	top: -.5em;
	width: 1em;
}

.cloud:before {
	background-image: -webkit-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.075));
	background-image: -moz-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.075));
	background-image: -o-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.075));
	background-image: -ms-linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.075));
	background-image: linear-gradient(hsla(0,0%,0%,0) 50%, hsla(0,0%,0%,.075));
	height: 1.6em;
	left: .4em;
	top: -.75em;
	width: 1.6em;
}

Календарь в CSS

Календарь в CSS

В HTML

<div class="calendar"></div>

В CSS

.calendar{
	position: relative;
	width: 2em;
	height: 1.5em;
	margin: 30% auto;
	box-shadow:0 0 0 .2em #2c2c2c,0 -.3em 0 .2em #2c2c2c;
}

.calendar:after{
	content:"";
	position: absolute;
	left:.23em;
	top:.3em;
	width: .35em;
	height: .35em;
	background:#2c2c2c;
	box-shadow:.6em 0 0 #2c2c2c,1.2em 0 0 #2c2c2c,
	0 .5em 0 #2c2c2c,.6em .5em 0 #2c2c2c,1.2em .5em 0 #2c2c2c;
}
.calendar:before{
	content:"";
	position: absolute;
	left:.15em;
	top:-.8em;
	width: .2em;
	height: .5em;
	border-radius:.2em;
	background:#2c2c2c;
	box-shadow:0 0 0 .1em white,1.55em 0 0 .02em #2c2c2c
	,1.55em 0 0 .1em white;
}

Айпод в CSS

Айпод в CSS

В HTML

<div class="ipod"></div>

В CSS

.ipod{
font-size: 12px;
   margin:30% auto;
   width:1.8em;
   height:3.0em;
   background:#2c2c2c;
   border:solid 1px #2c2c2c;
   border-radius:0.2em;
}

.ipod:before{
   display:block;
   content:"";
   width:1.4em;
   height:0.9em;
   margin:0.2em auto;
   background:white;
   box-shadow:inset 0.1em -0.1em 0.1em rgba(0,0,0,0.2),inset 0.1em 0.1em 0.1em rgba(0,0,0,0.2),inset -0.1em 0.1em 0.1em rgba(0,0,0,0.2);
}

.ipod:after{
   display:block;
   content:"";
   width:0.3em;
   height:0.3em;
   margin:0.6em auto;
   border:solid 0.2em white;
   border-radius:50%;
}

Микрофон в CSS

Микрофон в CSS

В HTML

<div class="microphone"></div>

В CSS

.microphone {
	width: 1.5em;
	height: 3.0em;
	margin: 30% auto;
	position: relative;
	background: #2c2c2c;
	border-radius: 0.8em;
margin-top: -1em;
font-size: 8px;
}

.microphone:after {
	display: block;
	position: absolute;
	left: -0.9em;
	top: 0.4em;
	content: "";
	width: 2.3em;
	height: 2.3em;
	border: solid 0.5em #2c2c2c;
	border-top-color: transparent;
	border-left-color: transparent;
	border-radius: 50%;

	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.microphone:before {
	display: block;
	position: absolute;
	top: 2.5em;
	left: -0.5em;
	content: "";
	width: 0;
	height: 0;
	border: solid 1.3em #2c2c2c;
	border-bottom: solid 1em;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
}

Корзина в CSS

Корзина в CSS

В HTML

<div class="cart"></div>

В CSS

.cart{
font-size: 9px;
  position:relative;
  margin:30% auto;
  width:2.0em;
  height:0;
  border-left:solid 0.8em transparent;
  border-right:solid 0.8em transparent;
  border-top:solid 1.8em #2c2c2c;
}

.cart:before{
  content:"";
  dysplay:block;
  position:absolute;
  top:-2.1em;
  left:-1.5em;
  width:1.4em;
  height:0.5em;
  background:#2c2c2c;
  border-top-right-radius:0.5em;
}

.cart:after{
  content:"";
  dysplay:block;
  position:absolute;
  left:0.1em;
  top:0.1em;
  width:0.7em;
  height:0.7em;
  background:#2c2c2c;
  border-radius:50%;
  box-shadow:1.2em 0 0 #2c2c2c;
}

Глаз в CSS

Глаз в CSS

В HTML

<div class="eye"></div>

В CSS

.eye {
	width: 0;
	height: 0;
	position: relative;
	margin: 30% auto;
	border: 1.0em solid #2c2c2c;
	border-radius: 5.0em 0.5em / 5.0em 0.5em;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.eye:before {
	content: "";
	position: absolute;
	top: -0.45em;
	left: -0.45em;
	width: 0.4em;
	height: 0.4em;
	background: #2c2c2c;
	border: 0.25em solid #EDEEE8;
	border-radius: 50%;
}

Сердце в CSS

Сердце в CSS

В HTML

<div class="heart"></div>

В CSS

.heart {
position: relative;
font-size: 24px;
margin-top:-0.5em;
width0;
height:0;
}

.heart::before, .heart::after {
position: absolute;
content: "";
width: 1em;
height: 1.6em;
background: #2C2C2C;
-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

Андроид в CSS

В HTML

<div class="droid"></div>

В CSS

.droid {
position: relative;
border-radius: 50% 50% 15% 15% /34% 34% 10% 10%;
font-size: 16px;
height: 2em;
width: 1.49em;
background: -webkit-linear-gradient(top, transparent 30%,#2C2C2C 30%, #2C2C2C 34%,transparent 34%,transparent 37.415%,#2C2C2C 37.415%), -webkit-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%),-webkit-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%);
background: -moz-linear-gradient(top, transparent 30%,#2C2C2C 30%, #2C2C2C 34%,transparent 34%,transparent 37.415%,#2C2C2C 37.415%), -moz-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%),-moz-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%);
background: -o-linear-gradient(top, transparent 30%,#2C2C2C 30%, #2C2C2C 34%,transparent 34%,transparent 37.415%,#2C2C2C 37.415%), -o-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%),-o-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%);
background: -ms-linear-gradient(top, transparent 30%,#2C2C2C 30%, #2C2C2C 34%,transparent 34%,transparent 37.415%,#2C2C2C 37.415%), -ms-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%),-ms-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%);
background: linear-gradient(top, transparent 30%,#2C2C2C 30%, #2C2C2C 34%,transparent 34%,transparent 37.415%,#2C2C2C 37.415%), radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%),radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%);
background-repeat: no-repeat;
background-position: 0,2% 0,98% 0;
background-size: 100% 100%, 55% 31.927%, 55% 31.927%;
}
.droid::after {
top: 0.7em;
left: -0.408em;
position: absolute;
content: "";
background: #2C2C2C;
height: 1.02em;
width: 0.3401em;
border-radius: 50% 50% 50% 50% / 18% 18% 18% 18%;
box-shadow: 1.96em 0 0 0 #2C2C2C,0.75em 0.8em 0 0 #2C2C2C,1.25em 0.8em 0 0 #2C2C2C;
}

.droid::before {
top: -0.4em;
left: 0.41em;
position: absolute;
content: "";
height: 0.6em;
width: 0.6em;
border: 0.07em solid #2C2C2C;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);

border-radius: 0.01em;
}

Гистограмма в CSS

Гистограмма в CSS

В HTML

<div class="histogram"> </div>

В CSS

.histogram{
	height: 4em;
	overflow-y:hidden;
	background:transparent;
font-size:10px;
}

.histogram:before{
content: "";
display: block;
width: 0;
height: 3em;
box-shadow: 1em 2.5em 0 0.3em #2c2c2c, 1.7em 2em 0 0.3em #2c2c2c,2.4em 0.8em 0 0.3em #2c2c2c,3.1em 1.5em 0 0.3em #2c2c2c;

}

.histogram:after{
content: "";
display: block;
position: relative;
margin-top: 0.9em;
width: 4em;
height: 0.1em;
background: #2c2c2c;

}

Продолжение следует... :idea:  [ BlogGood.ru ]

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

4 Ответов на комментарий - Бесплатный набор CSS-иконок для сайта/блога. Коллекция №1

  1. Маргарита

    Спасибо, обязательно воспользуюсь.

  2. Степан => автор блога Степан => автор блога

    Пожалуйста, Маргарита!

  3. Леонид

    Здравствуйте. Статья понравилась, сайт понравился, социальных кнопок не вижу. :)

  4. Степан => автор блога Степан => автор блога

    Здравствуйте, Леонид! Спасибо за приятный отзыв о статье и сайте.
    Социальные кнопки находятся в коллекции №2:
    https://bloggood.ru/recepty-css/besplatnyj-nabor-css-ikonok-dlya-sajtabloga-kollekciya-2.html/

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

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

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573