Линейный градиент CSS отображается несколько разCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Линейный градиент CSS отображается несколько раз

Сообщение Anonymous »

Я реализовал эффект линейного градиента в 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
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
  • CSS линейный градиент не линейный
    Anonymous » » в форуме Html
    0 Ответы
    11 Просмотры
    Последнее сообщение Anonymous
  • CSS линейный градиент не линейный
    Anonymous » » в форуме CSS
    0 Ответы
    11 Просмотры
    Последнее сообщение Anonymous
  • CSS линейный градиент не линейный
    Anonymous » » в форуме Html
    0 Ответы
    9 Просмотры
    Последнее сообщение Anonymous
  • CSS линейный градиент не линейный
    Anonymous » » в форуме CSS
    0 Ответы
    10 Просмотры
    Последнее сообщение Anonymous
  • CSS – Как сделать линейный градиент более однородным при смещении
    Anonymous » » в форуме CSS
    0 Ответы
    15 Просмотры
    Последнее сообщение Anonymous

Вернуться в «CSS»