HTML i eplestil. CSS-knapper i Apple-stil
Introduksjon
Når det kommer til design, er det ett selskap som er umulig å ikke huske. Dette er Apple-selskapet - hvert produkt de har er resultatet av arbeidet til et team av designere. Nettsiden til dette selskapet har også alltid vakt oppmerksomhet.
I denne leksjonen skal vi lage et galleri - en lysbildefremvisning "a la" Apple. Omtrent det samme brukes på Apple-nettstedet for å presentere selskapets produkter. Vi trenger ikke PHP eller en database for å lage den.
TRINN 1 - XHTML
La oss ta en nærmere titt på XHTML-markeringen:
Ideen er veldig enkel - det er to hoved DIV-beholdere - en med id="menu" inneholder miniatyrbilder, den andre "slides" inneholder selve lysbildene.
For å legge til et nytt lysbilde, trenger du ganske enkelt å legge til nye elementer i begge beholderne. Lysbilder - bilder i JPG-format, miniatyrbilder - gjennomsiktig PNG. Men du kan bruke andre formater.
Du kan også lime inn hvilken som helst HTML-kode. For eksempel kan du gjøre et bestemt lysbilde til en lenke i form av et bilde.
Det er veldig viktig at lysbildene har en spesifisert høyde og bredde - de brukes av jQuery for å bestemme rulleområdet.
Vær også oppmerksom på elementene i LI-miniatyrene. Den første er tildelt fbar-klassen for å vise en vertikal delelinje. Andre elementer er tildelt klassen menyelement - og de brukes som lysbildevisningskontrollknapper.
La oss gå videre til neste trinn.
Trinn 2 - CSS
La oss ta en titt på stilarket vårt.
Brødtekst,h1,h2,h3,p,sitat,small,form,input,ul,li,ol,label( /* Tilbakestill side */ margin:0px; padding:0px; ) body( /* Innstilling av standard tekstfarge, bakgrunn og en fontstabel */ color:#444444; font-size:13px; background: #f2f2f2; font-family:Arial, Helvetica, sans-serif; ) /* Galleristiler */ #gallery( /* CSS3 Box Shadow */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-box-shadow:0 0 3px #AAAAAA; box-shadow:0 0 3px #AAAAAA; /* CSS3 Rounded Corners */ -moz-border- radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius :4px; border-bottom-right-radius:4px; border:1px solid white; background:url(img/panel.jpg) repeat-x bottom center #ffffff; /* Bredden på galleriet */ width:920px; overflow:hidden; ) #slides( /* Dette er lysbildeområdet */ height:400px; /* jQuery endrer bredden senere til summen av bredden til alle lysbildene. */ width:920px; overflow:hidden; ) .slide( flyte:venstre; ) #menu( /* Dette er beholderen for thumbnails */ height:45px; ) ul( margin:0px; padding:0px; ) li( /* Hvert thumbnail er et li-element */ width:60px; display:inline -block; list-style:none; height:45px; overflow:hidden; ) li.inact:hover( /* Den inaktive tilstanden, uthevet på musen over */ background:url(img/pic_bg.png) repeat; ) li .act,li.act:hover( /* Den aktive tilstanden til tommelen */ background:url(img/active_bg.png) no-repeat; ) li.act a( cursor:default; ) .fbar( /* The vertikal stolpe lengst til venstre, ved siden av det første miniatyrbildet */ width:2px; background:url(img/divider.png) ingen repetisjon høyre; ) li a( display:block; background:url(img/divider.png) ingen repetisjon høyre; høyde:35px; padding-top:10px; ) a img( border:none; )
I dette stilarket har vi brukt flere CSS3-egenskaper:
* box-shadow, det er en liten skygge i hjørnene av galleriet. Ved å bruke denne egenskapen - må du oppgi X- og Y-koordinatene (0 0 her), uskarphet (3px i vårt eksempel) og skyggefarge;
* kantradius, runde kanter nederst i galleriet.
Dessverre fungerer disse egenskapene bare i Safari, Chrome og Firefox for øyeblikket.
Nå er det tid for jQuery-magien.
TRINN 3 - jQuery
Vi trenger følgende kode:
$(document).ready(function())(
/* Denne koden kjøres etter at DOM-en er fullstendig lastet inn */
var totWidth=0;
var posisjoner = new Array();
$("#slides .slide").each(function(i)(
/* Gå gjennom alle lysbildene og lagre deres akkumulerte bredder i totWidth */
posisjoner[i]= totWidth;
totWidth += $(this).width();
/* Posisjonsmatrisen inneholder hver lysbildes kommulutative forskyvning fra venstre del av beholderen */
if(!$(this).width())
{
alert("Vennligst, fyll inn bredde og høyde for alle bildene dine!");
returner falsk;
}
});
$("#slides").width(totWidth);
/* Endre cotnainer div's bredde til den nøyaktige bredden på alle lysbildene kombinert */
$("#menu ul li a").click(function(e)(
/* Klikk på et miniatyrbilde */
$("li.menuItem").removeClass("act").addClass("inact");
$(this).parent().addClass("act");
var pos = $(this).parent().prevAll(".menuItem").length;
$("#slides").stop().animate((marginLeft:-positions+"px"),450);
/* Start skyveanimasjonen */
e.preventDefault();
/* Hindre standardhandlingen til lenken */
});
$("#menu ul li.menuItem:first").addClass("act").siblings().addClass("inact");
/* Ved sideinnlasting, merk det første miniatyrbildet som aktivt */
});
Hovedideen er at lysbildene gjentas syklisk, bredden på lysbildene summeres og denne bredden tildeles beholderen. Siden lysbildene er venstrejusterte, har de god plass til å sitte ved siden av hverandre.
Når du klikker på et miniatyrbilde, beregner skriptet hvilket lysbilde som skal vises og ruller dem ved å tilordne en negativ utfyllingsverdi ved å bruke animasjonsmetoden.
Bare 40 linjer med kode og lysbildeseriegalleriet vårt er klart!
Konklusjon
Det tok oss bare tre trinn å lage et supervakkert galleri i Apple-stil. Den kan dekorere hvilken som helst nettside.
Yablokos design har alltid vært veldig populært blant kundene mine. Når det kommer til design, blir jeg ofte fortalt "Jeg trenger et enkelt design med en lysegrå bakgrunn" og bruker apple.com som eksempel.
Hvis du roter litt rundt på siden deres, vil du finne noen ganske søte blå knapper. Der er de laget i skjemaet, så hvis du vil ha de samme til nettsiden din, må du bruke Photoshop.
Så jeg legger ut knappene i ren CSS:
Apple-knapp ( markør : peker ; polstring : 3px 10px; tekstdekorasjon : ingen ; farge : #fff ; font-size : 13px; tekstskygge : 0 -1px 1px rgba(0 , 0 , 0 , .3) ; bakgrunnsbilde :-webkit-lineær-gradient(#52A8E8, #377 AD0 #377 AD0, #52A8E8); bakgrunnsbilde: -o-linear-gradient(rgb (82, 168, 232), rgb (525, 12 , 208 ) ; bakgrunnsfarge : #52A8E8 ; -moz-border-radius : 23px; -webkit-border-radius : 23px; border-radius : 23px; kantlinje : 1px solid #205 59A : box-shadow 2px rgba(0 , 0 , 0 , .5) , innfelt 0 1px 0 rgba(255 , 255 , 255 , .3) ; ) .apple-button :hover , .apple-button :focus (webkit-bilde :-webkit-bilde :- -lineær- gradient(#54A1D8, #196 7CA); bakgrunnsbilde:-moz-lineær- gradient(0 % 100 % 90deg, #196 7CA, #54A1D8); bakgrunnsbilde: -o-linear-gradient(rgb) (84, 161, 216), rgb (25, 103, 202)); bakgrunnsfarge: #52A8E8; box-shadow: 0 1px 0 rgba(255, 255, 255, 255, 0 r, 60 , (60) , (60) 255, 255, 255, .3); ) .eple-knapp :aktiv ( bakgrunnsfarge : #2D7CD1 ; box-shadow : 0 1px 1px rgba(255 , 255 , 255 , .5) , innfelt 0 2px 5px rgba(0 , 0 , 50 , . )
Demo: live eksempel (prøv å holde musepekeren over det og klikk)
Noen få ord om kompatibilitet på tvers av nettlesere. Siden vi brukte CSS-gradient-egenskapen, kan det oppstå noen problemer når de vises i eldre versjoner av Opera-nettleseren, og box-shadow er en CSS 3-egenskap.
MishaDe siste årene har jeg i lang tid ikke visst hva jeg skulle gjøre med nettstedet, fordi det praktisk talt ikke gir noen fortjeneste, men nylig innså jeg at mitt oppdrag er å fremme spredningen av WordPress. Tross alt er WordPress den beste motoren for utvikling av nettsider – både for de som er klare til å bruke den innebygde strukturen i dette CMS, og for de som foretrekker hodeløse løsninger.
Selv ble jeg først kjent med WordPress i 2009. Arrangør. Lærer ved Epic Skills og LoftSchool skoler.
Hvis du trenger hjelp med nettstedet ditt eller kanskje til og med utvikling fra bunnen av i WordPress / WooCommerce - . Teamet mitt og jeg vil gjøre alt for deg på det beste nivået.
Apple-kulten etterlater ingen likegyldige, og la oss innse det: en av nøkkelfaktorene i Apples popularitet er deres unike design. Designet av Apple i California illustrerer hvordan designere behandler produktene deres som kunst.
Cupertino, California - Den 16. november annonserte Apple utgivelsen av en ny innbundet bok med tittelen "Designed by Apple in California." To tiår med designinnovasjon er fanget i 450 fotografier av selskapets tidligere og nåværende produkter, fra iMac (1998) til Apple Pencil (2015). Boken tok 8 år å lage og ble dedikert til minnet om Steve Jobs.
"Ideen om å skape noe viktig for menneskeheten motiverte Steve helt fra begynnelsen, denne ideen er vår etos og hensikten som Apple beveger seg inn i fremtiden med," sier Jony Ive.
"Designet av Apple i California" er et resultat av tett samarbeid mellom mange team av designere og spesialister fra helt forskjellige felt. De deler alle håpet om at boken vil gi folk en forståelse av hvordan og hvorfor Apple-produkter skapes og eksisterer. Alle fotografiene ble tatt av Andrew Zuckerman i en teknikk han beskriver som en «bevisst beskjeden stil». Fotografiene illustrerer detaljene i designprosessen så vel som selve de ferdige produktene.
Dette er en bok om design, men den handler ikke om designerne selv, den kreative prosessen eller produktutvikling. Den gjenspeiler objektivt Apples stil, image og designideologi. Mange produkter ser så klare, enkle og logiske ut at de ikke ser ut til å ha noe fornuftig alternativ. For hver enhet er selv utformingen av verktøyet den er laget med gjennomtenkt.
"Som designere lever vi i fremtiden, elsker det vi allerede har laget, og er besatt av det vi ennå ikke har laget."
"Noe av det viktigste vi har lært i løpet av de 20 årene vi har jobbet sammen, er behovet for å lytte til hverandre, fordi de smarteste ideene ofte er de som snakker veldig, veldig stille."
Designet av Apple i California er en bok med begrenset opplag tilgjengelig i to formater: liten (25,9 x 32,4 cm) for $199 og stor (33 x 40,6 cm) for $299. Den er trykt på spesialprodusert papir med en spesiell farge og matte sølvbelagte kanter. Selges eksklusivt på Apple.com i USA, Australia, Storbritannia, Tyskland, Hong Kong, Korea, Frankrike, Japan og Taiwan, og i utvalgte Apple Stores.
Hei, kjære lesere! Webdesign og webutvikling utvikler seg veldig raskt. Hver dag ser vi flere og flere nye produkter, enten det er applikasjoner eller nye tjenester, som gjør livet vårt på nettet mer produktivt og praktisk. Og webdesign er rett og slett et ubegrenset rom, bare begrenset av talentet og ferdighetene til "kunstneren" (designeren). Så i dag skal vi snakke om LESS - et dynamisk stilmarkeringsspråk som vil forenkle skrivingen av CSS-stiler.
LESS er et supersett av CSS. Dette betyr at enhver CSS-kode er gyldig MINDRE, men ytterligere LESS-elementer vil ikke fungere i vanlig CSS-kode. Dette er flott fordi den eksisterende CSS allerede er gyldig MINDRE kode, noe som reduserer barrieren for å komme inn i den nye teknologien.
LESS legger til mange nyttige dynamiske egenskaper til . Den introduserer variabler, operasjoner, elementer og blandinger. Å kunne skrive stilark modulært vil spare deg for mye bryderi. 
LESS gjør skrivestiler mye enklere. For eksempel, ved å bruke mixins, lager vi noe som funksjoner som kan ta argumenter. Mixins lar deg inkludere alle egenskapene til en klasse i en annen klasse ved ganske enkelt å inkludere klassenavnet som verdien til en av egenskapene.
1 | Avrundede hjørner (@radius: 5px) ( |
Og den kompilerte CSS-en vil se slik ut:
1 | #Overskrift ( |
Last inn prefiks-free.js-biblioteket og koble det til index.html:
< script src= "prefix-free.js" type= "text/javascript" > |
La oss fullføre forberedelsene her og gå direkte videre til å lage en meny i Apple.com-stil
HTML-oppmerkingMenyoppsettet er ganske enkelt. Menyen er basert på en uordnet liste. Åpne HTML-editoren og lim inn denne koden:
1 |
I denne delen vil vi begynne å skrive menykode på MINDRE språk. For de som er nye innen programmering, både skriving og MINDRE syntaks, ikke bekymre deg, jeg skal prøve å bryte ned alt for å gjøre det klart. Kanskje til og med noen vil like denne måten å skrive stiler for et nettsted på, fordi det virkelig er mer produktivt.
La oss se på hvilke komponenter menyen vil bestå av: 
Som vi kan se i skjermbildet ovenfor, har Apple.com-navigasjonen følgende 6 hoveddeler:
- Skygge brukes;
- Grense;
- Skille mellom menyelementer;
- Gradient for bakgrunn;
- Dimmende effekt på musesveving;
- Menytekst.
Du kan bruke skriftlige stiler på to måter:
- Crunch
Viktig: når du bruker den første metoden, må styles.less inkluderes før less.js-biblioteket er inkludert! Ikke glem å koble til prefiksfri .
Dermed ser koblingsstiler slik ut:
1 |
|
Vi vil bruke 2 filer: config.less i den vil vi definere alle variablene, mixins, etc., hvoretter vi vil importere den til den andre (styles.less) der vi allerede vil lage stiler for menyelementene.
La oss nå se på koden i config.less. La oss definere grunnfargen til menyen ved hjelp av variabler. En variabel i LESS er deklarert ved å bruke @-symbolet.
I koden ovenfor har jeg ikke inkludert et prefiks for box-shadow , det prefiksfrie biblioteket vil automatisk legge det til. I tillegg arves skyggefargen fra fargen til @tema-variabelen.
La oss definere en stil for menykantene ved å bruke mixins med en parameterMenyen vår trenger en kant med avrundede hjørner. Mixins med en parameter - har faktisk samme funksjonalitet som en enkel mixin, den eneste forskjellen er at den også har en variabel parameter.
1 | Border(@radius : 3px ) ( |
I eksemplet ovenfor satte vi standard @radius til 3 piksler, og som vi sa, denne verdien kan endres.
Definer gradient, skilletegn og svevestil ved hjelp av operasjonerI LESS kan du bruke operasjoner til å øke, redusere, dele og multiplisere både egenskapsverdier og farger, slik at du kan spesifisere komplekse forhold mellom egenskaper for å oppnå ønsket resultat. La oss ta en titt på følgende kode, som setter egenskapene for menyskilleren:
1 | Deler ( |
I eksemplet ovenfor trekker vi fargen #111 fra @tema-variabelen, slik at venstre side av skilletegn blir litt mørkere enn grunnfargen, og høyre side vil være lysere. Dette er den typen manipulasjoner vi kan gjøre med HEX-farge.
For å gjøre fargemanipulering mer tydelig, la oss se på fargeskjemaet: 
Den maksimale mørke fargen er #000 (svart), den maksimale lyse fargen er #FFF (hvit) og grunnfargen er #555. Så hvis vi vil ha en farge som er tre nivåer mørkere, trekker vi #333.
Nå er gradientstilene:
1 | Gradient ( |
Vi planlegger å bruke 2 tekstfarger og tekstskyggefarger. Ett alternativ brukes hvis bakgrunnen på menyen er lys, så er tekstfargen mørk og omvendt.
For det første, hvis tekstfargen ikke har en lysstyrke lik eller større enn 50 %, bør skyggen bli mørkere, i dette tilfellet fargen #000000.
På dette stadiet fullfører vi å lage config.less-filen og går videre til å lage styles.less-filen
Importer config.lessLa oss lage en fil kalt styles.less og først og fremst legge ved den allerede opprettede config.less til den, på følgende måte:
For øyeblikket ser resultatet av arbeidet vårt slik ut. 
Ikke særlig attraktivt ennå. Men det er fortsatt mer å komme.
Grunnleggende stil for menyer med nestede reglerI LESS kan vi legge stilene til ethvert element direkte inn i stilen til overordnet.Navigasjonstaggen er nav HTML5-spesifikasjonen, som inneholder alle nødvendige elementer for navigering. Her er stilene hans:
1 | nav( |
Legg merke til at i stedet for å skrive en haug med CSS-regler, definerte vi bare høyden, bredden og polstringen. Mens vi plukker opp grensen og dens stil, samt skyggen ved hjelp av mixins, spesifiserer vi klassenavnet .border og .shadow og reglene for disse klassene, som vi skrev i config.less-filen, legges til nav. klasse. 
1 | nav( |
Men i MINDRE forekommer arv annerledes, det er lettere og mer logisk å forstå:
1 | nav( |
Som du kan se på bildet, er elementene i li-listen plassert vertikalt, men vi trenger at de plasseres horisontalt. For å gjøre dette, sett egenskapen display:inline;
1 | nav( |
1 | nav( |
I eksemplet ovenfor bruker vi hex-fargen #f2f2f2 , denne fargen har en lysstyrke på mer enn 50 % slik at skyggen blir satt til svart automatisk. Resten av koden er jeg sikker på er ganske åpenbar. 
li (
display: inline;
en (
tekst-dekorasjon: ingen;
display: inline-blokk;
flyte: venstre;
bredde: 156px;
høyde: 45px;
tekst-align: center;
linjehøyde: 300 %;
.deler;
.gradient;
}
}
li: førstebarn a (
border-venstre : ingen ;
}
li: 50px auto 0 ;
bredde: 788px;
høyde: 45px;
.grense;
.skygge;
ul(
polstring: 0;
margin: 0;
li (
display: inline;
en (
tekst-dekorasjon: ingen;
display: inline-blokk;
flyte: venstre;
bredde: 156px;
høyde: 45px;
tekst-align: center;
linjehøyde: 300 %;
.tekstfarge(#f2f2f2 ) ; // Du kan endre denne linjen
.deler;
.gradient;
&:sveve (
.hovereffekt;
}
}
}
li: førstebarn a (
border-venstre : ingen ;
}
li: siste barn a (
grense-høyre : ingen ;
}
}
}
Vel, det er alt, å skrive apple.com kan fullføres her. Det gjenstår å bestemme hvordan vi skal knytte de skrevne stilene til nettsiden. Som jeg nevnte ovenfor, kan du bruke skriftlige stiler på to måter:
- koble styles.less og less.js-biblioteket;
- eller kompiler styles.less i Crunch-programmet og legg allerede ved vanlig styles.css til siden
Selvfølgelig er det andre alternativet bedre, hvorfor legge ved 2 filer og gjøre dobbeltarbeid på klientsiden, så la oss kompilere de skrevne MINDRE stilene til vanlig statisk CSS.
For å gjøre dette, klikk på den store Crunch It-knappen! Og behold de vanlige styles.css 
Dette avslutter leksjonen.
P.S.: Hvem som helst kan lage en så enkel meny, men hvis du trenger en veldig kul nettside med vakre effekter, så kan jeg anbefale deg et av de beste webstudioene i Ukraina. Gutta vil kunne lage deg et virkelig unikt design, utføre søkemotoroptimalisering og markedsføre nettstedet ditt!
Webdesign i Apple-stil har utviklet seg og utviklet seg gjennom årene siden 1996. Som navnet antyder, tilhører designideen Apple Corporation: nettstedet og produktgrensesnittene ble designet i denne stilen. Nettsteddesignet i Apple-stil har fått stor popularitet på grunn av sin minimalisme og fokuserer brukerens oppmerksomhet på et spesifikt produkt.
Karakteristiske trekk ved webdesign i Apple-stil- Jumsoft http://www.jumsoft.com/money/
- Versjonsapp https://versionsapp.com/