CSS Background için Dalgayı nasıl oluşturup responsive yapabiliriz ?

21-10-2020, 21:10:15

#1

MSTURAN

silinebilir.

21-10-2020, 21:12:31

#2

Pixelizm

background-size:100%; responsivde orantılı küçülür ama nasıl görünür o ayrı bir konu. 100% kısmını arttırarak boyutuyla oynayabilirsin.

21-10-2020, 21:13:26

#3

ultibil

Bende hazırı vardı buyrun

<!DOCTYPE html>
<html lang="tr">
<head>
        <title>footer</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta charset="utf-8"/>
        <meta name="Author" content="footer"/>
        <link href="assets/images/favicon.ico" rel="shortcut icon"/>        <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css">          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <style>
        body {
padding: 0;
margin: 0;


}

a {

font-weight: bold;
text-decoration: normal;

}

p {

font-family: 'Lato', sans-serif;

letter-spacing: 1px;

font-size:14px;

color: #333333;

}
.flex { /*Flexbox for containers*/

display: flex;

justify-content: center;

align-items: center;

text-align: center;

}

.waves {

position:relative;

width: 100%;

height:15vh;

margin-bottom:-7px; /*Fix for safari gap*/

min-height:100px;

max-height:150px;

}

.content {

position:relative;

height:20vh;

text-align:center;

background-color: white;

}

/* Animation */

.parallax > use {

animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;

}

.parallax > use:nth-child(1) {

animation-delay: -2s;

animation-duration: 7s;

}

.parallax > use:nth-child(2) {

animation-delay: -3s;

animation-duration: 10s;

}

.parallax > use:nth-child(3) {

animation-delay: -4s;

animation-duration: 13s;

}

.parallax > use:nth-child(4) {

animation-delay: -5s;

animation-duration: 20s;

}

@keyframes move-forever {

0% {

transform: translate3d(-90px,0,0);

}

100% {

transform: translate3d(85px,0,0);

}

}

/*Shrinking for mobile*/

@media (max-width: 768px) {

.waves {

height:40px;

min-height:40px;

}

.content {

height:30vh;

}

h1 {

font-size:24px;

}

}
</style>
</head>
<body>



</body>



<div class="footer area">

<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">

<defs>

<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />

</defs>

<g class="parallax">

<use xlink:href="#gentle-wave" x="48" y="0" fill="#efefef" />

<use xlink:href="#gentle-wave" x="48" y="3" fill="#e3e3e3" />

<use xlink:href="#gentle-wave" x="48" y="5" fill="#bdbdbd" />

<use xlink:href="#gentle-wave" x="48" y="7" fill="#c7c7c7" />

</g>

</svg>

</div>

Direkt .html dosyası olarak kaydedip görebilir, işinize yarayan kısımlarını alabilirsiniz

21-10-2020, 21:15:21

#4