Поклажа registration form html. Форма входа и регистрации с помощью HTML5 и CSS3

21.09.2019

In this tutorial, we are going to tell you how you can create Registration Form using HTML and CSS3. We will create two Registration forms; the first one is simple, and another one has Icons with each input field. The icons we have used are font icons. These registration forms are simple, clean and attractive.

The icons we have used are font icons. These registration forms are simple , clean code and unique in design. You can be utilized it into your website and customize it as you need.

If you are looking for more forms collection, then this 40+ beautiful sign-up forms is the best collection I found on the internet. They posted a lot of forms free and premium as well.

The signup forms used on websites to allow the site visitors to create an account and build their profile. It depends on upon you what benefit you will give to the users who register on your website.

Some site used such form to provide more access to the user such as download files or post article etc. Anyway, Let’s have a look, how we can create them.

Registration Form in HTML

Let’s start with registration form HTML code. Both forms code added inside the div class name cclogin .

For simple form, we have added class simple next to cclogin and for icon style form , we have added class icons next to cclogin .

The input fields of the form are inside the p tag. let’s have a look block of HTML code.

Let’s add some placeholders

But if you see the demo, I have to make the first name and last name fields small and fit them into one row. To make them like that we have added half class into p the tag.

As I said you before that, another Form is icon style form. In this form, we have used a similar technique which we have previously used in As you know we are using font icon so we have added it to span tag.

Forms Styling with CSS

First of all, we will take a look at style-sheet of icons. For icons, we have used:before attribute

Fa-user:before { content: "\f007"; } .fa-key:before { content: "\f084"; } .fa-envelope:before { content: "\f0e0"; }

Let’s see styling of the fields

