×
Закрытие
8
×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Статья сборника Как установить графический редактор GIMP

Перейти к статье

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

Здравствуйте уважаемый посетитель!

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

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

Кроме того здесь можно будет посмотреть, как в этот редактор добавить встроенное "Руководство пользователя", а также приведен бесплатный видеокурс, где можно поближе с ним познакомиться.

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

    Cайт на практическом примере

    Текущее состояние создаваемого сайта

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

    Исходные файлы данного сайта можно скачать из прилагаемых к статьям дополнительных материалов.

    Вы здесь: Главная → Сборник статей → Формы → Стилизация элементов формы с помощью CSS


    Автор: / Дата:

    Стилизуем элементы формы с помощью CSS

    Здравствуйте, уважаемый посетитель!

    В прошлой статье мы создали форму онлайн заказа. А сегодня с помощью CSS займемся стилизацией ее полей.

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

    Следует отметить, что такое подробное рассмотрение оформления элементов формы с помощью стилей CSS будет сделано только для ранее созданной формы онлайн заказа.

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

    Содержание


    • Добавляем в форму дополнительные HTML-элементы
    • Оформляем внешний вид полей формы
    • Формируем размер и отступы полей для минимального разрешения экрана 320px
    • Формируем по 2 элемента в ряду при увеличении разрешения
    • Увеличиваем количество элементов в ряду до 3-х при значительном увеличении ширины экрана
    • Исходные файлы сайта

    Добавляем в форму дополнительные HTML-элементы


    Как было отмечено, при оформлении формы мы будем использовать резиновую верстку. Но при этом только расширять и сужать ее элементы для разной ширины экрана, очевидно, будет недостаточно. Так как для нашего сайта диапазон возможного разрешения варьируется в довольно в широких пределах - от 320px до 1920px.

    Поэтому, кроме изменения ширины полей, для некоторых полей мы также в зависимости от разрешения экрана будем по-разному их компоновать. А именно, по количеству элементов в ряду - 1, 2 или 3.

    А для этого в ранее созданной форме онлайн заказа сгруппируем элементы с помощью дополнительных блоков , обозначив их классами "input_1", "input_2" и т.д.

    Кроме того, для возможности более гибкого оформления элементов формы, также выделим в отдельные блоки ее разделы, обозначив их классами: "righting_1", "righting_2" и "righting-button".

    В итоге измененный код формы онлайн заказа примет следующий вид (вновь добавленные элементы выделены светлым фоном).

    1. class="article">

    2. Оnline заявка на получение скидки при установке противоугонных систем автомобиля

    3. class="chapter">

    4. name="righting" action="#" method="post">

    5. Форма заказа


    6. class="righting_1">

    7. Данные об автомобиле

    8. class="input_1">

  • class="input_1">

  • type="text" id="model" name="model" required>

  • class="input_1">

  • class="input_1">

  • type="text" id="vin" name="vin" title="Должно быть только 6 последних цифр VIN-кода" required>

  • class="input_1">

  • class="righting_2">

  • Выбор способа маркировки и определение стоимости

  • class="input_3">

  • class="input_4">

  • type="text" id="center-price" name="center-price" value="0р.">

  • class="input_5">

  • type="text" id="discount-price" name="discount-price" value="0р.">

  • class="righting-button">

  • type="submit" name="righting-button" value="Отправить">

  • Рис.1 Измененный HTML-код формы онлайн заказа

    С HTML-кодом формы мы закончили и теперь можем перейти к назначению стилей CSS.

    В начало

    Оформляем внешний вид полей формы


    В первую очередь оформим внешний вид полей и кнопки формы учитывая существующий дизайн сайта. И за основу возьмем элементы, которые мы ранее создавали при формировании сайдбара.

    Вариант такого CSS-кода, предназначенного для полей онлайн заказа, представлен в следующей таблице.

    1. /*-----Форма онлайн заказа-----*/

    2. select[name="marka"], input[name="model"], select[name="year"], inputinput[name="vin"], select[name="insurance"], select[name="order"], input[name="center-price"], input[name="discount-price"] {

    3. height: 1.875em;

    4. width: 100%;

    5. box-sizing: border-box;

    6. background: #fdfadc;

    7. box-shadow: .1875em .1875em .3125em 0 #8b8e8d inset;

    8. border-radius: .3125em;

    9. border-bottom: .125em solid #eee;

    10. border-right: .125em solid #eee;

    11. color: #006;

    12. padding: .25em .5em 0 .5em;

    13. }

    14. select[name="marka"], input[name="model"], select[name="year"], input[name="vin"], select[name="insurance"] {

    15. margin-top: .25em;

    16. }

    17. input[name="center-price"], input[name="discount-price"] {

    18. text-align: right;

    19. }

    20. input[name="discount-price"] {

    21. color: #0d9203;

    22. }

    23. input[name="righting-button"] {

    24. height: 1.875em;

    25. margin-bottom: .625em;

    26. padding: 0 .375em 0 .375em;

    27. border-radius: 0.3125em;

    28. background: #a76d6d;

    29. text-align: center;

    30. font-weight: bold;

    31. color: #fff;

    32. background-image: linear-gradient(to top, #653939, #a76d6d 70%, #c39696);

    33. box-shadow: .125em .125em .25em 0 #422a2a;

    34. border-width: .125em;

    35. border-style: solid;

    36. border-color: #ddbebe #241616 #241616 #ddbebe;

    37. }

    38. input[name="righting-button"]:hover {

    39. box-shadow: none;

    40. border-color: #c39696 #a76d6d #653939 #a76d6d;

    41. }

    42. input[name="righting-button"]:active {

    43. box-shadow: 0 0 .4375em .125em #422a2a inset;

    44. border-color: #777 #fff #fff #777;

    45. }

    Рис.2 CSS-код по оформлению внешнего вида полей

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

    В основном это относится к типовым свойствам, указанным в позициях 3÷12. При этом ширина для всех элементов задана в 100% (поз.4), что позволяет в дальнейшем определять размеры полей соответствующими родительскими блоками.

    Кроме того, для некоторых элементов применены дополнительные свойства. Так, в полях с именами "center-price" и "discount-price", которые предназначены для указания цены, содержащийся в них текст выровнен в правую сторону (поз.18). И к этому дополнительно изменен цвет цены со скидкой в поле с именем "discount-price" (поз.21). Сделано это для того, чтобы каким-то образом выделить значение в этом поле относительно полной цены.

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

    В данном случае основные типовые свойства кнопки отправки формы в исходном состоянии указаны в позициях 24÷36.

    Переход из исходного состояния в положение наведения курсором на кнопку имитируется отменой тени с помощью свойства box-shadow (поз.39) и изменением цвета бордюров (поз.40).

    Активное же ее состояние (при щелчке на кнопку и ее удержании) отображается с помощью добавления внутренней тени (поз.43) и соответствующим изменением цвета бордюров (поз.44).

    После добавления этого фрагмента кода в таблицу стилей CSS, находящуюся в файле "main.css" папки "styles" корневого каталога, можно проверить, как теперь будут отображаться элементы формы. Ниже для сравнения показы скриншоты до и после выполненных преобразований для варианта разрешения экрана в 320px (снимки сделаны в браузере Google Chrome в режиме мобильного устройства).

    Вид формы до преобразований полей

    Рис.3 Вид формы до преобразований полей

    Вид формы после преобразований полей

    Рис.4 Вид формы после преобразований полей

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

    В начало

    Формируем размер и отступы полей для минимального разрешения экрана 320px


    Внешний вид элементов мы оформили. Однако, на данный момент напрашивается в их размер и расположение внести некоторые корректировки, например:

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

    1. .righting_1, .righting_2 {

    2. margin: 1em 0 1em 0;

    3. overflow: hidden;

    4. }

    5. .input_1 {

    6. width: 70%;

    7. margin: 1em auto 0 auto;

    8. }

    9. .input_1 select, .input_1 input{

    10. margin-top: .25em;

    11. }

    12. .input_3 div, .input_4 div, .input_5 div, .input_3 label, .input_4 label, .input_5 label{

    13. display: table-cell;

    14. vertical-align: middle;

    15. }

    16. .input_3, .input_4, .input_5 {

    17. margin-top: 1.25em;

    18. }

    19. .input3 label{

    20. min-width: 6em;

    21. }

    22. .input_4 label, .input_5 label{

    23. width: 10.25em;

    24. }

    25. .input_4 div, .input_5 div{

    26. width: 4.5em;

    27. }

    28. .righting-button {

    29. width: 6.5em;

    30. margin: 1.25em auto 0 auto;

    31. }

    Рис.5 CSS-код по формированию размера и отступов полей

    Несмотря на то, что разбор данного фрагмента кода не должен вызывать каких-либо сложностей, все же сделаем для него некоторые пояснения:

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

    Вид формы после стилизации элементов

    Рис.6 Вид формы после стилизации элементов

    На скриншоте видно, что стилизованная форма приобрела вполне логичный и пропорциональный вид.

    На этом преобразования полей формы при минимальной ширине в 320px закончим и перейдем к следующему этапу - адаптации для больших разрешений экрана.

    В начало

    Формируем по 2 элемента в ряду при увеличении разрешения


    Если теперь увеличивать ширину экрана, то можно отметить, что при величине разрешения в районе 380px, поля раздела "Данные об автомобиле" будет становиться излишне широкими.

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

    1. @media only screen and (min-width: 380px) {

    2. .input_1 {

    3. float: left;

    4. margin: 0.5em 0 0.5em 0;

    5. width: 48.5%;

    6. }

    7. .righting_1 div:nth-child(2), .righting_1 div:nth-child(4) {

    8. margin: 0.5em 3% 0.5em 0 0;

    9. }

    10. }

    Рис.7 Медиа-запрос по размещению двух элементов в ряду при разрешении более 380px

    Здесь для блоков с классом "input_1" выполнены следующие преобразования:

    А для задания отступа для нужных полей, свойством margin назначается отступ вправо на величину 3%. В данном случае таким элементами являются 2-ой и 4-ый блоки контейнера класса "righting_1". Что и определено с помощью псевдо-классов nth-child.

    После добавления медиа-запроса в таблицу стилей CSS и обновления страницы при разрешении экрана более 380px можно увидеть полученные изменения.

    Вид формы при разрешении более 380px.

    Рис.8 Вид формы при разрешении более 380px.

    В начало

    Как видно форма несколько преобразилась, и элементы раздела "Данные об автомобиле" стали располагаться по два в ряду.

    Увеличиваем количество элементов в ряду до 3-х при значительном увеличении ширины экрана


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

    Сделать это можно с помощью еще одного медиа-запроса, изменив некоторое параметры предыдущего. Ниже показан его CSS-код, в котором в качестве контрольной точки принято значение в 900px.

    1. @media only screen and (min-width: 900px) {

    2. .input_1 {

    3. width: 31.33%;

    4. }

    5. .righting_1 div:nth-child(4) {

    6. margin: 0.5em 0 0.5em 0 0;

    7. }

    8. .righting_1 div:nth-child(2), .righting_1 div:nth-child(3), .righting_1 div:nth-child(5) {

    9. margin: 0.5em 3% 0.5em 0 0;

    10. }

    11. }

    Рис.7 Медиа-запрос по размещению трех элементов в ряду при разрешении более 900px

    Как видно, в этом случае ширина элементов уменьшена до 31.33% (поз.3), что позволяет их разместить по три в ряду. При этом 6% оставлено для отступов между полями (два отступа по 3%)

    Что касается назначения отступов, то здесь они предусмотрены для 2-ого, 4-ого и 5-ого блока (поз.9). При этом отступ ранее назначенному 3-ему блоку - отменен (поз.6).

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

    Вид формы при разрешении более 900px.

    Рис.10 Вид формы при разрешении более 900px.

    Как видно, мы получили нужный для этого режима результат - расположение полей раздела "Данные об автомобиле" по три в ряду.


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

    На этом вопрос по оформлению элементов формы мы закончим. В следующих статьях будем заниматься созданием новых форм и обеспечением их функционала.

    Исходные файлы сайта


    Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

    Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

    Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

    Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

    В начало

    С уважением, Николай Гришин


    Комментарии


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

    Буду Вам за это очень признателен!