Login Paneli Ouşturma

Nurullah K. 1

- E-ticaret siteleri, Blog sayfaları ve daha bir çok kullanıcı verisi bulundurup onlara göre yol haritası belirleyen site ve kurumların olmazsa olmaz diyebileceğimiz Login panellerinden bir örnek.


-  Bugün ekteki gibi Login panellerini sadece Css kodlarıyla baştan sona nasıl kodlanacağına değinelim. Bu ve bunun gibi Login panelleri daha çok şeffaflık hissi uyandırır kullanıcıda. Bu da ziyaretçilerin siteyi karton kutu gibi değil de daha çok Gözlerinde dinamik, hızlı ve güvenilir olduğunu gösterir. Yukarıdaki Login Panelinin dış görünümü ve kıvrımlarının yanı sıra aşağıda göreceğiniz videodaki gibi kullanıcı adı ve şifre bölümlerine geldiğinde adeta  " placeholder " özelliği kullanılmış gibi  gözükse de aslında oradaki yazıların  input[type="txt"] kutucuklarından bağımsız olduğunu aşağıdaki Css kodlarına baktığınızda anlayacaksınız. 69 ve 70. satırlara bakarsanız odaklanan etiketi -5px yukarı çıkarması gerektiğini görebilirsiniz. Bunun yanında Login panelini kullanacak kişi kullanıcı adını ve şifresini girdiğinde yazıların aniden yukarı çıkıp renginin değişmesinin yanı sıra bunu süzülerek yapması daha sade ve oturaklı olacağından dolayı bu etikete 41. satırdaki gibi " transition: 0.5s; " özelliği atanır. 



body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    color: black;
}

.center {
    z-index: 5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background: white;
    border-radius: 11px;
}

.center h1 {
    color: #2691d9;
    text-align: center;
    padding: 0 0 20px 0;
    border-bottom: 1px solid silver;
}

.txt_field {
    position: relative;
    border-bottom: 2px solid #adadad;
    margin: 30px 0;
}

.txt_field label {
    position: absolute;
    top: 50%;
    left: 5px;
    color: #adadad;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    transition: 0.5s;
}

.txt_field input {
    width: 100%;
    padding: 0 5px;
    height: 40px;
    font-size: 16px;
    border: none;
    outline: none;
    background: none;
}

.center form {
    padding: 0 40px;
    box-sizing: border-box;
}

.txt_field span::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 0;
    width: 0%;
    height: 2px;
    background: #2691d9;
}

.txt_field input:focus~label,
.txt_field input:focus~ :valid {
    top: -5px;
    color: #2691d9;
}

.txt_field input:focus~span::before,
.txt_field input:focus~span::before {
    width: 100%;
}

.pass {
    margin: -5px 0 20px 5px;
    color: #2691d9;
    cursor: pointer;
}

.pass:hover {
    text-decoration: underline;
}

input[type="submit"] {
    width: 100%;
    height: 50px;
    border: 1px solid;
    background: #2691d9;
    border-radius: 50px;
    font-weight: 700px;
    font-size: 18px;
    cursor: pointer;
    outline: none;
    color: white;
}

.signup_limk {
    margin: 30px 0;
    text-align: center;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: #2691d9;
}

a:hover {
    text-decoration: underline;
}

input[type="submit"]:hover {
    background: #2980b9;
    transition: 0.5s;
}

 

- Linklerin altındaki çizgileri " text-decoration: none; " özelliği ile alarak üzerine gelindiğinde " text-decoration: underline; " özelliği kullanılıp aktif edilmiştir. Buda simgelerin kullanıcı tarafından daha belirgin olmasını sağlamıştır. Dosyayı arka plan resmi ve Html kodlarıyla beraber github profilimden indirebilirsiniz😊









Etiket

1 تعليقات

إرسال تعليق

أحدث أقدم