Дизайн поисковой строки (продолжение)
Алекса

Дизайн поисковой строки (продолжение)

Главная > Блог > Статья

Дизайн поисковой строки (продолжение)

{"ops":[{"insert":"Давайте рассмотрим другие варианты оформления, например, если у вас подключены "},{"attributes":{"bold":true},"insert":"Bootstrap"},{"insert":" и "},{"attributes":{"bold":true},"insert":"Font-awesome"},{"insert":", вы можете сделать форму поиска, как на моем сайте.\n<form action=\"\" method=\"get\" class=\"input-group\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <input type=\"search\" name=\"search\" class=\"form-control search\" placeholder=\"Поиск...\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <span class=\"input-group-btn\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <button class=\"btn btn-default\" type=\"submit\"><i class=\"fa fa-search\"></i></button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </span>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Добавим стили и получим "},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"форму 4 (Посмотреть...):"},{"insert":"\n<style> /*Стили для формы 4*/"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".search{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" z-index: 0; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 250px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-radius: 45px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: relative; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-style: double; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-width: 2px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: double 2px transparent;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: linear-gradient(white, white), radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -webkit-linear-gradient(white, white), -webkit-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -moz-linear-gradient(white, white), -moz-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -ms-linear-gradient(white, white), -ms-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -o-linear-gradient(white, white), -o-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-origin: border-box;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-clip: content-box, border-box;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" padding: 0 0 0 20px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" text-indent: 20px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" .btn-default{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 30px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: #fff; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: absolute; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" right: 20px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" top: 2px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </style>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"\n"}]}

{"ops":[{"insert":"Теперь сделаем похожую форму, но вместо иконки на кнопку поместим картинку лупы, вы можете взять любую картинку лупы в .png 30x30px. "},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"Форма 5 (Посмотреть...):"},{"insert":"\n<form action=\"\" method=\"get\" class=\"input-group\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <input type=\"search\" name=\"search\" class=\"form-control search\" placeholder=\"Поиск...\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <span class=\"input-group-btn\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <button class=\"btn btn-default\" type=\"submit\"></button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </span>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"И стили:\n<style> /* Стили для формы 5 */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".search{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" z-index: 0; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 250px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-radius: 45px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: relative; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-style: double; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-width: 4px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-color: yellow; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-color: mediumvioletred;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" padding: 0 0 0 20px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" text-indent: 20px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" .btn-default{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 30px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: #fff; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: absolute; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" right: 20px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" top: 2px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: url('/img/pic.png'); /*Путь к картинке*/"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</style>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"}]}

{"ops":[{"insert":"Красивая форма поиска, сделанная только на CSS, в этой форме не используется картинка, иконка или дополнительные стили.\n"},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"Форма 6 (Посмотреть...):"},{"insert":"\n<form class=\"form\" style=\"margin: 20px auto 5px auto; width: 300px;\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <input class=\"field\" type=\"text\" placeholder=\"Поиск...\" />"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <input class=\"button\" type=\"button\" value=\"Да\" />"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"И стили:\n<style> /* Стили для формы 6 */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" .form {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: solid 1px #d2d2d2;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" padding: 3px 5px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-radius: 2em;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" box-shadow: 0 1px 0 rgba(0,0,0,.1);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: #f1f1f1;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#0f401b));"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: -moz-linear-gradient(top, #fff, #ededed);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" .form input {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" font: normal 12px/100% Arial, Helvetica, sans-serif;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" .form .field {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: #fff;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" padding: 6px 6px 6px 8px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 250px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: solid 1px #bcbbbb;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" outline: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-radius: 2em;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" box-shadow: inset 0 1px 2px rgba(0,0,0,.2);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" .form .button {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" color: #fff;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: solid 1px #494949;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" font-size: 11px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 27px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 27px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" text-shadow: 0 1px 1px rgba(0,0,0,.6);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-radius: 2em;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: #0f401b;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: -webkit-gradient(linear, left top, left bottom, from(#00a87d), to(#0b2e13));"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: -moz-linear-gradient(top, #00a87d, #0f401b);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</style>"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"Посмотреть..."},{"attributes":{"align":"center"},"insert":"\n"}]}

Другие статьи этого автора

Алекса
07.06.2023

Дизайн поисковой строки (продолжение2)

Алекса
01.06.2023

Создание модального окна в Laravel с помощью Livewire

Алекса
23.01.2022

Как скрыть блок на странице (продолжение)

Алекса

___________________

Буду благодарна за оказание любой финансовой помощи на развитие сайта

___________________

___________________

___________________