Retro-Hosting Webinterface

Ertispha

Zitat von RandomAxe

Es ist und bleibt ein geiles Konzept!
Einfach nur Nice

Danke

Zitat von Lukadora

sieht recht schick aus

Dankeschön bei Verbesserungsvorschlägen bitte hier Posten

Zitat von Peek

Dann kommen wieder 1000 Kiddies die 10000 Idioten mit ihren Retro-Hosting Seiten verarschen. Sie bauen ihnen ein Hotel für 20€ und der Server kostet gerade mal 5€ und der Käufer bekommt keine Daten. Mach das WebInterface für was anderes, dann bekommst du sogar viel Geld, wenn es gut ist.

Wieso? Sie bekommen Datenbankzugriff und wenn sie einen Wunsch oder sonstiges haben, kontaktieren sie mich.

NHGraphics

Sieht echt Geil aus!

Auf jeden Fall sehr gut gelungen

Stickyfingaz

Wann kommt endlich ein neues Update raus?
Ich möchte es mal gerne ausprobieren!

Splaze

Danke für dein Live Demo
Sieht top aus

Ertispha

Danke Ich werde die Homepage heute weiter programmieren, sofern ich die Zeit dafür finde.

atechment

Ich habe mir grade mal den queltext angeschaut und sehe, dass du sehr viele Sachen nicht selbst geschrieben hast bzw. einfach von anderen Seiten geklaut hast.
Wenn du das bestreitest könnte ich dir ein paar beispiele nennen ;). Aber sonst gut geklaut ;).

Can.

siehst verdammt gut aus

Ertispha

Zitat von atechment

Ich habe mir grade mal den queltext angeschaut und sehe, dass du sehr viele Sachen nicht selbst geschrieben hast bzw. einfach von anderen Seiten geklaut hast.
Wenn du das bestreitest könnte ich dir ein paar beispiele nennen ;). Aber sonst gut geklaut ;).

Ja ist es das also ;).
Die Buttons? Die Standard CSS Files?

atechment

Zitat von JQNI

Ja ist es das also ;).
Die Buttons? Die Standard CSS Files?

Verstehe nicht was du damit meinst.? Ich habe gesagt kann dir paar beispiele nennen.

Ertispha

Zitat von atechment

Verstehe nicht was du damit meinst.? Ich habe gesagt kann dir paar beispiele nennen.

Du weißt nicht mal was ich meine.?
Dann nenn sie mal bitte.

atechment

Siehe dir einfach nur diesen Code an:

Spoiler anzeigen

*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}

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

.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: white; /* Fallback */
background: -moz-linear-gradient(#eeefef, #ffffff 10%);
background: -ms-linear-gradient(#eeefef, #ffffff 10%);
background: -o-linear-gradient(#eeefef, #ffffff 10%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));
background: -webkit-linear-gradient(#eeefef, #ffffff 10%);
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;
-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;
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;
-webkit-transition: color 0.3s ease-out;
-moz-transition: color 0.3s ease-out;
-ms-transition: color 0.3s ease-out;
-o-transition: color 0.3s ease-out;
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: #52cfeb; /* Fallback */
background: -moz-linear-gradient(#52cfeb, #42A2BC);
background: -ms-linear-gradient(#52cfeb, #42A2BC);
background: -o-linear-gradient(#52cfeb, #42A2BC);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#52cfeb), to(#42A2BC));
background: -webkit-linear-gradient(#52cfeb, #42A2BC);
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;
-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;
}

.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);
}

/* Demo 2 */

.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;
-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;
}

.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 */
}

.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: #fbd568; /* Fallback */
background: -moz-linear-gradient(#fbd568, #ffb347);
background: -ms-linear-gradient(#fbd568, #ffb347);
background: -o-linear-gradient(#fbd568, #ffb347);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fbd568), to(#ffb347));
background: -webkit-linear-gradient(#fbd568, #ffb347);
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: #34a5cf; /* Fallback */
background: -moz-linear-gradient(#34a5cf, #2a8ac4);
background: -ms-linear-gradient(#34a5cf, #2a8ac4);
background: -o-linear-gradient(#34a5cf, #2a8ac4);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4));
background: -webkit-linear-gradient(#34a5cf, #2a8ac4);
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;
}

/* Fallback fro broswers that don't support box shadows */
.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;
}

/* Demo 3 */

.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: #1f2124; /* Fallback */
background: -moz-linear-gradient(#1f2124, #27292c);
background: -ms-linear-gradient(#1f2124, #27292c);
background: -o-linear-gradient(#1f2124, #27292c);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));
background: -webkit-linear-gradient(#1f2124, #27292c);
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;
}

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

/* Styles */
background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));
background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}

.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 */
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
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;
}

/* Demo 4 */

.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;
}

/* Placeholder style (from html - Change an input's HTML5 placeholder color with CSS - Stack Overflow) */

.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: #634056;
background: -moz-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
background: -ms-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
background: -o-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(99,64,86,0.5)), to(rgba(76,49,65,0.7)));
background: -webkit-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
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;
-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 */
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;
}

/* Demo 5 */

.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;
}

/* Placeholder style (from html - Change an input's HTML5 placeholder color with CSS - Stack Overflow) */

.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: #ee4c8d;
background: url(http://www.gameshock.in/retrohosting/a…mages/noise.png), -moz-radial-gradient(center, ellipse cover, #ee4c8d 0%, #b53467 100%);
background: url(http://www.gameshock.in/retrohosting/a…mages/noise.png), -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ee4c8d), color-stop(100%,#b53467));
background: url(http://www.gameshock.in/retrohosting/a…mages/noise.png), -webkit-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
background: url(http://www.gameshock.in/retrohosting/a…mages/noise.png), -o-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
background: url(http://www.gameshock.in/retrohosting/a…mages/noise.png), -ms-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
background: url(http://www.gameshock.in/retrohosting/a…mages/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;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
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);

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-backface-visibility: hidden;
}

/* Focus and hover on button */

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

.form-5 button:hover span,
.form-5 button:focus span {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: rotate(-90deg) translateY(-20px);
-moz-transform: rotate(-90deg) translateY(-20px);
-ms-transform: rotate(-90deg) translateY(-20px);
-o-transform: rotate(-90deg) translateY(-20px);
transform: rotate(-90deg) translateY(-20px);
}

.form-5 button:hover i,
.form-5 button:focus i {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
left: 0;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}

/* Click on button */

.form-5 button:active span,
.form-5 button:active i {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}

.form-5 button:active span {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}

.form-5 button:active i {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
left: 0;
color: #fff;
}
</style>

Ertispha

Zitat von atechment

Siehe dir einfach nur diesen Code an:

Spoiler anzeigen

PHP

*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}


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


.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: white; /* Fallback */
    background: -moz-linear-gradient(#eeefef, #ffffff 10%);
    background: -ms-linear-gradient(#eeefef, #ffffff 10%);
    background: -o-linear-gradient(#eeefef, #ffffff 10%);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));
    background: -webkit-linear-gradient(#eeefef, #ffffff 10%);
    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;
    -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;
    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;
    -webkit-transition: color 0.3s ease-out;
    -moz-transition: color 0.3s ease-out;
    -ms-transition: color 0.3s ease-out;
    -o-transition: color 0.3s ease-out;
    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: #52cfeb; /* Fallback */
    background: -moz-linear-gradient(#52cfeb, #42A2BC);
    background: -ms-linear-gradient(#52cfeb, #42A2BC);
    background: -o-linear-gradient(#52cfeb, #42A2BC);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#52cfeb), to(#42A2BC));
    background: -webkit-linear-gradient(#52cfeb, #42A2BC);
    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;
    -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;
}


.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);
}




/* Demo 2 */


.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;
    -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;
}


.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 */
}


.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: #fbd568; /* Fallback */
    background: -moz-linear-gradient(#fbd568, #ffb347);
    background: -ms-linear-gradient(#fbd568, #ffb347);
    background: -o-linear-gradient(#fbd568, #ffb347);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fbd568), to(#ffb347));
    background: -webkit-linear-gradient(#fbd568, #ffb347);
    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: #34a5cf; /* Fallback */
    background: -moz-linear-gradient(#34a5cf, #2a8ac4);
    background: -ms-linear-gradient(#34a5cf, #2a8ac4);
    background: -o-linear-gradient(#34a5cf, #2a8ac4);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4));
    background: -webkit-linear-gradient(#34a5cf, #2a8ac4);
    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;
}


/* Fallback fro broswers that don't support box shadows */
.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;
}


/* Demo 3 */


.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: #1f2124; /* Fallback */
    background: -moz-linear-gradient(#1f2124, #27292c);
    background: -ms-linear-gradient(#1f2124, #27292c);
    background: -o-linear-gradient(#1f2124, #27292c);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));
    background: -webkit-linear-gradient(#1f2124, #27292c);
    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;
}


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


    /* Styles */
    background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));
    background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}


.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 */
    -webkit-transform: rotate(75deg);
    -moz-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    -o-transform: rotate(75deg);
    transform: rotate(75deg);
    background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    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;
}


/* Demo 4 */


.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;
}


/* Placeholder style (from http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) */


.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: #634056;
    background: -moz-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
    background: -ms-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
    background: -o-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(99,64,86,0.5)), to(rgba(76,49,65,0.7)));
    background: -webkit-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
    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;
    -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 */
    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;
}


/* Demo 5 */


.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;
}


/* Placeholder style (from http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) */


.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: #ee4c8d;
    background: url(http://www.gameshock.in/retrohosting/admin/css/../images/noise.png), -moz-radial-gradient(center, ellipse cover, #ee4c8d 0%, #b53467 100%);
    background: url(http://www.gameshock.in/retrohosting/admin/css/../images/noise.png), -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ee4c8d), color-stop(100%,#b53467));
    background: url(http://www.gameshock.in/retrohosting/admin/css/../images/noise.png), -webkit-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
    background: url(http://www.gameshock.in/retrohosting/admin/css/../images/noise.png), -o-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
    background: url(http://www.gameshock.in/retrohosting/admin/css/../images/noise.png), -ms-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
    background: url(http://www.gameshock.in/retrohosting/admin/css/../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;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    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);


    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-backface-visibility: hidden;
}


/* Focus and hover on button */


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


.form-5 button:hover span,
.form-5 button:focus span {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: rotate(-90deg) translateY(-20px);
    -moz-transform: rotate(-90deg) translateY(-20px);
    -ms-transform: rotate(-90deg) translateY(-20px);
    -o-transform: rotate(-90deg) translateY(-20px);
    transform: rotate(-90deg) translateY(-20px);
}


.form-5 button:hover i,
.form-5 button:focus i {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    left: 0;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s;
}


/* Click on button */


.form-5 button:active span,
.form-5 button:active i {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none; 
}


.form-5 button:active span {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}


.form-5 button:active i {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    left: 0;
    color: #fff;
}

Alles anzeigen

Das sind Standard CSS Files, die man sich überall im Internet herunterladen kann. Sie helfen Entwicklern das sie eine CSS Basis haben auf der sie Programmieren können.

Zitat von JQNI

Zitat von »atechment«

Ich habe mir grade mal den queltext angeschaut und sehe, dass du sehr viele Sachen nicht selbst geschrieben hast bzw. einfach von anderen Seiten geklaut hast.
Wenn du das bestreitest könnte ich dir ein paar beispiele nennen ;). Aber sonst gut geklaut ;).
Ja ist es das also ;).
Die Buttons? Die Standard CSS Files?

Wenn man keine ahnung hat, bitte ruhig sein, und mich nicht falscher dinge beschuldigen.

atechment

Zitat von JQNI

Das sind Standard CSS Files, die man sich überall im Internet herunterladen kann. Sie helfen Entwicklern das sie eine CSS Basis haben auf der sie Programmieren können.

Wenn man keine ahnung hat, bitte ruhig sein.

Nene, wenn du keine Ahnung hast, dann sollst du mal den Mund halten. Ich kenne mich gut genug aus mit CSS, habe nicht umsonst CSS,PHP,HTML und JS 2 Jahre lang gelernt.
Aber nun gut das tut nichts zur Sache. Es ist halt meine Meihung, nun aber zurück zum Topic.

Ertispha

Zitat von JQNI

Ja ist es das also ;).
Die Buttons? Die Standard CSS Files?

Zitat von atechment

Nene, wenn du keine Ahnung hast, dann sollst du mal den Mund halten. Ich kenne mich gut genug aus mit CSS, habe nicht umsonst CSS,PHP,HTML und JS 2 Jahre lang gelernt.
Aber nun gut das tut nichts zur Sache. Es ist halt meine Meihung, nun aber zurück zum Topic.

Glaube ich dir direkt aufs Wort. Es ist deine Meinung das ich etwas klaue, wenn ich etwas kostenlos und legal aus dem Internet herunterlade? Wirklich schlaue, realistische und 100% nachvollziehbare Meinung, wirklich

Splaze

atechment

Wieso so neidisch?

atechment

Zitat von Splaze

atechment

Wieso so neidisch?

Ehmm, was hat das mit neid zu tuen bzw. weißt du überhaupt was "neidisch" bedeutet?
Ich bin nicht neidisch warum sollte ich auch erkläre es mir, bitte?

Splaze

Zitat von atechment

Ehmm, was hat das mit neid zu tuen bzw. weißt du überhaupt was "neidisch" bedeutet?
Ich bin nicht neidisch warum sollte ich auch erkläre es mir, bitte?

Du flammst wie ein kleines Bambi Mädchen hier rum, der will nur seine ruhe und etwas auf die beine stellen. Dann kommst du und hatest wie der letzte, kiddie in der szene
... Wenn du was flammen willst dann eröffne deinen eigenen Beitrag und lass dort deine hater kommentare los

atechment

Zitat von Splaze

Du flammst wie ein kleines Bambi Mädchen hier rum, der will nur seine ruhe und etwas auf die beine stellen. Dann kommst du und hatest wie der letzte, kiddie in der szene
... Wenn du was flammen willst dann eröffne deinen eigenen Beitrag und lass dort deine hater kommentare los

Ich flamme nicht sage nur tatsachen. Bin kein Kiddy, sorry. Bin 17 Jahre alt. Ich will auch keinen hier runtermachen o.s.ä.!
Ich finde einfach nur etwas von anderen Seiten klauen, dann in seine Seite einbauen einfach nur scheisse. Bisschen PHP reingeschrieben und fertig der jenige, der soll so etwas selber schreiben und
sowas nennt man nciht Programmieren ;).

Ertispha

Zitat von Splaze

Du flammst wie ein kleines Bambi Mädchen hier rum, der will nur seine ruhe und etwas auf die beine stellen. Dann kommst du und hatest wie der letzte, kiddie in der szene
... Wenn du was flammen willst dann eröffne deinen eigenen Beitrag und lass dort deine hater kommentare los

Meine meinung

Zitat von atechment

Zitat von »Splaze«

Zitat von »atechment«

Zitat von »Splaze«

atechment

Wieso so neidisch?

Ehmm, was hat das mit neid zu tuen bzw. weißt du überhaupt was "neidisch" bedeutet?
Ich bin nicht neidisch warum sollte ich auch erkläre es mir, bitte?
Du flammst wie ein kleines Bambi Mädchen hier rum, der will nur seine ruhe und etwas auf die beine stellen. Dann kommst du und hatest wie der letzte, kiddie in der szene
... Wenn du was flammen willst dann eröffne deinen eigenen Beitrag und lass dort deine hater kommentare los

Ich flamme nicht sage nur tatsachen. Bin kein Kiddy, sorry. Bin 17 Jahre alt. Ich will auch keinen hier runtermachen o.s.ä.!
Ich finde einfach nur etwas von anderen Seiten klauen, dann in seine Seite einbauen einfach nur scheisse. Bisschen PHP reingeschrieben und fertig der jenige, der soll so etwas selber schreiben und
sowas nennt man nciht Programmieren ;).

Alles anzeigen

Oh junge man... du hast meinen Post von oben nicht gelesen oder?

atechment

Zitat von JQNI

Meine meinung

Oh junge man... du hast meinen Post von oben nicht gelesen oder?

Dir ist einfach nich mehr zu Helfen "Ober PRO".

Retro-Hosting Webinterface

Jetzt mitmachen!

Tags

Benutzer online in diesem Thema