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

Base: Add some repeating-linear-gradient() examples

Browse source
This commit is contained in:
MacDue 2022-08-16 17:17:37 +01:00 • committed by Andreas Kling
parent e294b7929a
commit d26203ff90
1 changed files with 22 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -118,6 +118,23 @@
75%, 75%,
dodgerblue 0) dodgerblue 0)
} }
.grad-repeat-0 {
background-image: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
}
.grad-repeat-1 {
background-image: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);
}
.grad-repeat-2 {
background-image: repeating-linear-gradient(transparent, #4d9f0c 40px),
repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);
}
.grad-repeat-3 {
background-image: -webkit-repeating-linear-gradient(left, red 10%, blue 30%);
}
</style> </style>
</head> </head>
<body> <body>
@ -151,6 +168,11 @@
<div class="rect grad-15"></div> <div class="rect grad-15"></div>
<b>A webkit gradient</b><br> <b>A webkit gradient</b><br>
<div class="box grad-webkit"></div> <div class="box grad-webkit"></div>
<b>Repeating gradients</b><br>
<div class="box grad-repeat-0"></div>
<div class="box grad-repeat-1"></div>
<div class="box grad-repeat-2"></div>
<div class="box grad-repeat-3"></div>
</body> </body>
<script> <script>
const boxes = document.querySelectorAll(".box, .rect"); const boxes = document.querySelectorAll(".box, .rect");