Несколько полезных приемов СSS для блоков конструктора страниц

В этой статье рассмотрим несколько простых приемов использования CSS в стандартных блоках конструктора страниц Getcourse.

Код из примеров достаточно просто скопировать и вставить в редактор стилей.

А если хотите еще круче изменять внешний вид личного кабинета Геткурс и его лендингов, то воспользуйтесь материалами клуба «Магия CSS».
Кликайте тут для подробностей.

Содержание:

I. Заголовки

1. Меняем размер шрифта.

Бывают случаи, когда стандартные размеры шрифтов заголовков не подходят. Это легко исправить.

В примере выбран стандартный заголовок размером – 52.

Результат

Код:

.f-header-52 {
  font-size: 42px; /* Задать свой размер*/
}

.f-header-52 {

font-size: 42px; /* Задать свой размер*/

}

2. Меняем толщину шрифта.

Результат

Код

.f-header {
  font-weight: 400;/* Задать толщину (По умолчанию - 700) - 300, 400, 500, 600 */
}

.f-header {

font-weight: 400;/* Задать толщину (По умолчанию - 700) - 300, 400, 500, 600 */

}

3. Меняем расстояние между символами.

Результат

Код

.f-header {
  letter-spacing: 5рх; /*Расстояние между символами.По умолчанию - 0, чтобы уменьшить - задать отрицательное значение (-2px) */
}

.f-header {

letter-spacing: 5рх; /*Расстояние между символами.По умолчанию - 0, чтобы уменьшить - задать отрицательное значение (-2px) */

}

4. Выделить слово

a) Можно через стандартный тег mark

Результат

Код

mark {
  background-color: #5e22a8;/*Цвет выделения (по умолчанию - жёлтый)*/
  color: #fff;/*Цвет шрифта */
}

mark {

background-color: #5e22a8;/*Цвет выделения (по умолчанию - жёлтый)*/

color: #fff;/*Цвет шрифта */

}

б) Или с использованием класса.

Для этого в редакторе текста переходим в режим HTML и оборачиваем нужное слово или фразу в тег <span> c классом “marked”

Результат

Код

.marked {
  display: inline-block;
  padding: 5px 10px;
  background-color: #5e22a8;/*Цвет выделения (по умолчанию - жёлтый)*/
  color: #fff;/*Цвет шрифта */
  border-radius: 25px;/*Скругление углов*/
  box-shadow:0px 1px 21px 5px rgba(177,169,175,0.9);/*добавить тень*/
  -webkit-box-shadow:0px 1px 21px 5px rgba(177,169,175,0.9);
  -moz-box-shadow:0px 1px 21px 5px rgba(177,169,175,0.9);
}

.marked {

display: inline-block;

padding: 5px 10px;

background-color: #5e22a8;/*Цвет выделения (по умолчанию - жёлтый)*/

color: #fff;/*Цвет шрифта */

border-radius: 25px;/*Скругление углов*/

box-shadow:0px 1px 21px 5px rgba(177,169,175,0.9);/*добавить тень*/

-webkit-box-shadow:0px 1px 21px 5px rgba(177,169,175,0.9);

-moz-box-shadow:0px 1px 21px 5px rgba(177,169,175,0.9);

}

Удобный ресурс для генерации тени https://tamali.net/instrument/html-css/css-box-shadow/

Такое выделение можно использовать для любого текста, не только в заголовках.

5. Подчеркнуть слово

Для этого в редакторе текста переходим в режим HTML и оборачиваем нужное слово или фразу в тег c классом “underlined”

Результат

Код

.underlined {
  display: inline-block;
  padding-bottom: 2px;/*отступ до линии*/
  border-bottom: 3px #ff0000 dashed;/*вид границы: dashed-пунктир, dotted-точками, solid- сплошная*/
}

.underlined {

display: inline-block;

padding-bottom: 2px;/*отступ до линии*/

border-bottom: 3px #ff0000 dashed;/*вид границы: dashed-пунктир, dotted-точками, solid- сплошная*/

}

Такое подчеркивание можно использовать для любого текста, не только в заголовках.

6. Пометить заголовок слева

Результат

Код

.f-header {
  padding-left:20px;/*отступ до линии*/
  border-left: 5px #008000 solid; /* толщина цвет тип*/
}

