Búðu til töfrandi valmynd í CSS3

Tilkomu CSS3 hefur kynnt heimsmöguleika fyrir vefhönnuði og forritara. Með hreyfimyndir, skuggum, ávölum hornum og fleirum er auðvelt að stilla þætti og vega enn minna en nokkru sinni fyrr.

Flakk á vefsíðu er ein af grundvallarþáttum til að gera eða brjóta reynslu notanda. Í stað þess að hlaða valmyndinni niður með einstökum myndum eða sprites, hvers vegna ekki að gera allt í CSS3?

Engin þörf fyrir jQuery eða JavaScript; engin þörf á að ræsa Photoshop. Og við skulum taka það upp í haus með því að setja inn frábært táknmynd til að bæta við einhverjum staf í valmyndinni okkar.

Svo grípa þinn uppáhalds bolli af kaffi (eða ef þú ert eins og ég, ísskallur mataræði), opnaðu uppáhalds kóða ritara þína, og skulum gera sléttar flakkavalmynd með aðeins CSS3.

Áður en við byrjum

Áður en við kafa inn í kóðann fyrir valmyndina okkar, vil ég fara yfir nokkrar af þeim eignum og tækjum sem við munum nota í þessari kennsluefni, sem þú getur hlaðið niður og notað á meðan þú fylgir með. Þetta er allt innifalið í .zip skrá í lok, sem einnig inniheldur lokakóðann.

Bakgrunnsmynd : Dark Denim frá lúmskur mynstri.
Texti letur : Droid Sans frá Google WebFonts.
Táknmynd : Táknmyndatákn frá nokkrum handahófi náungi.
CSS3 JavaScript : -frjáls-frjáls frá Lea Verou.

Allt í lagi, fékkðu allt þetta? Eða að minnsta kosti sótt þau með fulla Zip-skrá? Frábær, nú skulum byrja. Við munum ganga í gegnum uppsetninguna í sundur, byrjaðu með HTML, þá grunn CSS, og loksins spice það upp með CSS3.

HTML

Þar sem við erum að vera framsækin með CSS3 í valmyndakerfinu okkar fór ég á undan og setti okkur upp með mjög einfaldan HTML5 skipulag. Engin þörf á að fara brjálaður hér - við erum ekki að byggja upp heilt vefsvæði í þessari kennslu, bara í valmyndinni.

Skulum hoppa inn í kóðann fyrir valmyndina. Matseðillinn er einfaldur óraunaður listi með innbyggðum listum fyrir niðurdrep. Óflokkað listi er vafinn í HTML5 tagi.

Eins og sjá má, höfum við fimm valmyndaratriði, þar af fjórum af undirliðunum. Næsta skref er að fá grunn CSS stíl gert, þá munum við nota CSS3 í valmyndina og spannar til að ná táknunum.

The CSS

Til að fá góða upphafsstað til að vinna með, munum við bæta við denim mynstri frá lúmskur mynstur og miðja valmyndina, byggt á 960.gs rist. Við munum einnig búa til clearfix bekk, sem er notað í valmyndakerfum okkar.

/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}body {background: url('img/denim.png');font-family: 'Droid Sans', sans-serif;;}.clearfix {clear: both;}.wrap {width: 940px;margin: 4em auto;}

Nú ætlum við að vinna að stíl á valmyndinni. Í fyrsta lagi stíll við hámarksleiðsögnina til að búa til mjög grunn ramma.

