Допоможіть розібрати код

Знайшов ідеально підходящу для мене форму авторизації.Але є моменти які мені не зрозумілі.

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,900);
* {
  user-select: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  overflow: -moz-scrollbars-vertical;
  overflow-y: scroll;
}

body {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  background: #221662;
  color: white;
}

.login {
  position: absolute;
  top: 70%;
  left: 50%;
  margin: -150px 0 0 -150px;
  width: 300px;
  height: 300px;
  color: rgba(255, 255, 255, 0.85);
  display: inline-block;
  font-size: 16px;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 10px;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);
  box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);
  border: 1px solid #000;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.3)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
}
.login h2 {
  margin: .5em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  font-weight: 900;
}
.login input,
.login label,
.login .extra {
  outline: none;
  position: absolute;
}

.user,
.password {
  font-size: 150%;
  color: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 45px;
  padding: .3em 20px .3em 40px;
  width: 270px;
  background: rgba(0, 0, 0, 0.3);
  border: 0;
  border-radius: 25px;
  box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.8) inset;
}

.password {
  padding: .3em 70px .3em 40px;
}

[for="user"],
.user {
  top: 70px;
}

[for="password"],
.password,
input[type="submit"] {
  top: 150px;
}

[for="password"],
[for="user"] {
  text-indent: -9999px;
}
[for="password"]:before,
[for="user"]:before {
  text-indent: 0;
  position: absolute;
  top: 12px;
  left: 15px;
  font-size: 120%;
  z-index: 1;
}

