FormStyle

Просматривая интересные новые решения в дизайне и иллюстрировании на сайте Dribbble, Мозг Дядюшки Дениса увидел этот шикарный дизайн для формы и решил сгенерировать подобный при помощи CSS 3.0. И сгенерировал. Что из этого вышло, можно увидеть на картинке к посту. И вот как этот дизайн получился – код можно увидеть в конце поста. Вы можете поэкспериментировать и поизменять стили. Как знать, может быть вы создадите шедевр, и он будет представлен среди многих других решений на сайте Dribbble. Дерзайте!

К слову, в форме использован один очень классный эффект, который отображается только в браузерах на основе Webkit. Но Мозг Дядюшки Дениса не расстраивается и ждёт, пока этот эффект стандартизуют и для других браузеров. 

Выполнив этот урок, вы создадите стильную форму контакта на свой сайт, используя свойства HTML 5 и CSS 3.0. Мы будем использовать новые возможности HTML 5, чтобы придать форме большей функциональности, а также новые свойства CSS 3.0, чтобы воплотить фантазии по красивой стилизации формы в реальность.

В дизайне формы мы будем использовать все методики, которые делают дизайн более запоминающимся. Это градиент, тени и блики. Для начала мы создадим концепт нашей будущей форме в Photoshop, а затем воссоздадим из файла PSD реальную форму, используя HTML 5 и CSS 3.0.