Guest SexyBullet Last activity: Posted December 26, 2012 Share Posted December 26, 2012 Posted December 26, 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/ Link to comment https://cskatowice.com/topic/761-tutorial-panel-logowania-part-2/ Share on other sites More sharing options...
Andy 2 Last activity: March 16, 2014 Posted February 18, 2013 Share Posted February 18, 2013 Posted February 18, 2013 Hej! Nie widzisz zawartości tego postu? Sign In lub Create an account, aby korzystać ze wszystkich dostępnych funkcji! Link to comment https://cskatowice.com/topic/761-tutorial-panel-logowania-part-2/#findComment-5975 Share on other sites More sharing options...
Recommended Posts