input[type="submit"] {
  right: 17px;
  height: 43px;
  width: 65px;
  background-color: #6bac14;
  background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #8ff704), color-stop(100%, #1c8700));
  background-image: -webkit-linear-gradient(to bottom, #8ff704, #1c8700);
  background-image: -moz-linear-gradient(to bottom, #8ff704, #1c8700);
  background-image: -o-linear-gradient(to bottom, #8ff704, #1c8700);
  background-image: linear-gradient(to bottom, #8ff704, #1c8700);
  border: 0;
  border-radius: 0 25px 25px 0;
  box-shadow: 0 5px 2px #a6ee40 inset, 1px 1px 0 rgba(0, 0, 0, 0.5);
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  text-align: center;
  cursor:pointer;
}

input[type="submit"]:hover {
  opacity:0.9;
}

label[for="remember"] {
  top: 210px;
  left: 40%;
  cursor: pointer;
  white-space: nowrap;
}

#remember {
  visibility: hidden;
}

.remember:before, .remember:after {
  visibility: visible;
  content: '';
  position: absolute;
  left: -35px;
  top: 4px;
}
.remember:before {
  right: -2px;
  width: 30px;
  height: 15px;
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.2)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
  background-image: linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.remember:after {
  top: 2px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e5e5e5), color-stop(100%, #878787));
  background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #878787 100%);
  background-image: -moz-linear-gradient(top, #e5e5e5 0%, #878787 100%);
  background-image: -o-linear-gradient(top, #e5e5e5 0%, #878787 100%);
  background-image: linear-gradient(top, #e5e5e5 0%, #878787 100%);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: inset 0px 1px 1px white, 0 1px 1px rgba(0, 0, 0, 0.8);
  right: 11px;
}

#remember:checked + .remember:before {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c25830), color-stop(100%, #f69c3c));
  background-image: -webkit-linear-gradient(top, #c25830 0%, #f69c3c 100%);
  background-image: -moz-linear-gradient(top, #c25830 0%, #f69c3c 100%);
  background-image: -o-linear-gradient(top, #c25830 0%, #f69c3c 100%);
  background-image: linear-gradient(top, #c25830 0%, #f69c3c 100%);
}
#remember:checked + .remember:after {
  left: -21px;
  font-family: FontAwesome;
  content: '\f00c';
  color: rgba(0, 0, 0, 0.4);
}

.extra {
  bottom: 0;
  width: 100%;
  height: 50px;
  background: rgba(0, 0, 0, 0.3);
  left: 0;
  border-radius: 0 0 10px 10px;
  -webkit-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 0 0px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 0 0px rgba(255, 255, 255, 0.3);
  box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 0 0px rgba(255, 255, 255, 0.3);
  border-top: 1px solid #000;
  word-spacing: -1;
}
.extra a {
  display: inline-block;
  text-decoration: none;
  height: 100%;
}
.extra a.facebook, .extra a.googlePlus {
  top: 0;
  background-position: left top;
  background-repeat: no-repeat;
  width: 49px;
  text-indent: 9999px;
  position: absolute;
  top: 0;
  right: 0;
}

.extra a.facebook:hover, .extra a.googlePlus:hover {
  opacity:0.9;
}

.extra a.facebook:before, .extra a.googlePlus:before {
  position: absolute;
  top: 7px;
  left: 12px;
  text-indent: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 180%;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.extra a.googlePlus {
  border-radius: 0 0 10px 0;
  right: 0;
}
.extra a.facebook {
  right: 50px;
}
.extra a.facebook:before {
  left: 19px;
}
.extra a.forgetPassword {
  width: 200px;
  color: #fff;
  line-height: 45px;
  text-align: left;
  padding-left: 25px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.extra a.forgetPassword:before {
  font-family: FontAwesome;
  content: '\f0e2';
  padding-right: 5px;
}

<form id="login" class="login"name = 'myform' action = 'req.php' method = 'post'>
    <h2>Вхід у гру</h2>
    <label for="user" class="icon-user">Логін:</label>
    <input class="user" id="user" name = 'login'/>
    <label for="password" class="icon-lock">Пароль:</label>
    <input type="password" class="password" id="password" name = 'pass'/>
    <label for="remember"><input type="checkbox" id="remember" /><span class="remember"/>Запам'ятати мене</label>
    <input type="submit" value="Вхід" />
    <div class="extra">
        <a href="#" class="forgetPassword">Зареєструватися</a>

Мені як новачку багато не зрозуміло.Просто вчити по сайтах та книжках результату не дають.Треба практика.От беру коди та розбираю - так краще запам'ятовується...
Поясніть оце:

1.Що це означає?

* {
  user-select: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Де взяли селектор "*"?

2.Що робить оцей код:

border-radius: 10px;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);
  box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);

  background-color: rgba(0, 0, 0, 0.1);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.3)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));

3.Що означають квадратні дужки, наприклад

[for="user"]

або

[type="submit"]

4.Як зрозуміти

text-indent: -9999px;

.Як це "-9999px"

5.Що робить ":before"?

6.І можете тикнути пальцем в коді, де прописується, щоб біля форм були іконки замість слів, а також де прописується чекбокс.

Буду надзвичайно радий!

* - http://htmlbook.ru/css/selector/universal

box-sizing - http://htmlbook.ru/css/box-sizing

*{
box-sizing
} - для всіх задати бокс зайзінг

border-radius - http://htmlbook.ru/css/border-radius

background-clip - http://htmlbook.ru/css/background-clip

box-shadow - http://htmlbook.ru/css/box-shadow

-webkit-linear-gradient - http://htmlbook.ru/css/-webkit-linear-gradient

[for="user"] - http://htmlbook.ru/css/selector/attr

text-indent - http://htmlbook.ru/css/text-indent (відсуває текст за межі -9999px)

before - http://htmlbook.ru/css/before

чекбокс - http://htmlbook.ru/html/input/checked

форма це всі елементи які в неї входять (<form>інпути,чекпокси,текстареї,лейбли і так далі</form>), якщо іконки до інпутів то є багато способів(імейдж,спан,бекграунд той самий біфоор)

ось буде дуже корисно http://htmlbook.ru/css

Ласкаво просимо!

Повідомлення: 5

1 Тема від Monolith 17.10.2014 14:05:56 Востаннє редагувалося Monolith (17.10.2014 14:07:06)

Тема: Допоможіть розібрати код

2 Відповідь від Q-bart 17.10.2014 14:35:03

Re: Допоможіть розібрати код

3 Відповідь від Master_Sergius 17.10.2014 20:34:02

Re: Допоможіть розібрати код

4 Відповідь від Q-bart 18.10.2014 13:38:13 Востаннє редагувалося Q-bart (18.10.2014 13:38:41)

Re: Допоможіть розібрати код

5 Відповідь від Key 29.10.2014 16:43:07

Re: Допоможіть розібрати код

Повідомлення: 5

Переглядають тему: 1 гість, 0 користувачів