BloGGood.ru

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

WordPress, PHP, HTML, CSS, Windows

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

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

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

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

Бесплатный набор 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. Маргарита
    09.06.2014 в 08:21

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

  2. Avatar photo Степан => автор блога
    09.06.2014 в 19:57

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

  3. Леонид
    04.06.2015 в 13:37

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

  4. Avatar photo Степан => автор блога
    04.06.2015 в 15:55

    Здравствуйте, Леонид! Спасибо за приятный отзыв о статье и сайте.
    Социальные кнопки находятся в коллекции №2:
    /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]

Метки: ,

Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов


  • Свежие записи:


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




    •

  • Категории

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

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

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

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

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

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

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

  • Облако меток

    Bootstrap css favicon иконки GIMP htaccess html javascript Joomla php RSS seo-оптимизация SEO-тексты windows XP/7 wordpress Вебмастеру Конкурсы и акции Разные темы безопасность без плагинов библиотека борьба со спам браузеры вакансия в интернете движки CMS для начинающих для сайта здоровье комментарий написание текстов основы отдых поиск полезные статьи почта программы развлечение серфинг за деньги скачать бесплатно смешное создать украшение для header услуга форма обратной связи фотошоп эффекты для сайта

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

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

    BloGGood.ru

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

    Все права защищены © 2012-2023. карта сайта

    Связаться с администратором блога

    Дизайн и разработка сайта

    Костаневича С. В.

    заказать дизайн сайта