Share
Nästa i Premium Pixelsessionen är Ormans bildreglage. Vi tar PSD, bygga om det för webbläsaren och gör det hela med funktionen med den fantastiska Nivo Slider jQuery Plugin.
För att hålla allt ordentligt skapar vi först vår mappstruktur. Gå vidare och skapa tre mappar som heter "css", "images" respektive "js". Css-mappen innehåller vårt stylesheet. Bilderna är för, bra bilder, och js kommer att innehålla våra jQuery-plugins - Nivo-reglaget i det här fallet!
Okej, vi har vår mappstruktur, nu behöver vi skapa vårt html-dokument. Skapa detta inom ramen för ditt projekt. Vi använder en enkel HTML5-basmall, samtidigt som du länkar till jQuery-biblioteket som värd Google.
Bildreglage kontroller
Vi sparkar saker med några återställda stilar:
html, ht, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adress, stor, citera, kod, del, dfn, em, img, ins, kbd, q, s, samp, liten, strejk, stark, sub, sup, tt, var, b, du, mitt, dl, dt, dd, ol, ul, li, fieldset, form, etikett, legend, tabell, bildtext, tbody, tfoot, thead, tr, th, td, artikel, åt sidan, kanfas, detaljer, bädda in, figur, figcaption, footer, header, hgroup, meny, nav, avsnitt, sammanfattning, tid, markera, ljud, video margin: 0; vaddering: 0; gräns: 0; typsnitt: ärv; vertikaljustering: baslinje; / * HTML5 display-rollåterställning för äldre webbläsare * / artikel, åtgärd, detaljer, figcaption, figur, footer, header, hgroup, meny, nav, avsnitt display: block; kropp linjehöjd: 1; ol, ul listestil: none; blockquote, q quotes: none; blockquote: före, blockquote: efter, q: före, q: efter innehåll: "; innehåll: inget; tabell gränsvärde: sammanbrott; gränsbild: 0; a text-decoration: none;
Nu, innan vi hoppar in i reglaget själv lägger vi till en bakgrund till sidan. Om du har laddat ner PSD innan du ser det finns ett lager med en radiell gradient som tyder på lite subtil belysning. Vi skapar detta genom att ha ett repeterbart mönster, gjort något ljusare än PSD. Efter att ha tillämpat bakgrunden använder vi några insatsrutaskuggor på HTML-taggen för att försöka replikera ljuset i mitten.
html -webkit-box-skugga: inmatning 250px 250px 250px rgba (0,0,0, .25), inset -250px -250px 250px rgba (0,0,0, .25); -moz-box-skugga: inset 250px 250px 250px rgba (0,0,0, .25), inset -250px -250px 250px rgba (0,0,0, .25); boxskugga: inset 250px 250px 250px rgba (0,0,0, .25), inset -250px -250px 250px rgba (0,0,0, .25); bredd: 100%; höjd: 100%; body background: url (... /images/bg.jpg) repeat; font-size: 100%;
Nu kan vi äntligen starta vår reglage! Nivo Slider är Gilbert Pellegroms och Michael Wrights arbete, tillsammans känt som Dev7studios och Professional Chums med Orman.
Det gör det möjligt för oss att skapa vår skjutreglage med minimalt antal markeringar som möjligt. Allt vi behöver göra är att skapa en div med ett ID av vad du vill, Jag använder "slider" i det här fallet och en klass av "nivoSlider". Då är allt du behöver göra att placera dina bilder inom div, det är det!
Bildreglage kontroller 
Därefter centrerar vi vår skjutreglage mitt på sidan, om du följde min senaste handledning har du gått igenom processen för hur du uppnår detta. Om du vill ha mer information, kolla in den här artikeln på CSS Tricks.
Vi har också gått vidare och lagt till några rutaskuggor till reglaget, samtidigt som du kommer ihåg webbläsarens prefix. Observera att vi har lagt till ytterligare CSS som krävs för att nivoSlider ska fungera.
#slider position: absolut! viktigt; top: 50%; vänster: 50%; bredd: 650 px; höjd: 350 pixlar; margin-top: -175px; margin-vänster: -325px; -webkit-box-skugga: 0px 0px 5px rgba (0,0,0, .5), 0px 0px 20px rgba (0,0,0, .2); -moz-box-skugga: 0px 0px 5px rgba (0,0,0, .5), 0px 0px 20px rgba (0,0,0, .2); boxskugga: 0px 0px 5px rgba (0,0,0, .5), 0px 0px 20px rgba (0,0,0, .2); .nivoSlider img position: absolute; top: 0; vänster: 0; display: none; .nivoSlida en border: 0; display: block; .nivo-skiva display: block; position: absolute; z-index: 5; höjd: 100%; .nivo-box display: block; position: absolute; z-index: 5;
Tid för att integrera Nivo Slider. Börja med att gå till http://nivo.dev7studios.com/pricing/ och ladda ner jQuery-plugin. När du har laddat ner och packat upp, kopiera filen jquery.nivo.slider.js till din js-mapp som skapats i steg 1.
Nästa måste vi länka till den här filen i vårt html-dokument.
Bildreglage kontroller
Nu har vi vårt plugin hämtat och kopplat till, vi måste koppla upp det till vår reglage, samtidigt som vi definierar några valfria parametrar. Ta en titt på Nivo-dokumentationen för detaljer om alla tillgängliga alternativ.
Accentsconagua
