Разное

Красивый css: Пишем CSS лучше и красивее / Хабр

24.08.1988

Содержание

Оформляем Select CSS! Пользовательские стили для Select на CSS

С приходом CSS3 стало возможным сделать красивый стиль для любого элемента на сайте. Потому что CSS3 даёт широкий спектр возможностей, которые ускоряют процесс разработки дизайна для сайта. Сегодня мы оформим элемент select на CSS. Кто не знает, этот элемент отвечает за выпадающий список на сайте. Многие используют стандартный вид, но его можно изменить, чтобы он подходил по дизайну к Вашему сайту.

Нет ничего лучше, чем увидеть как выглядит список своими глазами:

Смотреть примерСкачать

Вот как выглядит этот Select оформленный на CSS:

Похожие статьи на эту тему:

  • Красивый выпадающий список для сайта — делаем выпадающий список
  • Пользовательские стили для формы на чистом CSS без Javascript

А сейчас опишу процесс установки по шагам этого выпадающего списка или просто Select.

1 шаг. Подключаем необходимые файлы

Всё просто. После того как скачали архив с исходниками оттуда нам будут нужны 2 файла (style. css и select.js — если подключаете первый вариант списка или select_demo2.js — если подключаете второй вариант). Подключаем эти два файла между тегами <head></head>:

HTML КОД

1
2

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type='text/javascript' src='js/select.js'></script>

2 шаг. HTML структура элемента Select

Ничего сверхсложного в структуре нет (да и откуда ему быть, ведь это просто HTML 🙂 ). Простая форма, внутри которой выпадающий Select с его пунктами:

HTML КОД

1
2
3
4
5
6
7
8
9
10
11
12

<form action="#">
    <p>
        <label>Страны Великобритании:</label>
        <select>
            <option>Пожалуйста, выберите страну:</option>
            <option>Англия</option>
            <option>Северная Ирландия</option>
            <option>Шотландия</option>
            <option>Уэльс</option>
        </select>
    </p>
</form>

3 шаг.

Добавляем стили для Select CSS

Их немного. Я привожу ниже стили для первого варианта списка. Хочу обратить внимание на пути к изображениям. Их всего два: первое для того, чтобы раскрыть список, а второй — чтобы закрыть. Они выглядят в виде двух стрелочек «вверх» и «вниз» соответственно. Их можно скачать в месте с исходниками, которые находятся в начале статьи:

CSS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

.dropcontainer {
   position:relative;
   font-size: 16px;
   color: #777;
} 
 
.trigger {
   color: #777;
   padding: 10px;
   font-size: 16px;
   width: 50%;
   background: #fff url(../images/select-arrow-open.png) 98% center no-repeat;
   display: block;
   border: 1px solid #ccc;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: all 0.
 
 5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease; 
   transition: all 0.5s ease;
}
 
.trigger:hover {
   color: #777;
   background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat;
}
 