Cclogin input, .cclogin input, .cclogin select{ padding:10px; width:100%; border:none; height:50px; line-height:50px; color:#757575; }

The form fields without icons have 100% width, but for the fields without have 92% width, this is because we require space to add icons before the input fields.

To make the fields small, we just have added class .half into p the tag and set it’s width to 48%. For second field we have added .last class next to .half class so we can make the margin-right:0%; in the CSS.

Cclogin .half { float: left; width: 48%; margin-right:4% } .cclogin .half.last{ margin-right:0%; }

The icons used in the demo are from the Font Awesome set by Davegandy and they are licensed under the CC BY 3.0 license. Hope you enjoy this CSS3 user register Form. Leave the comment to let us know.

Creating a membership based site seems like a daunting task at first. If you ever wanted to do this by yourself, then just gave up when you started to think how you are going to put it together using your PHP skills, then this article is for you. We are going to walk you through every aspect of creating a membership based site, with a secure members area protected by password.

The whole process consists of two big parts: user registration and user authentication. In the first part, we are going to cover creation of the registration form and storing the data in a MySQL database. In the second part, we will create the login form and use it to allow users access in the secure area.

Download the code

You can download the whole source code for the registration/login system from the link below:

Configuration & Upload
The ReadMe file contains detailed instructions.

Open the source\include\membersite_config.php file in a text editor and update the configuration. (Database login, your website’s name, your email address etc).

Upload the whole directory contents. Test the register.php by submitting the form.

The registration form

In order to create a user account, we need to gather a minimal amount of information from the user. We need his name, his email address and his desired username and password. Of course, we can ask for more information at this point, but a long form is always a turn-off. So let’s limit ourselves to just those fields.

Here is the registration form:

So, we have text fields for name, email and the password. Note that we are using the for better usability.

Form validation

At this point it is a good idea to put some form validation code in place, so we make sure that we have all the data required to create the user account. We need to check if name and email, and password are filled in and that the email is in the proper format.

Handling the form submission

Now we have to handle the form data that is submitted.

Here is the sequence (see the file fg_membersite.php in the downloaded source):

First, we validate the form submission. Then we collect and ‘sanitize’ the form submission data (always do this before sending email, saving to database etc). The form submission is then saved to the database table. We send an email to the user requesting confirmation. Then we intimate the admin that a user has registered.

Saving the data in the database

Now that we gathered all the data, we need to store it into the database.
Here is how we save the form submission to the database.

Note that you have configured the Database login details in the membersite_config.php file. Most of the cases, you can use “localhost” for database host.
After logging in, we make sure that the table is existing.(If not, the script will create the required table).
Then we make sure that the username and email are unique. If it is not unique, we return error back to the user.

The database table structure

This is the table structure. The CreateTable() function in the fg_membersite.php file creates the table. Here is the code:

function CreateTable() { $qry = "Create Table $this->tablename (". "id_user INT NOT NULL AUTO_INCREMENT ,". "name VARCHAR(128) NOT NULL ,". "email VARCHAR(64) NOT NULL ,". "phone_number VARCHAR(16) NOT NULL ,". "username VARCHAR(16) NOT NULL ,". "password VARCHAR(32) NOT NULL ,". "confirmcode VARCHAR(32) ,". "PRIMARY KEY (id_user)". ")"; if(!mysql_query($qry,$this->connection)) { $this->HandleDBError("Error creating the table \nquery was\n $qry"); return false; } return true; }

The id_user field will contain the unique id of the user, and is also the primary key of the table. Notice that we allow 32 characters for the password field. We do this because, as an added security measure, we will store the password in the database encrypted using MD5. Please note that because MD5 is an one-way encryption method, we won’t be able to recover the password in case the user forgets it.

Inserting the registration to the table

Here is the code that we use to insert data into the database. We will have all our data available in the $formvars array.

function InsertIntoDB(&$formvars) { $confirmcode = $this->MakeConfirmationMd5($formvars["email"]); $insert_query = "insert into ".$this->tablename."(name, email, username, password, confirmcode) values ("" . $this->SanitizeForSQL($formvars["name"]) . "", "" . $this->SanitizeForSQL($formvars["email"]) . "", "" . $this->SanitizeForSQL($formvars["username"]) . "", "" . md5($formvars["password"]) . "", "" . $confirmcode . "")"; if(!mysql_query($insert_query ,$this->connection)) { $this->HandleDBError("Error inserting data to the table\nquery:$insert_query"); return false; } return true; }

Notice that we use PHP function md5() to encrypt the password before inserting it into the database.
Also, we make the unique confirmation code from the user’s email address.

Sending emails

Now that we have the registration in our database, we will send a confirmation email to the user. The user has to click a link in the confirmation email to complete the registration process.

function SendUserConfirmationEmail(&$formvars) { $mailer = new PHPMailer(); $mailer->CharSet = "utf-8"; $mailer->AddAddress($formvars["email"],$formvars["name"]); $mailer->Subject = "Your registration with ".$this->sitename; $mailer->From = $this->GetFromAddress(); $confirmcode = urlencode($this->MakeConfirmationMd5($formvars["email"])); $confirm_url = $this->GetAbsoluteURLFolder()."/confirmreg.php?code=".$confirmcode; $mailer->Body ="Hello ".$formvars["name"]."\r\n\r\n". "Thanks for your registration with ".$this->sitename."\r\n". "Please click the link below to confirm your registration.\r\n". "$confirm_url\r\n". "\r\n". "Regards,\r\n". "Webmaster\r\n". $this->sitename; if(!$mailer->Send()) { $this->HandleError("Failed sending registration confirmation email."); return false; } return true; }

Updates

9th Jan 2012
Reset Password/Change Password features are added
The code is now shared at GitHub .

Welcome back UserFullName(); ?>!

License

The code is shared under LGPL license. You can freely use it on commercial or non-commercial websites.

No related posts.

Comments on this entry are closed.

Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.

HTML Code for registration form

In this example we have shown 9 "Text Field". Size of the Text Box can also be changed as per the requirement.

registration.html

registration form

Registration form

Most companies and businesses want to expand their marketing reach by providing membership subscriptions to patrons while others simply want to have a database that lists down members and loyal clients. Whatever the reason might be, some, if not most, businesses and organizations require sign-ups or registrations.

A registration form is a form containing a variety of fields that require a registrant to be filled out by supplying the information that is needed in the form. The form is then submitted to an individual, a company, a group, or an organization. You can download our sample registration form templates online. We offer a wide array of registration form options ranging from student registration forms to teacher registration forms.

Student Registration Form Templates

New Student Registration Form

Simple Student Registration Form

College Student Registration Form

Free Registration Form Templates

Free Car Show Registration Form

Free Summer Camp Registration Form

Patient Registration Form Templates

New Patient Registration Form

Dental Patient Registration Form

Pediatric Patient Registration Form

Conference Registration Form Templates

Sample Conference Registration Form

Youth Conference Registration Form

Free Conference Registration Form

Church Conference Registration Form

The usages of registration forms can benefit a lot of organizations. As an example, here are some entities that can make use of the specified tool:

Businesses and establishments can provide a registration form to the people who would like to subscribe to the business’ offerings may they be interested on products, programs or services.
Organizations can also give out registration forms to people who are interested to participate in a program, plan, or activity that they have organized.
Schools and other academic institutions can make use of registration forms to gather information about their students.

Using a registration form is a highly efficient method of collecting data that is important to a group or an organization. Below are some key benefits that a registration form offers:

Helps to Quicken the Process of Sorting Things Out – Registration forms help organizers, businesses, or companies save or store information about a participant and properly sort out the data that they are able to collect from participants. This will help them get the details that are necessary to be known if the previous information about a program, a participant’s profile or an event is needed as a reference.

Aids in Developing Customer Support – A registration form allows organizers to store records of a member or a participant on their database or in files. This enables providers to make sure that all necessary information or questions that a member might have are being answered quickly, accurately, and efficiently.

Allows Accurate and Up-to-Date Reporting – The usage of registration forms can affect the safe keeping of information a lot. Having a single document that contains all the registration details can make it easier for establishments to create a database which they may use for a variety of purposes. This way, notification to members or subscribers can easily be given. More so, updates and changes can also be applied in a more efficient manner.

Helps to Alert and Notify Members Easily – Because of the quick development of technology, companies are now known to send out discount and promo alerts to members and subscribers online. Imagine if notifications will be given manually or delivered in the doorsteps of each member. Being able to get the e-mail address and/or contact numbers of members and placing them in a single document can allow establishments to have a message blast that can disseminate information the fastest way possible.

Aids in Broadening Marketing Techniques – Now that companies are able to connect with members and subscribers with just a click of a button, they will also be able to send out advertisements that could help promote their product. Sending out promo codes and special offers is one other way to increase sales and bank on subscribers’ word of mouth to help spread the details about their company.

Provides Flexible Options for Users – This is especially true for registration forms online where they can can easily offer various options for fundraising and donations in connection with an online provider. You can also set up online surveys to help you cater to your members’ preferences. This helps to give you an edge among other groups or companies.

Better Acquainted – Registration forms allow subscribers to share details about them that will help you get to know your members better.

Printable Registration Form Templates

Printable Race Registration Form

Printable Camp Registration Form

Printable Conference Registration Form Word

Vendor Registration Form Template

New Vendor Registration Form

Free Vendor Registration Form

Event Registration Form Templates

Sport Event Registration Form

Church Event Registration Form

Free Event Registration Form Word

Travel Registration Form Templates

Travel Agency Registration Form

Travel Baseball Registration Form

Group Travel Registration Form

Job Registration Form Templates

Job Seeker Registration Form

Job Portal Registration Form

Job Fair Registration Form

How Do I Construct a Registration Form?

Registration forms are not the most complicated forms to create on this planet; however, the way your registration forms are designed can create a psychological effect among your registrants. As ridiculous as it may sound, registration forms are especially vital in companies that wish to market their products through memberships and subscriptions or any type of business that wants to maintain a relationship with a customer.

The effectiveness of a registration form depends on how the entirety of the document has been constructed. It is important to assure that the format, layout, and content of the registration form is easy to understand so people will not lose the interest or desire to fill the information that they are asked to provide. People just do not want to have to answer twenty different questions or fill out a whole personal information form just so they can buy a book online. Gone are the days when people can sit patiently long enough for something – even one-second lags on mobile phones are considered inefficient. Having said that, below are some tips to help you hit two birds with one stone wherein you still get to establish rapport with your clients without them having to lose interest in you or your product:

1. Let Them Understand Why They Need to Register

Let your clients feel and understand how important it is for them to take the time to fill out your registration form. If you are a product or a service provider, you need to let your users thoroughly grasp the concept behind having to spend at least five to ten minutes of their time just to register or sign up with you. A great suggestion that you may incorporate in using a registration form is to give the benefits of filling the document. People tend to provide their information if there are freebies or discounts that will be given to them after the registration. This way, you can get more people who will be interested to get your offer while you get the registration information that you need. One example is how an online photo editor lists down the perks of being a member, such as added editing tools, no pop-up ads, and no watermarks on your photos.

2. Strike Out Unnecessary Fields

One major reason why many people are discouraged to join something that requires registration is because of the long queue – and the even longer amount of data that it takes just to fill out the form. This is especially true for manual registrations wherein the information needs to be provided by hand.

Filling out long forms can be tedious and off-putting that it lowers your chances of bagging subscribers and puts off interested registrants. Forget about all those qualitative date acquisitions that are meant for marketing campaigns. When registering a new user, go for the essential and much-needed information. Focus on the details that you immediately need and then ask for further information down the line. For example, in online registrations, you do not really need to let registrants encode their passwords twice to capture typos or wrong inputs; you can simply add an option for the user to make his password visible to make signing up quicker and hassle-free.

3. Provide Clear Instructions

Studies show that labels positioned above the input fields take less time to fill compared to labels which are left-aligned in input forms. Other studies also argue that inline top-aligned labels are the best method to minimize visual fixations. However, I have found labels placed above each input to be easier to fill out because they have fewer visual fixations, have no visual vagueness, and offer a cleaner and clearer set of directions for the registrant.

A registration form can only be deemed effective and comprehensive if there is an appropriate and understandable instruction that can guide the participants or registrants to easily provide the details that they are asked of. Instructions can make or break the effectiveness of a registration form as inappropriate placement of details can result to misunderstandings or inappropriate use of data.

4. Use Other Options to Thwart Spam

It is essential for registration forms to be precise and concise as people want to have a fast time when answering the tool. Do not make it hard for them to provide their information as it can affect the completion of the content of the registration form. Captcha is sometimes used by companies to ensure that there will be no machine input when registering to their site. This can be irritating to some people especially if the captcha box repetitively appears. You need to make sure that the program or system that you will use to validate a human’s manual input is not that hard to assess and answer. More so, find possible ways to fight spam without getting a lot of your registrant’s time. As an example, instead of using captcha you may use other alternatives that will not put off interested registrants from completely subscribing, such as reCaptcha.

5. Provide Social Media Log In Options

Nowadays, it is already possible for people to log in to their social media accounts in one click. If you will use a registration form that can be answered online, have a setting where your registrants can connect to their social media accounts so filling necessary information will be easier. Your registration process is expected to be faster and easier when it is done online. Hence, you need to make sure that you will give that experience of ease to our registrants.

Registration forms may not seem to be a complex and complicated piece of form or paperwork; however, if you are a business owner, it is one way to improve your sales and marketing strategy and is one way to liven up a group or an organization that you are heading by being able to provide updates and perks.

Business Registration Form Templates

Food Business Registration Form

Sample Business Registration Form

Teacher Registration Form Templates

Teacher Council Registration Form

Teacher Training Registration Form

Teacher Registration Renewal Form

Teacher Registration Application Form

Team Registration Form Templates

Soccer Team Registration Form

Free Team Registration Form

Sports Team Registration Form

Car Registration Form Templates

Car Show Registration Form

Car Club Registration Form

Customer Registration Form Templates

New Customer Registration Form

Free Customer Registration Form

Student Registration Forms

Student registration forms are usually used when a student applies for a new school, a college, or a university. The form usually requires the student to provide his personal information such as his name, address, the names of his previous schools, their addresses, contact information, the number of years the student studied there, as well as emergency contact details. You can choose from our wide array of student registration forms to download here.

Car Show Registration Forms

If you are planning to hold a car show event, you will need to provide registration forms to those who wish to be a part of the show. You can print or download our car show registration form to let interested applicants register themselves. Our sample forms come in Doc format for your easy access.

New Patient Registration Forms

If you are a doctor or a dentist who has a private clinic, you will want to create a database with your patients’ names and medical backgrounds. Using a registration form for new patients can help you properly organize your patient database and lets you accurately manage their information so that you can use these as references for medical conditions, ailments, or other diagnoses. Medical health is a serious issue and anything related to it should be thoroughly and properly documented.

Creating an open communication with your members through the usage of registration forms will help you promote a lasting professional relationship. It is essential for you to identify first whether a member would like to be updated whenever you release new offerings or deals. This way, the process of updating them will not be irritating on their part. May it be a manual registration form or an electronic registration form that you will need, using templates to guide you in formatting the document can provide you an easier time to get an effective and highly-usable registration tool.

Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target . Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.
В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1 .

HTML

Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required ; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.

Теперь о двух хитрых моментах. Вы наверное заметили две ссылки в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).

Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute , чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes .

