Anonymous
Линейный градиент CSS отображается несколько раз
Сообщение
Anonymous » 12 май 2024, 18:12
Я реализовал эффект линейного градиента в CSS на своем HTML-сайте. Однако, просмотрев его, я заметил, что градиент отображался несколько раз.
Для контекста: мой веб-сайт работает на nginx, и я использую Express.js вместе с EJS для серверов. боковой рендеринг.
Будем очень признательны за любые идеи и предложения по решению этой проблемы.
Код: Выделить всё
* {
margin: 0;
font-family: Roboto,Arial,sans-serif;
font-weight: bold;
}
@font-face {
font-family: 'Mokoto Glitsch 2';
src: url('../fonts/mokoto-mokoto-regular-glitch-mark-2-400.ttf') format('truetype');
}
body {
background: linear-gradient( #D077E8, #01536C);
background-size: cover;
user-select: none;
overflow: hidden;
}
header {
position: relative;
width: 100%;
height: 70px;
color: white;
background-color: #010F27;
}
.server-tool-text {
font-family: 'Mokoto Glitsch 2', Arial, sans-serif;
line-height: normal;
margin-top: 7px;
}
.logo {
float: left;
font-size: 25px;
margin-left: 30px;
height: 70px;
display: flex;
align-items: center;
}
.profile-picture {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
}
.profile-name {
margin-right: 10px;
}
.user-menu {
float: right;
margin-right: 10px;
text-decoration: none;
height: 70px;
display: flex;
align-items: center;
}
.user-menu a {
text-decoration: none;
margin-right: 20px;
color: white;
}
.menu {
float: left;
margin-left: 40px;
text-decoration: none;
height: 70px;
display: flex;
align-items: center;
}
.user-menu a {
text-decoration: none;
margin-right: 20px;
color: white;
}
.menu-button {
font-size: 15px;
margin-left: 15px;
color: white;
background-color: #010F27;
width: 150px;
height: 40px;
border-radius: 5px;
border: None;
transition: background-color 0.3s;
}
.menu-button:hover {
cursor: pointer;
background-color: rgb(8, 9, 22);
transition: background-color 0.3s;
}
.log-in {
font-size: 14px;
color: white;
background-color: #010F27;
width: 80px;
height: 40px;
border-radius: 5px;
border: None;
transition: background-color 0.3s;
}
.log-in:hover {
cursor: pointer;
background-color: rgb(8, 9, 22);
transition: background-color 0.3s;
}
.log-out {
font-size: 14px;
color: white;
background-color: #ff0000;
width: 80px;
height: 40px;
border-radius: 5px;
border: None;
transition: background-color 0.3s;
}
.log-out:hover {
cursor: pointer;
background-color: #690101;
transition: background-color 0.3s;
}
.invite-button {
font-size: 20px;
margin: 0;
position: absolute;
top: 75%;
left: 40%;
transform: translate(-50%, -50%);
color: white;
background-color: #010F27;
outline: 2px solid #00367c;
width: 200px;
height: 50px;
border-radius: 5px;
border: None;
transition: background-color 0.3s;
}
.invite-button:hover {
cursor: pointer;
background-color: rgb(8, 9, 22);
outline: 2px solid #003f91;
box-shadow: 0 0 10px 2px rgba(0, 162, 255, 0.7);
transition: background-color 0.3s;
transition: outline 0.3s;
transition: box-shadow 0.3s;
}
.dashboard-button {
font-size: 20px;
margin: 0;
position: absolute;
top: 75%;
left: 60%;
transform: translate(-50%, -50%);
color: white;
background-color: #010F27;
outline: 2px solid #00367c;
width: 200px;
height: 50px;
border-radius: 5px;
border: None;
transition: background-color 0.3s;
}
.dashboard-button:hover {
cursor: pointer;
background-color: rgb(8, 9, 22);
outline: 2px solid #003f91;
box-shadow: 0 0 10px 2px rgba(0, 162, 255, 0.7);
transition: background-color 0.3s;
transition: outline 0.3s;
transition: box-shadow 0.3s;
}
.titel {
position: absolute;
top: 40%;
left: 50%;
width: 800px;
transform: translate(-50%, -50%);
padding: 10px;
color: white;
}
.titel-subtitel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 50%);
width: 500px;
padding: 10px;
color: white;
text-align: center;
}
Код: Выделить всё
Server Tool
[img]assets/img/servertool-logo.png[/img]
Server Tool
[url=https://servertool.xyz/support]Support Server[/url]
[url=https://servertool.xyz/docs]Documentation[/url]
[url=https://servertool.xyz/login]Login[/url]
Server Tool App and Website are in Development
You can finde more information on our Support Server
Invite Server Tool
Dashboard
function inviteServerTool() {
var url = "https://discord.com/oauth2/authorize?client_id=1236000476143685762&permissions=8&scope=bot+applications.commands";
var width = 450;
var height = 750;
var left = 0;
var top = 0;
window.open(url, "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
}
function gotodashboard() {
window.location.href = `https://servertool.xyz/dashboard`;
}
Подробнее здесь:
https://stackoverflow.com/questions/784 ... iple-times
1715526768
Anonymous
Я реализовал эффект линейного градиента в CSS на своем HTML-сайте. Однако, просмотрев его, я заметил, что градиент отображался несколько раз. Для контекста: мой веб-сайт работает на nginx, и я использую Express.js вместе с EJS для серверов. боковой рендеринг. Будем очень признательны за любые идеи и предложения по решению этой проблемы. [code]* { margin: 0; font-family: Roboto,Arial,sans-serif; font-weight: bold; } @font-face { font-family: 'Mokoto Glitsch 2'; src: url('../fonts/mokoto-mokoto-regular-glitch-mark-2-400.ttf') format('truetype'); } body { background: linear-gradient( #D077E8, #01536C); background-size: cover; user-select: none; overflow: hidden; } header { position: relative; width: 100%; height: 70px; color: white; background-color: #010F27; } .server-tool-text { font-family: 'Mokoto Glitsch 2', Arial, sans-serif; line-height: normal; margin-top: 7px; } .logo { float: left; font-size: 25px; margin-left: 30px; height: 70px; display: flex; align-items: center; } .profile-picture { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 10px; } .profile-name { margin-right: 10px; } .user-menu { float: right; margin-right: 10px; text-decoration: none; height: 70px; display: flex; align-items: center; } .user-menu a { text-decoration: none; margin-right: 20px; color: white; } .menu { float: left; margin-left: 40px; text-decoration: none; height: 70px; display: flex; align-items: center; } .user-menu a { text-decoration: none; margin-right: 20px; color: white; } .menu-button { font-size: 15px; margin-left: 15px; color: white; background-color: #010F27; width: 150px; height: 40px; border-radius: 5px; border: None; transition: background-color 0.3s; } .menu-button:hover { cursor: pointer; background-color: rgb(8, 9, 22); transition: background-color 0.3s; } .log-in { font-size: 14px; color: white; background-color: #010F27; width: 80px; height: 40px; border-radius: 5px; border: None; transition: background-color 0.3s; } .log-in:hover { cursor: pointer; background-color: rgb(8, 9, 22); transition: background-color 0.3s; } .log-out { font-size: 14px; color: white; background-color: #ff0000; width: 80px; height: 40px; border-radius: 5px; border: None; transition: background-color 0.3s; } .log-out:hover { cursor: pointer; background-color: #690101; transition: background-color 0.3s; } .invite-button { font-size: 20px; margin: 0; position: absolute; top: 75%; left: 40%; transform: translate(-50%, -50%); color: white; background-color: #010F27; outline: 2px solid #00367c; width: 200px; height: 50px; border-radius: 5px; border: None; transition: background-color 0.3s; } .invite-button:hover { cursor: pointer; background-color: rgb(8, 9, 22); outline: 2px solid #003f91; box-shadow: 0 0 10px 2px rgba(0, 162, 255, 0.7); transition: background-color 0.3s; transition: outline 0.3s; transition: box-shadow 0.3s; } .dashboard-button { font-size: 20px; margin: 0; position: absolute; top: 75%; left: 60%; transform: translate(-50%, -50%); color: white; background-color: #010F27; outline: 2px solid #00367c; width: 200px; height: 50px; border-radius: 5px; border: None; transition: background-color 0.3s; } .dashboard-button:hover { cursor: pointer; background-color: rgb(8, 9, 22); outline: 2px solid #003f91; box-shadow: 0 0 10px 2px rgba(0, 162, 255, 0.7); transition: background-color 0.3s; transition: outline 0.3s; transition: box-shadow 0.3s; } .titel { position: absolute; top: 40%; left: 50%; width: 800px; transform: translate(-50%, -50%); padding: 10px; color: white; } .titel-subtitel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%); width: 500px; padding: 10px; color: white; text-align: center; }[/code] [code] Server Tool [img]assets/img/servertool-logo.png[/img] Server Tool [url=https://servertool.xyz/support]Support Server[/url] [url=https://servertool.xyz/docs]Documentation[/url] [url=https://servertool.xyz/login]Login[/url] Server Tool App and Website are in Development You can finde more information on our Support Server Invite Server Tool Dashboard function inviteServerTool() { var url = "https://discord.com/oauth2/authorize?client_id=1236000476143685762&permissions=8&scope=bot+applications.commands"; var width = 450; var height = 750; var left = 0; var top = 0; window.open(url, "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top); } function gotodashboard() { window.location.href = `https://servertool.xyz/dashboard`; } [/code] Подробнее здесь: [url]https://stackoverflow.com/questions/78468278/css-linear-gradient-displayed-multiple-times[/url]