Граница градиент с двух сторон на CSS
 | |
| Создаем границу двух цветов в темно алом оформление на CSS, что позволяют сделать рамки по правую левую сторону, где по центре будет описание. Это форма идет как цитата, только если мы привыкли цитату видеть выделенной. Но главное по всем четырем сторонам, то здесь задействует 2, и под них ее пропишем градины, которые будут украшать обе границы, что расположены по обеим сторонам. Вы можете использовать аргумент направления для указания данного направления для градиента, например вам нужно поместить в скобки, то что хотелось, чтоб больше было замечено пользователем и гостями сайта. Вот эти границы отлично справятся с тем, что и красиво будет смотреться и всегда можно заметить, так как все еще зависит от палитры цвета, но по умолчанию сделаем ее в темно красной палитре цвета. Все это делается на одном классе, где можно изменить ширину и поменять цветовую гамму.  HTML Код <div class="gradien-borderus"> Здесь к примеру описание или важная заметка. </div> CSS Код .gradien-borderus { max-width: 385px; padding: 1rem; color: #fbf5f5; border-width: 3px; border-style: solid; border-image: linear-gradient( to bottom, #ff002f, rgba(247, 247, 247, 0) ) 1 100%; } Здесь свойство имеет меньшее значение в контексте градиента, так как оно задает смещения для рассматриваемого описания, чтобы расположить его для рассматриваемой границы. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |