CSS-club – настройка внешнего вида сайта

1012x1008

💡 Быстро выделить всё содержимое можно с помощью комбинации клавиш Ctrl + A, предварительно установив курсор на поле ввода.

селектор {
  свойство1: значениесвойства1;
  свойство2: значениесвойства2;
}

• Интерактивные курсы
  htmlacademy.ru/courses
  codecademy.com/learn/learn-css
  
• Статьи "Введение в сайтостроение/HTML/CSS
  developer.mozilla.org
  w3schools.com
  webref.ru
  

• Вам нужен цвет без прозрачности? – Используйте HEX или RGB.
  
• Вам нужен цвет с прозрачностью? – Используйте RGBA.
  
• Вам нужна полная прозрачность? – Укажите transparent в значении свойства.
  

• colorscheme.ru
  
• mdn.mozillademos.org
  
• Если знаете еще подобные сайты, то напишите в топике.
  

/* Шаблон использования */
selector {
  background-color: <цвет>;
}

/* Реальные примеры использования */
body {
  background-color: #3f3f3f;
}

.l-page {
  background-color: rgba(255, 255, 255, 0.85);
}

/* Светлая полупрозрачная центральная область */
.l-page {
  background-color: rgba(255, 255, 255, 0.85);
}

/* Тёмные полупрозрачные подзаголовки блоков */
.subheadline {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Тёмно-фиолетовое верхнее меню без прозрачности */
.l-top_menu-v2 {
  background: rgba(46, 33, 84, 1);
}

/* Прозрачные кнопки сабменю */
.l-top_menu-v2 .menu-dropdown > span {
  background: transparent;
}

/* Фон сайта (фиксированный, на полный экран) */
body {
  background: url(/system/images/original/83668.jpg) center top / cover fixed;
}

background: -color -image -position / -size -repeat -attachment;

selector {
  background: transparent none left top / auto repeat scroll;
}

selector {
  /* Прозрачный фоновый цвет */
  background-color: transparent;
  /* Фонового изображения нет */
  background-image: none;
  /* Изображение прикрепляется к левому верхнему углу элемента */
  background-position: left top;
  /* Размер изображения не меняется */
  background-size: auto;
  /* Изображение повторяется, чтобы замостить весь элемент */
  background-repeat: repeat;
  /* Изображение не закреплено и прокручивается вместе с элементом */
  background-attachment: scroll;
}

selector {
  background-position: right center; /* по центру правого края */
}

selector {
  background-position: 100% 50%; /* по центру правого края */
}

• auto – размер фонового изображения не изменяется.
  
• cover – фоновое изображение заполняет собой элемент.
  
• contain – фоновое изображение вписывается в рамки элемента, чтобы оно было видно полностью.
  

• no-repeat – изображение не повторяется.
  
• repeat – изображение повторяется, полностью заполняя элемент.
  

• scroll – изображение не закреплено, оно будет прокручиваться вместе с элементом.
  
• fixed – изображение закреплено, оно будет неподвижно при прокрутке.
  

body {
  background: url(/system/clubs/main/811.png) left 50px no-repeat,
              #0a306f url(/system/images/original/83668.jpg) center / cover fixed;
}

/* Градиент Alice Blue */
body {
  background: linear-gradient(#f0f8ff, #e1e9f0);
}

/* Мягкое свечение на тёмном фоне */
body {
  background-image: radial-gradient(1800px circle at center top, #303041, #1e1e29);
}

/* Горизонтальный градиент на подзаголовках блоков */
.subheadline {
  background-image: linear-gradient(90deg, #b8fab4, #cef84f, #febc77);
}

/* Градиент синего в верхнем меню */
.l-top_menu-v2 {
  background-image: linear-gradient(#349bd7, #1057a8);
}

• Линейный – за него отвечает функция linear-gradient().
  
• Круговой – за него отвечает функция radial-gradient().
  

• cssgradient.io
  
• www.colorzilla.com
  

/* Шаблон использования */
selector {
  background-image: linear-gradient(<angle>, <color-list>);
}

• <angle> – угол, который указан в градусах (deg), но может быть указан и в градах (grad), радианах (rad) и оборотах (turn). К примеру, направление "Слева направо" или 90deg можно указать как 100grad или 0.25turn или примерно 1.57rad. Значения 0deg или направление "Сверху вниз" можно опустить.
  Если этот вариант сложен для понимания, то можно использовать "направления":
  

  to bottom         0deg       Сверху вниз (значение по умолчанию)
  to right         90deg       Слева направо
  to top          180deg       Снизу вверх.
  to left         270deg       Справа налево.

• <color-list> – список цветов перечисленных через запятую.
  При этом после цвета через пробел можно указать процент, для более точного распределения цветов (по умолчанию делятся на одинаково ровные участки).
  

/* Плавный переход фонового цвета */
body {
  background-image: linear-gradient(#dceaff, #ffd8ff);
}

/* Шаблон использования */
selector {
  background-image: radial-gradient(<shape> at <position>, <color-list>);
}

• <shape> – форма и размер (радиус) градиента, если используется круговая форма circle. Есть еще ellipse, но используется он редко и рассматривать его смысла нет, можете поэкспериментировать сами. Если опустить радиус градиента, то он будет равняться большей стороне элемента. Если опустить <shape> at <position>, то градиент приобретёт ту самую форму эллипса (ellipse), а его ширина и высота будут равняться ширине и высоте элемента.
  
• <position> – положение центра кругового градиента, схожее с используемым для позиционирования изображений: два значения отвечающие за положение по оси X и оси Y соответственно.
  
• <color-list> – список цветов перечисленных через запятую.
  

/* Градиент в виде эллипса */
body {
  background-image: radial-gradient(#dceaff, #ffd8ff);
}

/* Голубое свечение на розовом фоне */
body {
  background-image: radial-gradient(1800px circle at center top, #dceaff, #ffd8ff);
}

/* Цвет текста на сайте */
body {
  color: #fff;
}

/* Цвет ссылок в текстах */
.b-link {
  color: rebeccapurple;
}

/* Цвет текста в подзаголовках */
.subheadline {
  color: rgba(238, 238, 238, 0.9);
}

/* Цвет ссылок в подзаголовках */
.subheadline > a {
  color: rgba(238, 238, 238, 0.9);
}

html[data-color-mode=light] {
  --link-color: #0d6efd;
  --link-hover-color: #0a58ca;
  --link-active-color: #0a58ca;
}

/* Круглая аватарка в профиле */
.p-profiles .profile-head .c-brief .avatar img {
  border-radius: 50%;
}

/* Круглые аватарки везде! (почти) */
.avatar img {
  border-radius: 50%;
}

/* Небольшое скругление постеров аниме/манги/персонажей/людей */
.b-catalog_entry .image-cutter {
  border-radius: 6px;
}

/* Скрываем кнопку "Сообщить об ошибке" в профиле */
.p-profiles-show .b-feedback {
  display: none;
}

/* Скрываем историю */
.p-profiles .profile-head .c-history {
  visibility: hidden;
}

/* Устанавливаем картинку на место истории */
.p-profiles .profile-head .c-history::after {
  content: '';
  visibility: visible;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(/system/clubs/main/811.png) center / contain no-repeat;
}

/* Шаблон использования */
selector {
  color: white; /* обычное состояние */
}
selector:hover {
  color: red; /* состояние при наведении */
}
selector:active {
  color: black; /* состояние при нажатии */
}

/* Шаблон использования */
parent children {
  opacity: 1; /* обычное состояние */
}
parent:hover children {
  opacity: 0; /* состояние при наведении */
}

• :hover
  
• :active
  

/* Аватарка в профиле */
.p-profiles .profile-head .c-brief .avatar > img {
  border-radius: 0%; /* обычное состояние */
  transition: 0.5s ease-out;
}

.p-profiles .profile-head .c-brief .avatar > img:hover {
  border-radius: 50%; /* состояние при наведении */
}

/* Аватарка в профиле */
.p-profiles .profile-head .c-brief .avatar > img {
  border-radius: 0%; /* обычное состояние */
  transition: .2s ease;
}

.p-profiles .profile-head:hover .c-brief .avatar > img {
  border-radius: 50%; /* состояние при наведении */
}

/* Устанавливаем шрифт Times New Roman для всех элементов на сайте */
:root {
  --font-main: 'Times New Roman', serif;
  --font-alt: var(--font-main);
}

/* Подключение русской и английской версий шрифтов из fonts.google.com */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'),
       local('SourceSansPro-Regular'),
       url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'),
       local('SourceSansPro-Regular'),
       url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
}

/* Устанавливаем шрифт Source Sans Pro для всех элементов на сайте */
:root {
  --font-main: 'Source Sans Pro', sans-serif;
  --font-alt: var(--font-main);
  font-size: 16px;
}

/* Подключение иконок Font Awesome 6.2.0  */
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css);

[span=fa-solid fa-user][/span]

/* Изменение цвета даты в истории пользователя (не работает) */
.p-profiles .profile-head .c-history .entry .misc.date {
  color: #acb1b4;
}

/* Изменение цвета даты в истории пользователя (работает!) */
.p-profiles .profile-head .c-history .entry .misc.date {
  color: #acb1b4 !important;
}

• css-validator.org (на русском)
  
• csstree.github.io/docs/validator.html (eng без лишних настроек)
  
• csslint.net
  

@media (min-width: 1024px) {
  /* Ваш стиль */
}

@media { /* Отключение защиты от дурака */ }

• htmlacademy.ru/courses
  
• codecademy.com/learn/learn-css
  

@media (min-width: 1024px) { /* Добавьте эту строку в начало кода */
/* Ваш CSS тут */
} /* Добавьте эту строку в конец кода. Это конец @media-запроса.  */

/* Ваш CSS, который работает на любых экранах */

@media (min-width: 1024px) {
/* Ваш CSS, который работает только на больших экранах */
}

@media (min-width: 1024px) {
/* Ваш CSS, который работает только на больших экранах */
}

@media (max-width: 1023px) {
/* Ваш CSS, который работает только на НЕбольших экранах */
}

/* Настройки mobile-версии */
/* Тёмно-зелёное верхнее меню */
.l-top_menu-v2 {
  background: #24723f;
}

/* Настройки desktop-версии */
@media (min-width: 1024px) {
  /* Тёмно-синее верхнее меню */
  .l-top_menu-v2 {
    background: #243f72;
  }
}

/* Настройки mobile-версии */
@media (max-width: 1023px) {
  /* Тёмно-зелёное верхнее меню */
  .l-top_menu-v2 {
    background: #24723f;
  }
}

/* Настройки desktop-версии */
@media (min-width: 1024px) {
  /* Тёмно-синее верхнее меню */
  .l-top_menu-v2 {
    background: #243f72;
  }
}

/* Настройки mobile-версии */
@media (min-width: 360px) and (max-width: 599px) {
  /* Тёмно-зелёное верхнее меню */
  .l-top_menu-v2 {
    background: #24723f;
  }
}

/* Настройки tablet-версии */
@media (min-width: 600px) and (max-width: 1023px) {
  /* Тёмно-красное верхнее меню */
  .l-top_menu-v2 {
    background: #722424;
  }
}

/* Настройки desktop-версии */
@media (min-width: 1024px) {
  /* Тёмно-синее верхнее меню */
  .l-top_menu-v2 {
    background: #243f72;
  }
}

@media screen and (max-width: 1024px) {
  body {
    background: none !important;
  }
}

javascript :(function(){custom_css.remove()})();

javascript :(function(){custom_css.remove();cm=document.querySelector(".CodeMirror").CodeMirror;cm.setValue("");})();

• Если у вас ПК, нажмите Enter

• Если у вас смартфон, нажмите на строчку с иконкой глобуса (а не лупы!).