Jump to content
  • Search In
    • More options...
    Find results that contain...
    Find results in...

    Tutorial: Panel Logowania Part 2


    Guest SexyBullet
     Share

    Recommended Posts

    • Cała zawartość 2
    • Temat został założony
    • Ostatnia odpowiedź

    Top Posters In This Topic

    Najpopularniejsze posty

    Witajcie, W tej części poradnika zajmiemy się kodowaniem przygotowanej wcześniej grafiki Sprawdź to: http://cskatowice.co...rt-1/#entry7513 No więc na sam początek standard czyli szkielet:

    Guest SexyBullet

    Witajcie,

    W tej części poradnika zajmiemy się kodowaniem przygotowanej wcześniej grafiki :)

    Sprawdź to: http://cskatowice.co...rt-1/#entry7513

    No więc na sam początek standard czyli szkielet:

    
    
    
    SD-Group.pl ~ Part 2 Kodowanie
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    Noo ! Mamy szkielet teraz zajmiemy się Tłem :)

    Wchodzimy w nasz plik style.css ;)

    No i bawimy się tak:

    body {
    background: #222 url(images/bg_dol.png) repeat-x;
    }

    Jest i całość w naszym obrazku górnym..

    Ale co teraz ?

    Dodajemy diva który Da nam upragnioną górę :D

    Pomiędzy znacznikami oraz dodajemy coś takiego:

    
    

    W naszym kodzie CSS:

    #gora {
    position: absolute;
    top:0px;
    left:0px;
    background: #222 url(images/bg.png) repeat-x;
    width: 100%;
    height: 206px;
    }

    Teraz ? No teraz się musimy zająć naszym polem info oraz polami input (username oraz password) :)

    Tworzymy sobie diva może o nazwie zawartosc ;)

    
    SD-Group.pl ~ Part 2 Kodowanie
    
    

    W tym divie tworzymy naszego boxa o nazwie info :) Ja już to zrobiłem wy również to już zróbcie :)

    Teraz zajmiemy się CSS'em no więc dostajecie ode mnie CSS dla zawartosci oraz dla box'u info:

    #zawartosc {
    position:fixed;
    top: 35%;
    left: 38%;
    }
    
    .info {
    background: #141414 15px center no-repeat;
    text-align: left;
    color: white;
    width: 250px;
    padding: 10px 20px 10px 50px;
    border-radius: 5px;
    }

    Teraz pod naszym znaczkiem wklejamy formularz o taki:

       	 
    USERNAME 
    PASSWORD: 
    
    

    Uccciekamy teraz do naszego pliku CSS i wklejamy do niego too:

    label#formatowanie{							   
    display: inline-block;
    width: 120px;
    margin-top: 3px;
    }
    
    input#submit{
    position: relative;
    top: 12px;
    left: 122px;
    }
    
    .input {
    background: white;
    width: 186px;
    height: 33px;
    border: 0px;
    border-radius: 5px;
    }

    Jest dobrze już mamy sformatowaną pozycję, wygląd naszego formularza.. Został nam tylko przycisk ;)

    Dodajemy tylko do stylu css coś takieg:

    .przycisk{
    background-image: linear-gradient(bottom, rgb(98,138,38) 26%, rgb(151,186,64) 73%);
    background-image: -o-linear-gradient(bottom, rgb(98,138,38) 26%, rgb(151,186,64) 73%);
    background-image: -moz-linear-gradient(bottom, rgb(98,138,38) 26%, rgb(151,186,64) 73%);
    background-image: -webkit-linear-gradient(bottom, rgb(98,138,38) 26%, rgb(151,186,64) 73%);
    background-image: -ms-linear-gradient(bottom, rgb(98,138,38) 26%, rgb(151,186,64) 73%);
    
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.26, rgb(98,138,38)),
    color-stop(0.73, rgb(151,186,64))
    );
    color: white;
    width: 75px;
    height: 34px;
    border: 1px solid #55801d;
    border-radius: 5px;
    }

    Efekt Końcowy: http://sd-group.pl/poradniki/tut-login-demo/

    Link to comment
    Share on other sites

    Guest
    This topic is now closed to further replies.
     Share

    ×
    ×
    • Create New...