RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 13:07:47 +00:00
Code Issues Activity Actions

Base: Add an example linear-gradient with double-position color stops

Browse source
This commit is contained in:
MacDue 2022-08-22 21:50:26 +01:00 • committed by Andreas Kling
parent 698717d102
commit be9d3f9aa4
1 changed files with 6 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

6
Base/res/html/misc/gradients.html
View file

@ -135,6 +135,10 @@
.grad-repeat-3 { .grad-repeat-3 {
background-image: -webkit-repeating-linear-gradient(left, red 10%, blue 30%); background-image: -webkit-repeating-linear-gradient(left, red 10%, blue 30%);
} }
.grad-double-position {
background-image: linear-gradient(to right,red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%)
}
</style> </style>
</head> </head>
<body> <body>
@ -173,6 +177,8 @@
<div class="box grad-repeat-1"></div> <div class="box grad-repeat-1"></div>
<div class="box grad-repeat-2"></div> <div class="box grad-repeat-2"></div>
<div class="box grad-repeat-3"></div> <div class="box grad-repeat-3"></div>
<b>Double-position color stops</b><br>
<div class="box grad-double-position"></div>
</body> </body>
<script> <script>
const boxes = document.querySelectorAll(".box, .rect"); const boxes = document.querySelectorAll(".box, .rect");