.activetrigger {
   color: #777;
   padding: 10px;
   font-size: 16px;
   width: 50%;
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   display: block;
   border: 1px solid #ccc;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
.activetrigger:hover {
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   color: #777;
}
 
.activetrigger:active {
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   color: #777;
}
 
.dropcontainer ul {
   font-size: 16px;
   border: 1px solid #ccc;
   border-top: none;
   background: #fff;
   list-style-type: none;
   padding: 10px;
   margin: 0;
   width: 50%;
   z-index: 100;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
.
 
 
 dropcontainer ul li {
   padding: 5px;
   -webkit-transition: all 0.5s ease; 
   -moz-transition: all 0.5s ease; 
   -o-transition: all 0.5s ease; 
   transition: all 0.5s ease;
}
 
.dropcontainer ul li:hover {
   background: #f5f5f5;
   outline: none;
}
 
.dropcontainer ul li:first-child {
   display: none;
}
 
.dropcontainer ul li:last-child {
   border-bottom: none;
}
 
.dropdownhidden {
   display: none;
}
 
.dropdownvisible {
   height: auto;
}

В демо примере стили расположены в папке css. Поэтому когда мы задаем путь к папке с изображениями в пути мы сначала пишем «

..» (две точки), чтобы выйти на один уровень вверх. А затем заходим в папку images.

Сейчас хочу сказать что можно сделать, чтобы не копировать полностью стили для второго варианта списка (который с фиксированной высотой), а изменить одно свойство и получить фиксированный список.

Вам нужно заменить последнее свойство dropdownvisible:

CSS КОД

1
2
3

. dropdownvisible {
    height: auto;
}

На это:

CSS КОД

1
2
3
4

.dropdownvisible {
    height: 200px;
    overflow-y: scroll;
}

И если не забудете заменить скрипты (смотрите выше что на что менять), то получите следующее:

В каких браузерах этот Select CSS (выпадающий список) работает нормально?

  • ✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
  • ✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
  • ✓ Opera 12.14, Opera 12.15, Opera 12.16
  • ✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
  • ✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
  • ✓ Apple IOS – iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
  • ✓ Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

Дополнение к уроку — креативный эффект при наведении + ВИДЕО

В дополнение к уроку хочу рассказать как сделать еще один эффект на сайте очень необычным: эффект при наведении. Посмотрите это короткое видео и всё сами увидите.

СКАЧАТЬ ИСХОДНИКИ

Вывод

Еще один элемент сайта — Select можно изменить под свой дизайн на CSS и Javascript. Ничего сложного в процессе установки нет, поэтому у Вас всё получится. Также в качестве дополнения к статье Вы получаете креативный способ при наведении и видео по установке.

Основные пункты статьи, чтобы Вы могли быстро к ним перейти:

  1. 1 шаг. Подключаем необходимые файлы
  2. 2 шаг. HTML структура элемент Select
  3. 3 шаг. Добавляем стили для Select CSS
  4. В каких браузерах этот Select CSS
  5. Дополнение к уроку — креативный эффект при наведении + ВИДЕО

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Современный учебник CSS: ваш онлайн-самоучитель

Учимся создавать веб-страницы, отвечающие современным требованиям.

 
Современный учебник CSS — это онлайн-книга, призванная ознакомить веб-разработчиков с современными способами создания сайтов, в том числе и адаптивных. В ней рассматриваются новейшие методы применения CSS и HTML. Материал рассчитан на тех, кто уже знаком с HTML хотя бы на начальном уровне.

Веб-страница создается и структурируется с помощью стандартного языка разметки — HTML. Раньше, в середине 90-х годов, этот язык использовался и для стилевого оформления документа, но сейчас всё, что касается дизайна страниц, решается с помощью каскадных таблиц стилей (Cascading Style Sheets — англ.). У CSS есть множество достоинств и возможностей, о которых вы узнаете по ходу чтения книги.

Главными плюсами CSS являются компактность и удобство. Во-первых, отказываясь от создания дизайна прямо в HTML-документе, вы делаете веб-страницу более аккуратной и чистой — нет длинного кода и неразберихи, страница грузится быстрее, а поисковому роботу становится легче сканировать содержимое. Все стили загружаются из внешнего файла, где хранятся исключительно правила CSS для оформления страницы. Во-вторых, появляется отличная возможность мгновенно править что-либо в оформлении всего сайта. Достаточно подкорректировать файл CSS и изменения станут видны на всех страницах, к которым подключен этот файл.

Сегодня благодаря широким возможностям CSS вы можете научиться разрабатывать сайты, которые будут корректно отображаться на любых устройствах, и таким образом выйти на новый, современный уровень.

Для кого эта книга

Если вы желаете научиться не просто создавать веб-страницы, а создавать их правильно и красиво, этот учебник по CSS для вас. Мы стараемся преподносить информацию доходчиво, простым языком, поэтому материал будет понятен новичкам, для которых в каждой главе самоучителя найдутся ценные рекомендации и примеры.

Желаем вам успехов в обучении!

 

СОДЕРЖАНИЕ

Часть I. Азы CSS

  1. Подготовка почвы: поговорим об HTML
  2. Синтаксис CSS. Подключение внешних таблиц. Создаем первый стиль
  3. Изучение селекторов:
    1. Селекторы CSS. Теги, классы, ID, группы
    2. Селекторы потомков. Псевдоклассы и псевдоэлементы CSS
    3. Дочерние селекторы CSS. Дополнительные псевдоклассы
    4. Соседние и родственные селекторы
    5. Селекторы атрибутов
    6. Урок: тренируемся применять селекторы
  4. Наследование в CSS: что это и как работает
  5. Каскадность CSS. Приоритеты стилей

Часть II. Использование CSS

  1. Работа с текстом:
    1. Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts
    2. Установка цвета для текста в CSS. Способы представления цветов
    3. Размер шрифта в CSS. Единицы измерения px, %, em
    4. Жирный шрифт и курсив CSS
    5. Прописные и строчные буквы в CSS: свойство text-transform
    6. Подчеркивание, зачеркивание текста в CSS: свойство text-decoration
    7. Тень для текста: свойство CSS text-shadow
    8. Межсимвольный, межстрочный интервал CSS. Расстояние между словами
    9. Выравнивание текста в CSS: свойство text-align
    10. CSS для списков: свойство list-style и его производные
  2. Работа с блоками:
    1. Вступление. Блоки
    2. Поля и отступы CSS: отличия свойств margin и padding
    3. Блочные и строчные элементы
    4. Свойство border: границы для блоков
    5. Border-radius: закругленные углы в CSS
    6. Box-shadow: тень для элемента
    7. Width и height: определяем размеры элемента
    8. Box-sizing: управляем вычислением ширины и высоты
    9. Overflow: управление переполненными элементами
    10. Max-width, max-height, min-width, min-height: максимальные и минимальные размеры элемента
    11. Поток документа. Свойства float и clear
    12. Практика: делаем адаптивную посадочную страницу
  3. Работа с графикой:
    1. CSS для тега img
    2. Background-image: установка фонового изображения
    3. Относительный и абсолютный путь к файлу
    4. Background-repeat: повторение фоновой картинки
    5. Background-position: позиционирование фона
    6. Background-attachment: фиксация фона
    7. Свойства CSS3 background-origin и background-clip
    8. Background-size: масштабирование фонового рисунка
    9. Свойство background: все настройки фона в одном месте
    10. Несколько фоновых рисунков для одного элемента
    11. Linear-gradient(): линейный градиент в фоне
    12. Repeating-linear-gradient(): градиент с повторением
    13. Radial-gradient(): радиальный градиент
    14. Repeating-radial-gradient(): повторяющийся радиальный градиент
    15. Практика: создаем фотогалерею на CSS
    16. Практика: работаем с фоновыми рисунками
  4. Ссылки и навигация:
    1. Состояния ссылок в CSS. Псевдоклассы
    2. Варианты стилизации ссылок в CSS
    3. Навигационные панели с помощью CSS
    4. Стили для особых ссылок
    5. CSS-спрайты
  5. Трансформирование и анимация:
    1. Свойство transform: трансформация элементов
      1. Функция rotate()
      2. Функция scale()
      3. Функция skew()
      4. Функция translate()
      5. Несколько значений свойства transform
      6. 3D-трансформации в CSS
    2. CSS3 transition: плавные переходы
      1. Свойство transition-property
      2. Свойство transition-duration
      3. Свойство transition-timing-function
      4. Свойство transition-delay
      5. Сокращенная запись transition
    3. CSS3-анимация
      1. Правило @keyframes
      2. Запуск анимации: аnimation-name и animation-duration
      3. Свойства animation-timing-function и animation-delay
      4. Свойство animation-iteration-count
      5. Свойство animation-direction
      6. Свойство animation-fill-mode
      7. Свойство animation-play-state
      8. Сокращенная запись animation
    4. Практика: создание CSS-анимации
  6. Таблицы и формы:
    1. Стилизация таблиц с помощью CSS
    2. CSS-стили для форм

Часть III.

Разметка CSS
  1. Ширина веб-страницы
  2. Блочная верстка
  3. Создание разметки: основные правила
  4. Разметка с помощью float
    1. Проблемы float и их решения
  5. Верстка адаптивных веб-страниц
    1. Медиа-запросы CSS
    2. Гибкие сетки в CSS
    3. Адаптивные изображения и видео
  6. Знакомство с Flexbox
    1. CSS-свойства для flex-контейнера
    2. CSS-свойства для flex-элементов
  7. Позиционирование CSS. Свойство position
    1. Свойства top, left, bottom, right
    2. Z-index: наслаивание элементов
    3. Скрытие элементов средствами CSS
  8. Кратко о CSS Grid Layout
    1. CSS-свойства для grid-контейнера
    2. CSS-свойства для grid-элементов

Заключение. Рекомендации по CSS

CSS-инструменты для фронтендера — обзор полезных решений

Для фронтенд разработки необходимо очень часто прибегать к работе с CSS-стилями. Зачастую здесь требуется повторение однотипных блоков кода, где будут допущены незначительные изменения. Также в стандартном CSS есть некоторые неудобные моменты, например, наследование, определение цветов, подключение изображений и прочее. С этими недоработками языка можно справится с помощью специальных инструментов, которые будут полезны для работы с CSS любому фронтедендеру, а некоторые даже жизненно необходимы.

Какие есть CSS-инструменты для фронтенда

Данные инструменты можно разделить на три категории:

  • плагины для редактора кода, которые специализированы на работе с CSS и его основными препроцессорами;
  • сами CSS-препроцессоры, которые упрощают процесс написания разметки, сглаживая недоработки стандартного CSS;
  • сторонние библиотеки и инструменты, предназначенные для выполнения какой-то четко определенной задачи, например, создания анимации переходов.

Для эффективной работы с CSS во время верстки данные категории инструментов придется группировать между собой.

Плагины для работы с CSS

Рассмотрим несколько популярных плагинов для работы с CSS-кодом в редакторе Visual Studio Code. Они нацелены на создание более удобной рабочей среды: отображение цветов, миниатюр изображений, подсказки при написании стилей и так далее. Рассматриваемые плагины есть в общей библиотеке редактора VS Code, однако они есть и для некоторых других редакторов, например, SublimeText.

CSS Peak

Данный плагин чаще используется при верстке HTML-каркаса, однако он напрямую связан с CSS. Во время работы с HTML-разметкой требуется передавать классы или идентификаторы блокам и другим элементам, чтобы потом корректно оформить их в CSS или присвоить для них JS-скрипт. Для многих элементов в HTML файле может применяться один и тот же класс с общими стилями, однако таких классов может быть много, что вызовет путаницу в процессе дальнейшей верстки.

Демонстрация работы плагина CSS Peek

Плагин CSS Peak значительно облегчает работу тем, что показывает уже заданные стили для вводимого класса или идентификатора. Чтобы увидеть CSS-свойства того или иного класса на него достаточно навести указателем мыши. Свойства будут показаны в небольшом всплывающем окне.

HTML CSS Support

Чем-то похож на предыдущий плагин, но только здесь предусмотрен автоматический ввод идентификатора или класса, а не подсказка его стилей. Это будет отличным подспорьем в том случае, если в документе много классов и идентификаторов, а разработчик уже начинает в них путаться. При указании класса будет выводится подсказка, где можно выбрать подходящий вариант. Плюс, это значительно ускорит время написания как HTML-каркаса, так всей верстки в целом.

Всплывающие подсказки плагина HTML CSS Support

Path autocomplete

Плагин будет полезен не только для работы с CSS, но и другим кодом, где требуется указывать путь к разным файлам. Однако разработчиками он используется преимущественно при работе с CSS, например, когда требуется указать расположение картинки. Нужно только начать вводить путь до объекта и плагин начнет выводить подсказки, которые можно сразу же вставить, не вводя адрес полностью.

Beautify

Плагин создан для любителей красивого и чистого кода. Поддерживает не только CSS, но и SASS, JS, JSON, HTML. Особенность заключается в том, что в данном плагине можно задать собственные настройки форматирования для кода. Это актуально больше для тех, кто работает с препроцессором SASS, нежели с чистым с CSS, так как в данном препроцессоре очень много внимания уделено правильной расстановке отступов.

В настройках Beautify можно задать размеры отступов и указание того, должны ли строки завершаться переводом строки. Данные параметры можно кастомизировать под свои потребности. После этого весь новый код будет автоматически подстраиваться под заданные настройки. Это позволит избежать глупых ошибок в SASS, когда код отказывается компилироваться из-за лишнего пробела.

Prettier — code formatter

Частично похож на предыдущий плагин, однако здесь меньше возможностей для задания собственных настроек форматирования написанного кода. Зато можно быстро привести весь код к единому виду, воспользовавшись всего одним сочетанием клавиш — Ctrl+Shift+P. После этого произойдет форматирование всего кода, а также будет задана общая структура.

Страница плагина Prettier — code formatter в VS Code

Плагин интересен в первую очередь все же программистам, так как адаптирован для работы с языками программирования, а не разметки. Однако он умеет работать с CSS и его основными препроцессорами, приводя их к единому виду. Если в обычном CSS это не так важно, то в препроцессорах это имеет чуть ли не первостепенное значение.

Bracket pair colorizer

Простой плагин, который окрашивает открывающие и закрывающие скобки в определенные цвета, выделяя их на фоне общего кода. Благодаря этому разработчик может допускать меньше ошибок в процессе написания CSS-разметки, а также быстрее разобраться в написанном коде. Данный инструмент еще будет очень полезен для работы с JavaScript.

Пример подсветки скобок Bracket pair colorizer

Препроцессоры в CSS

Препроцессоры для CSS можно рассматривать как отдельный инструменты, так как они значительно упрощают разработку, особенно, если речь идет о больших проектах. С их помощью можно преодолеть ограничения, которые накладываются стандартным CSS. Например, использование препроцессоров позволяет лучше проработать наследование свойств, задать общие свойства, переменные и так далее. Также такой код можно легче оптимизировать для более быстрой работы.

Среди препроцессоров особенно сильно выделяются три игрока: LESS, SASS/SCSS и Stalus. Они отличаются друг от друга по функциональным возможностям, а также синтаксису, однако различие не самое сильное. Обучиться работе с CSS-препроцессорами можно очень быстро, так как различий по сравнению с основным CSS не так много, но есть много документации, обучающих роликов и профессиональных сообществ. Настроить использование препроцессоров в проекте тоже очень просто — потребуется либо специальная программа-компилятор, либо плагин для вашего редактора кода, если таковые поддерживаются.

Более подробно CSS-препроцессоры рассматривались в этой статье на нашем блоге.

Сторонние библиотеки и инструменты

Они могут быть направлены на решение какой-то конкретной проблемы или использоваться в определенной ситуации. Часто распространяются в виде библиотек, которые требуется подключить к своему проекту, скачав саму библиотеку и поместив ее папки со стилями в корневую директорию либо просто указав ссылку на нужный ресурс. В зависимости от выбранной библиотеки или инструмента процесс подключения к проекту может отличаться.

Профессиональные верстальщики выделяют для своих нужд несколько таких библиотек в зависимости от того, какой функционал в проектах им приходится реализовывать чаще всего. Есть определенный функционал, который обязательно должен присутствовать на каждом сайте и который можно реализовать преимущественно через CSS. Такие “универсальные” инструменты и будут рассмотрены далее.

CSS Scan

Инструмент позволяет просматривать CSS-свойства любого объекта на любом сайте. Будет полезен скорее на начальном этапе разработки, когда нужно понять, как реализовать тот или иной элемент, “подсмотрев” реализацию на другом ресурсе. Вместо выгрузки заинтересовавшейся страницы и просмотра ее файлов инструмент CSS Scan позволяет посмотреть все CSS-свойства прямо на странице, наведя курсор мыши на интересующий компонент. Также можно посмотреть используемые цвета, шрифты, анимацию, ссылки на какие-то сторонние компоненты, используемые для того или иного эффекта на сайте. Еще инструмент создает разметку блоков на сайте, что позволяет лучше понять его структуру и при необходимости перенести в свой проект.

Краткая демонстрация работы CSS Scan на официальном сайте

Colorzilla

Инструмент разработан для работы с цветом, а именно для быстрого получения данных о заинтересовавшем цвете. Работает по аналогии с инструментом “Пипетка” из графических редакторов — копирует все важные данные выбранного цвета. Помимо простого копирования цветов со страниц браузера инструмент еще умеет создавать на их основе палитры и градиенты. Процесс создания таковых палитр разработчик можете настроить под конкретные задачи.

Инструмент Colorzilla как расширение для браузера

Utopia

Инструмент, позволяющий настроить системный подход для масштабирования элементов на сайте. Теперь вместо написания кода для нескольких произвольных брейкпоинтов (контрольных точек), можно создать дизайн, где элементы масштабируются плавно и пропорционально. Примечательно, что разработчики инструмента утверждают, что это не сетка, типа, Bootstrap, а просто инструмент для упрощения масштабирования и позиционирования элементов на сайте.

Fontsquirrel

Простой генератор веб-шрифтов. Его принцип работы заключается в том, что пользователь загружает файл со шрифтами, а на выходе получает преобразованный для дальнейшего использования в верстке шрифт. Здесь уже будут все необходимые стили, а также оптимизация, благодаря чему можно будет забыть о некорректном отображении используемого шрифта в проекте.

Главная страница Fontsquirrel

Sprite

Применяется в тех случаях, когда нужно сделать из нескольких картинок одну. Обычно такая необходимость возникает, когда изображения на странице расположены близко друг к другу, но какого-либо взаимодействия между ними и пользователем не предусмотрено. Тогда будет разумнее преобразовать такое изображение в одно. Таким образом получится немного оптимизировать сайт. Инструмент Sprite позволяет сделать это гораздо быстрее, чем использование стандартных графических редакторов, плюс, он более легок в управлении и настройке.

Gulp

Это многофункциональный сборщик проектов. Перед сдачей крупных проектов их часто требуют корректно сжать. Это необходимо не столько для уменьшения веса и последующей оптимизации, сколько для предотвращения утечки данных. Gulp умеет работать файлами стилей и используется преимущественно для автоматического преобразования SASS в CSS. Фронтендером может рассматриваться как неплохая альтернатива плагинам для редактора кода. Единственным серьезным недостатком Gulp является необходимость его настраивать отдельно под каждый проект.

Box shadows

Позволяет быстро добавить тому или иному объекту одну или несколько теней. Правда, делается это не через стандартные свойства CSS, а посредством копирования “родительского” элемента и изменения свойств копии. Это позволяет сделать более широкий спектр настроек данного инструмента. Умеет также делать внутренние тени. Использование Box shadows позволяет ускорить разработку сложных теней у разных элементов, так как через стандартные инструменты CSS пришлось бы долго прописывать код для оформления блоков.

Owl carousel

Это библиотека для быстрого создания продвинутых слайдеров на страницах, которые к тому же сразу получаются адаптивными. Поддерживается модульная структура проекта, благодаря чему можно отсоединить плагины, которые не используются в проекте, или создать новые при необходимости. Примечательно, что библиотека поддерживает CSS2 и старые версии браузеров.

Главная страница Owl carousel

Glassmorphism

Онлайн-генератор стиля матового стекла. Здесь, с помощью бегунков можно задать степень непрозрачности и размытия, а также выбрать основной цвет для блока, на который будет применен эффект матового стекла. Плюс, еще можно настроить обводку для объекта. CSS-код генерируется автоматически в зависимости от указанных вами настроек. Готовый код вы можете видеть в отдельном окне на сайте. Прямо оттуда же можно скопировать сгенерированный код.

Настройки Glassmorphism

Заключение

Стандартный CSS пускай и прост в изучении и применении, он недостаточно функционален, когда речь идет о быстрой и сложной верстке большого проекта. Представленные библиотеки, инструменты и плагины способны облегчить работу с CSS, а также вообще над всем проектом при верстке. Большинство из них максимально просто подключить и использовать в проекте. Для достижения наибольшей эффективности рекомендуется работать сразу с несколькими из представленных инструментов.

36 самых красивых CSS-форм, разработанных лучшими дизайнерами в 2022 году

Формы — это красивое лицо функции ввода вашей базы данных. В раннюю эпоху Интернета на веб-сайтах было много веб-форм. Вы должны заполнить форму для каждого запроса, который будет обработан вручную. Теперь у нас есть несколько инструментов автоматизации, облегчающих наш рабочий процесс. После получения запроса на адрес электронной почты пользователя будет отправлено автоматическое электронное письмо. Современные веб-формы должны соответствовать потребностям пользователя и веб-мастера. Мы собрали в этом списке несколько крутых CSS-форм, разработанных такими творческими умами, как вы. Дизайн этих форм и структура кода также имеют новейшие функции. Выберите форму, которая вам нравится, и начните использовать ее на своем веб-сайте или в приложении.

Вот список красивых форм CSS с современным дизайном.

Контактная форма CSS V03

V3 — красивый полностраничный шаблон контактной формы CSS. Серьезный дизайн этого шаблона придает ему стильный вид и упрощает взаимодействие. Поскольку это контактная форма, создатель использовал пространство над ней для перечисления других контактных данных, таких как контактный адрес, адрес электронной почты и контактный номер. Полностраничный макет этого шаблона дает контактной форме более чем достаточно места для каждого элемента, поэтому случайных касаний и неправильных кликов будет меньше.

Информация / Загрузить демонстрацию

Красивая форма регистрации CSS V07

Эта красивая форма CSS поразит многих дизайнеров. Чистый макет и современная цветовая схема делают этот шаблон формы CSS привлекательным для современной аудитории. Вы можете изменить векторный дизайн слева и добавить анимированный элемент, чтобы сделать его еще более привлекательным.

Что касается формы, то она проста и функциональна. Пользователь получает возможность зарегистрироваться, используя адрес электронной почты или используя ссылки на профили в социальных сетях, которые понравятся большинству современных пользователей.

Информация / Загрузить демонстрацию

Регистрационная форма CSS V02

Если вам нужен визуально привлекательный дизайн формы, который может получить больше информации от пользователей, не раздражая их, красивые формы CSS, такие как V2, могут вам помочь.

Не все регистрационные формы должны быть простыми. Некоторым регистрационным формам необходимо получить от пользователей достаточно информации для защиты учетной записи пользователя. В этой регистрационной форме вы можете получить адрес электронной почты пользователя, веб-сайт, номер телефона и другие основные данные. У вас есть небольшое пространство для добавления изображения в крайнем правом углу. Вы можете добавить изображение, связанное с вашим веб-сайтом, чтобы пользователь мог легко понять, что он регистрируется на правильном веб-сайте.

Информация / Загрузить демо

Reg Form v15

Этот шаблон является лучшим вариантом, если вы ищете дизайн регистрационной формы в HTML и CSS с кодом. Создатель создал эту профессионально выглядящую регистрационную форму, используя только скрипты HTML и CSS. Следовательно, с этим шаблоном легко справится даже новичок. Структура кода аккуратная и простая, поэтому разработчики могут легко находить элементы и редактировать их в кратчайшие сроки. Все основные элементы формы, такие как переключатели, раскрывающиеся списки и простые текстовые поля ввода, присутствуют в этой форме, что делает этот шаблон формы простым в использовании.

Информация / Загрузить демоверсию

Контактная форма v2

Тем, кто хочет простой пример дизайна формы HTML, чтобы понять концепцию современного дизайна, этот шаблон будет чрезвычайно полезен. Создатель сохранил дизайн простым и понятным, и в то же время использовал тонкую анимацию, чтобы оживить дизайн. Использование анимации разумно является одной из современных тенденций дизайна, используемых дизайнерами для улучшения взаимодействия с пользователем. В целом, Contact Form v2 представляет собой элегантный шаблон контактной формы, который загружается быстрее и помогает разработчику использовать его как на компьютере, так и на мобильных устройствах.

Информация / Загрузить демонстрацию

Красивая регистрационная форма CSS V18

В этой регистрационной форме CSS вы получаете аккуратный дизайн формы с местом для изображений. Если быть точным, эта форма использует изображения в качестве фона. Следовательно, убедитесь, что вы используете изображения, которые не мешают текстам полей формы. Аккуратный маркер дается, чтобы четко показать выбранное поле формы. Короче говоря, регистрационная форма V18 проста и удобна в использовании. Кроме того, вы можете использовать этот шаблон для любого бизнес-сайта благодаря его чистому дизайну.

Информация / Загрузить демоверсию

Контактная форма Colorlib

Контактная форма Colorlib — это традиционная контактная форма с простым дизайном. Простой дизайн формы позволяет легко вписаться в любой тип веб-сайта. Прямоугольные текстовые поля дают вам достаточно места для ввода текста и его чтения. Поля формы в этой контактной форме поддерживают проверку полей, поэтому пользователям будет предлагаться всплывающее сообщение, когда они пропустят поле. Ярлыки полей формы показывают, какие сведения необходимо добавить в определенное поле формы. Шрифт по умолчанию, используемый в форме, четкий и четкий. Но если вы используете другой шрифт на своем веб-сайте, вы можете легко настроить эту форму, чтобы добавить свой шрифт.

Информация / Загрузить демоверсию

Форма входа v1

Форма входа v1 — это интерактивная форма входа. Создатель этой формы использовал эффект наведения, чтобы предоставить пользователям уникальный опыт. Текстовые эффекты полужирного шрифта также используются для полей формы в форме входа. Если вы ищете подходящую форму для вашего современного веб-сайта, стоит попробовать эту форму. Вы можете использовать логотип вашей компании или элементы, связанные с вашим брендом, для элемента слева. Поскольку все эти эффекты сделаны полностью с использованием новейшего фреймворка HTML5 и CSS3, форма будет загружаться быстрее. Между каждым элементом дается достаточно места, чтобы у вас было больше места.

Информация / Загрузить демо

Reg Form v2

Это чистая и аккуратная многоцелевая регистрационная форма. Создатель использовал изображение с одной стороны, чтобы добавить к форме некоторые визуальные элементы. Вы можете использовать пространство изображения, чтобы показать характер вашего бизнеса. Например, если вы используете эту регистрационную форму для веб-сайта отеля, вы можете показать свой номер в отеле. В дизайне по умолчанию создатель использовал изображение еды, но вы можете настроить его с помощью изображения, которое хотите. Для каждого элемента и текстового поля создатель указал точное расстояние, что делает эту регистрационную форму одной из самых красивых форм CSS в этом списке. Эта форма является не только одной из красивых форм CSS, но и одной из немногих форм, которые имеют необходимые функции прямо из коробки. Например, в этой форме вы получаете параметры ввода календаря и раскрывающийся список.

Информация / Загрузить демо

Reg Form v7

Создатель этой регистрационной формы дал нам минимальную и модную регистрационную форму. В этой форме дается много пустого пространства, что упрощает взаимодействие даже с контентом на маленьком экране. Эта форма не только хорошо выглядит, но и адаптирована для мобильных устройств, поэтому ваша работа значительно сократится при использовании этой формы. В этом шаблоне вы получаете формы входа и регистрации. Весь код и файлы активов, используемые для создания этих красивых форм CSS, доступны вам, чтобы другие разработчики могли легко использовать этот дизайн в своем проекте. Если вы ищете красивые CSS-формы для своего веб-сайта или экрана входа и регистрации в мобильных приложениях, стоит попробовать этот шаблон формы.

Информация / Загрузить демо

Регистрационная форма v3

Регистрационная форма v3 почти аналогична упомянутой выше форме V2. Поскольку и версия 2, и версия 3 принадлежат одному и тому же создателю, вы можете ожидать одинакового дизайна и качества кода. В этой форме пространства пропорциональны, поэтому у вас достаточно места для всех элементов. Большое пространство для изображений позволяет легко показывать изображения аудитории. Этот пропорциональный дизайн сделал эту форму одной из самых красивых форм CSS в этом списке. Поскольку это форма темной темы, буквы остаются белыми и увеличены для лучшей читаемости. Как и большинство других красивых CSS-форм в этом списке, эта также адаптирована для мобильных устройств.

Информация / Загрузить демо

Reg Form v25

Эта форма может пригодиться, если вы ищете простые и функциональные формы CSS. Создатель предоставил все основные параметры ввода в этом шаблоне, такие как раскрывающийся список, обычное текстовое поле и средство выбора даты. Календарь выбора даты работает должным образом с внешней стороны, поэтому вы можете сосредоточиться на интеграции формы с вашей системой бронирования. Если вам нужен полнофункциональный веб-сайт с возможностью онлайн-бронирования, посмотрите нашу коллекцию шаблонов веб-сайтов для планирования встреч. Поскольку этот шаблон формы создан с использованием новейшей среды веб-разработки, вы можете легко интегрировать его с любыми современными шаблонами веб-сайтов.

Информация / Загрузить демо

Reg Form v16

В этом примере вы получите красивую большую форму с широким макетом. Создатель эффективно использовал всеобъемлющий макет, чтобы разместить элементы с достаточным пространством между ними. Поскольку в этом шаблоне используется новейшая платформа Bootstrap 4, вы можете легко сделать его адаптивной для мобильных устройств. Использование мобильной адаптивной формы повысит уровень вовлеченности в этом поколении мобильных устройств. Об основных оптимизациях заботится сам создатель; следовательно, вы можете сосредоточиться на настраиваемых элементах, которые вы хотите видеть в своей форме.

Информация / Загрузить демо

Reg Form v12

Эта форма тоже большая, но создатель использовал длинную компоновку. Следовательно, вы получаете более чем достаточно места, чтобы перечислить все поля формы одно под другим. Единственная проблема с этим дизайном заключается в том, что пользователю приходится прокручивать страницу, чтобы получить доступ к полям формы. Теневые эффекты и светящаяся кнопка призыва к действию привлекают внимание пользователя в нужном месте. Чтобы узнать больше о привлекательных эффектах свечения, ознакомьтесь с нашей коллекцией дизайнов с эффектами свечения CSS. Создатель использовал фоновое изображение в этом шаблоне формы для иллюстраций. Вы можете удалить изображение и использовать только форму на своих веб-страницах.

Информация / Загрузить демонстрацию

Reg Form v11

В этом примере вы получаете дизайн формы для экономии места. Создатель аккуратно выровнял все поля формы в одну строку, чтобы пользователю не приходилось много двигаться, чтобы заполнить форму. Поскольку по умолчанию это форма бронирования путешествия, у вас есть возможность выбора даты в календаре и возможность увеличения/уменьшения количества. Как и большинство других форм CSS в этом списке, эта также имеет полностью функциональный интерфейс. После того, как вы закончите работу с серверной частью, вы можете просто реализовать эту форму на своем работающем веб-сайте.

Информация / Загрузить демо

Reg Form v13

Этот шаблон дает вам интерактивную и модную регистрационную форму для ресторанов. В отличие от других красивых CSS-форм для регистрации, эта больше. Из-за этого большего пространства у вас более чем достаточно места для добавления элементов формы и изображений. В дизайне по умолчанию у вас есть только статическое изображение. Но если вы хотите, вы можете добавить слайдер изображений в этой форме. Взгляните на нашу коллекцию дизайнов слайд-шоу с впечатляющими эффектами перехода для вдохновения при создании слайдов изображений. Эта регистрационная форма имеет все необходимые элементы для регистрационной формы ресторана, кроме календаря. Это также одна из самых красивых форм CSS, используемых на всех веб-сайтах и ​​в приложениях.

Информация / Загрузить демо

Reg Form v20

Эта форма будет идеальным вариантом, если вы ищете красивые CSS-формы для своего сайта о красоте и моде. С минимальным дизайном и модной цветовой схемой эта форма является одним из уникальных образов в этой красивой коллекции форм CSS. Радиокнопки эффективно используются для указания выбранного поля формы и параметров. Для более привлекательного дизайна радиокнопок взгляните на нашу коллекцию радиокнопок Bootstrap. Поскольку этот шаблон формы создан с использованием новейших фреймворков HTML5, CSS3 и Bootstrap 4, он может легко обрабатывать другие сторонние элементы дизайна.

Информация / Скачать демо

Контактная форма v1

Контактная форма v1 почти аналогична форме входа v1, упомянутой выше. Если вы хотите, вы можете использовать обе формы на своем веб-сайте, чтобы добиться единообразия дизайна на всем веб-сайте. Поля формы в этой контактной форме полностью функциональны с внешнего интерфейса. Все, что вам нужно сделать, это позаботиться о внутренней части интеграции. Поскольку разработчик следовал структуре кода, используемой профессионалами отрасли, другие разработчики могут легко работать с этим шаблоном. Как и форма входа в V2, эта сделана исключительно с использованием фреймворка HTML5 и CSS3, поэтому вам не нужно беспокоиться о задержке и длительной загрузке.

Информация / Скачать демо

Форма входа 5

Форма входа 5 красочная. Если вы делаете красочный веб-сайт, эта контактная форма будет идеальным дополнением к вашему веб-сайту. Большинство пользователей предпочитают использовать вход через социальные сети и Google, чтобы не запоминать много паролей. Многие эксперты, обеспокоенные конфиденциальностью данных, рекомендуют вам использовать вариант входа в систему по электронной почте, поскольку вы не знаете всех деталей, которые веб-сайт получит из вашей учетной записи в социальной сети. После нескольких проблем с конфиденциальностью в Facebook лучше подумать о том, где вы используете опцию входа через социальную сеть. Что касается формы входа 5, у вас есть все варианты, размещенные в наиболее доступных местах. Вы можете использовать эту форму прямо на своем веб-сайте без каких-либо колебаний.

Информация / Загрузить демоверсию

Контактная форма v13

Если у вас есть магазин или офис, показать его на карте — лучший способ общаться с посетителями вашего сайта. Дизайн разделенного экрана этого шаблона дает вам достаточно места для отображения карты с одной стороны и формы с другой стороны. На карте также предоставляется полноэкранный режим, позволяющий пользователю четко видеть карту и взаимодействовать с ней. Разработчик интегрировал карту с Google Map, поэтому вам не нужно беспокоиться о внутренней части карты. Если вы концентрируетесь на своей местной аудитории, подобная контактная форма очень поможет вашему магазину. Говоря о магазинах и рекламных акциях, взгляните на наши бесплатные шаблоны электронной коммерции для красивых веб-сайтов с множеством полезных функций.

Информация / Скачать демо

Форма входа 13

Форма входа 13 на самом деле является регистрационной формой. Как и контактная форма v13, здесь также используется дизайн с разделенным экраном. Дизайн разделенного экрана дает вам более чем достаточно места для добавления изображения. Вы можете использовать это пространство изображений, чтобы показать некоторые из ваших фотографий, если вы используете его для веб-сайтов с фотографиями. Или вы можете показать несколько анимированных иллюстраций преимуществ, которые получит пользователь, зарегистрировавшись на вашем сайте. Поля формы поддерживают проверку поля, и при обнаружении ошибки в поле формы пользователю отображается сообщение. Эту форму можно использовать и для других целей. Разработчик сохранил структуру кода очень простой для более легкой настройки.

Информация / Загрузить демоверсию

Контактная форма v5

Контактная форма v5 предоставляет вам раскрывающиеся варианты и обычные поля формы. Разрешение пользователю выбирать отдел, если в вашей организации несколько отделов, уменьшит вашу работу. Например, на веб-сайте больницы будет несколько отделений, каждое из которых имеет свои собственные графики и процедуры. Предоставление пользователю возможности выбрать отдел поможет вам решить проблему и легко связаться с вашим клиентом. Структура кода этой формы очень проста, поэтому вы можете легко интегрироваться с любыми современными платформами и инструментами, которые вы используете для управления своими клиентами. Эту форму можно легко использовать на вашем веб-сайте, сделав несколько оптимизаций.

Информация / Скачать демо

Форма входа 9

Форма входа 9 — это модная форма, которую можно использовать как для веб-сайтов, так и для мобильных приложений. Создатель этой формы сделал ее адаптивной, чтобы ее можно было легко использовать на существующем адаптивном веб-сайте. Эффекты тени и глубины различают основные поля формы и фон. Простой дизайн формы позволяет легко разместить ее на любом веб-сайте. Особенно на минималистичных веб-сайтах эта форма сочетается лучше, чем любые другие формы. В нижней части формы вы можете связать форму регистрации. Но в демоверсии по умолчанию вы не получаете регистрационную форму. Так что это может быть что-то, что вы должны сделать сами, или вы можете просто использовать регистрационную форму, упомянутую в этом списке.

Информация / Загрузить демонстрацию

Контактная форма v3

Контактная форма v3 — это форма двойного назначения, которую можно использовать как контактную форму и форму запроса котировок. Пользователь имеет возможность переключаться между формами, которые он хочет. Переходы и анимация в этом шаблоне плавные, поэтому пользователю не нужно ждать появления формы. Тонкая анимация текстовых полей показывает, какое поле редактирует пользователь. В форме запроса котировок вы получаете раскрывающиеся поля, чтобы упростить процесс ввода для пользователя. Эта элегантная, функциональная форма имеет очень простую структуру кода. Следовательно, другие разработчики могут легко работать с этой формой и интегрировать ее с нужным им инструментом.

Информация / Скачать демоверсию

Креативная форма входа

Креативная форма входа — это простая форма, которую можно использовать на любом веб-сайте и в любом приложении. Эта форма почти аналогична контактной форме Colorlib, упомянутой выше. Поскольку обе формы созданы одним и тем же разработчиком, вы можете рассчитывать на одинаковое качество дизайна и простоту редактирования структуры кода. Разработчик предоставил вам формы входа и регистрации в этой форме. Эффект переключения между формами плавный и чистый. Кроме того, обе формы легко помещаются внутри гибкой коробки. Независимо от того, сколько полей формы вы добавите в регистрационную форму, эта форма легко с этим справится.

Информация / Загрузить демоверсию

Контактная форма v14

Получение четкой информации о контактирующем с вами человеке поможет вам легко связаться с ним. Если вы используете форму как для связи, так и для запросов, эта форма поможет вам. Создатель этой формы предоставил вам более чем достаточно полей формы для получения четкой информации. Обязательные поля отмечены звездочкой. Шрифт по умолчанию, используемый в форме, крупнее и удобнее для чтения. Таким образом, даже на мобильных экранах пользователь может легко читать их содержимое. Кнопка призыва к действию использует градиентную цветовую схему и тонкий эффект наведения. Сделав несколько настроек, эта форма идеально впишется в ваш веб-сайт.

Информация / Загрузить демо

Контактная форма v10

Эта форма идеально подходит для любого профессионального веб-сайта со скругленными углами и эффектом тонкой анимации. Когда пользователь выбирает поле формы, оно плавно расширяется, указывая, какое поле он редактирует. Жирные буквы используются для меток полей формы, чтобы четко показать, какая информация должна быть указана в конкретном поле. Дизайн по умолчанию остается простым и минимальным, поэтому вы можете использовать эту форму для любого веб-сайта или приложения. Дизайн и структура кода также остаются простыми для быстрой и легкой настройки. Так как форма отлично работает из внешнего интерфейса, ваша работа сокращается, и вы можете сосредоточиться на самом важном.

Информация / Загрузить демо

Контактная форма v16

Эта контактная форма является лучшим дополнением для шаблонов одностраничных веб-сайтов. Вы можете использовать закрывающееся всплывающее окно, если у вас ограниченное пространство на вашем веб-сайте. Создатель этой формы следовал той же стратегии дизайна. Когда вы нажимаете кнопку контакта, контактная форма появляется в режиме полностраничного окна. Это экономит дополнительное время загрузки, и пользователь также может легко получить доступ к форме, когда захочет. Что касается дизайна формы, значки и метки полей элегантно отображают детали и сообщения. Эффекты тени и глубины используются с умом, чтобы выделить важные элементы.

Информация / Загрузить демо

Контактная форма v11

Контактная форма v11 представляет собой красочную форму с современными элементами. Поскольку этот шаблон использует CSS3, вы получаете более естественные цвета и эффекты плавной анимации. В дизайне по умолчанию создатель использовал цветовую схему градиента на фоне и для элементов формы. Эффект изменения цвета при наведении используется для градиентных цветов, что является разумной идеей. Под формой у вас есть место, чтобы указать свой номер телефона. Если вы используете эту форму на веб-сайте больницы, вы можете использовать это место, чтобы указать номер службы экстренной помощи. По умолчанию эта форма имеет адаптивный дизайн, поэтому вы можете без проблем использовать ее на своем адаптивном веб-сайте.

Информация / Скачать демо

Контактная форма v9

Контактная форма v9 почти аналогична упомянутому выше шаблону формы V11. В этом шаблоне у вас есть виджет карты Google вместе с градиентным фоном. Вы можете использовать этот виджет карты, чтобы показать местоположение вашего магазина или офиса. Поскольку поля формы и макет формы следуют белому фону, для их различения используются эффекты тени и глубины. Поле формы поддерживает проверку поля, и сообщение об ошибке отображается, когда поле оставлено. Как и в предыдущей форме V11, в этой также есть место для указания номера телефона для экстренной связи.

Информация / Загрузить демоверсию

Форма входа v2

Форма входа v2 — это чистая форма входа, которую вы можете использовать для веб-сайтов и мобильных приложений. Разработчик этой формы предоставил вам возможность отображать и скрывать поле пароля. Как и контактная форма V11, упомянутая выше, эта также имеет градиентную цветовую схему для кнопки призыва к действию. В верхней части формы у вас есть место для добавления вашего логотипа. Центральное пятно на форме обеспечивает лучшую видимость логотипа. В нижней части формы у вас есть место для добавления ссылки на регистрационную форму. Говоря о логотипах, взгляните на нашу коллекцию макетов логотипов, чтобы продемонстрировать свой дизайн на фотореалистичных изображениях и объектах.

Информация / Скачать демо

Форма входа 4

Форма входа 4 продумана до мелочей. Дизайнер этой формы предоставил вам все возможности, которые понравятся современному пользователю. Помимо обычной опции входа в систему, эта форма также дает вам возможность входа в социальные сети и опцию «забыть пароль». Поскольку современные пользователи имеют дело с несколькими цифровыми учетными записями, возможность забыть пароль может помочь вашей аудитории. Для фона и кнопки призыва к действию используется градиентная цветовая схема. Вы можете легко отредактировать эту форму в соответствии с вашими потребностями дизайна, если у вас есть собственная цветовая схема.

Информация / Скачать демо

Форма входа v3

Форма входа v3 почти аналогична форме входа V4, упомянутой выше. Текстовые эффекты ввода в этой форме чистые и гладкие, поэтому пользователь получит интерактивный опыт. В верхней части формы входа у вас есть место для добавления вашего логотипа. Благодаря гибкому и адаптивному дизайну формы вы можете легко разместить свой логотип на этой форме. В демоверсии вы получаете фоновое изображение для просмотра на всю страницу. Но вы можете изменить или использовать его в зависимости от ваших потребностей. Эта форма дает вам опцию «Запомнить меня», которая позволяет пользователю войти в систему один раз и забыть об этом на своих доверенных устройствах.

Информация / Скачать демо

Форма входа 6

Форма входа 6 — лучший вариант для входа пользователя или члена. Если вы даете своим пользователям возможность просто ввести свой пароль и войти в профиль на устройстве, в которое они вошли ранее, эта форма пригодится. Этот тип входа в профиль хорошо знаком с приложениями Google и социальных сетей. Изображение их профиля отображается вверху, чтобы пользователь знал, входит ли он в правильный профиль. Эта форма также позволяет отображать изображение профиля пользователя вверху. Благодаря минимальному дизайну эта форма легко вписывается на любую веб-страницу.

Информация / Скачать демо

Форма входа 12

Форма входа 12 почти аналогична форме входа 6, упомянутой выше. Вверху у вас есть место для отображения изображения профиля пользователя. С фоновым изображением и модным цветовым наложением это одна из самых красивых форм CSS в этом списке. Цветное наложение используется поверх изображения, чтобы сделать форму четкой на фоне. В этом также внизу страницы у вас есть возможность добавить ссылку на страницу регистрации. Из-за чистого дизайна формы входа в систему это лучший вариант для входа в панель управления. Взгляните на наш бесплатный шаблон панели управления, в котором большинство параметров предварительно разработаны для вас.

Информация / Скачать демоверсию

Интерфейсный интерфейс Вдохновение Шаблоны контактных форм CSS-формы Шаблоны форм HTML-формы Формы входа Форма регистрации 11 августа 2022 г.

CSS – сделай красиво · HonKit

Наш блог все еще выглядит довольно уродливо, правда? Время сделать это красиво! Для этого мы будем использовать CSS.

Что такое CSS?

Каскадные таблицы стилей (CSS) — это язык, используемый для описания внешнего вида и форматирования веб-сайта, написанного на языке разметки (например, HTML). Рассматривайте это как макияж для нашей веб-страницы. 😉

Но мы ведь не хотим снова начинать с нуля, верно? Еще раз воспользуемся тем, что программисты бесплатно выложили в Интернет. Знаешь, изобретать велосипед не весело.

Давайте использовать Bootstrap!

Bootstrap — одна из самых популярных сред HTML и CSS для разработки красивых веб-сайтов: https://getbootstrap.com/

Его написали программисты, работавшие в Twitter. Теперь его разрабатывают волонтеры со всего мира!

Установить Bootstrap

Чтобы установить Bootstrap, откройте файл .html в редакторе кода и добавьте его в раздел :

блог/шаблоны/блог/post_list.html

Это не добавляет никаких файлов в ваш проект. Он просто указывает на файлы, которые существуют в Интернете. Так что вперед, откройте свой сайт и обновите страницу. Вот!

Выглядит уже лучше!

Наконец, мы более подробно рассмотрим эти вещи, которые мы назвали статическими файлами . Статические файлы — это все ваши CSS и изображения. Их содержимое не зависит от контекста запроса и будет одинаковым для всех пользователей.

Где разместить статические файлы для Django

Django уже знает, где найти статические файлы для встроенного приложения «admin». Теперь нам нужно добавить несколько статических файлов для нашего собственного приложения, , блог 9.0315 .

Мы делаем это, создавая папку с именем static внутри приложения блога:

 девочки-джанго
├── блог
│ ├── миграции
│ ├── статический
│ └── шаблоны
└── мой сайт

Django автоматически найдет все папки с именем «статические» внутри любых папок ваших приложений. Тогда он сможет использовать их содержимое как статические файлы.

Ваш первый файл CSS!

Теперь давайте создадим файл CSS, чтобы добавить собственный стиль на вашу веб-страницу. Создайте новый каталог с именем css внутри вашего статического каталога . Затем создайте новый файл с именем blog.css внутри этого каталога css . Готовый?

 девочки-джанго
└─── блог
     └─── статический
          └─── css
               └─── blog.css

Время написать CSS! Откройте файл blog/static/css/blog. css в редакторе кода.

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

Но давайте хоть немного. Может быть, мы могли бы изменить цвет наших заголовков? Для понимания цветов компьютеры используют специальные коды. Эти коды начинаются с # , за которыми следуют 6 букв (A–F) и цифры (0–9). Например, код синего — #0000FF . Вы можете найти цветовые коды для многих цветов здесь: http://www.colorpicker.com/. Вы также можете использовать предопределенные цвета, такие как красный и зеленый .

В вашем блоге /static/css/blog.css вы должны добавить следующий код:

блог/статические/css/blog.css

 h2 а, h3 а {
    цвет: #C25100;
}

h2 a — это селектор CSS. Это означает, что мы применяем наши стили к любому элементу a внутри элемента h2 ; селектор h3 a делает то же самое для элементов h3 . Поэтому, когда у нас есть что-то вроде

link , будет применяться стиль h2 a . В данном случае мы говорим ему изменить цвет на 9.0314 #C25100 темно-оранжевого цвета. Или вы можете указать здесь свой собственный цвет, но убедитесь, что он хорошо контрастирует с белым фоном!

В файле CSS мы определяем стили для элементов в файле HTML. Первый способ, которым мы идентифицируем элементы, — это имя элемента. Возможно, вы помните их как теги из раздела HTML. Такие вещи, как a , h2 и body — все это примеры имен элементов. Также идентифицируем элементы по атрибуту класс или атрибут id . Класс и идентификатор — это имена, которые вы сами даете элементу. Классы определяют группы элементов, а идентификаторы указывают на определенные элементы. Например, вы можете идентифицировать следующий элемент, используя имя элемента a , класс external_link или идентификатор link_to_wiki_page :

  wikipedia.org/wiki/Django">

Подробнее о селекторах CSS можно прочитать на сайте w3schools.

Нам также нужно сообщить нашему HTML-шаблону, что мы добавили немного CSS. Откройте blog/templates/blog/post_list.html в редакторе кода и добавьте в его самое начало строчку:

блог/шаблоны/блог/post_list.html

 {% статическая нагрузка%}

Здесь мы просто загружаем статические файлы. 🙂 Между тегами и после ссылок на CSS-файлы Bootstrap добавьте строку:

блог/шаблоны/блог/post_list.html

Браузер читает файлы в том порядке, в котором они указаны, поэтому нам нужно убедиться, что они находятся в нужном месте. В противном случае код в нашем файле может быть переопределен кодом в файлах Bootstrap. Мы только что сообщили нашему шаблону, где находится наш файл CSS.

Теперь ваш файл должен выглядеть так:

блог/шаблоны/блог/post_list. html

 {% статическая нагрузка%}


    <голова>
        Блог Django Girls
        
        
    
    <тело>
        <заголовок>
             
Блог Django Girls 
        
        {% для сообщения в сообщениях %}
            <статья>
                <время>опубликовано: {{ post.published_date }}
                 
{{ post.title }} 
                
{{ post.text|linebreaksbr }}

            
        {% конец для %}

ОК, сохраните файл и обновите сайт!

Хорошая работа! Может быть, мы также хотели бы дать нашему веб-сайту немного воздуха и увеличить поля с левой стороны? Давайте попробуем это!

блог/статические/css/blog. css

 корпус {
    отступ слева: 15px;
}

Добавьте это в свой CSS, сохраните файл и посмотрите, как это работает!

Может быть, мы можем настроить шрифт в нашем заголовке? Вставьте это в свой в blog/templates/blog/post_list.html файл:

блог/шаблоны/блог/post_list.html

Как и прежде, проверьте порядок и поместите перед ссылку на blog/static/css/blog.css . Эта строка импортирует шрифт Lobster из Google Fonts (https://www.google.com/fonts).

Найдите блок объявления h2 a (код между фигурными скобками { и } ) в файле CSS blog/static/css/blog.css . Теперь добавьте строку font-family: 'Lobster'; между фигурными скобками и обновите страницу:

блог/статические/css/blog. css

 h2 а, h3 а {
    цвет: #C25100;
    семейство шрифтов: «Лобстер»;
}

Отлично!

Как упоминалось выше, в CSS есть концепция классов. Они позволяют вам назвать часть кода HTML и применять стили только к этой части, не затрагивая другие части. Это может быть супер полезно! Возможно, у вас есть два div, которые делают что-то другое (например, ваш заголовок и ваш пост). Класс может помочь вам заставить их выглядеть по-другому.

Назовите некоторые части HTML-кода. Замените заголовок , содержащий ваш заголовок, следующим:

блог/шаблоны/блог/post_list.html

 <заголовок>
    <дел>
         
Блог Django Girls

А теперь добавьте пост класса к вашей статье , содержащей пост в блоге.

блог/шаблоны/блог/post_list.html

 <статья>
    <время>опубликовано: {{ post.published_date }}
     
{{ post. title }} 
    
{{ post.text|linebreaksbr }}

Теперь мы добавим блоки объявлений к различным селекторам. Селекторы, начинающиеся с . относятся к классам. В Интернете есть много отличных руководств и пояснений по CSS, которые помогут вам понять следующий код. А пока скопируйте и вставьте его в свой блог/статические/css/blog.css файл:

блог/статические/css/blog.css

 .страница-заголовок {
    цвет фона: #C25100;
    поле сверху: 0;
    нижняя граница: 40px;
    отступ: 20px 20px 20px 40px;
}
.страница-заголовок h2,
.page-header h2 а,
.page-header h2 a:посетили,
.page-header h2: активный {
    цвет: #ffffff;
    размер шрифта: 36pt;
    текстовое оформление: нет;
}
ч2,
h3,
h4,
h5 {
    семейство шрифтов: «Лобстер», курсив;
}
.свидание {
    цвет: #828282;
}
.спасти {
    поплавок: справа;
}
.post-form textarea,
.пост-форма ввода {
    ширина: 100%;
}
.верхнее меню,
.top-menu: наведение,
.top-menu:посетили {
    цвет: #ffffff;
    поплавок: справа;
    размер шрифта: 26pt;
    поле справа: 20px;
}
. почта {
    нижняя граница: 70px;
}
.пост h3 а,
.post h3 a: посетил {
    цвет: #000000;
}
.пост > .дата,
.post > .actions {
    поплавок: справа;
}
.btn-вторичный,
.btn-secondary: посетил {
    цвет: #C25100;
    фон: нет;
    цвет границы: #C25100;
}
.btn-вторичный: наведите {
    цвет: #FFFFFF;
    цвет фона: #C25100;
}

Затем окружите HTML-код, который отображает сообщения с объявлениями классов. Замените это:

блог/шаблоны/блог/post_list.html

 {% для сообщения в сообщениях %}
    <статья>
        <время>опубликовано: {{ post.published_date }}
         
{{ post.title }} 
        
{{ post.text|linebreaksbr }}

    
{% конец для %}

в блоге /templates/blog/post_list.html с этим:

блог/шаблоны/блог/post_list.html

 <основной>
    <дел>
        <дел>
            {% для сообщения в сообщениях %}
                <статья>
                    <время>
                        {{ post. published_date }}
                    
                     
{{ post.title }} 
                    
{{ post.text|linebreaksbr }}

                
            {% конец для %}