.f-header {

padding-left:20px;/*отступ до линии*/

border-left: 5px #008000 solid; /* толщина цвет тип*/

}

II. Текстовые блоки

1. Пометить блок с текстом слева

Результат

Код

.block-box {
  padding-left:20px;/*отступ до линии*/
  border-left: 5px #0b2775 solid;/*толщина цвет тип*/
}

.block-box {

padding-left:20px;/*отступ до линии*/

border-left: 5px #0b2775 solid;/*толщина цвет тип*/

}

2. Скругляем углы

Задаем в настройках свойства для границы блока и дописываем в стили для скругления нужных углов.

Результат

Код

.block-box {
  border-top-left-radius: 60px;/*левый верхний угол*/
  border-bottom-right-radius: 60px;/*правый нижний угол*/
}

.block-box {

border-top-left-radius: 60px;/*левый верхний угол*/

border-bottom-right-radius: 60px;/*правый нижний угол*/

}

3. Эффект при наведении

Задаем в настройках свойства для границы блока и фона блока, дописываем в стили эффекты при наведении.

Результат

Код

.block-box {
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;/*скорость перехода*/
}

.block-box {

-webkit-transition: all 0.2s ease;

-o-transition: all 0.2s ease;

transition: all 0.2s ease;/*скорость перехода*/

}

.block-box:hover {
  background-color: white;/*цвет фона*/
  box-shadow:0px 1px 10px 5px rgba(116,144,220,0.77);/*тень*/
  -webkit-box-shadow:0px 1px 10px 5px rgba(116,144,220,0.77);
  -moz-box-shadow:0px 1px 10px 5px rgba(116,144,220,0.77);
  transform: scale(1.01);/*увеличение размера*/
}

.block-box:hover {

background-color: white;/*цвет фона*/

box-shadow:0px 1px 10px 5px rgba(116,144,220,0.77);/*тень*/

-webkit-box-shadow:0px 1px 10px 5px rgba(116,144,220,0.77);

-moz-box-shadow:0px 1px 10px 5px rgba(116,144,220,0.77);

transform: scale(1.01);/*увеличение размера*/

}

4. Несколько разделенных текстовых блоков с общей обложкой

Результат

Код

.f-text {
  padding: 20px;/*отступы внутри блока*/
  background-color: rgba(255, 255, 255, 0.9);/*Цвет фона текстового блока с прозрачностью 0.9*/
  border: 2px #333 dashed;/*Граница*/
  border-radius: 5px;/*Скругление текстового блока*/
  color: #333;/*Цвет текста */
}

.f-text {

padding: 20px;/*отступы внутри блока*/

background-color: rgba(255, 255, 255, 0.9);/*Цвет фона текстового блока с прозрачностью 0.9*/

border: 2px #333 dashed;/*Граница*/

border-radius: 5px;/*Скругление текстового блока*/

color: #333;/*Цвет текста */

}

5. Разделитель в тексте

Можно интересно использовать стандартный разделитель < hr>

Результат 1

Результат 2

Код

Пример 1

hr {
border: 0;
border-top: 3px dotted #ad1a3f;/*толщина стиль цвет*/
width: 60%;/*ширина линии*/
}

hr {

border: 0;

border-top: 3px dotted #ad1a3f;/*толщина стиль цвет*/

width: 60%;/*ширина линии*/

}

Пример 2

hr {
  border: 0;
  border-top: 15px solid #ad1a3f;/*толщина стиль цвет*/
  width: 15px;/*ширина линии*/
}

hr {

border: 0;

border-top: 15px solid #ad1a3f;/*толщина стиль цвет*/

width: 15px;/*ширина линии*/

}

6. Задать свой цвет и размер галочке в списке (или поменять символ)

Результат 1

Код

.ul-checks li {
margin-bottom: 1.2em;/*Отступ между пунктами*/
}

.ul-checks li {

margin-bottom: 1.2em;/*Отступ между пунктами*/

}

.ul-checks li:before {
color: green; /*Цвет галочки*/
font-size: 1.5em; /*Размер галочки*/
}

.ul-checks li:before {

color: green; /*Цвет галочки*/

font-size: 1.5em; /*Размер галочки*/

}

Или можно легко поменять символ списка на другой.

Символ можно выбрать на сайте https://unicode-table.com/

В строке поиска вводим искомый символ. Например “Роза” и копируем код css.

Результат 2

Код

