css的blend-mode可视化效果对比代码
代码语言:html
所属分类:其他
代码描述:css的blend-mode可视化效果对比代码
代码标签: css blend-mode 可视化 效果 对比 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://codepen.io/HejChristian/pen/dPyeEzb.css'>
<style>
/* Default Lab Style Overrides */
main {
margin-bottom: 1em;
}
section {
position: relative;
margin-top: 1em;
}
/* Mix Blend Modes */
.multiply { mix-blend-mode: multiply; }
.screen { mix-blend-mode: screen; }
.overlay { mix-blend-mode: overlay; }
.darken { mix-blend-mode: darken; }
.lighten { mix-blend-mode: lighten; }
.color-dodge { mix-blend-mode: color-dodge; }
.color-burn { mix-blend-mode: color-burn; }
.hard-light { mix-blend-mode: hard-light; }
.soft-light { mix-blend-mode: soft-light; }
.difference { mix-blend-mode: difference; }
.exclusion { mix-blend-mode: exclusion; }
.hue { mix-blend-mode: hue; }
.saturation { mix-blend-mode: saturation; }
.color { mix-blend-mode: color; }
.luminosity { mix-blend-mode: luminosity; }
/* Style up the fieldset for each group of controls */
fieldset {
display: flex;
flex-wrap: wrap;
position: relative;
gap: 1em;
padding: 1em;
margin: unset;
font-size: var(--step--1);
border: solid 2px var(--color-dark);
border-radius: 0.5em;
legend {
text-transform: uppercase;
}
.radio-button:has(input:checked) {
outline: solid 3px var(--color-accent);
border-radius: 0.5em;
p {
background-color: var(--color-accent);
color: var(--color-dark);
}
}
&:has(:focus-visible) {
border: solid 2px var(--color-accent);
}
}
/* More work done on our blend sampler, with larger buttons */
.blend-sampler {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
gap: 1em;
min-height: 400px;
height: 100%;
.radio-button {
display: grid;
aspect-ratio: unset;
outline: solid 3px var(--color-dark);
height: 100%;
height: 128px;
img {
position: absolute;
inset: 0;
height: 100%;
min-height: 100%;
object-fit: cover;
object-position: center;
}
div {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
p {
position: absolute;
top: 0.5em;
left: 0.5em;
margin-top: unset;
padding: 0.3em 0.5em;
border-radius: 0.25em;
background: var(--color-dark);
color: var(--color-light);
font-size: var(--step--2);
}
}
}
/* Small block to show the mix-blend-mode code, and a short description for the blend. */
.blend-info {
padding: 1em;
border-radius: 0.5em;
background-color: var(--color-dark);
background-image: var(--texture-noise);
color: var(--color-light);
font-size: var(--step--1);
code {
display: flex;
background: var(--color-light);
background-image: var(--texture-noise);
border: unset;
font-weight: 700;
width: 100%;
padding: 0.2em 0.4em;
}
}
/* Base picker controls */
.base-picker {
img {
object-fit: cover;
object-position: 75% center;
height: 100%;
}
}
/* Overlay picker controls */
.overlay-picker {
div {
background-size: cover;
background-position: 70%;
height: 100%;
}
}
/* Default custom radio button styles */
.radio-button {
position: relative;
aspect-ratio: 1 / 1;
height: 50px;
border-radius: 0.5em;
box-shadow: var(--shadow-elevation-medium);
cursor: pointer;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0