Подборка логин-панелей

<form class="form-1">
	<p class="field">
		<input type="text" name="login" placeholder="Username or email">
		<i class="icon-user icon-large"></i>
	</p>
		<p class="field">
  		<input type="password" name="password" placeholder="Password">
  		<i class="icon-lock icon-large"></i>
	</p>        
	<p class="submit">
    	<button type="submit" name="submit"><i class="icon-arrow-right icon-large"></i></button>
	</p>
</form>

1

2

3

4

5

6

7

8

9

10

11

12

13

</p>

</p>

</p>

</form>

.form-1 {
    /* Size & position */
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative; /* For the submit button positioning */

    /* Styles */
    box-shadow: 
        0 0 1px rgba(0, 0, 0, 0.3), 
        0 3px 7px rgba(0, 0, 0, 0.3), 
        inset 0 1px rgba(255,255,255,1),
        inset 0 -3px 2px rgba(0,0,0,0.25);
    border-radius: 5px;
    background: linear-gradient(#eeefef, #ffffff 10%);
}

.form-1 .field {
    position: relative; /* For the icon positioning */
}

.form-1 .field i {
    /* Size and position */
    left: 0px;
    top: 0px;
    position: absolute;
    height: 36px;
    width: 36px;

    /* Line */
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);

    /* Styles */
    color: #777777;
    text-align: center;
    line-height: 42px;
    transition: all 0.3s ease-out;
    pointer-events: none;
}

.form-1 input[type=text],
.form-1 input[type=password] {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);

    /* Size and position */
    width: 100%;
    padding: 10px 18px 10px 45px;

    /* Styles */
    border: none; /* Remove the default border */
    box-shadow: 
        inset 0 0 5px rgba(0,0,0,0.1),
        inset 0 3px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
    background: #f9f9f9;
    color: #777;
    transition: color 0.3s ease-out;
}

.form-1 input[type=text] {
    margin-bottom: 10px;
}

.form-1 input[type=text]:hover ~ i,
.form-1 input[type=password]:hover ~ i {
    color: #52cfeb;
}

.form-1 input[type=text]:focus ~ i,
.form-1 input[type=password]:focus ~ i {
    color: #42A2BC;
}

.form-1 input[type=text]:focus,
.form-1 input[type=password]:focus,
.form-1 button[type=submit]:focus {
    outline: none;
}

.form-1 .submit {
    /* Size and position */
    width: 65px;
    height: 65px;
    position: absolute;
    top: 17px;
    right: -25px;
    padding: 10px;
    z-index: 2;

    /* Styles */
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 
        0 0 2px rgba(0,0,0,0.1),
        0 3px 2px rgba(0,0,0,0.1),
        inset 0 -3px 2px rgba(0,0,0,0.2);
}

.form-1 .submit:after {
    /* Size and position */
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: -2px;
    left: 30px;

    /* Styles */
    background: #ffffff;
    
    /* Other masks trick */
    box-shadow: 0 62px white, -32px 31px white;
}

.form-1 button {
    /* Size and position */
    width: 100%;
    height: 100%;
    margin-top: -1px;

    /* Icon styles */
    font-size: 1.4em;
    line-height: 1.75;
    color: white;

    /* Styles */
    border: none; /* Remove the default border */
    border-radius: inherit;
    background: linear-gradient(#52cfeb, #42A2BC);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 1px 2px rgba(0,0,0,0.35),
        inset 0 3px 2px rgba(255,255,255,0.2),
        inset 0 -3px 2px rgba(0,0,0,0.1);

    cursor: pointer;
}

.form-1 button:hover,
.form-1 button[type=submit]:focus {
    background: #52cfeb;
    transition: all 0.3s ease-out;
}

.form-1 button:active {
    background: #42A2BC;
    box-shadow: 
        inset 0 0 5px rgba(0,0,0,0.3),
        inset 0 3px 4px rgba(0,0,0,0.3);
}

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

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

.form-1 {

/* Size & position */

width: 300px;

margin: 60px auto 30px;

padding: 10px;

position: relative; /* For the submit button positioning */

/* Styles */

box-shadow:

0 0 1px rgba(0, 0, 0, 0.3),

0 3px 7px rgba(0, 0, 0, 0.3),

inset 0 1px rgba(255,255,255,1),

inset 0 -3px 2px rgba(0,0,0,0.25);

border-radius: 5px;

background: linear-gradient(#eeefef, #ffffff 10%);

}

.form-1 .field {

position: relative; /* For the icon positioning */

}

.form-1 .field i {

/* Size and position */

left: 0px;

top: 0px;

position: absolute;

height: 36px;

width: 36px;

/* Line */

border-right: 1px solid rgba(0, 0, 0, 0.1);

box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);

/* Styles */

color: #777777;

text-align: center;

line-height: 42px;

transition: all 0.3s ease-out;

pointer-events: none;

}

.form-1 input[type=text],

.form-1 input[type=password] {

font-family: 'Lato', Calibri, Arial, sans-serif;

font-size: 13px;

font-weight: 400;

text-shadow: 0 1px 0 rgba(255,255,255,0.8);

/* Size and position */

width: 100%;

padding: 10px 18px 10px 45px;

/* Styles */

border: none; /* Remove the default border */

box-shadow:

inset 0 0 5px rgba(0,0,0,0.1),

inset 0 3px 2px rgba(0,0,0,0.1);

border-radius: 3px;

background: #f9f9f9;

color: #777;

transition: color 0.3s ease-out;

}

.form-1 input[type=text] {

margin-bottom: 10px;

}

.form-1 input[type=text]:hover ~ i,

.form-1 input[type=password]:hover ~ i {

color: #52cfeb;

}

.form-1 input[type=text]:focus ~ i,

.form-1 input[type=password]:focus ~ i {

color: #42A2BC;

}

.form-1 input[type=text]:focus,

.form-1 input[type=password]:focus,

.form-1 button[type=submit]:focus {

outline: none;

}

.form-1 .submit {

/* Size and position */

width: 65px;

height: 65px;

position: absolute;

top: 17px;

right: -25px;

padding: 10px;

z-index: 2;

/* Styles */

background: #ffffff;

border-radius: 50%;

box-shadow:

0 0 2px rgba(0,0,0,0.1),

0 3px 2px rgba(0,0,0,0.1),

inset 0 -3px 2px rgba(0,0,0,0.2);

}

.form-1 .submit:after {

/* Size and position */

content: "";

width: 10px;

height: 10px;

position: absolute;

top: -2px;

left: 30px;

/* Styles */

background: #ffffff;

/* Other masks trick */

box-shadow: 0 62px white, -32px 31px white;

}

.form-1 button {

/* Size and position */

width: 100%;

height: 100%;

margin-top: -1px;

/* Icon styles */

font-size: 1.4em;

line-height: 1.75;

color: white;

/* Styles */

border: none; /* Remove the default border */

border-radius: inherit;

background: linear-gradient(#52cfeb, #42A2BC);

box-shadow:

inset 0 1px 0 rgba(255,255,255,0.3),

0 1px 2px rgba(0,0,0,0.35),

inset 0 3px 2px rgba(255,255,255,0.2),

inset 0 -3px 2px rgba(0,0,0,0.1);

cursor: pointer;

}

.form-1 button:hover,

.form-1 button[type=submit]:focus {

background: #52cfeb;

transition: all 0.3s ease-out;

}

.form-1 button:active {

background: #42A2BC;

box-shadow:

inset 0 0 5px rgba(0,0,0,0.3),

inset 0 3px 4px rgba(0,0,0,0.3);

}

<form class="form-2">
    <h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
    <p class="float">
        <label for="login"><i class="icon-user"></i>Username</label>
        <input type="text" name="login" placeholder="Username or email">
    </p>
    <p class="float">
        <label for="password"><i class="icon-lock"></i>Password</label>
        <input type="password" name="password" placeholder="Password" class="showpassword"> 
    </p>
    <p class="clearfix"> 
        <a href="#" class="log-twitter">Log in with Twitter</a>    
        <input type="submit" name="submit" value="Log in">
    </p>       
</form>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<label for="login"><i class="icon-user"></i>Username</label>

</p>

<label for="password"><i class="icon-lock"></i>Password</label>

</p>

<a href="#" class="log-twitter">Log in with Twitter</a>

</p>

</form>

.form-2 {
    /* Size and position */
    width: 340px;
    margin: 60px auto 30px;
    padding: 15px;
    position: relative;

    /* Styles */
    background: #fffaf6;
    border-radius: 4px;
    color: #7e7975;
    box-shadow:
        0 2px 2px rgba(0,0,0,0.2),        
        0 1px 5px rgba(0,0,0,0.2),        
        0 0 0 12px rgba(255,255,255,0.4); 
}

.form-2 h1 {
    font-size: 15px;
    font-weight: bold;
    color: #bdb5aa;
    padding-bottom: 8px;
    border-bottom: 1px solid #EBE6E2;
    text-shadow: 0 2px 0 rgba(255,255,255,0.8);
    box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.form-2 h1 .log-in,
.form-2 h1 .sign-up {
    display: inline-block;
    text-transform: uppercase;
}

.form-2 h1 .log-in {
    color: #6c6763;
    padding-right: 2px;
}

.form-2 h1 .sign-up {
    color: #ffb347;
    padding-left: 2px;
}

.form-2 .float {
    width: 50%;
    float: left;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,1);
}

.form-2 .float:first-of-type {
    padding-right: 5px;
}

.form-2 .float:last-of-type {
    padding-left: 5px;
}

.form-2 label {
    display: block;
    padding: 0 0 5px 2px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    font-size: 11px;
}

.form-2 label i {
    margin-right: 5px; /* Gap between icon and text */
    display: inline-block;
    width: 10px;
}

.form-2 input[type=text],
.form-2 input[type=password] {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    display: block;
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
    border: 3px solid #ebe6e2;
    border-radius: 5px;
    transition: all 0.3s ease-out;
}

.form-2 input[type=text]:hover,
.form-2 input[type=password]:hover {
    border-color: #CCC;
}

.form-2 label:hover ~ input {
    border-color: #CCC;
}

.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
    border-color: #BBB;
    outline: none; /* Remove Chrome's outline */
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}


.form-2 input[type=submit],
.form-2 .log-twitter {
    /* Size and position */
    width: 49%;
    height: 38px;
    float: left;
    position: relative;

    /* Styles */
    box-shadow: inset 0 1px rgba(255,255,255,0.3);
    border-radius: 3px;
    cursor: pointer;

    /* Font styles */
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 14px;
    line-height: 38px; /* Same as height */
    text-align: center;
    font-weight: bold;
}

.form-2 input[type=submit] {
    margin-left: 1%;
    background: linear-gradient(#fbd568, #ffb347);
    border: 1px solid #f4ab4c;
    color: #996319;
    text-shadow: 0 1px rgba(255,255,255,0.3);
}

.form-2 .log-twitter {
    margin-right: 1%;
    background: linear-gradient(#34a5cf, #2a8ac4);
    border: 1px solid #2b8bc7;
    color: #ffffff;
    text-shadow: 0 -1px rgba(0,0,0,0.3);
    text-decoration: none;
}

.form-2 input[type=submit]:hover,
.form-2 .log-twitter:hover {
    box-shadow: 
        inset 0 1px rgba(255,255,255,0.3), 
        inset 0 20px 40px rgba(255,255,255,0.15);
}

.form-2 input[type=submit]:active,
.form-2 .log-twitter:active{
    top: 1px;
}

.no-boxshadow .form-2 input[type=submit]:hover {
    background: #ffb347;
}

.no-boxshadow .form-2 .log-twitter:hover {
    background: #2a8ac4;
}

.form-2 p:last-of-type {
    clear: both;    
}

.form-2 .opt {
    text-align: right;
    margin-right: 3px;
}

.form-2 label[for=showPassword] {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 400;
    text-transform: capitalize;
}

.form-2 input[type=checkbox] {
    vertical-align: middle;
    margin: -1px 5px 0 1px;
}

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

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

.form-2 {

/* Size and position */

width: 340px;

margin: 60px auto 30px;

padding: 15px;

position: relative;

/* Styles */

background: #fffaf6;

border-radius: 4px;

color: #7e7975;

box-shadow:

0 2px 2px rgba(0,0,0,0.2),

0 1px 5px rgba(0,0,0,0.2),

0 0 0 12px rgba(255,255,255,0.4);

}

.form-2 h1 {

font-size: 15px;

font-weight: bold;

color: #bdb5aa;

padding-bottom: 8px;

border-bottom: 1px solid #EBE6E2;

text-shadow: 0 2px 0 rgba(255,255,255,0.8);

box-shadow: 0 1px 0 rgba(255,255,255,0.8);

}

.form-2 h1 .log-in,

.form-2 h1 .sign-up {

display: inline-block;

text-transform: uppercase;

}

.form-2 h1 .log-in {

color: #6c6763;

padding-right: 2px;

}

.form-2 h1 .sign-up {

color: #ffb347;

padding-left: 2px;

}

.form-2 .float {

width: 50%;

float: left;

padding-top: 15px;

border-top: 1px solid rgba(255,255,255,1);

}

.form-2 .float:first-of-type {

padding-right: 5px;

}

.form-2 .float:last-of-type {

padding-left: 5px;

}

.form-2 label {

display: block;

padding: 0 0 5px 2px;

cursor: pointer;

text-transform: uppercase;

font-weight: 400;

text-shadow: 0 1px 0 rgba(255,255,255,0.8);

font-size: 11px;

}

.form-2 label i {

margin-right: 5px; /* Gap between icon and text */

display: inline-block;

width: 10px;

}

.form-2 input[type=text],

.form-2 input[type=password] {

font-family: 'Lato', Calibri, Arial, sans-serif;

font-size: 13px;

font-weight: 400;

display: block;

width: 100%;

padding: 5px;

margin-bottom: 5px;

border: 3px solid #ebe6e2;

border-radius: 5px;

transition: all 0.3s ease-out;

}

.form-2 input[type=text]:hover,

.form-2 input[type=password]:hover {

border-color: #CCC;

}

.form-2 label:hover ~ input {

border-color: #CCC;

}

.form-2 input[type=text]:focus,

.form-2 input[type=password]:focus {

border-color: #BBB;

outline: none; /* Remove Chrome's outline */

}

.clearfix:after {

content: "";

display: table;

clear: both;

}

.form-2 input[type=submit],

.form-2 .log-twitter {

/* Size and position */

width: 49%;

height: 38px;

float: left;

position: relative;

/* Styles */

box-shadow: inset 0 1px rgba(255,255,255,0.3);

border-radius: 3px;

cursor: pointer;

/* Font styles */

font-family: 'Lato', Calibri, Arial, sans-serif;

font-size: 14px;

line-height: 38px; /* Same as height */

text-align: center;

font-weight: bold;

}

.form-2 input[type=submit] {

margin-left: 1%;

background: linear-gradient(#fbd568, #ffb347);

border: 1px solid #f4ab4c;

color: #996319;

text-shadow: 0 1px rgba(255,255,255,0.3);

}

.form-2 .log-twitter {

margin-right: 1%;

background: linear-gradient(#34a5cf, #2a8ac4);

border: 1px solid #2b8bc7;

color: #ffffff;

text-shadow: 0 -1px rgba(0,0,0,0.3);

text-decoration: none;

}

.form-2 input[type=submit]:hover,

.form-2 .log-twitter:hover {

box-shadow:

inset 0 1px rgba(255,255,255,0.3),

inset 0 20px 40px rgba(255,255,255,0.15);

}

.form-2 input[type=submit]:active,

.form-2 .log-twitter:active{

top: 1px;

}

.no-boxshadow .form-2 input[type=submit]:hover {

background: #ffb347;

}

.no-boxshadow .form-2 .log-twitter:hover {

background: #2a8ac4;

}

.form-2 p:last-of-type {

clear: both;

}

.form-2 .opt {

text-align: right;

margin-right: 3px;

}

.form-2 label[for=showPassword] {

display: inline-block;

margin-bottom: 10px;

font-size: 11px;

font-weight: 400;

text-transform: capitalize;

}

.form-2 input[type=checkbox] {

vertical-align: middle;

margin: -1px 5px 0 1px;

}

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
			    $(".showpassword").each(function(index,input) {
			        var $input = $(input);
			        $("<p class='opt'/>").append(
			            $("<input type='checkbox' class='showpasswordcheckbox' id='showPassword' />").click(function() {
			                var change = $(this).is(":checked") ? "text" : "password";
			                var rep = $("<input placeholder='Password' type='" + change + "' />")
			                    .attr("id", $input.attr("id"))
			                    .attr("name", $input.attr("name"))
			                    .attr('class', $input.attr('class'))
			                    .val($input.val())
			                    .insertBefore($input);
			                $input.remove();
			                $input = rep;
			             })
			        ).append($("<label for='showPassword'/>").text("Show password")).insertAfter($input.parent());
			    });

			    $('#showPassword').click(function(){
					if($("#showPassword").is(":checked")) {
						$('.icon-lock').addClass('icon-unlock');
						$('.icon-unlock').removeClass('icon-lock');    
					} else {
						$('.icon-unlock').addClass('icon-lock');
						$('.icon-lock').removeClass('icon-unlock');
					}
			    });
			});
		</script>

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

$(function(){

$(".showpassword").each(function(index,input) {

var $input = $(input);

$("<p class='opt'/>").append(

$("<input type='checkbox' class='showpasswordcheckbox' id='showPassword' />").click(function() {

var change = $(this).is(":checked") ? "text" : "password";

var rep = $("<input placeholder='Password' type='" + change + "' />")

.attr("id", $input.attr("id"))

.attr("name", $input.attr("name"))

.attr('class', $input.attr('class'))

.val($input.val())

.insertBefore($input);

$input.remove();

$input = rep;

})

).append($("<label for='showPassword'/>").text("Show password")).insertAfter($input.parent());

});

$('#showPassword').click(function(){

if($("#showPassword").is(":checked")) {

$('.icon-lock').addClass('icon-unlock');

$('.icon-unlock').removeClass('icon-lock');

} else {

$('.icon-unlock').addClass('icon-lock');

$('.icon-lock').removeClass('icon-unlock');

}

});

</script>

<form class="form-3">
    <p class="clearfix">
        <label for="login">Username</label>
        <input type="text" name="login" id="login" placeholder="Username">
    </p>
    <p class="clearfix">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" placeholder="Password"> 
    </p>
    <p class="clearfix">
        <input type="checkbox" name="remember" id="remember">
        <label for="remember">Remember me</label>
    </p>
    <p class="clearfix">
        <input type="submit" name="submit" value="Sign in">
    </p>       
</form>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<label for="login">Username</label>

</p>

<label for="password">Password</label>

</p>

<label for="remember">Remember me</label>

</p>

</p>

</form>

.form-3 {
    font-family: 'Ubuntu', 'Lato', sans-serif;
    font-weight: 400;
    /* Size and position */
    width: 300px;
    position: relative;
    margin: 60px auto 30px;
    padding: 10px;
    overflow: hidden;

    /* Styles */
    background: #111; 
    border-radius: 0.4em;
    border: 1px solid #191919;
    box-shadow: 
        inset 0 0 2px 1px rgba(255,255,255,0.08), 
        0 16px 10px -8px rgba(0, 0, 0, 0.6);
}

.form-3 label {
    /* Size and position */
    width: 50%;
    float: left;
    padding-top: 9px;

    /* Styles */
    color: #ddd;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 #000;
    text-indent: 10px;
    font-weight: 700;
    cursor: pointer;
}

.form-3 input[type=text],
.form-3 input[type=password] {
    /* Size and position */
    width: 50%;
    float: left;
    padding: 8px 5px;
    margin-bottom: 10px;
    font-size: 12px;

    /* Styles */
    background: linear-gradient(#1f2124, #27292c);    
    border: 1px solid #000;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1);
    border-radius: 3px;

    /* Font styles */
    font-family: 'Ubuntu', 'Lato', sans-serif;
    color: #fff;

}

.form-3 input[type=text]:hover,
.form-3 input[type=password]:hover,
.form-3 label:hover ~ input[type=text],
.form-3 label:hover ~ input[type=password] {
    background: #27292c;
}

.form-3 input[type=text]:focus, 
.form-3 input[type=password]:focus {
    box-shadow: inset 0 0 2px #000;
    background: #494d54;
    border-color: #51cbee;
    outline: none; /* Remove Chrome outline */
}

.form-3 p:nth-child(3),
.form-3 p:nth-child(4) {
    float: left;
    width: 50%;
}

.form-3 label[for=remember] {
    width: auto;
    float: none;
    display: inline-block;
    text-transform: capitalize;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0px;
    text-indent: 2px;
}

.form-3 input[type=checkbox] {
    margin-left: 10px;
    vertical-align: middle;
}

.form-3 input[type=submit] {
    /* Width and position */
    width: 100%;
    padding: 8px 5px;
  
    /* Styles */
    border: 1px solid #0273dd; /* Fallback */
    border: 1px solid rgba(0,0,0,0.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 10px 10px rgba(255,255,255,0.1);
    border-radius: 3px;
    background: #38a6f0;
    cursor:pointer;
  
    /* Font styles */
    font-family: 'Ubuntu', 'Lato', sans-serif;
    color: white;
    font-weight: 700;
    font-size: 15px;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}

.form-3 input[type=submit]:hover { 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.form-3 input[type=submit]:active { 
    background: #287db5;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
    border-color: #000; /* Fallback */
    border-color: rgba(0,0,0,0.9);
}

.no-boxshadow .form-3 input[type=submit]:hover {
    background: #2a92d8;
}

/* Gradient line */
.form-3:after {
    /* Size and position */
    content: "";
    height: 1px;
    width: 33%;
    position: absolute;
    left: 20%;
    top: 0;

    /* Styles */
    background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}

/* Small flash */
.form-3:before {
    /* Size and position */
    content: "";
    width: 8px;
    height: 5px;
    position: absolute;
    left: 34%;
    top: -7px;
    
    /* Styles */
    border-radius: 50%;
    box-shadow: 0 0 6px 4px #fff;
}

.form-3 p:nth-child(1):before{
    /* Size and position */
    content: "";
    width: 250px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 45px;

    /* Styles */
    transform: rotate(75deg);
    background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    pointer-events: none;
}

.no-pointerevents .form-3 p:nth-child(1):before {
    display: none;
}

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

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

.form-3 {

font-family: 'Ubuntu', 'Lato', sans-serif;

font-weight: 400;

/* Size and position */

width: 300px;

position: relative;

margin: 60px auto 30px;

padding: 10px;

overflow: hidden;

/* Styles */

background: #111;

border-radius: 0.4em;

border: 1px solid #191919;

box-shadow:

inset 0 0 2px 1px rgba(255,255,255,0.08),

0 16px 10px -8px rgba(0, 0, 0, 0.6);

}

.form-3 label {

/* Size and position */

width: 50%;

float: left;

padding-top: 9px;

/* Styles */

color: #ddd;

font-size: 12px;

text-transform: uppercase;

letter-spacing: 1px;

text-shadow: 0 1px 0 #000;

text-indent: 10px;

font-weight: 700;

cursor: pointer;

}

.form-3 input[type=text],

.form-3 input[type=password] {

/* Size and position */

width: 50%;

float: left;

padding: 8px 5px;

margin-bottom: 10px;

font-size: 12px;

/* Styles */

background: linear-gradient(#1f2124, #27292c);

border: 1px solid #000;

box-shadow:

0 1px 0 rgba(255,255,255,0.1);

border-radius: 3px;

/* Font styles */

font-family: 'Ubuntu', 'Lato', sans-serif;

color: #fff;

}

.form-3 input[type=text]:hover,

.form-3 input[type=password]:hover,

.form-3 label:hover ~ input[type=text],

.form-3 label:hover ~ input[type=password] {

background: #27292c;

}

.form-3 input[type=text]:focus,

.form-3 input[type=password]:focus {

box-shadow: inset 0 0 2px #000;

background: #494d54;

border-color: #51cbee;

outline: none; /* Remove Chrome outline */

}

.form-3 p:nth-child(3),

.form-3 p:nth-child(4) {

float: left;

width: 50%;

}

.form-3 label[for=remember] {

width: auto;

float: none;

display: inline-block;

text-transform: capitalize;

font-size: 11px;

font-weight: 400;

letter-spacing: 0px;

text-indent: 2px;

}

.form-3 input[type=checkbox] {

margin-left: 10px;

vertical-align: middle;

}

.form-3 input[type=submit] {

/* Width and position */

width: 100%;

padding: 8px 5px;

/* Styles */

border: 1px solid #0273dd; /* Fallback */

border: 1px solid rgba(0,0,0,0.4);

box-shadow:

inset 0 1px 0 rgba(255,255,255,0.3),

inset 0 10px 10px rgba(255,255,255,0.1);

border-radius: 3px;

background: #38a6f0;

cursor:pointer;

/* Font styles */

font-family: 'Ubuntu', 'Lato', sans-serif;

color: white;

font-weight: 700;

font-size: 15px;

text-shadow: 0 -1px 0 rgba(0,0,0,0.8);

}

.form-3 input[type=submit]:hover {

box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);

}

.form-3 input[type=submit]:active {

background: #287db5;

box-shadow: inset 0 0 3px rgba(0,0,0,0.6);

border-color: #000; /* Fallback */

border-color: rgba(0,0,0,0.9);

}

.no-boxshadow .form-3 input[type=submit]:hover {

background: #2a92d8;

}

/* Gradient line */

.form-3:after {

/* Size and position */

content: "";

height: 1px;

width: 33%;

position: absolute;

left: 20%;

top: 0;

/* Styles */

background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);

}

/* Small flash */

.form-3:before {

/* Size and position */

content: "";

width: 8px;

height: 5px;

position: absolute;

left: 34%;

top: -7px;

/* Styles */

border-radius: 50%;

box-shadow: 0 0 6px 4px #fff;

}

.form-3 p:nth-child(1):before{

/* Size and position */

content: "";

width: 250px;

height: 100px;

position: absolute;

top: 0;

left: 45px;

/* Styles */

transform: rotate(75deg);

background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));

pointer-events: none;

}

.no-pointerevents .form-3 p:nth-child(1):before {

display: none;

}

<form class="form-4">
    <h1>Login or Register</h1>
    <p>
        <label for="login">Username or email</label>
        <input type="text" name="login" placeholder="Username or email" required>
    </p>
    <p>
        <label for="password">Password</label>
        <input type="password" name='password' placeholder="Password" required> 
    </p>

    <p>
        <input type="submit" name="submit" value="Continue">
    </p>       
</form>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<h1>Login or Register</h1>

<p>

<label for="login">Username or email</label>

</p>

<p>

<label for="password">Password</label>

</p>

<p>

</p>

</form>

.form-4 {
    /* Size and position */
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative;

    /* Font styles */
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    color: white;
    text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}

.form-4 h1 {
    font-size: 22px;
    padding-bottom: 20px;
}

.form-4 input[type=text],
.form-4 input[type=password] {
    /* Size and position */
    width: 100%;
    padding: 8px 4px 8px 10px;
    margin-bottom: 15px;

    /* Styles */
    border: 1px solid #4e3043; /* Fallback */
    border: 1px solid rgba(78,48,67, 0.8);
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    box-shadow: 
        0 1px 0 rgba(255,255,255,0.2), 
        inset 0 1px 1px rgba(0,0,0,0.1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Font styles */
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    color: #fff;
    font-size: 13px;
}

.form-4 input::-webkit-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.form-4 input:-moz-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.form-4 input:-ms-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.form-4 input[type=text]:hover,
.form-4 input[type=password]:hover {
    border-color: #333;
}

.form-4 input[type=text]:focus,
.form-4 input[type=password]:focus,
.form-4 input[type=submit]:focus {
    box-shadow: 
        0 1px 0 rgba(255,255,255,0.2), 
        inset 0 1px 1px rgba(0,0,0,0.1),
        0 0 0 3px rgba(255,255,255,0.15);
    outline: none;
}

/* Fallback */
.no-boxshadow .form-4 input[type=text]:focus,
.no-boxshadow .form-4 input[type=password]:focus {
    outline: 1px solid white;
}

.form-4 input[type=submit] {
    /* Size and position */
    width: 100%;
    padding: 8px 5px;
    
    /* Styles */
    background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));    
    border-radius: 5px;
    border: 1px solid #4e3043;
    box-shadow: 
    	inset 0 1px rgba(255,255,255,0.4), 
    	0 2px 1px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease-out;

    /* Font styles */
    color: white;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    font-size: 16px;
    font-weight: bold;
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
}

.form-4 input[type=submit]:hover {
    box-shadow: 
        inset 0 1px rgba(255,255,255,0.2), 
        inset 0 20px 30px rgba(99,64,86,0.5);
}

/* Fallback */
.no-boxshadow .form-4 input[type=submit]:hover {
    background: #594642;
}

.form-4 label {
    display: none;
    padding: 0 0 5px 2px;
    cursor: pointer;
}

.form-4 label:hover ~ input {
    border-color: #333;
}

.no-placeholder .form-4 label {
    display: block;
}

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

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

.form-4 {

/* Size and position */

width: 300px;

margin: 60px auto 30px;

padding: 10px;

position: relative;

/* Font styles */

font-family: 'Raleway', 'Lato', Arial, sans-serif;

color: white;

text-shadow: 0 2px 1px rgba(0,0,0,0.3);

}

.form-4 h1 {

font-size: 22px;

padding-bottom: 20px;

}

.form-4 input[type=text],

.form-4 input[type=password] {

/* Size and position */

width: 100%;

padding: 8px 4px 8px 10px;

margin-bottom: 15px;

/* Styles */

border: 1px solid #4e3043; /* Fallback */

border: 1px solid rgba(78,48,67, 0.8);

background: rgba(0,0,0,0.15);

border-radius: 2px;

box-shadow:

0 1px 0 rgba(255,255,255,0.2),

inset 0 1px 1px rgba(0,0,0,0.1);

-webkit-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out;

-ms-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

/* Font styles */

font-family: 'Raleway', 'Lato', Arial, sans-serif;

color: #fff;

font-size: 13px;

}

.form-4 input::-webkit-input-placeholder {

color: rgba(37,21,26,0.5);

text-shadow: 0 1px 0 rgba(255,255,255,0.15);

}

.form-4 input:-moz-placeholder {

color: rgba(37,21,26,0.5);

text-shadow: 0 1px 0 rgba(255,255,255,0.15);

}

.form-4 input:-ms-input-placeholder {

color: rgba(37,21,26,0.5);

text-shadow: 0 1px 0 rgba(255,255,255,0.15);

}

.form-4 input[type=text]:hover,

.form-4 input[type=password]:hover {

border-color: #333;

}

.form-4 input[type=text]:focus,

.form-4 input[type=password]:focus,

.form-4 input[type=submit]:focus {

box-shadow:

0 1px 0 rgba(255,255,255,0.2),

inset 0 1px 1px rgba(0,0,0,0.1),

0 0 0 3px rgba(255,255,255,0.15);

outline: none;

}

/* Fallback */

.no-boxshadow .form-4 input[type=text]:focus,

.no-boxshadow .form-4 input[type=password]:focus {

outline: 1px solid white;

}

.form-4 input[type=submit] {

/* Size and position */

width: 100%;

padding: 8px 5px;

/* Styles */

background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));

border-radius: 5px;

border: 1px solid #4e3043;

box-shadow:

inset 0 1px rgba(255,255,255,0.4),

0 2px 1px rgba(0,0,0,0.1);

cursor: pointer;

transition: all 0.3s ease-out;

/* Font styles */

color: white;

text-shadow: 0 1px 0 rgba(0,0,0,0.3);

font-size: 16px;

font-weight: bold;

font-family: 'Raleway', 'Lato', Arial, sans-serif;

}

.form-4 input[type=submit]:hover {

box-shadow:

inset 0 1px rgba(255,255,255,0.2),

inset 0 20px 30px rgba(99,64,86,0.5);

}

/* Fallback */

.no-boxshadow .form-4 input[type=submit]:hover {

background: #594642;

}

.form-4 label {

display: none;

padding: 0 0 5px 2px;

cursor: pointer;

}

.form-4 label:hover ~ input {

border-color: #333;

}

.no-placeholder .form-4 label {

display: block;

}

<form class="form-5 clearfix">
    <p>
        <input type="text" id="login" name="login" placeholder="Username">
        <input type="password" name="password" id="password" placeholder="Password"> 
    </p>
    <button type="submit" name="submit">
    	<i class="icon-arrow-right"></i>
    	<span>Sign in</span>
    </button>     
</form>

1

2

3

4

5

6

7

8

9

10

<p>

</p>

</button>

</form>

.form-5 {
    /* Size and position */
    width: 300px;
    margin: 60px auto 30px;
    position: relative;

    /* Styles */
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1);
}

.form-5 p {
    width: 70%;
    float: left;
    border-radius: 5px 0 0 5px;
    border: 1px solid #fff;
    border-right: none;
}

.form-5 input[type=text],
.form-5 input[type=password] {
    /* Size and position */
    width: 100%;
    height: 50px;
    padding: 0 10px;

    /* Styles */
    border: none; /* Remove the default border */
    background: white; /* Fallback */
    background: rgba(255,255,255,0.2);
    box-shadow: 
        inset 0 0 10px rgba(255,255,255,0.5);

    /* Font styles */
    font-family: 'Montserrat', sans-serif;
    text-indent: 10px;
    color: #ee4c8d;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-size: 20px;       
}

.form-5 input[type=text] {
    border-bottom: 1px solid #fff; /* Fallback */
    border-bottom: 1px solid rgba(255,255,255,0.7);
    border-radius: 5px 0 0 0;
}

.form-5 input[type=password] {
    border-top: 1px solid #CCC; /* Fallback */
    border-top: 1px solid rgba(0,0,0,0.1);
    border-radius: 0 0 0 5px;
}

.form-5 input[type=text]:hover,
.form-5 input[type=password]:hover,
.form-5 input[type=text]:focus,
.form-5 input[type=password]:focus {
    background: #f7def7; /* Fallback */
    background: rgba(255,255,255,0.4);
    outline: none;
}

.form-5 input::-webkit-input-placeholder {
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: 'Handlee', cursive;
}

.form-5 input:-moz-placeholder {
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: 'Handlee', cursive;
}

.form-5 input:-ms-input-placeholder {
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: 'Handlee', cursive;
}

.form-5 button {
    /* Size and position */
    width: 30%;
    height: 102px;
    float: left;
    position: relative;
    overflow: hidden;

    /* Styles */
    background: 
    	url(../images/noise.png), 
    	radial-gradient(ellipse at center, #ee4c8d 0%,#b53467 100%);
    border-radius: 0 5px 5px 0;
    box-shadow:
        inset 0 0 4px rgba(255, 255, 255, 0.7), 
        inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    border: none;
    border-left: 1px solid silver;
    cursor: pointer;  
    line-height: 102px; /* Same as height */
}

.form-5 button i {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -20px;
    font-size: 64px;
    line-height: 109px;
    color: #8d1645;
    opacity: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    transition: all 0.2s ease-out;
}

.form-5 button span {
    display: block;

    /* Font styles */ 
    color: #8d1645;
    font-family: 'Montserrat', Arial, sans-serif; 
    font-size: 20px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    transform: rotate(-90deg);
    transition: all 0.2s linear;
}

.form-5 button:focus {
    outline: none;
}

.form-5 button:hover span,
.form-5 button:focus span {
    opacity: 0;
    transform: rotate(-90deg) translateY(-20px);
}

.form-5 button:hover i,
.form-5 button:focus i {
    opacity: 0.5;
    left: 0;
    transition-delay: 0.2s;
}

/* Click on button */

.form-5 button:active span,
.form-5 button:active i {
    transition: none; 
}

.form-5 button:active span {
    opacity: 0;
}

.form-5 button:active i {
    opacity: 0.5;
    left: 0;
    color: #fff;
}

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

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

.form-5 {

/* Size and position */

width: 300px;

margin: 60px auto 30px;

position: relative;

/* Styles */

border-radius: 5px;

box-shadow: 0 0 5px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1);

}

.form-5 p {

width: 70%;

float: left;

border-radius: 5px 0 0 5px;

border: 1px solid #fff;

border-right: none;

}

.form-5 input[type=text],

.form-5 input[type=password] {

/* Size and position */

width: 100%;

height: 50px;

padding: 0 10px;

/* Styles */

border: none; /* Remove the default border */

background: white; /* Fallback */

background: rgba(255,255,255,0.2);

box-shadow:

inset 0 0 10px rgba(255,255,255,0.5);

/* Font styles */

font-family: 'Montserrat', sans-serif;

text-indent: 10px;

color: #ee4c8d;

text-shadow: 0 1px 2px rgba(0,0,0,0.3);

font-size: 20px;

}

.form-5 input[type=text] {

border-bottom: 1px solid #fff; /* Fallback */

border-bottom: 1px solid rgba(255,255,255,0.7);

border-radius: 5px 0 0 0;

}

.form-5 input[type=password] {

border-top: 1px solid #CCC; /* Fallback */

border-top: 1px solid rgba(0,0,0,0.1);

border-radius: 0 0 0 5px;

}

.form-5 input[type=text]:hover,

.form-5 input[type=password]:hover,

.form-5 input[type=text]:focus,

.form-5 input[type=password]:focus {

background: #f7def7; /* Fallback */

background: rgba(255,255,255,0.4);

outline: none;

}

.form-5 input::-webkit-input-placeholder {

color: #fff;

text-shadow: 0 -1px 1px rgba(0,0,0,0.4);

font-family: 'Handlee', cursive;

}

.form-5 input:-moz-placeholder {

color: #fff;

text-shadow: 0 -1px 1px rgba(0,0,0,0.4);

font-family: 'Handlee', cursive;

}

.form-5 input:-ms-input-placeholder {

color: #fff;

text-shadow: 0 -1px 1px rgba(0,0,0,0.4);

font-family: 'Handlee', cursive;

}

.form-5 button {

/* Size and position */

width: 30%;

height: 102px;

float: left;

position: relative;

overflow: hidden;

/* Styles */

background:

url(../images/noise.png),

radial-gradient(ellipse at center, #ee4c8d 0%,#b53467 100%);

border-radius: 0 5px 5px 0;

box-shadow:

inset 0 0 4px rgba(255, 255, 255, 0.7),

inset 0 0 0 1px rgba(0, 0, 0, 0.2);

border: none;

border-left: 1px solid silver;

cursor: pointer;

line-height: 102px; /* Same as height */

}

.form-5 button i {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: -20px;

font-size: 64px;

line-height: 109px;

color: #8d1645;

opacity: 0;

text-shadow: 0 1px 0 rgba(255,255,255,0.4);

transition: all 0.2s ease-out;

}

.form-5 button span {

display: block;

/* Font styles */

color: #8d1645;

font-family: 'Montserrat', Arial, sans-serif;

font-size: 20px;

text-shadow: 0 1px 0 rgba(255,255,255,0.4);

transform: rotate(-90deg);

transition: all 0.2s linear;

}

.form-5 button:focus {

outline: none;

}

.form-5 button:hover span,

.form-5 button:focus span {

opacity: 0;

transform: rotate(-90deg) translateY(-20px);

}

.form-5 button:hover i,

.form-5 button:focus i {

opacity: 0.5;

left: 0;

transition-delay: 0.2s;

}

/* Click on button */

.form-5 button:active span,

.form-5 button:active i {

transition: none;

}

.form-5 button:active span {

opacity: 0;

}

.form-5 button:active i {

opacity: 0.5;

left: 0;

color: #fff;

}

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
		<script type="text/javascript">
		$(function(){
			$('input, textarea').placeholder();
		});
		</script>

1

2

3

4

5

6

7

$(function(){

$('input, textarea').placeholder();

});

</script>

Подборка логин-панелей

Читайте также:

Добавить комментарий Отменить ответ

Счетчик

Мета

Случайные записи

Подборка логин-панелей

Читайте также:

Простое и стильное полноэкранное меню для сайта

Адаптивное выпадающее меню на CSS3

Галерея для сайта на CSS3 (В виде табов)

Добавить комментарий Отменить ответ

Счетчик

Мета

Случайные записи