Форма входа и регистрации в стиле Apple на CSS3
Очень стильная форма входа и регистрации, которая выполнена в стиле iOs
Для начала посмотрите ДЕМО
Установка:
1#: В самый верх вашего 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 |
body, html { background-color: #EBECF0; } body, p, input, select, textarea, button { font-family: "Montserrat", sans-serif; letter-spacing: -0.2px; font-size: 16px; } div, p { color: #BABECC; text-shadow: 1px 1px 1px #FFF; } form { padding: 16px; width: 320px; margin: 0 auto; } .segment { padding: 32px 0; text-align: center; } button, input { border: 0; outline: 0; font-size: 16px; border-radius: 320px; padding: 16px; background-color: #EBECF0; text-shadow: 1px 1px 0 #FFF; } label { display: block; margin-bottom: 24px; width: 100%; } input { margin-right: 8px; box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF; width: 100%; box-sizing: border-box; transition: all 0.2s ease-in-out; appearance: none; -webkit-appearance: none; } input:focus { box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF; } button { color: #61677C; font-weight: bold; box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC; transition: all 0.2s ease-in-out; cursor: pointer; font-weight: 600; } button:hover { box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC; } button:active { box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF; } button .icon { margin-right: 8px; } button.unit { border-radius: 8px; line-height: 0; width: 48px; height: 48px; display: inline-flex; justify-content: center; align-items: center; margin: 0 8px; font-size: 19.2px; } button.unit .icon { margin-right: 0; } button.red { display: block; width: 100%; color: #AE1100; } .input-group { display: flex; align-items: center; justify-content: flex-start; } .input-group label { margin: 0; flex: 1; } |
2#: Следующий код поместите в то место страницы, где должна быть форма входа:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<form> <div class="segment"> <h1>Регистрация</h1> </div> <label> <input type="text" placeholder="Почтовый адрес"/> </label> <label> <input type="password" placeholder="Пароль"/> </label> <button class="red" type="button"><i class="icon ion-md-lock"></i> Войти</button> <div class="segment"> <button class="unit" type="button"><i class="icon ion-md-arrow-back"></i></button> <button class="unit" type="button"><i class="icon ion-md-bookmark"></i></button> <button class="unit" type="button"><i class="icon ion-md-settings"></i></button> </div> <div class="input-group"> <label> <input type="text" placeholder="Почтовый адрес"/> </label> <button class="unit" type="button"><i class="icon ion-md-search"></i></button> </div> </form> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
