Дизайн поисковой строки (продолжение2)
{"ops":[{"insert":"Прозрачная форма у которой меняется цвет границы, при активации, "},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"форма 7 (Посмотреть...)"},{"insert":":\n<form class=\"bforma\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <input type=\"text\" class=\"bfild\" placeholder=\"Поиск...\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <button class=\"bbut\" type=\"submit\"></button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Стили формы 7 :\n<style> /* Стили для формы 7 */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bforma{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 300px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" margin: 0 auto;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: relative;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild, .bbut{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" outline: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: transparent;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 100%;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 42px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" padding-left: 15px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: 3px solid #F9F0DA;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" color: #F9F0DA;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild::-webkit-input-placeholder {color:#fff; opacity:1;}/* webkit */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild::-moz-placeholder {color:#fff; opacity:1;}/* Firefox 19+ */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild:-moz-placeholder {color:#fff; opacity:1;}/* Firefox 18- */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild:-ms-input-placeholder {color:#fff; opacity:1;}/* IE */"},{"attributes":{"code-block":true},"insert":"\n\n"},{"insert":".bbut{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 42px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 42px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: absolute;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" top: 0;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" right: 0;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" cursor: pointer;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bbut:before{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" content: \"\\f002\";"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" font-family: FontAwesome;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" font-size: 16px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" color: #F9F0DA;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild:focus{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-color: yellowgreen;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</style>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"\n"}]}
{"ops":[{"insert":"Ну и напоследок, хочу показать вам форму которая открывается при нажатии на иконку, такую форму не рекомендуют делать в интернет магазинах, но для создания блога или портфолио она может пригодиться, "},{"attributes":{"link":"http://myblog.loc/postExample"},"insert":"форма 8 (Посмотреть...)"},{"insert":":\n<form class=\"cforma\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <input type=\"text\" class=\"cfild\" placeholder=\"Поиск...\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <button class=\"cbut\" type=\"submit\"></button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Стили:\n<style> /* Стили для формы 8 */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".cforma{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 300px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" margin: 0 auto 5px auto;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: relative;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".cfild{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 42px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 0;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" padding: 0 42px 0 15px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-bottom: 2px solid transparent;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" outline: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: transparent;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" transition: .4s cubic-bezier(0, 0.8, 0, 1);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: absolute;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" top: 0;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" right: 0;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" z-index: 2;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".cfild:focus{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 300px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" z-index: 1;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-bottom: 2px solid #F9F0DA;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".cfild::-webkit-input-placeholder {color:#fff; opacity:1;}/* webkit */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".cfild::-moz-placeholder {color:#fff; opacity:1;}/* Firefox 19+ */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".cfild:-moz-placeholder{color:#fff; opacity:1;}/* Firefox 18- */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".cfild:-ms-input-placeholder{color:#fff; opacity:1;}/* IE */"},{"attributes":{"code-block":true},"insert":"\n\n"},{"insert":".cbut{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: #800000;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 60px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 60px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: absolute;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" top: 0;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" right: 0;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" cursor: pointer;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-radius: 50%;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".cbut:before{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" content: \"\\f002\";"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" font-family: FontAwesome;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" font-size: 16px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" color: #F9F0DA;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</style>"},{"attributes":{"code-block":true},"insert":"\n"}]}
{"ops":[{"insert":"Статья получилась очень большая, пришлось разбить ее на три, для того чтобы упростить загрузку на сайте, но надеюсь вам было интересно.\n"},{"attributes":{"align":"center"},"insert":"\n"},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"Посмотреть..."},{"attributes":{"align":"center"},"insert":"\n"},{"insert":"\n"}]}
Другие статьи этого автора