CSS

Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!

Стилизуем формы, используя CSS3

Во-первых, давайте назначим нашим формам базовый стиль.

#subscribe, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px; } #login{ z-index: 22; }

Здесь мы назначим свойства для шапки:

/**** текст ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } /** На донный момент только webkit поддерживает background-clip:text; **/ #wrapper h1{ background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #wrapper h1:after{ content:" "; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); }

Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text , поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.

Мы также создали тонкую линию под заголовком с помощью элемента:after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.

Теперь давайте позаботимся о полях ввода и придадим им приятный вид.

/**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: rgb(190, 188, 188); font-style: italic; } input { outline: none; }

Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства:active и:focus.

/* все поля исключают submit и checkbox */ #wrapper input:not(){ width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box-sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; } #wrapper input:not():active, #wrapper input:not():focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }

Здесь мы использовали псевдо класс:not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства:focus и:active.

Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы:before и:after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas . Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon ? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.

@font-face { font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont.svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; } /** магический трюк! **/ :after { content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; }

Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon) , чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.

Теперь назначим правила для кнопки отправки формы.

/*стилизуем обе кнопки*/ #wrapper p.button input{ width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transition: all 0.2s linear; } #wrapper p.button input:hover{ background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{ text-align: right; margin: 5px 0; }

Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.

Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:

