Share
Astăzi vom lua designul insignei de notificare a meniului Orman Clark și îl vom construi utilizând codurile HTML și CSS. Vom analiza câteva moduri de a obține efectul, inclusiv utilizarea atributelor de date HTML5 cu care nu vă cunoașteți. Hai să ne aruncăm!
Să începem prin aruncarea unor marcări de bază. Vom folosi doctype HTML5 în tutorial. Vom crea meniul în sine adăugând mai întâi o div principală urmată de elemente de listă care vor crea fiecare legătură de meniu. De asemenea, am inclus scriptul HTML shiv (sau shim) în capul documentului nostru. Acest lucru este pus în joc cu versiunile mai vechi ale Internet Explorer, permițându-le să recunoască și să modeleze elementele HTML5.
Mențiuni de notificare pentru meniuri
Pentru a crea structura meniului nostru vom folosi o listă neordonată cu 4 elemente de listă și o etichetă de ancorare în interiorul. De asemenea, este posibil să doriți să coteți lista într-un etichetă pentru implementare.
De dragul acestei demonstrații, vom crea un div în jurul meniului, cu o clasă de wrapper. Acest lucru va fi folosit doar pentru a muta meniul în mijlocul paginii.
Marcajul dvs. ar trebui să arate așa;
Mențiuni de notificare pentru meniuri
- Profil
- reglaj
- notificări
- Deconectare
Înainte de a începe stilul meniului, vom adăuga câteva resetări și un anumit stil de pagină. Mai întâi vom arunca o resetare pentru a elimina orice margini, padding etc din foaia de stil default. Apoi vom aplica o culoare de fond corpului și o dimensiune a fontului de 16px. Această dimensiune fixă a fontului asigură dimensiunea de bază pentru demonstrația noastră, dar puteți prefera să o setați la 100%, permițând utilizatorului să definească dimensiunea fontului browserului. Vom aplica o lățime de 70% învelișului și îl vom centra cu o margine de top de 200px.
html, body, div, span, applet, obiect, iframe, h1, h2, h3, h4, h5, h6, p, bloc, em, font, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, supt, câmpul, formularul, eticheta, legenda, tabelul, caption, tbody, tfoot, thead, tr, th, td margine: 0; umplutura: 0; frontieră: 0; contur: 0; font-size: 100%; aliniere verticală: linia de bază; backound: transparent; corp linie-înălțime: 1; ol, ul stil-list: nici unul; blockquote, q citate: none; blockquote: înainte, blockquote: după, q: înainte, q: după content: "; - text-decoration: none; corp background: #ededed; font-size: 16px; .wrapper latime: 70%; margine: 200px auto;
Pentru a demara stilul meniului, ne vom concentra în primul rând pe baza acestuia. Direcționați mai întâi lista neordonată, care a primit o clasă de "meniu". Îi vom da un afișaj de bloc inline, permițându-ne să determinăm lățimea / înălțimea acestuia în funcție de conținutul său ca un element de bloc.
Apoi vom aplica un background de gradient cu toate prefixele de browser. Apoi adăugați o rază de graniță, dar ce sunt acele ems ?! Utilizăm ems (în loc de pixeli) pentru a mări raza de graniță în raport cu dimensiunea fontului. Verificați demo-ul; veți vedea că raza crește proporțional, împreună cu textul mai mare.
Pentru a rezolva mărimea de care avem nevoie, vom lua 3 (dimensiunea dorită a razei de graniță în px) și o vom împărți cu 16 px (dimensiunea fontului corpului). Deci, 3px / 16px = 0.188 dar vom runda până la 0.2.
Apoi vom aplica o simplă margine gri, apoi o umbră de cutie cu o umbră și o umbră. Nu uitați și prefixele de browser!
.meniu display: inline-block; fundal-imagine: -webkit-gradient linear (top, rgb (249, 249, 249), rgb (240, 240, 240)); fundal-imagine: -moz-linear-gradient (top, rgb (249, 249, 249), rgb (240, 240, 240)); fundal-imagine: -o-gradient linear (top, rgb (249, 249, 249), rgb (240, 240, 240)); fundal-imagine: -ms-linear-gradient (sus, rgb (249, 249, 249), rgb (240, 240, 240)); fundal-imagine: gradient liniar (top, rgb (249, 249, 249), rgb (240, 240, 240)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f9f9f9', EndColorStr = "# f0f0f0"); -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em; frontieră: 1px solid #cecece; -webkit-box-shadow: insetul 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06); -moz-box-shadow: insetul 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06); box-shadow: inserție 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06);
Mergând mai departe, să îmbunătățim meniul prin modelarea elementelor din listă. Mai întâi vom flota elementele din listă spre stânga, astfel încât acestea să fie pe o singură linie și să nu fie listate. Atunci le vom poziționa relativ, acest lucru va fi necesar mai târziu când vom crea insignele. Apoi vom adăuga o margine în partea stângă și o margine în partea dreaptă.
Acum trebuie să vizăm primul element de listă și ultimul element de listă, deci vom face acest lucru folosind pseudo selectorii; :primul copil și :ultimul copil (trebuie să aveți în vedere suportul browserului atunci când le folosiți). Pentru prima, vom elimina marginea din stânga și vom elimina marginea dreaptă din ultimul element din listă.
.meniul li float: left; Poziția: relativă; frontieră-dreapta: 1px solid # d8d8d8; frontieră-stânga: 1px solid #ffffff; .menu li: primul-copil frontieră-stânga: nici unul; .menu li: ultimul-copil border-right: none;
Următorul lucru pe care trebuie să-l facem este să stilizăm etichetele de ancorare. Mai intai le vom da o familie de fonturi Helvetica Neue cu cateva spatii de spargere pentru oameni care nu au fontul Helvetica. Îi vom da o dimensiune a fontului de 0.75 (13px / 16px = 0.75). Apoi vom aplica o greutate a caracterelor aldine, urmată de o culoare de # 666666 și va aplica o umbră de text.
Acum vom aplica niște cearceafuri la stânga și la dreapta 1EM (13px / 13px = 1) și la o înălțime a liniei pentru a centra textul vertical. Am stabilit înălțimea liniei pe 30 de pixeli, interpretată în ems.
.meniul li a font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 0.75em; font-weight: bold; culoare: # 666666; text-shadow: 0px 1px 0px #ffffff; afișare: bloc; umplutura: 0 1em; line-height: 2.5em;
Meniul nostru începe să arate destul de bine acum!
Este timpul să adăugați bule de notificare reci. Mai întâi va trebui să înlocuiți marcajul HTML al meniului cu următoarele. Vom crea bulele folosind etichete de span, apoi pentru fiecare culoare vom aplica o clasă adecvată. Am adăugat roz, galben și albastru.
- Profil2
- reglaj3
- notificări6
- Deconectare
Pentru a crea bule de notificare, vom face mai întâi stilul etichetelor de marcare cu totul, cu excepția culorii și culorii de margine. În acest fel, putem schimba ușor culorile schimbând pur și simplu numele de clase.
Mai întâi vom crea câteva lățimi și înălțimi, luăm 18px / 12px = 1.5em. Apoi, va trebui să le poziționăm absolut (0.5m din dreapta și -2em de sus). Apoi, se va aplica o înălțime a liniei pentru a centra numărul vertical și pentru a centra orizontal se utilizează centrul de aliniere a textului.
O familie de fonturi va fi aplicată împreună cu Helvetica Neue, din nou cu backback-uri pentru utilizatorii fără Helvetica. Vom face curaj, vom aplica o culoare albă și apoi vom adăuga o umbră de text. Apoi vom adăuga niște umbre în cutie (vom adăuga două, o umbră și o umbră). Nu uitați să le creați în timp ce utilizați prefixe de browser. Acum vom adăuga o rază de graniță de 4 mm (aproximativ 50 pixeli).
Pentru următoarea etapă a procesului, vom profita de câteva tehnici CSS3 și vom obține efectul de hovering. Mai întâi vom ascunde bula folosind o opacitate de 0. Apoi, pentru a crea animațiile noastre minunate puțin, vom folosi câteva tranziții. Vom viza topul și opacitatea și îi vom spune să se ușureze pentru o perioadă de 0,3 secunde (3 milisecunde). Acestea vor avea nevoie de prefixele de browser aplicate, inclusiv -o- și -ms-.
span poziție: absolută; sus: -2em; dreapta: 0.5em; lățime: 1,5; înălțime: 1,5; line-height: 1.5em; text-align: center; ont-familie: "Helvetica Neue", Helvetica, sans serif; font-weight: bold; Culoare: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .15); -webkit-box-shadow: insetul 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: insetul 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); box-shadow: inset 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; border-radius: 4em; opacitate: 0; filtru: alfa (opacitate = 0); -webkit-tranziție: .3s top ușurință-in, .3s opacity ease-in; -moz-tranziție: .3s maximă ușurință-in, .3s opacity ease-in; -o-tranziție: .3s maximă ușurință-in, .3s opacity ease-in; -ms-tranziție: .3s maximă ușurință-in, .3s opacity ease-in; tranziție: .3s opacitate ușoară;
Timpul pentru atingerea esteticului final pe bule; adăugând unele CSS pentru stilul culorilor. Adu-ti aminte de clasele pe care le-am adaugat tagurilor de span? Acestea vor face lucrurile destul de simple, vom direcționa fiecare culoare, vom aplica un gradient și o culoare de margine.
.roz (fundal-imagine: -webkit-gradient linear (top, rgb (247, 130, 151), rgb (244, 102, 119)); fundal-imagine: -moz-linear-gradient (top, rgb (247, 130, 151), rgb (244, 102, 119)); fundal-imagine: -o-linear-gradient (sus, rgb (247, 130, 151), rgb (244, 102, 119)); fundal-imagine: -ms-gradient linear (top, rgb (247, 130, 151), rgb (244, 102, 119)); fundal-imagine: gradient liniar (top, rgb (247, 130, 151), rgb (244, 102, 119)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); frontieră: 1px solid # ce4f5e; .yellow background-image: -webkit-gradient linear (top, rgb (254, 218, 113), rgb (254, 186, 72)); fundal-imagine: -moz-linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); fundal-imagine: -o-linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); fundal-imagine: -ms-linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); fundal-imagine: gradient liniar (top, rgb (254, 218, 113), rgb (254, 186, 72)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); frontieră: 1px solid # dea94f; .blue background-image: -webkit-gradient linear (top, rgb (172, 228, 248), rgb (108, 205, 243)); fundal-imagine: -moz-linear-gradient (top, rgb (172, 228, 248), rgb (108, 205, 243)); fundal-imagine: -o-linear-gradient (top, rgb (172, 228, 248), rgb (108, 205, 243)); fundal-imagine: -ms-gradient linear (top, rgb (172, 228, 248), rgb (108, 205, 243)); fundal-imagine: gradient liniar (top, rgb (172, 228, 248), rgb (108, 205, 243)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); frontieră: 1px solid # 79b5cb;
Desigur, baloanele noastre sunt frumos decorate, dar complet invizibile. Va trebui să adăugăm câteva CSS pentru a permite bulelor să apară pe hover. Mai întâi adăugați niște culori pe etichetele de ancorare atunci când acestea sunt plutind, doar un simplu gri închis. Apoi, vom direcționa intervalul atunci când elementul listei părintelui este mutat peste. Vom adăuga o opacitate de 1 pentru a deveni vizibilă și pentru a schimba valoarea de poziție de sus pentru a face să apară ca și cum ar fi alunecarea în jos.
.meniul li: hover a culoare: # 343434; .menu li: plasați un spațiu top: -1em; opacitate: 1; filtru: alfa (opacitate = 100);
Deci, ce despre atributele de date HTML5?
Mă bucur că ai întrebat ...
Pentru a crea meniul nostru cu atribute de date HTML5, va trebui mai întâi să modificăm marcajul HTML. Vom folosi anumite atribute personalizate pentru a crea bulele. HTML5 a introdus un nou atribut de date în care numele de atribut poate fi orice, atâta timp cât este de cel puțin 1 caractere și începe cu 'data-'.
Pentru acest tutorial vom folosi "data-bubble". Acestea ne vor permite să stocăm și să accesăm valorile de notificare fără a adăuga structura de marcare inutilă la documentul nostru. Observați că am mutat, de asemenea, clasele noastre de culoare pe etichetele ancorei.
- Profil
- reglaj
- notificări
- Deconectare
Deoarece nu vom mai lucra cu elementele span, va trebui să reveniți la CSS și să ștergeți următoarele reguli;
span poziție: absolută; sus: -2em; dreapta: 0.5em; lățime: 1,5; înălțime: 1,5; line-height: 1.5em; text-align: center; font-familie: "Helvetica Neue"; font-weight: bold; Culoare: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .15); -webkit-box-shadow: insetul 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: insetul 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); box-shadow: inset 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; border-radius: 4em; opacitate: 0; filtru: alfa (opacitate = 0); -webkit-tranziție: .3s top ușurință-in, .3s opacity ease-in; -moz-tranziție: .3s maximă ușurință-in, .3s opacity ease-in; -o-tranziție: .3s maximă ușurință-in, .3s opacity ease-in; -ms-tranziție: .3s maximă ușurință-in, .3s opacity ease-in; tranziție: .3s opacitate ușoară; .pink background-image: -webkit-gradient linear (top, rgb (247, 130, 151), rgb (244, 102, 119)); fundal-imagine: -moz-linear-gradient (top, rgb (247, 130, 151), rgb (244, 102, 119)); fundal-imagine: -o-linear-gradient (sus, rgb (247, 130, 151), rgb (244, 102, 119)); fundal-imagine: -ms-gradient linear (top, rgb (247, 130, 151), rgb (244, 102, 119)); fundal-imagine: gradient liniar (top, rgb (247, 130, 151), rgb (244, 102, 119)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); frontieră: 1px solid # ce4f5e; .yellow background-image: -webkit-gradient linear (top, rgb (254, 218, 113), rgb (254, 186, 72)); fundal-imagine: -moz-linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); fundal-imagine: -o-linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); fundal-imagine: -ms-linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); fundal-imagine: gradient liniar (top, rgb (254, 218, 113), rgb (254, 186, 72)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); frontieră: 1px solid # dea94f; .blue background-image: -webkit-gradient linear (top, rgb (172, 228, 248), rgb (108, 205, 243)); fundal-imagine: -moz-linear-gradient (top, rgb (172, 228, 248), rgb (108, 205, 243)); fundal-imagine: -o-linear-gradient (top, rgb (172, 228, 248), rgb (108, 205, 243)); fundal-imagine: -ms-gradient linear (top, rgb (172, 228, 248), rgb (108, 205, 243)); fundal-imagine: gradient liniar (top, rgb (172, 228, 248), rgb (108, 205, 243)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); frontieră: 1px solid # 79b5cb; .menu li: plasați un spațiu top: -1em; opacitate: 1; filtru: alfa (opacitate = 100);
Acum, să ne direcționăm atributele de date în schimb, va trebui să adăugăm câteva reguli în CSS.
Va arata foarte asemanator cu ceea ce am folosit pentru elementele noastre de span. Totuși, de această dată, vom viza: după pseudo elemente de etichete de ancorare cu un atribut de "bubble-uri de date". Pentru a face acest lucru, folosim selectorii de atribute CSS.
Pe măsură ce folosim un: după pseudo (și prin urmare, generând conținut), va trebui să definim câteva carne din conținutul său: "Încă o dată vom folosi atributul personalizat pe care l-am creat în HTML și vom insera că.
Din nou, pentru a gestiona vizibilitatea balonului nostru, îi vom da o opacitate de 1 atunci când link-ul este suspendat. Din păcate, din cauza limitărilor cu selectorul de atribute, nu putem să le animăm cu CSS în sine.
.meniul li a [data-bubble]: după content: attr (data-bubble); Poziția: absolută; sus: -1.25em; dreapta: 0.5em; lățime: 1,5; înălțime: 1,5; line-height: 1.5em; text-align: center; font-familie: "Helvetica Neue"; font-weight: bold; Culoare: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .15); -webkit-box-shadow: insetul 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: insetul 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); box-shadow: inset 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; border-radius: 4em; opacitate: 0; filtru: alfa (opacitate = 0); .menu li: mutați un [bubble de date]: după opacity: 1; filtru: alfa (opacitate = 100);
În cele din urmă, trebuie să stilizăm conținutul generat în cadrul diferitelor clase astfel încât să putem schimba culorile cu ușurință (exact așa cum am făcut cu elementele de span).
a.pink [data-bubble]: după background-image: -webkit-gradient linear (top, rgb (247, 130, 151), rgb (244, 102; fundal-imagine: -moz-linear-gradient (top, rgb (247, 130, 151), rgb (244, 102, 119)); fundal-imagine: -o-linear-gradient (sus, rgb (247, 130, 151), rgb (244, 102, 119)); fundal-imagine: -ms-gradient linear (top, rgb (247, 130, 151), rgb (244, 102, 119)); fundal-imagine: gradient liniar (top, rgb (247, 130, 151), rgb (244, 102, 119)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); frontieră: 1px solid # ce4f5e; a.yellow [data-bubble]: după background-image: -webkit-gradient linear (top, rgb (254, 218, 113), rgb (254, 186, 72)); fundal-imagine: -moz-linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); fundal-imagine: -o-linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); fundal-imagine: -ms-linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); fundal-imagine: gradient liniar (top, rgb (254, 218, 113), rgb (254, 186, 72)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); frontieră: 1px solid # dea94f; a.blue [data-bubble]: după background-image: -webkit-linear-gradient (top, rgb (172, 228, 248), rgb (108, 205; fundal-imagine: -moz-linear-gradient (top, rgb (172, 228, 248), rgb (108, 205, 243)); fundal-imagine: -o-linear-gradient (top, rgb (172, 228, 248), rgb (108, 205, 243)); fundal-imagine: -ms-gradient linear (top, rgb (172, 228, 248), rgb (108, 205, 243)); fundal-imagine: gradient liniar (top, rgb (172, 228, 248), rgb (108, 205, 243)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); frontieră: 1px solid # 79b5cb;
Am creat cu succes un meniu împreună cu câteva bule de notificare îngrijite și le-am animat! Am mers chiar mai departe și am profitat de noi tehnici în cadrul HTML5.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
Accentsconagua