Zamknięty Tutorial: Panel Logowania Part 2

26 Grudnia 2012

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ę

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/