Дизайн поисковой строки

{"ops":[{"attributes":{"size":"18px","color":"#666666"},"insert":"Здравствуйте дорогие читатели моего блога. Сегодня я хочу рассказать вам, как можно оформить строку поиска. Строка поиска на моей странице достаточно простая. Для меня, в первую очередь было важно, чтобы она вписывалась в дизайн блога. Сегодня с вами хочу поделиться красивыми формами поиска для сайта или блога. Но знайте, это просто форма поиска, без обработчика. Статью, как написать простой обработчик на "},{"attributes":{"size":"18px","color":"green","font":"courier"},"insert":"PHP"},{"attributes":{"size":"18px","color":"#666666"},"insert":" я уже выкладывала в своем блоге. Так что сегодня мы поговорим о дизайне и только о дизайне. "},{"insert":"\n"},{"attributes":{"size":"18px","color":"#666666"},"insert":"Начну пожалуй с самой простой формы:"},{"insert":"\n

"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":""},{"attributes":{"code-block":true},"insert":"\n"},{"insert":""},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"

"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"size":"18px"},"insert":"Получим "},{"attributes":{"size":"18px","color":"blue","bold":true},"insert":"форму 1 ("},{"attributes":{"bold":true,"size":"18px","color":"blue","link":"https://programmerblog.ru/example"},"insert":"Посмотреть"},{"attributes":{"color":"blue","bold":true},"insert":"..."},{"attributes":{"color":"blue","size":"18px","bold":true},"insert":")"},{"attributes":{"size":"18px"},"insert":", это основная форма, все остальные навороты это применение разных стилей, давайте добавим стилей и посмотрим, что у нас получится:"},{"insert":"\n"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"size":"18px"},"insert":"Добавив минимум стилей получаем "},{"attributes":{"size":"18px","color":"blue","bold":true},"insert":"форму 2 ("},{"attributes":{"bold":true,"size":"18px","color":"blue","background":"#ffffff","link":"https://programmerblog.ru/example"},"insert":"Посмотреть"},{"attributes":{"color":"blue","bold":true},"insert":"..."},{"attributes":{"color":"blue","size":"18px","bold":true},"insert":")"},{"attributes":{"size":"18px"},"insert":", если поисковик на вашем сайте занимает важное место, например вы делаете магазин и наша форма поиска должна быть заметна, сделайте её яркой."},{"insert":"\n"},{"attributes":{"size":"18px"},"insert":"Чуть изменим стили и получим "},{"attributes":{"size":"18px","color":"blue","bold":true},"insert":"форму 3 ("},{"attributes":{"bold":true,"size":"18px","color":"blue","background":"#ffffff","link":"https://programmerblog.ru/example"},"insert":"Посмотреть"},{"attributes":{"color":"blue","bold":true},"insert":"..."},{"attributes":{"color":"blue","size":"18px","bold":true},"insert":")"},{"attributes":{"size":"18px"},"insert":":"},{"insert":"\n"},{"attributes":{"code-block":true},"insert":"\n\n"},{"attributes":{"size":"18px"},"insert":"Так меняя стили мы можем сделать поле поиска таким, чтобы оно отвечало потребностям и дизайну нашего сайта."},{"insert":"\n"},{"attributes":{"size":"18px"},"insert":"Давайте рассмотрим другие варианты оформления, например, если у вас подключены "},{"attributes":{"size":"18px","color":"green","font":"courier"},"insert":"Bootstrap"},{"attributes":{"size":"18px"},"insert":" и "},{"attributes":{"size":"18px","color":"green","font":"courier"},"insert":"Font-awesome"},{"attributes":{"size":"18px","color":"#008a00"},"insert":", вы можете сделать форму поиска, как на моем сайте, сама форма слегка изменится:"},{"attributes":{"header":1},"insert":"\n"},{"insert":"

"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"

"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"size":"18px"},"insert":"Добавим стили и получим "},{"attributes":{"size":"18px","color":"blue","bold":true},"insert":"форму 4 ("},{"attributes":{"bold":true,"size":"18px","color":"blue","background":"#ffffff","link":"https://programmerblog.ru/example"},"insert":"Посмотреть"},{"attributes":{"color":"blue","bold":true},"insert":"..."},{"attributes":{"color":"blue","size":"18px","bold":true},"insert":")"},{"attributes":{"size":"18px"},"insert":":"},{"insert":"\n"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"size":"18px"},"insert":"Теперь сделаем похожую форму, но вместо иконки на кнопку поместим картинку лупы, вы можете взять любую картинку лупы в .png 30x30px. "},{"attributes":{"size":"18px","color":"blue","bold":true},"insert":"Форма 5 ("},{"attributes":{"bold":true,"size":"18px","color":"blue","background":"#ffffff","link":"https://programmerblog.ru/example"},"insert":"Посмотреть"},{"attributes":{"color":"blue","bold":true},"insert":"..."},{"attributes":{"color":"blue","size":"18px","bold":true},"insert":")"},{"attributes":{"size":"18px"},"insert":":"},{"insert":"\n

"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"

"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"size":"18px"},"insert":"И стили:"},{"insert":"\n"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"size":"18px","color":"#666666"},"insert":"Красивая форма поиска, сделанная только на CSS, в этой форме не используется картинка, иконка или дополнительные стили. "},{"insert":"\n"},{"attributes":{"color":"blue","size":"18px","bold":true},"insert":"Форма 6 ("},{"attributes":{"bold":true,"color":"blue","size":"18px","background":"#ffffff","link":"https://programmerblog.ru/example"},"insert":"Посмотреть"},{"attributes":{"color":"blue","bold":true},"insert":"..."},{"attributes":{"color":"blue","size":"18px","bold":true},"insert":")"},{"attributes":{"color":"#666666","size":"18px"},"insert":":"},{"insert":"\n

"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"

"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"size":"18px"},"insert":"И стили:"},{"insert":"\n"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"size":"18px"},"insert":"Прозрачная форма у которой меняется цвет границы, при активации, "},{"attributes":{"size":"18px","color":"blue","bold":true},"insert":"форма 7 ("},{"attributes":{"bold":true,"size":"18px","color":"blue","background":"#ffffff","link":"https://programmerblog.ru/example"},"insert":"Посмотреть"},{"attributes":{"color":"blue","bold":true},"insert":"..."},{"attributes":{"color":"blue","size":"18px","bold":true},"insert":")"},{"attributes":{"size":"18px"},"insert":":"},{"insert":"\n

"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"

"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"size":"18px"},"insert":"Стили "},{"attributes":{"size":"18px","color":"blue","bold":true},"insert":"формы 7 ("},{"attributes":{"bold":true,"size":"18px","color":"blue","background":"#ffffff","link":"https://programmerblog.ru/example"},"insert":"Посмотреть"},{"attributes":{"color":"blue","bold":true},"insert":"..."},{"attributes":{"size":"18px","color":"blue","bold":true},"insert":")"},{"attributes":{"size":"18px"},"insert":":"},{"insert":"\n"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"align":"center"},"insert":"\n"},{"attributes":{"bold":true,"size":"18px","background":"#ffffff","color":"blue","link":"https://programmerblog.ru/example"},"insert":"Посмотреть"},{"attributes":{"color":"blue","bold":true},"insert":"..."},{"attributes":{"align":"center"},"insert":"\n"},{"insert":"\n"}]}