/* стилизуем чекбокс "запомнить меня"*/ .keeplogin{ margin-top: -5px; } .keeplogin input, .keeplogin label{ display: inline-block; font-size: 12px; font-style: italic; } .keeplogin input#loginkeeping{ margin-right: 5px; } .keeplogin label{ width: 80%; }

Стилизуем подвал формы, используя множественные линейные градиенты, чтобы создать полосатый градиент.

P.change_link{ position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); } #wrapper p.change_link a { display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text-decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; }

Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!

Создаем анимацию

Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:

#register{ z-index: 21; opacity: 0; }

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.

Теперь самое интересное: меняем формы местами, используя псевдо класс:target. Вам нужно понять одну вещь по поводу:target: для перемещения мы будем использовать якоря. Нормальное поведение якоря - прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none . Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; }

Вот, что происходит: когда мы кликаем на кнопку Присоединиться , мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft . Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

Animate{ animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }

Форма, которая “исчезает”, будет иметь анимацию затемнения влево:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{ animation-name: fadeOutLeftBig; } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } }

Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс.animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.

Вот и все, друзья. Надеюсь вам понравился этот туториал!

Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс:target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.

P.S. Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!

Теги: Добавить метки

Id:
Name:
Course:
Branch:
Rollno:
Email_Address:
User_Name:
About Us:
Password: