Готовый стиль css html

85 Stylish CSS forms

Here is a collection of some of the most stylish CSS forms made with just HTML and CSS.

You may also like

• CSS Contact Forms
• 75 CSS Text Animations You Can Use
• 15 Amazing CSS Animated Background for you to try
• 57 Beautiful CSS Cards examples to improve your UI
• 19 Cool CSS Loading Animation to inspire you
• 17 Fancy CSS Search Boxes
• 21 Modern CSS menu examples
• 23 Fantastic CSS Hover Effects
• 19 CSS Border Animations you can implement
• 15 Stylised CSS Tables
• 13 Pure CSS Dropdown Menus
• 15 Creative CSS Filter Examples
• 35 Unique CSS Text Effects
• 15 CSS Sliders you can use
• 21 New Bootstrap Login Forms for you
• 19 Bootstrap Profiles you can use for yourself
• 13 Material Design Login Forms
• 35 Cool CSS Select Boxes
• 15 CSS Range Sliders you can use today
• 35 Creative use of CSS clip-path examples
• 29 Unique CSS Toggle Switches
• 41 Beautiful CSS Animation Examples

Animated Login Form

Dev: Alvaro Montoro

Animated Login Form

Dev: Alex Cornejo

Simple Login Form Animated

Dev: Himanshu C

Animated-Login-Form

See the Pen Animated-Login-Form by Swarup Kumar Kuila (@uiswarup) on CodePen.

Dev: Swarup Kumar Kuila

Animated Login Form

Dev: Stack Findover

Animated Login Form

Dev: Torben Colding

Neumorphic form

Dev: Pratham

Neumorphic form

Dev: Philip Lahner

Simple Sign In Form

Dev: John Bowie

Minimal Sign-In Form With Bulma.io

Dev: Paul Barker

Login Screen Animation

Dev: Johan Fagerbeg

Placeholders

Dev: Mikael Ainalem

See the Pen Subscribe by Omar Dsooky (@linux) on CodePen.

Dev: Omar Dsooky

Day 001 Login Form

Dev: Mohan Khadka

See the Pen Login Form by Tyler Fry (@frytyler) on CodePen.

Dev: Tyler Fry

Card component with floating labels

Dev: Håvard Brynjulfsen

Login form. Svg animation

Dev: @BrawadaCom

Abstract Sign Up Form – Day 2 – 100 DAYS – 2020

Dev: Ricky Eckhardt

Login Form with floating placeholder and light button

Dev: Soufiane Khalfaoui HaSsani

Log In / Sign Up – Pure CSS

Dev: Ivan Grozdic

See the Pen Login by Marco Biedermann (@marcobiedermann) on CodePen.

Dev: Marco Biedermann

Animated Login Form

Dev: Munsif Mujtaba

Placeholders

See the Pen Placeholders by Mikael Ainalem (@ainalem) on CodePen.

Dev: Mikael Ainalem

Neumorphism Login Form

Dev: Ricardo Oliva Alonso

Dev: Mike Young

Login form using HTML5 and CSS3

Dev: Brad Bodine

Sleek Login Form

Dev: Tony Banik

CSS Newsletter with Animated Floating Input Labels

Dev: Bilal.Rizwaan

Newsletter Form Dribble to HTML

Red Newsletter Form

Dev: Sazzad

See the Pen form by Arefeh hatami (@arefeh_htmi) on CodePen.

Dev: Arefeh hatami

Pupassure Sign Up Form

Dev: Ricky Eckhardt

Less annoying form

See the Pen Less annoying form by Andy Fitzsimon (@andyfitz) on CodePen.

Dev: Andy Fitzsimon

Transparent Material Login Form

Dev: alphardex

POP ART Button

Dev: Ahmad Nasr

Login form UI Design

Dev: Chouaib Belagoun

Sign-Up/Login Form

Multi Step Form with Progress Bar using jQuery and CSS3

Dev: Atakan Goktepe

Credit Card Form

Dev: Muhammed Erdem

Snake highlight

See the Pen Snake highlight by Mikael Ainalem (@ainalem) on CodePen.

Dev: Mikael Ainalem

Material Login Form

Dev: Andy Tran

Login Form – Modal

Dev: Andy Tran

Google Material Design Input Boxes

Dev: Chris Sev

Log in/Sign up screen animation

Dev: Josh Sorosky

Interactive Sign Up Form

See the Pen Interactive Sign Up Form by Riccardo Pasianotto (@rkpasia) on CodePen.

Dev: Riccardo Pasianotto

Double slider Sign in/up Form

Dev: Florin Pop

Credit Card Payment Form

Dev: Adam Quinlan

Slide Sign In/Sign Up form

Dev: Danielkvist

Flat Login Form

Dev: Andy Tran

Material Design Login Form

Dev: Josh Adamous

Form fields with material design and video background, in pure CSS

Dev: Jon Uhlmann

RESPONSIVE MATERIAL DESIGN CONTACT FORM

Dev: Nikhil Krishnan

Material VCard

See the Pen Material VCard by Rian Ariona (@ariona) on CodePen.

Dev: Rian Ariona

Registration Form

Dev: afirulaf

Login/Registration Form Transition

Dev: Nikolay Talanov

Expanding Contact Form

Dev: Joe Harry

Responsive Signup/Login form

Dev: Mohamed Hasan

Interactive Form

See the Pen Interactive Form by Emmanuel Pilande (@epilande) on CodePen.

Dev: Emmanuel Pilande

Log in / Sign up

Dev: @BrawadaCom

Login/signup form animation

Dev: Shayan

Step by step register form

Dev: Jerome Renders

Elegant Login Form

See the Pen Elegant Login Form by Victor Hugo Matias (@reidark) on CodePen.

Dev: Victor Hugo Matias

MINIMALISTIC FORM

Dev: Matheus Marsiglio

Credit Card Checkout

Dev: Fabio Ottaviani

Form Design

See the Pen Form Design by Timurtek Bizel (@Timurtek) on CodePen.

Dev: Timurtek Bizel

One line Signup

Dev: Vineeth.TR

Animated Login Form

Spectre sign up form

Dev: Alex Devero

No Questions Asked Form & Magic Focus

Dev: Michal Niewitala

Obnoxious errors

Dev: Maria cheline

Flexbox Form

See the Pen Flexbox Form by Katherine Kato (@kathykato) on CodePen.

Dev: Katherine Kato

Invision login – dribbble remake

Dev: Mikael Ainalem

Emoji Form Validation

Dev: Marco Biedermann

Sign Up Form

Dev: Johnny Bui

CSS Snackables

Credit Card Payment Form

Dev: Jade Preis

Signup form UI

Dev: Tyler Johnson

Step by Step Form Interaction

Dev: balapa

Step By Step Form

Dev: DevTips

Step By Step Form

See the Pen Step by step form by Jonathan H (@Dunner) on CodePen.

Dev: Jonathan H

Single input 3D form

See the Pen Single input 3D form by Son Tran-Nguyen (@sntran) on CodePen.

Dev: Son Tran-Nguyen

Step by step form [KO]

See the Pen Step by step form [KO] by Thays Dos Santos Neves (@thayssn) on CodePen.

Dev: Thays Dos Santos Neves

Step by step form

See the Pen step by step form by Senhor Sulaiman (@zenu) on CodePen.

Dev: Senhor Sulaiman

Contact Form

See the Pen Contact Form by Aina Requena (she/her) (@ainarela) on CodePen.

Dev: Aina Requena

Источник

Базовые CSS-стили различных элементов

В этом топике представлены лаконичные базовые стили для различных элементов: кнопок, ссылок, форм, теней, градиентов, которые можно использовать в своих проектах. Да и просто разобраться в принципах работы таких конструкций проще на несложных примерах.

Базовая конструкция

В примерах базовая конструкция блока выглядит так:

Тени

Блок отбрасывает тень в разные стороны:

