HTML:
|
1 2 3 4 5 6 7 8 9 |
<div class="circle"> <i class="fa fa-cogs"></i> </div> <div class="circle"> <i class="fa fa-coffee"></i> </div> <div class="circle"> <i class="fa fa-bus"></i> </div> |
В примере используются иконки Font Awesome
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.circle { width: 160px; height: 160px; background: #337AB7; border-radius: 50%; text-align: center; position: relative; display: inline-block; margin: 20px 30px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); } .circle:after { content: ""; background-image: linear-gradient( to right, rgba(191, 226, 255, 1) 20%, rgba(0, 0, 0, 0) ); width: 250%; height: inherit; position: absolute; top: 0; left: 80px; transform: rotate(55deg); transform-origin: 0 50% 0; z-index: -1; filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.5)) } .circle i { font-size: 80px; line-height: 160px; color: #FFF; position: relative; z-index: 1; } |
Добавить комментарий: