Μετάβαση στο κύριο περιεχόμενο

Αναρτήσεις

Εμφάνιση αναρτήσεων με την ετικέτα Login

Simple Login Form

DEMO
Αντιγραφή και επικόλληση τον παρακάτω κώδικα, μπορείτε να το προσαρμόσετε στα μετρα σας και στην εμφάνιση στην δικη σας σελίδα.

CODE: CSSHTML

<style>
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

/* FoulsCode.com */

::selection {
color: #fff;
background: #f676b2; /* Safari */
}
::-moz-selection {
color: #fff;
background: #f676b2; /* Firefox */
}

/*******************
BODY STYLING
*******************/

* {
margin: 0;
padding: 0;
border: none;
outline: none;
}

body {
background: url('http://www.demo.amitjakhu.com/login-form/images/bg.png');
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
text-align: left;
text-decoration: none;
height: 500px;
}

#wrapper {
/* Center wrapper perfectly */
width: 300px;
height: 400px;
margin: 70px auto;
}

/* Download Button (Demo Only) */
.download {
display: block;
position: absolute;
float: right;
right: 25px;
bottom: 25px;
paddin…

Clean login form with CSS

DEMO

HTML:

ΚΩΔΙΚΑΣ:



<section class="login">
<div class="titulo">Staff Login FoulsCode.com</div>
<form action="#" method="post" enctype="application/x-www-form-urlencoded">
<input type="text" required title="Username required" placeholder="Username" data-icon="U">
<input type="password" required title="Password required" placeholder="Password" data-icon="x">
<div class="olvido">
<div class="col"><a href="#" title="Ver Carásteres">Register</a></div>
<div class="col"><a href="#" title="Recuperar Password">Fotgot Password?</a></div>
</div>
<a href="#" class="enviar">Submit</a>
</form>
</section>

CSS:

ΚΩΔΙΚΑΣ:

/* website: http://foulscode.com */

body {
background: -w…

Login ροζ

Γεια σας μπλόγκερ! Εδώ σας  ένα login ροζ αυτήν είναι η διαφορα!  Και καλές αποκριες σε όλους!
Αντιγραφή επικόλληση τον παρακάνω κώδικα:

<style>
@charset "utf-8";
/* CSS Document */
/* ---------- FONTAWESOME ---------- */
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- http://foulscode.blogspot.gr/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* ---------- ERIC MEYER'S RESET CSS ---------- */
/* ---------- http://meyerweb.com/eric/tools/css/reset/ ---------- */
@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
/* ---------- FONTAWESOME ---------- */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
/* ---------- GENERAL ---------- */
body {
background-color: #2c3338;
color: #606468;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
}
a {
color: #eee;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
input {
bo…

Login with Twitter or Facebook

Αντιγραφή τον παρακάτω κώδικα:


<style>
@charset "utf-8";
/* CSS Document */
/* ---------- FONTAWESOME ---------- */
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- http://foulscode.blogspot.gr/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* ---------- ERIC MEYER'S RESET CSS ---------- */
/* ---------- http://meyerweb.com/eric/tools/css/reset/ ---------- */
@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
/* ---------- FONTAWESOME ---------- */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
/* ---------- GENERAL ---------- */
body {
background-color: #f4f4f4;
color: #5a5656;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5em;
}
a { text-decoration: none; }
h1 { font-size: 1em; }
h1, p {
margin-bottom: 10px;
}
strong {
font-weight: bold;
}
.uppercase { text-transform: uppercase; }
/* ---------- LOGIN ---------- */
#…

Login Widget

Ένα login Widget για το blog η το site σας!
Αντιγραφή τον παρακάτω κώδικα:


<style>
@charset "utf-8";
/* CSS Document */
/* ---------- ERIC MEYER'S RESET CSS ---------- */
/*----------http://foulscode.blogspot.gr--------*/
@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
/* ---------- GENERAL ---------- */
body {
background-color: #eaeaea;
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
/* ---------- LOGIN-FORM ---------- */
#login-form {
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;margin: 50px auto;
width: 300px;
}
#login-form h1 {
background-color: #282830;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
color: #fff;
font-size: 14px;
padding: 20px;
text-align: center;
text-transform: uppercase;
}
#login-form fieldset {
border: none;
padding: 20px;
position: relative;
}
#login-form fieldset:before {
background-color: #fff;
content: "";
d…

Login form using HTML5 and CSS3

Αυτό είναι ένα παράδειγμα πώς να δημιουργήσετε μια απλή φόρμα σύνδεσης με τη χρήση HTML5 και CSS3. Αυτή η μορφή χρησιμοποιεί ψευδο στοιχεία (: μετά και: πριν) για να δημιουργήσετε το αποτέλεσμα πολλαπλών σελίδων. Τα στοιχεία αυτά περιστρέφονται με το CSS3 μετασχηματισμού ιδιοκτησίας. Αυτή η μορφή χρησιμοποιεί HTML5 για να κάνει την επικύρωση και την υποβολή εύκολη.
Μετάφραση Google

<style>
/* FoulsCode.blogspot.gr */
/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
background: #DCDDDF url(http://cssdeck.com/uploads/media/items/7/7AF2Qzt.png);
color: #000;
font:…