.drop-shadow < background: #9479fa; >.drop-shadow.top < box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4) >.drop-shadow.right < box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4) >.drop-shadow.bottom < box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4) >.drop-shadow.left

div[class*="emphasize-"] < background: #69D2E7; >.emphasize-dark < box-shadow: 0 0 5px 2px rgba(0,0,0,.35) >.emphasize-light < box-shadow: 0 0 0 10px rgba(255,255,255,.25) >.emphasize-inset < box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5) >.emphasize-border

div[class*="embossed"] < background: #8ec12d; color: #333; text-shadow: 0 1px 1px rgba(255,255,255,0.9); >.embossed-light < border: 1px solid rgba(0,0,0,0.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); >.embossed-heavy

Градиенты

div[class*="gradient"] < background-color: #DEB8A0; box-shadow: 0 0 0 1px #a27b62; >.gradient-light-linear < background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); >.gradient-dark-linear

Закругленные углы

div[class*="rounded"] < background: #fca1cc; >.light-rounded < border-radius: 3px; >.heavy-rounded < border-radius: 8px; >.full-rounded < border-radius: 50%; >.barrel-rounded < border-radius: 20px/60px; >

Ссылки

Несколько примеров стилей для ссылки в тексте:

.inline-link-1 < display: inline-block; margin: 0 0.2em; padding: 3px; background: #97CAF2; border-radius: 2px; transition: all 0.3s ease-out; /* Font styles */ text-decoration: none; font-weight: bold; color: white; >.inline-link-1:hover < background: #53A7EA >.inline-link-1:active < background: #C4E1F8 >.inline-link-1:visited

.inline-link-2 < display: inline-block; border-bottom: 2px dashed rgba(0,0,0,0.9); /* Font styles */ text-decoration: none; color: #777; >.inline-link-2:hover < border-bottom-style: dotted; >.inline-link-2:active < border-bottom-style: solid; >.inline-link-2:visited

.inline-link-3 < display: inline-block; position: relative; padding-left: 6px; /* Font styles */ text-decoration: none; color: #6AB3EC; text-shadow: 0 1px 1px rgba(255,255,255,0.9); >.inline-link-3:hover < color: #3C9CE7; >.inline-link-3:before < content: "\25BA"; font-size: 80%; display: inline-block; padding-right: 3px; pointer-events: none; >.inline-link-3:hover:before

.metro.three-d < position: relative; box-shadow: 1px 1px #53A7EA, 2px 2px #53A7EA, 3px 3px #53A7EA; transition: all 0.1s ease-in; >.metro.three-d:active

.bordered-link < display: inline-block; padding: 8px; border: 3px solid #FCB326; border-radius: 6px; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2), inset 0 2px 1px rgba(0, 0, 0, 0.2); /* Font styles */ text-decoration: none; font-size: 14px; text-transform: uppercase; color: #222; >.bordered-link:hover < border-color: #FDD68B >.bordered-link:active

.embossed-link < box-shadow: inset 0 3px 2px rgba(255,255,255,.22), inset 0 -3px 2px rgba(0,0,0,.17), inset 0 20px 10px rgba(255,255,255,.12), 0 0 4px 1px rgba(0,0,0,.1), 0 3px 2px rgba(0,0,0,.2); >.modern.embossed-link < box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2), inset 0 3px 2px rgba(255,255,255,.22), inset 0 -3px 2px rgba(0,0,0,.15), inset 0 20px 10px rgba(255,255,255,.12), 0 0 4px 1px rgba(0,0,0,.1), 0 3px 2px rgba(0,0,0,.2); >.modern.embossed-link:active

Input

Добавляет border-radius по клику:

.simple-input < display: block; padding: 5px; border: 4px solid #F1B720; border-radius: 5px; color: #333; transition: all 0.3s ease-out; >.simple-input:hover < border-radius: 8px >.simple-input:focus

Вместо формы ввода просто линия:

Источник

Базовые стили и полезные CSS-сниппеты

В этой статье собраны полезные и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.

1. Базовая HTML5 конструкция

