Красиво оформленные блоки по дизайн на CSS
 | |
| Это современный блок, который полностью создан на CSS, и отлично оформлен по своему дизайн, что подойдет на любую страницу интернет сайта. Так как любая страница на портале имеет свои блоки, что носят информацию, то здесь представлен дизайн, который может подойти как на светлый, так и на темный фон. Изначально идут 2 варианта, это где на первом подключены шрифтовые иконки, что будет по умолчанию выводить. То на второй вариаций можно поставить ссылку на изображение. Но главное, что стилистика CSS, что идет, то она по своим классам подойдет к обоим вариантам. Здесь подключен класс kamaganus, который отвечает за ширину блока, в стилистике все поставлено на проценты, в нашем случай идет на width: 32%, так как если убрать, то будет на всю ширину. Но если вы устанавливаете в каркас, у которого ширина задана, то можете этот класс убрать. Здесь поставлен для того, чтоб можно было самому выставить ту ширину, которая тебе нужна. Ведь на современных шаблонах все идет по другому, в плане подачи информации. Возможно кто-то скажет, что такие блоки не доработаны, где с вами соглашусь, так как под тематическую площадку можно сделать более уникальным во всем. Это качается палитры цвета, также добавить функций, хотя как предоставлено по умолчанию, по функциональности все отлично выставлено. И не нужно забывать, что каждый блок, который выставлен на сайт, можно так красиво оформить, что при открытии страницы, этот блок все внимание на себя заберет. Что в рекламное направление идет только в плюс, так как визуально будет выглядеть, просто шикарно. Так смотрится при проверки на работоспособность по всем функциям, где ширина обвода 2 пикселя.  Это вид, когда навели клик на основу.  HTML Код <div class="kamaganus"> <div class="sapectrum-okolumanit"> <div class="icon"> <i class="fa fa-bus"></i> </div> <h3>ZorNet.Ru: Портал Вебмастера №1</h3> <p>Здесь подключен шрифт кнопок "Font Awesome"</p> </div> </div> <div class="kamaganus"> <div class="sapectrum-okolumanit"> <div class="icon"> <img src="https://atuin.ru/demo/icons/icon-4.png"> </div> <h3>Сайт по созданию интернет ресурса</h3> <p>Изображение подключено по прямой ссылке</p> </div> </div> CSS Код .sapectrum-okolumanit { width: 100%; border: 1.3px solid #b1abab; padding: 7px; text-align: center; transition: 0.3s all; overflow: hidden; margin: 18px 0; cursor: pointer; border-radius: 3px; box-shadow: 3px 3px 14px 0px rgba(144, 137, 137, 0.24), 0px 9px 27px -12px rgba(33, 31, 31, 0.1); } .sapectrum-okolumanit:hover { box-shadow: 0px 9px 18px 0 rgba(19, 18, 18, 0.21); } .sapectrum-okolumanit .icon { margin: 19px auto; transition: all 0.5s ease 0s; font-size: 73px; width: 73px; height: 75px; color: #2b87d6; } .sapectrum-okolumanit:hover .icon , .sapectrum-okolumanit:hover .icon { transform: scale(20); position:relative; opacity:0; } .sapectrum-okolumanit h3 { transition: all 0.6s ease 0s; color: #174771; font-size: 19px; margin: 0 0 4px 0; padding: 5px; } .sapectrum-okolumanit:hover h3 { color: #337AB7; transform: translateY(-44px) scale(1.3); } p { color: #223844; font-size: 14px; font-weight: bold; } .kamaganus { width: 32%; } Возможно многие будут согласны, что анимация, которая здесь присутствует, делает все элементы более современными. Также эффект, который по своим характеристикам уникален, это где при наведение на изображение, она автоматически увеличивается и пропадает. И все на заданной скорости, так как вы самостоятельно ее регулируете, и вам будет виднее какую вам нужно, это как касается картинки, так и шрифтовой кнопки, здесь что поставите, анимация будет аналогична. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 6 | |
| |
