Full Responsive Login Form Yapımı

Full Responsive Login Form Yapımı nasıl oluyor? Ne işe yarıyor? hepsinin cevabını yazımda veriyor olacağım. Yetmezse bölümlere ayırdığım ve rahatça seyredebileceğiniz bir youtube videosu da yükledim.

Full Responsive Login Form Yapımı için temel seviyede HTML + CSS + Javascript biliyor olmanız yeterli. Ya da bilmesenizde olur çünkü detaylı bir şekilde anlatıyor olacağım. Bir önceki yazımda ki bu linkten okuyabilirsiniz.(Full Responsive Menü Yapımı) HTML/CSS/JS ile ilgili birkaç temel ve teknik bilgiyi paylaşmıştım.

Gelelim neden böyle bir blog yazısını neden yazdım. Biz yazılımcılar genelde yerli kaynakların olmamasından şikayetçiyizdir. İngilizce seven, araştıran ve dokümantasyon okuyabilen kısım ki bunlarında arasında bende varım elimden geldiğince işini halledip köşesine çekiliyor. Aynı zamanda yav bu içerikleri türkçeleştirip millet anlasın diye içerik üreten bir kesim de var. Ve tahmin edin ben aynı zamanda bu grubun da içindeyim elimden geldiğince.😊

HTML Kısmını Yazma

HTML temelde bir işaretleme dilidir. Ne demek bu? yani örnek vermek gerekirse bir <a> etiketi ile buraya <a> isminde bir etiket işaretliyorum burada kalsın demek istiyoruz. Böylece belli bir hiyerarşiye göre sıralama yaparak kodlamamızı yapmış oluyoruz. Daha önceleri de söylemiştim. Yinelemekte fayda görüyorum;

HTML : İskeleti oluşturmak için
CSS : İskelete makyaj yapmak için
JS : Makyaj yaptığımız iskelete dinamiklik kazandırmak için

Aşağıdaki HTML kodlarını yazarak sayfamızın iskelet kısmını oluşturacağız. Bu iskelet kısmında Giriş Yap ve Kayıt Ol formları yer alıyor. Efekt kullanarak biri aktif iken diğerini pasif yapacağız ve üstüne resim getireceğiz. Temel de yapacağımız sihir bundan ibaret aslında. Ben kod yazarken VS Code kullanıyorum ve eklentilerini de yükledikten sonra çok güçlü bir uygulama oldu. Programlamayı Kolaylaştıran 9 VS Code Uzantısı yazımdan da istediğiniz eklentileri yükleyerek rahat kod yazabilirsiniz.

<section>
        <div class="container">
            <!--Giriş Yap Formu-->
            <div class="user singinBx">
                <div class="imgBx"><img src="kaset-sol.png"></div>
                <div class="formBx">
                    <form>
                        <h2>Giriş Yap</h2>
                        <input type="text" name="" placeholder="Kullanıcı Adı">
                        <input type="password" name="" placeholder="Şifrenizi Girin">
                        <input type="submit" name="" value="Giriş Yap">
                        <p class="signup"><a href="#" onclick="toggleForm();">Hesabın Varsa Hemen Giriş Yap</a></p>
                    </form>
                </div>
            </div>

            <!--Kayıt Ol Formu-->
            <div class="user singupBx">                
                <div class="formBx">
                    <form>
                        <h2>Kayıt Ol</h2>
                        <input type="text" name="" placeholder="Kullanıcı Adınızı Girin">
                        <input type="email" name="" placeholder="Email Adresinizi Girin">
                        <input type="password" name="" placeholder="Şifrenizi Girin">
                        <input type="password" name="" placeholder="Şifrenizi Tekrarlayın">
                        <input type="submit" name="" value="Kayıt Ol">
                        <p class="signup"><a href="#" onclick="toggleForm();">Hesabınız Yoksa Hemen Kayıt Olun</a></p>
                    </form>
                </div>
                <div class="imgBx"><img src="kaset-sag.png"></div>
            </div>
        </div>
    </section>

CSS Kısmını Yazma

Şimdi yukarıda belirttiğim gibi CSS bizim makyaj yaptığımız kısım ve iyi bir makyaj güzel bir görünüm elde etmemizi sağlar. Şimdi bu makyajı hangi kodlar ile ve nasıl yapmışız aşağıdan inceleyebilirsiniz. Burada temiz bir kodlama yapmak adına hiyerarşik bir yapıda ilerlemeye özen gösterdim.

@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300);

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

section{
    position: relative;
    min-height: 100vh;
    background: #fee648 ;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

section .container{
    position: relative;
    width: 800px;
    height: 500px;
    background: #ffffff ;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

section .container .user{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

section .container .user .imgBx{
    position: relative;
    width: 50%;
    height: 100%;
    background: #ff0;
    transition: 0.5s;
}

section .container .user .imgBx img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section .container .user .formBx{
    position: relative;
    width: 50%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    transition: 0.5s;
}

section .container .user .formBx h2{
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    color: #555;
}

section .container .user .formBx input{
    position: relative;
    width: 100%;
    padding: 10px;
    background: #f5f5f5;
    color: #333;
    border: none;
    box-shadow: none;
    margin: 8px 0;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 300;
}

section .container .user .formBx input[type="submit"]{
    max-width: 100px;
    background: #677eff;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: 0.5s;
}

section .container .user .formBx .signup{
    position: relative;
    margin-top: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    color: #555;
    text-transform: uppercase;
    font-weight: 300;
}

section .container .user .formBx .signup a{
 font-weight: 600;   
 text-decoration: none;
 color: #677eff;
}

section .container .singupBx{
    pointer-events: none;
}

section .container.active .singupBx{
    pointer-events: initial;
}

section .container .singupBx .formBx{
    left: 100%;
}

section .container.active .singupBx .formBx{
    left: 0;
}

section .container .singupBx .imgBx{
    left: -100%;
}

section .container.active .singupBx .imgBx{
    left: 0;
}
/*Sağdaki Kutu İçin*/
section .container .singinBx .formBx{
    left: 0;
}

section .container.active .singinBx .formBx{
    left: 100%;
}

section .container .singinBx .imgBx{
    left: 0;
}

section .container.active .singinBx .imgBx{
    left: -100%;
}

@media (max-width: 991px) {
    section .container{
        max-width: 400px;
    }

    section .container .imgBx{
        display: none;
    }

    section .container .user .formBx{
        width: 100%;
    }
}

JS Kısmını Yazma

Javascript yazımı aslında en kemik yerlerden biri. Neden mi? çünkü resimlerin sağa sola gitmesini yani o dinamikliği Javascript sayesinde vereceğiz. Aşağıdan detaylı inceleyebilirsiniz. Herhangi bir Javascript eklentisi kullanılmadan basit bir şekilde yazdık.

<script type="text/javascript">
        function toggleForm(){
            var container = document.querySelector('.container');
            container.classList.toggle('active')
        }
    </script>

See the Pen Login Page Responsive by İbrahim OKUYUCU (@penetrasyoncu) on CodePen.

Kodlarımı yukarıdaki codepen hesabımda kontrol edebilir ya da github hesabımdan indirebilirsin. Bununla birlikte youtube videom üzerinden de nasıl yaptığımı detaylı bir şekilde anlattım. Buradan da izleyebilirsin.

Etiketler

İbrahim OKUYUCU7 Aralık 2021

0 425 3 dakika okuma süresi