Основной код любой страницы, которому многие разработчики уделяют недостаточно внимания. Подключены jQuery 1.8.2 и HTML5shiv для корректного отображения в старых браузерах.

2. Сброс стандартных стилей браузеров

один и тот же код в разных браузерах может отображаться по-разному. Сброс стилей поможет избежать таких проблем.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; >html < height: 101%; >/* always display scrollbars */ body < font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; >article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >strong < font-weight: bold; >input < outline: none; >table < border-collapse: collapse; border-spacing: 0; >img < border: 0; max-width: 100%; >a < text-decoration: none; >a:hover

3. CSS3 градиенты

Представленный ниже код поможет кроссбраузерно отображать CSS-градиенты. Добавляется в нужный селектор, можно использовать rgba() для прозрачности.

background-color: #000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000'); background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000)); background-image: -webkit-linear-gradient(top, #bbb, #000); background-image: -moz-linear-gradient(top, #bbb, #000); background-image: -ms-linear-gradient(top, #bbb, #000); background-image: -o-linear-gradient(top, #bbb, #000); background-image: linear-gradient(top, #bbb, #000); 

4. CSS3 Transform

Не очень популярное свойство из-за проблем в старых браузерах. Однако достаточно перспективное. Можно делать всплывающие подсказки или фигуры.

-webkit-transform: perspective(250) rotateX(45deg); -moz-transform: perspective(250) rotateX(45deg); -ms-transform: perspective(250) rotateX(45deg); -o-transform: perspective(250) rotateX(45deg); transform: perspective(250) rotateX(45deg); 

5. Свой @font-face

Позволяет добавить собственные шрифты на страницу. Для конвертации в различные форматы полезно использовать сервис Font2Web.

6. Мета-теги адаптивной верстки

Важные мета-теги для корректной работы адаптивного макета

7. HTML5-медиа

Конструкция подгрузки нескольких форматов видео и аудио для универсальной работы медиа-контента (убрать пробел в «s ource»)

8. Классы для упрощения верстки

Следующие сниппеты помогут сократить синтаксис при верстке. Техника широко применяется в различных CSS-фреймворках. Например управление свойством float:

.float-left /* Or whatever name you like */ < float: left; >.float-right /* Or whatever name you like */

Или отображением элементов:

9. Сниппеты дизайна

Позволяют упрощать отображать контент. Простой пример: объявление в CSS-файле стилей шрифтов в зависимости от места на сайте, где располагается контент. Эта, вроде бы простая техника, часто игнорируется разработчиками.

10. Сниппеты разработки

Сниппеты, помогающие более грамотно организовать верстку сайта. Вот очень простой пример, который позволяет правильно считать ширину какого-нибудь блока:

Еще один полезный инструмент — это clearfix, помогающий избавиться от несоответствий отображения элементов верстки в разных браузерах:

.clearfix:before, .clearfix:after < content: " "; display: table; >.clearfix:after < clear: both; >/* IE6/7 support */ .clearfix

Слишком длинные URL могут ломать верстку страницы. Чтобы избежать этого, можно применять следующий сниппет (подробнее на css-tricks.com), не работает в Opera и IE ниже восьмой версии:

Переносы текста в теге pre:

11. Подготовка страницы для печати

Перевод контента в черно-белые цвета, отображение подчеркивания у ссылок, отображение URL рядом в скобках:

@media print < * < background: none !important; color: black !important; box-shadow: none !important; text-shadow: none !important; /* Images, vectors and such */ filter: Gray(); /* IE4-8: depreciated */ filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */ -webkit-filter: grayscale(100%); /* Chrome + Safari 6 */ -moz-filter: grayscale(100%); /* Future proof */ -ms-filter: grayscale(100%); /* Future proof */ -o-filter: grayscale(100%); /* Future proof */ filter: grayscale(100%); /* Future proof or polyfilled */ >a < text-decoration: underline; >a[href]:after < content: " (" attr(href) ")"; >a[href="#"], a[href="javascript:"] < content: ""; >> 

Источник