Красивые информационные блоки на CSS3
|
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
.info_box { margin:10px 0px 10px; font-size:13px; line-height:18px; position:relative; -moz-box-shadow:0 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.1); box-shadow:0 1px 1px rgba(0, 0, 0, 0.1); } .info_box_content { text-shadow:1px 1px 1px white; padding:18px 43px 17px 66px; min-height:35px; } .warning { border:1px solid #E0B1B1; } .warning .info_box_content { color:#AD7676; background:#FFD9D5; border:1px solid #FCEEEC; -moz-box-shadow:inset 0 0 45px #f0bfba; -webkit-box-shadow:inset 0 0 45px #F0BFBA; box-shadow:inset 0 0 45px #F0BFBA; } .warning::before { width:17px; height:17px; background:url(/img/sprite_ico_box.png) no-repeat; } .note { border:1px solid #B9DBB6; } .note .info_box_content { color:#7EA57B; background:#DFF7DD; border:1px solid #F1F9F0; -moz-box-shadow:inset 0 0 45px #cbe5c9; -webkit-box-shadow:inset 0 0 45px #CBE5C9; box-shadow:inset 0 0 45px #CBE5C9; } .note::before { width:19px; height:14px; background:url(/img/sprite_ico_box.png) no-repeat 0 -17px; } .nice { border:1px solid #E2E2BA; } .nice .info_box_content { color:#ADA771; background:#F9F9DC; border:1px solid #FBFBEF; -moz-box-shadow:inset 0 0 45px #efefc0; -webkit-box-shadow:inset 0 0 45px #EFEFC0; box-shadow:inset 0 0 45px #EFEFC0; } .nice::before { width:22px; height:20px; background:url(/img/sprite_ico_box.png) no-repeat -19px -15px; } .advise { border:1px solid #B3D8D3; } .advise .info_box_content { color:#80ACB0; background:#DDF5F7; border:1px solid #F1FAFB; -moz-box-shadow:inset 0 0 45px #c6edf0; -webkit-box-shadow:inset 0 0 45px #C6EDF0; box-shadow:inset 0 0 45px #C6EDF0; } .advise::before { width:19px; height:15px; background:url(/img/sprite_ico_box.png) no-repeat -17px 0; } .normal { border:1px solid #DDD; } .normal .info_box_content { color:#737373; background:#FAFAFA; border:1px solid #FAFAFA; -moz-box-shadow:inset 0 0 45px #e7e7e7; -webkit-box-shadow:inset 0 0 45px #E7E7E7; box-shadow:inset 0 0 45px #E7E7E7; } .normal::before { width:20px; height:16px; background:url(/img/sprite_ico_box.png) no-repeat 0 -34px; } .warning::before, .note::before, .nice::before, .advise::before, .normal::before { content:''; position:absolute; top:22px; left:28px; } |
|
1 2 3 4 5 |
<div class="info_box warning"> <div class="info_box_content"> Информа́ция — сведения, воспринимаемые человеком или специальными устройствами как отражение фактов материального мира в процессе коммуникации </div> </div> |
|
1 2 3 4 5 |
<div class="info_box note"> <div class="info_box_content"> Информа́ция — сведения, воспринимаемые человеком или специальными устройствами как отражение фактов материального мира в процессе коммуникации </div> </div> |
|
1 2 3 4 5 |
<div class="info_box nice"> <div class="info_box_content"> Информа́ция — сведения, воспринимаемые человеком или специальными устройствами как отражение фактов материального мира в процессе коммуникации </div> </div> |
|
1 2 3 4 5 |
<div class="info_box advise"> <div class="info_box_content"> Информа́ция — сведения, воспринимаемые человеком или специальными устройствами как отражение фактов материального мира в процессе коммуникации </div> </div> |
|
1 2 3 4 5 |
<div class="info_box normal"> <div class="info_box_content"> Информа́ция — сведения, воспринимаемые человеком или специальными устройствами как отражение фактов материального мира в процессе коммуникации </div> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
По моему лучше
padding: 1em 1em 1em 1.5em;
Если для контента, то иконки смещаются на текст:
https://kazpic.kz/images/2018/01/29/Снимок.png