.ul-checks li {
margin-bottom: 1.2em;/*Отступ между пунктами*/
}

.ul-checks li {

margin-bottom: 1.2em;/*Отступ между пунктами*/

}

.ul-checks li:before {
content: "\1F339"; /*Код символа*/
color: #a81f41; /*Цвет символа*/
font-size: 1.6em; /*Размер символа*/
}

.ul-checks li:before {

content: "\1F339"; /*Код символа*/

color: #a81f41; /*Цвет символа*/

font-size: 1.6em; /*Размер символа*/

}

III. Кнопки и формы

1. Выделение кнопки при наведении.

Размер, скругление углов, цвет текста задается в стандартных настройках кнопки.

В стилях прописываем цвет границы (= цвету текста).

Результат

Код

.btn {
  border: 2px #199c68 solid;/*Цвет границы (цвет фона и текста задан в основных настройках кнопки)*/
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.btn {

border: 2px #199c68 solid;/*Цвет границы (цвет фона и текста задан в основных настройках кнопки)*/

-webkit-transition: all 0.2s ease;

-o-transition: all 0.2s ease;

transition: all 0.2s ease;

}

.btn:hover {
  background-color: #199c68 !important;/*Цвет фона при наведении*/
  color: #ffffff !important;/*Цвет текста при наведении*/
}

.btn:hover {

background-color: #199c68 !important;/*Цвет фона при наведении*/

color: #ffffff !important;/*Цвет текста при наведении*/

}

2. Скругление полей формы. Толщина и цвет границы.

Результат

Код

.f-input {
  border: 2px solid #A52A2A;/*толщина, тип, цвет границы поля формы*/
  border-radius: 10px;/*скругление полей формы*/
  color: black; /*цвет текста при вводе*/
}

.f-input {

border: 2px solid #A52A2A;/*толщина, тип, цвет границы поля формы*/

border-radius: 10px;/*скругление полей формы*/

color: black; /*цвет текста при вводе*/

}

3. Форма с 2 предложениями.

Результат

Код

.form-position {
  float: left;
  width: 49%;
  min-height: 100px;
  padding: 15px;
  margin-right: 0.5%;
  margin-left: 0.5%;
  margin-bottom: 15px;
  border: 2px #ebb7b7 solid;
  border-radius: 10px;
  text-align: center;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.form-position {

float: left;

width: 49%;

min-height: 100px;

padding: 15px;

margin-right: 0.5%;

margin-left: 0.5%;

margin-bottom: 15px;

border: 2px #ebb7b7 solid;

border-radius: 10px;

text-align: center;

-webkit-transition: all 0.2s ease;

-o-transition: all 0.2s ease;

transition: all 0.2s ease;

}

@media (max-width: 620px) {/*Для корректного отображения на узких экранах*/
.form-position {
  width: 100%;
  height: auto;
  margin: 0 0 5px 0;
 }
}

@media (max-width: 620px) {/*Для корректного отображения на узких экранах*/

.form-position {

width: 100%;

height: auto;

margin: 0 0 5px 0;

}

.form-position:hover {
  border-color: #D46A6A;
}

.form-position:hover {

border-color: #D46A6A;

}

.form-position.selected {
  background-color: #D46A6A;
  border-color: #D46A6A;
  color: white;
}

.form-position.selected {

background-color: #D46A6A;

border-color: #D46A6A;

color: white;

}

.pull-left, .pull-right {
  float: none !important;
}

.pull-left, .pull-right {

float: none !important;

}

.final-price {
  font-size: 24px;/*Размер шрифта цены*/
  font-weight: bold;/*Толщина шрифта цены*/
}

.final-price {

font-size: 24px;/*Размер шрифта цены*/

font-weight: bold;/*Толщина шрифта цены*/

}

input[type="radio"] {
  display: none;
}

input[type="radio"] {

display: none;

}

.f-input {
  border-radius: 5px;/*скругление полей формы*/
}

.f-input {

border-radius: 5px;/*скругление полей формы*/

}

Хотите стать крутым специалистом по Геткурс? Ждём вас на нашем онлайн-курсе “Укротитель Геткурс”.

Подробности по ссылке>>>

Ещё больше фишек по изменению внешнего вида Геткурс и расширению его функционала – в клубе «Магия CSS» от Петра Петипака.
Кликайте тут для подробностей.