Как создать волновое изображение в HTML?

Шпаргалка по HTML Программирование и разработка

Волны — это простые дизайны, которые можно создать на HTML-странице, что улучшает общий вид веб-сайта и делает его более привлекательным и дизайнерским. Эти волны можно использовать при разработке фона целевых страниц, изображений, адаптивных кнопок, продуктов и областей веб-страниц с помощью CSS и HTML. Это может быть статическая волна или анимированная волна, относящаяся к предпочтениям.

Волны можно создать двумя способами:

  • использование селектора :: beforeи :: after
  • используя метод SVG.

Плюсы и минусы: :: Перед и :: после селектор метода просит точное местоположение пиксельного и таким образом мы получаем динамические волны и модель волны сдержите получить изменились. Принимая во внимание, что SVG — это наиболее оптимизированный способ отображения волн на веб-странице. Он быстро создает однородные волнистые узоры для веб-сайтов.

HTML-код. В следующем примере показано, как создать волну SVG.

HTML

<!DOCTYPE html>
<html>
     
<head>
    <style>
        body {
            overflow: hidden;
        }
        svg {
            display: inline-block;
            position: absolute;
            top: 0;
            left:0;
            z-index: -1;
        }
        .container {
            display: inline-block;
            position: absolute;
            width: 100%;
            padding-bottom: 100%;
            vertical-align: middle;
            overflow: hidden;
            top: 0;
            left: 0;
        }
        }
    </style>
</head>
 
<body style="text-align:center;">
    <h1 style="color:lawngreen;">
       bestprogrammer
    </h1>
     
    <div class="container">
     
        <!-- Creating a SVG image -->
        <svg viewBox="0 0 500 500"
            preserveAspectRatio="xMinYMin meet">
             
            <path d="M0, 100 C150, 200 350,
                0 500, 100 L500, 00 L0, 0 Z"
                style="stroke:none; fill:purple;">
            </path>
        </svg>
    </div>
</body>
 
</html>

Выход:

Читайте также:  Python Regex: введение в использование регулярных выражений

В следующем примере показано, как создать волну SVG

Оцените статью
bestprogrammer.ru
Добавить комментарий