Небольшая ёлочка с помощью CSS.
Код небольшой, представляет собой несколько блоков отвечающих за разные части ёлки.
Структура:
Ну и сами стили:
Чтобы ёлочка выглядела более нарядно, можно добавить к ней пару шариков:
А можно и вовсе сделать её стоящей в снегу.
В структуре перед последним закрывающим тегом
К стилям добавляете:
И увеличиваете высоту дерева, в первом классе нашей ёлочки:
меняете значение
Пример на тёмном фоне:
На правильность отображения во всех браузерах не проверял, но проблем вроде как быть не должно. Все современные браузеры поддерживающие псевдо-элементы будут отображать правильную картинку.
Код небольшой, представляет собой несколько блоков отвечающих за разные части ёлки.
Структура:
Код: Выделить всё
<div class="spruce">
<div class="spruce-top"></div>
<div class="spruce-bottom"></div>
<div class="spruce-trunk"></div>
</div>
Код: Выделить всё
.spruce {
position: relative;
overflow: hidden;
height: 95px;
width: 90px;
}
.spruce-top,
.spruce-bottom {
position: relative;
height: 0;
width: 0;
}
.spruce-top {
border-bottom: 45px solid #06BE2D;
border-left: 35px solid transparent;
top: 0;
left: 10px;
}
.spruce-bottom {
border-bottom: 50px solid #06BE2D;
border-left: 45px solid transparent;
top: -15px;
left: 0;
}
.spruce-trunk {
position: relative;
background: #583D04;
top: -15px;
left: 40px;
width: 10px;
height: 15px;
}
.spruce-top:before,
.spruce-bottom:before {
content: '';
position: absolute;
width: 0;
height: 0;
left: 0;
top: 0;
}
.spruce-top:before {
border-bottom: 45px solid #089C27;
border-right: 35px solid transparent;
}
.spruce-bottom:before {
border-bottom: 50px solid #089C27;
border-right: 45px solid transparent;
}
Код: Выделить всё
.spruce:before {
content: '';
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
top: 35px;
left: 20px;
z-index: 1;
box-shadow: inset 1px 1px 3px rgba(65, 65, 10, 0.7);
background: #E90101;
background: -moz-radial-gradient(center, ellipse cover, #FF889B 0%,#E90101 100%);
background: -webkit-radial-gradient(center, ellipse cover, #FF889B 0%,#E90101 100%);
background: radial-gradient(ellipse at center, #FF889B 0%,#E90101 100%);
}
.spruce:after {
content: '';
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
top: 68px;
left: 60px;
z-index: 1;
box-shadow: inset 1px 1px 3px rgba(65, 65, 10, 0.7);
background: #a9e4f7;
background: -moz-radial-gradient(center, ellipse cover, #a9e4f7 0%, #0fb4e7 100%);
background: -webkit-radial-gradient(center, ellipse cover, #a9e4f7 0%,#0fb4e7 100%);
background: radial-gradient(ellipse at center, #a9e4f7 0%,#0fb4e7 100%);
}
А можно и вовсе сделать её стоящей в снегу.
В структуре перед последним закрывающим тегом
</div>
ставите:
Код: Выделить всё
<div class="spruce-snow"></div>
Код: Выделить всё
.spruce-snow {
position: relative;
top: -20px;
left: 0;
width: 65px;
height: 30px;
border-radius: 50%;
border: 1px solid rgba(204, 204, 204, 0.2);
background: #FFFFFF;
background: -moz-radial-gradient(right, #DDDDDD 10%, #FFFFFF 90%);
background: -webkit-radial-gradient(right, #DDDDDD 10%, #FFFFFF 90%);
background: radial-gradient(to left, #DDDDDD 10%, #FFFFFF 90%);
}
.spruce-snow:before {
content: '';
position: absolute;
top: 3px;
left: 40px;
width: 50px;
height: 30px;
border-radius: 50%;
border: 1px solid rgba(204, 204, 204, 0.2);
background: #FFFFFF;
background: -moz-radial-gradient(right, #DDDDDD 10%, #FFFFFF 90%);
background: -webkit-radial-gradient(right, #DDDDDD 10%, #FFFFFF 90%);
background: radial-gradient(to left, #DDDDDD 10%, #FFFFFF 90%);
}
Код: Выделить всё
.spruce {
position: relative;
overflow: hidden;
height: 95px;
width: 90px;
}
height:
c 95px на 105px.Пример на тёмном фоне:
На правильность отображения во всех браузерах не проверял, но проблем вроде как быть не должно. Все современные браузеры поддерживающие псевдо-элементы будут отображать правильную картинку.
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.