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

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

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

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

I. Заголовки

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

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

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

Результат

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

Код:

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

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

Результат

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

Код

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

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

Результат

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

Код

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

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

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

Результат

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

Код

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

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

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

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

Результат

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

Код

.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”

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

Результат

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

Код

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

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

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

Результат

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

Код

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

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

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

Результат

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

Код

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

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

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

Результат

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

Код

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

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

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

Результат

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

Код

.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);/*увеличение размера*/
}

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

Результат

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

Код

.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

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

Результат 2

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

Код

Пример 1

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

Пример 2

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

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

Результат 1

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

Код

.ul-checks li {
  margin-bottom: 1.2em;/*Отступ между пунктами*/
}
.ul-checks li:before {
  color: green; /*Цвет галочки*/
  font-size: 1.5em; /*Размер галочки*/
}

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

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

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

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

Результат 2

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

Код

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

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

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

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

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

Результат

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

Код

.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;/*Цвет текста при наведении*/
}

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

Результат

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

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

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

Результат

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

Код

.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;
 }
}
.form-position:hover {
  border-color: #D46A6A;
}
.form-position.selected {
  background-color: #D46A6A;
  border-color: #D46A6A;
  color: white;
}
.pull-left, .pull-right {
  float: none !important;
}
.final-price {
  font-size: 24px;/*Размер шрифта цены*/
  font-weight: bold;/*Толщина шрифта цены*/
}
input[type="radio"] {
  display: none;
}
.f-input {
  border-radius: 5px;/*скругление полей формы*/
}

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

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...