nav {padding: 0 10px;position: relative;}.menu li {float: left;position: relative;}.menu li a {color: #444;display: block;font-size: 14px;line-height: 20px;padding: 6px 12px;margin: 8px 8px;vertical-align: middle;text-decoration: none;}.menu li a:hover {color: #222;}

Við skulum ganga í gegnum þessi kóða. Valmyndastikan er að fara að breiða yfir breiddina á .húðaflokknum, sem er 940 punktar. Til að bæta við smáum hvítum rúmum í fyrsta valmyndaratriðinu bætum við 10 punktum af padding til vinstri og hægri hliðar og stillir stöðu nafngerðarins til ættingja. Þetta verður mjög mikilvægt yfirlýsing seinna. Efsta stigsmatsefnin eru flutt til vinstri og einnig með hlutfallslegri staðsetningu. Þá erum við að taka skref lengra og stilla tengla, sem eru birtar: blokk ;. Þetta er frábrugðið nokkrum CSS valmyndakerfum þarna úti sem sýna: inline; lýst.

The Dropdown

Rauðalistarnir eru innbyggðar óskráðir listar, svo skulum stilla þær næst. Aftur, við erum að fara með grunn CSS hér.

/* Dropdown styles */.menu ul {position: absolute;left: -9999px;list-style: none;}.menu ul li {float: none;}.menu ul a {white-space: nowrap;}/* Displays the dropdown on hover and moves back into position */.menu li:hover ul {left: 5px;}/* Persistent Hover State */.menu li:hover a {color: #222;}.menu li:hover ul a {background: none;}.menu li:hover ul li a:hover {}

Hvað? Hvar var valmyndin okkar fara? Mundu að þetta er í vinnslu. Það mun byrja að koma saman, ég lofa. The .menu ul stillir stöðu til alger (muna, þessi óraunaða listi er inni í listanum yfir efstu stigi, sem er staðsettur tiltölulega - þannig er .menu ul staðsettur tiltölulega topplistalistanum). Þá stillum við það á skjánum. Þetta er tækni sem ég tók upp úr CSSWizardy, þar sem þessi aðferð veitir betri aðgengi fyrir skjálesendur, osfrv. Síðan munum við kalla það aftur á sveima okkar.

Næstum settum við listann yfir niðurhalslista til að fljóta til vinstri, búa til samræmda útlit fyrir niðurfellingarliðið. Á akkerismerkinu kastaum við inn í hvítt svæði: nowrap; sem kemur í veg fyrir löng tengsl frá umbúðir á tvær línur. Þetta hjálpar við að viðhalda samræmdu útlitinu og heldur notendaviðmóti auðvelt í notkun.

Hreyfist áfram á sveima ríkin, þegar sveima á listanum yfir efstu stigi (.menu li) henda við svifflugi og miða á óhefðbundna listana okkar og færa listann af leið af skjánum í 5 punkta til vinstri við listann . Aftur er staðsetningin miðað við listann í efstu stigi, þannig að það er 5 punkta frá listalistanum. Ef þú varst að fjarlægja hlutfallslega stöðu efsta stigs li, þá myndi allt þitt sviffluga fljúga út undir tenglinum 'Heim'.

Nú munum við ganga úr skugga um að þegar við erum að sveima á dropatölvunum okkar, heldur hámarksstigið stílin, en fellivalmyndin hefur ekki þann stíl. Það er þar sem þú ert. Menu Li: sveima a og. Menu Li: sveima ul koma inn í leik. Fyrrverandi setur viðvarandi sveiflaástandið (þannig að þetta sé það sama og efsta stigsstíllinn þinn), og hið síðarnefnda fjarlægir þá stíl frá undirleiðsagnarlistunum.

Að lokum stíll við valmyndina. Ó, það er tómt? Já, það er allt CSS3. Við munum fá það í eina mínútu.

The CSS3

Nú fáum við að skemmtilegan hluta. CSS3 forskriftin hefur kynnt mikið af skemmtilegum og spennandi verkfærum til vefhönnuða og forritara sem nýta nútíma vefur flettitæki. Jú, ekki allir vafrar styðja allar CSS3 forskriftirnar (skoðaðu css3files.com fyrir frábært grunnatriði um hvað virkar og hvað gerir það ekki), en mörg af forskriftirnar draga úr tignarlegu og brjóta ekki hönnunina.

Athugaðu: Fyrir þessa einkatími notar ég Lea Verou's öflugur og epic örlítið (2kb) -prefix-free.js handrit. Ef þú hefur ekki notað það áður og þú vinnur með CSS3, gerðu sjálfan þig greiða og athugaðu það út. Það notar nokkrar brjálaðar uppgötvanir til að taka CSS3 yfirlýsingar og bæta við viðeigandi forsendum fyrir seljendur til að tryggja vafra samhæfni þegar þörf krefur. Það heldur kóðanum mikið hreinni og gerir kennslu auðveldara að skilja.

Við skulum bæta við sumum CSS3 við flakkastikuna, óhefðbundna listann og listalistann.

nav {background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));background-image: linear-gradient(#fff, #ccc);border-radius: 6px;box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);padding: 0 10px;position: relative;}.menu li a:hover {background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));background-image: linear-gradient(#ededed, #fff);border-radius: 12px;box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);color: #222;}

Fyrst upp í ofangreindum kóða er stýrihnappurinn. Við bætum línulegan halla frá hvítum til ljósgráða (með því að nota bæði staðlaða hallandi yfirlýsingu og gamla -webkit-stíl til að viðhalda eindrægni með eldri vöfrum. Við lokum út (ekkert spjald sem ætlað er) hnakkaborðið með 6 pixla ramma radíus .

Á við sveifla ríkin: Við bætum við gagnstæða línulega halli, eins og sumum ávalar hornum og skugga um innsláttarkassa, sem gefur tengla okkar útlitið að valmyndarhlutinn sleppur í hnakkaborðið. Í heildina er mjög hreint útlit. Áður en við komum í sveiflurnar, vil ég endurskoða nokkra HTML í tengslum við sumar CSS3. Ég notaði frábært táknmynd sem heitir Iconic eftir einhverjum handahófi Dude, sem er embed in með CSS3 @ font-face eigninni, og þá kallað með svörmerkjum á valmyndinni. Þegar þú hefur hlaðið niður settinu er hægt að hengja kóðann úr CSS í zip-skránni, svo og afrita yfir leturskrárnar. Ef þú breytir hlutfallslegu slóðinni skaltu muna að breyta src í @ letri-andlitinu.

@font-face {font-family: 'IconicStroke';src: url("fonts/iconic/iconic_stroke.eot");src: local('IconicStroke'),url("fonts/iconic/iconic_stroke.svg#iconic") format('svg'),url("fonts/iconic/iconic_stroke.otf") format('opentype');}.iconic {color:inherit;font-family: "IconicStroke";font-size: 38px;line-height: 20px;vertical-align: middle;}

Með þeirri letriyfirlýsingu geturðu nú strikað ummerki með ákveðnum flokkum til að búa til táknin. Fyrir verkefnið mitt heldur ég iconic.css sem fullkomlega ósnortið stíllark sem heitir eftir style.css minn. Til að fella inn táknin í valmyndunum mínum breytum við HTML aðeins:

Augljóslega, kóðinn hér að ofan uppfærir aðeins efsta stigsleiðsögnina með því að bæta við spanmerki með táknmyndinni í flokki og viðeigandi táknflokks. Svo nú þegar það er gert, munum við gera endanlega stíl á fellilistanum, sem kasta inn nýjum CSS3 eiginleikum eins og ógagnsæi og umskipti. Svo fyrst, the .menu ul:

.menu ul {position: absolute;left: -9999px;list-style: none;opacity: 0;transition: opacity 1s ease;}

Þessir tveir stórar eignir til að endurskoða hér eru ógagnsæi og umskipti yfirlýsingar. Ógagnsæi er stillt á 0 og breytingin mun gera fellilistann fara úr ógagnsæti 0 í ógagnsæi 1 í 1 sekúndna. Nú skulum gera sveima ástandið.

.menu li:hover ul {background: rgba(255,255,255,0.7);border-radius: 0 0 6px 6px;box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);left: 5px;opacity: 1;}

The sveima ástand er nokkuð flókið einn að hugsa um. Við skulum fara línu eftir línu.

Efsta línan gerir bakgrunninn að hreinu hvítum bakgrunni og setur þá ógagnsæi í 70% til að láta suma af bakgrunnsmynstri líta í gegnum.

Í öðru lagi, ég hef lokað neðst á báðum hornum, þannig að efstu hornum fer í kviðarholi til að gefa ályktunina að niðurfallið sé að koma út úr hnakkaborðinu.

En þriðja línan er þar sem galdur kemur inn. Vegna staðsetningar á siglingalistanum og listatölum er notkun z-vísitölunnar nánast ómögulegt fyrir lagið að fá viðeigandi áhrif. Til að ná útliti sem falla niður er undir húfubarninu setjum við ljós, svipað innstungubox-skuggi sem kemur niður í niðurhals. Að lokum skaltu setja ógagnsæi í 1, sem hnit við umskipti sem við settum áðan.

The hvíla af the CSS3 er nokkuð beint áfram, og að mestu endurtekin af því sem við höfum farið yfir þegar:

.menu li:hover a {background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));background-image: linear-gradient(#ccc, #ededed);border-radius: 12px;box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);color: #222;}.menu li:hover ul a {background: none;border-radius: 0;box-shadow: none;}.menu li:hover ul li a:hover {background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));background-image: linear-gradient(#ededed, #fff);border-radius: 12px;box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);}

Ætti ekki að vera of óvenjulegt í síðasta lagi kóða. Og kíkið á endanlega niðurstöðu okkar.

Niðurstaða

Jæja þarna hefurðu það; sléttur og sléttur CSS3 valmynd. Ég hef tekið allar eignir í zip-skrá, sem þú getur sækja hér , eða þú getur skoðaðu kynningu hér .

vefhönnun tákn siglingar html5 css3 táknstafir