“This is my 17th day of participating in the First Challenge 2022. For details: First Challenge 2022
Near the end of the semester, are you still writing an HTML web design class assignment and the teacher’s homework requirements are overwhelming? Is the total number of pages required too high? Don’t know how to do your HTML web homework? Don’t have the right template? And so on. The problem you’re trying to solve, In the column here common web design homework topics are personal, food, company, sports, cosmetics, logistics, environmental protection, books, wedding, military, games, festivals, smoking cessation, film, photography school, tourism, e-commerce, pets, electrical appliances, tea, home, hotel, dance, animation, stars, Clothing, culture, hometown, flowers, gifts, cars, other web design topics, A+ level homework, can meet college students web design needs can meet your needs. Original HTML+CSS+JS page design, web college students web design homework source code, this is a good # HTML+CSS+JS implementation of 3 light to dark image filter effects web design, screen smart
Effect demonstration:
css
:root {
--linear-deg: 90deg;
--color_one_rgb: 255;
--color_two_rgb: 255;
--color_three_rgb: 255;
--color_one_opacity: 0.2;
--start: 0%;
--color_four_rgb: 10;
--color_five_rgb: 0;
--color_six_rgb: 94;
--color_two_opacity: 1;
--end: 100%;
/* Special Variables */
--url: url("https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455_960_720.jpg");
--font-color: #fff;
--font-size: 6vw;
--blend-mode: screen;
--animation-speed: 5s;
--transition: ease;
}
body {
background: var(--url);
background-size: cover;
background-repeat: no-repeat;
font-family: sans-serif;
height: 100vh;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.main {
height: 100%;
width: 100%;
background: linear-gradient( var(--linear-deg), rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), var(--color_one_opacity)) var(--start), rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), var(--color_two_opacity)) var(--end));
position: relative;
display: flex;
justify-content: center;
align-items: center;
animation: Infite var(--animation-speed) var(--transition) infinite;
-webkit-animation: Infite var(--animation-speed) var(--transition) infinite;
-moz-animation: Infite var(--animation-speed) var(--transition) infinite;
background-size: 125% 125%;
}
@-webkit-keyframes Infite {
0% {
background-position: 0% 97%
}
50% {
background-position: 100% 4%
}
100% {
background-position: 0% 97%}}@-moz-keyframes Infite {
0% {
background-position: 0% 97%
}
50% {
background-position: 100% 4%
}
100% {
background-position: 0% 97%}}@keyframes Infite {
0% {
background-position: 0% 97%
}
50% {
background-position: 100% 4%
}
100% {
background-position: 0% 97%}}h1 {
color: var(--font-color);
font-size: var(--font-size);
border:.5vw solid black;
padding: 0.5 rem 1rem;
}
.blend {
mix-blend-mode: var(--blend-mode);
}
.form_container {
position: absolute;
bottom: 0;
right: 0;
top: 0;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0.5 rem 2rem;
background: rgba( 255.255.255.0.55);
background: rgba( 255.255.255.0.3);
box-shadow: 0 8px 32px 0 rgba( 31.38.135.0.37);
backdrop-filter: blur( 20px);
-webkit-backdrop-filter: blur( 20px);
border-radius: 1rem 0 0 1rem;
width: 250px;
overflow: auto;
}
.formgroup {
width: 100%;
}
.description {
width: auto;
padding: 0.2 rem 0;
font-weight: 600;
font-size: 1rem;
}
h2 {
position: relative;
font-weight: 700;
margin: 0.5 rem 0;
padding: 0;
font-size: 1.3 rem;
flex: 100%;
}
h2::after {
content: "";
position: absolute;
width: 25px;
max-width: 200px;
bottom: 0;
left: 5rem;
height: 25px;
border-radius: 50%;
}
#titelColorOne::after {
background: rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), 1) var(--start);
}
#titelColorTwo::after {
background: rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), 1) var(--end);
}
.slider {
-webkit-appearance: none;
width: 50%;
border-radius: 1rem;
height: 10px;
background: #e0e0e0;
box-shadow: inset 7px 7px 14px #bebebe, inset -7px -7px 14px #ffffff;
outline: none;
opacity: 0.7;
-webkit-transition:.2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 1rem;
border: 1px solid white;
background: linear-gradient( var(--linear-deg), rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), var(--color_one_opacity)) var(--start), rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), var(--color_two_opacity)) var(--end));
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 15px;
height: 15px;
linear-gradient( var(--linear-deg),
rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), var(--color_one_opacity)) var(--start),
rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), var(--color_two_opacity)) var(--end));
cursor: pointer;
}
#colorSelect {
width: 50%;
margin: 0;
padding: 0;
font-weight: 600;
background: #fff;
cursor: pointer;
}
.input {
width: 100%;
margin: 0;
padding:.5rem 0;
font-weight: 600;
background: #fff;
cursor: pointer;
}
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: # 888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: # 555;
}
summary {
font-size: 1.3 rem;
font-weight: 700;
cursor: pointer;
margin: 0.5 rem 0 0 0;
}
@media only screen and (max-width: 1000px) {
.form_container {
bottom: 0;
left: 0;
right: 0;
width: 0%;
top: 70%;
flex-direction: row;
border-radius: 1rem 1rem 0 0;
width: 90%;
}
.formgroup {
overflow-y: auto;
overflow-x: hidden; }}@media only screen and (max-width: 600px) {
body {
height: 100%;
overflow: auto;
width: 100%;
}
.blend {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.main {
flex-direction: column;
width: 100%;
}
.form_container {
width: 80%;
position: static;
flex-direction: column;
border-radius: 1rem 1rem 0 0;
height: 100%;
background: white;
justify-content: center;
align-items: center;
}
.formgroup {
height: 100%;
width: 90%;
border: 4px solid black;
padding: 0.5 rem 1rem;
border-radius: 1rem; }}Copy the codeHTML and JavaScript code:
A<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Light to Dark | Play with Gradient & Mix-Blend-Mode</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
<div class="blend">
<h1>From light to dark</h1>
</div>
<div class="form_container">
<div class="formgroup">
<h2 id="titelColorOne">Color 1</h2>
<div class="description">R</div><input class="slider" type="range" min="0" max="255" step="1.0" value="255" id="one">
<span id="one_value">255</span>
<br>
<div class="description">G</div><input class="slider" type="range" min="0" max="255" step="1.0" value="255" id="two">
<span id="two_value">255</span>
<br>
<div class="description">B</div><input class="slider" type="range" min="0" max="255" step="1.0" value="255" id="three">
<span id="three_value">255</span>
<br>
<div class="description">A</div><input class="slider" type="range" min="0" max="1" step="0.1" value="0.2" id="opacity_one">
<span id="opacity_one_value">0.2</span>
<br>
<div class="description">Startpoint</div>
<input class="slider" type="range" min="0" max="100" step="1.0" value="0" id="start">
<span id="start_value">0</span>
</div>
<div class="formgroup">
<h2 id="titelColorTwo">Color 2</h2>
<div class="description">R</div><input class="slider" type="range" min="0" max="255" step="1.0" value="10" id="four">
<span id="four_value">10</span>
<br>
<div class="description">G</div><input class="slider" type="range" min="0" max="255" step="1.0" value="0" id="five">
<span id="five_value">0</span>
<br>
<div class="description">B</div><input class="slider" type="range" min="0" max="255" step="1.0" value="94" id="six">
<span id="six_value">94</span>
<br>
<div class="description">A</div><input class="slider" type="range" min="0" max="1" step="0.1" value="1" id="opacity_two">
<span id="opacity_two_value">1</span>
<br>
<div class="description">Endpoint</div><input class="slider" type="range" min="0" max="100" step="1.0" value="100" id="end">
<span id="end_value">100%</span>
</div>
<div class="formgroup">
<h2>DEG & Blend-Mode</h2>
<div class="description">DEG</div><input class="slider" type="range" min="0" max="360" step="1.0" value="90" id="deg">
<span id="deg_value">90deg</span>
<div class="description">Mix-Blend-Mode</div>
<select name="mix-blend" class="input" id="mixBlend">
<option value="normal">normal</option>
<option value="multiply">multiply</option>
<option value="screen">screen</option>
<option value="overlay">overlay</option>
<option value="darken">darken</option>
<option value="lighten">lighten</option>
<option value="color-dodge">color-dodge</option>
<option value="color-burn">color-burn</option>
<option value="hard-light">hard-light</option>
<option value="soft-light">soft-light</option>
<option value="difference">difference</option>
<option value="exclusion">exclusion</option>
<option value="hue">hue</option>
<option value="saturation">saturation</option>
<option value="color">color</option>
<option value="luminosity">luminosity</option>
<option value="initial">initial</option>
<option value="inherit">inherit</option>
<option value="unset">unset</option>
</select>
<details>
<summary>More</summary>
<br>
<div class="description">Font Color</div><input type="color" value="" id="colorSelect">
<br>
<div class="description">FontSize</div><input class="slider" type="range" min="0" max="10" step="0.25" value="3" id="fontSize">
<span id="font_value">3vw</span>
<div class="description">Transition</div>
<select name="transition" class="input" id="transition">
<option value="ease">ease</option>
<option value="linear">linear</option>
<option value="ease-in-out">ease-in-out</option>
<option value="ease-in">ease-in</option>
<option value="ease-out">ease-out</option>
</select>
<div class="description">Animation Speed</div><input class="slider" type="range" min="0.5" max="20" step="0.25" value="5" id="speed">
<span id="speed_value">5s</span>
<br>
<div class="description">Backgorund Image Url</div><input type="url" value="img/fh.jpg" class="input" id="urlInput"></p>
</details>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Copy the codeClocked articles updated 33/100 days
Everyone can like, favorites, follow and comment on me now!
