Share
Pe măsură ce CSS3 devine mai robust și este mai acceptat, opțiunile pentru elementele de design moderne, distractive, care pot fi create fără grafică, sunt practic nelimitate! Pentru un proiect recent, am decis să văd dacă aș putea să creez un banner centrat centrat cu CSS3 pur. Acest tutorial vă va arăta cum a fost făcut.
După cum se dovedește, este de fapt destul de ușor, folosind doar HTML simplu și semantic și unele trucuri CSS3 mulțumită magiei proprietății de lățime a frontierei. Singurul avertisment: Ca și în cazul tuturor tehnicilor noi CSS3, se poate acționa puțin în unele browsere IE? vom aborda acest lucru la sfârșitul tutorialului.
Iată cum:
Vrem să creăm o bară de legătură de navigare, așa că vom începe cu o listă simplă neordonată [ul] cu linkuri din interiorul [a]. Acesta este unul dintre cele mai elementare blocuri de marcare; bun pentru crearea listelor de elemente care urmează să fie decorate într-un mod similar cum vom face aici:
Codul:
Vrem ca link-urile să plutească orizontal pe pagină, așa că vom adăuga următoarele stiluri:
În primul rând, dorim să eliminăm stilul glonțului din elementele de listă și să le facem să plutească la stânga unul de celălalt și să adăugăm un pic de spațiu între ele.
#navigation li style-style: none; afișare: bloc; plutește la stânga; marja: 1em;
Apoi, vom adăuga un pic de text-umbră, elimina link-ul subliniază, și se adaugă culoarea și dimensiunea textului.
#navigation li a text-shadow: 0 2px 1px rgba (0,0,0,0,5); afișare: bloc; text-decoration: nici unul; culoare: # f0f0f0; font-size: 1.6; marja: 0.
De asemenea, îmi place să adaug un pic de efecte animate moi pe hover:
#navigație a: hover margin-top: 2px;
Pentru a adăuga stelele, am plasat o entitate HTML ✭ (care arată așa?) în interiorul fiecărui link. Acesta este pur decorativ și nu este necesar pentru funcționalitate.
În acest moment, avem deja o secțiune de navigare utilă pe care am putea să o adăugăm într-o pagină. Dar vom continua să creăm o panglică frumoasă pentru a pune aceste legături în interior.
Tehnica de lățime a graniței pe care o vom folosi necesită adăugarea a 4 elemente suplimentare în marcaj. Deși nu este ideal pentru a adăuga elemente străine, pe termen lung este probabil mai eficient decât încărcarea graficelor suplimentare și vom păstra lucrurile cât mai simple.
În primul rând, vom crea un element de container în jurul legăturilor. Acest lucru ne va permite să setăm o lățime pentru a păstra împreună toate elementele bannerului:
- ✭ linkul 1
- ✭ link 2
- ✭ link 3
- ✭ link 4
Vom adăuga următorul stil pentru a seta lățimea și pentru a centra elementul container:
#navigation_container marja: 0 auto; lățime: 960px;
Apoi, vom adăuga dreptunghiul care va fi secțiunea corpului panglicii:
- link 1
- link 2
- link 3
- link 4
Vom adăuga următoarele stiluri pentru a crea fundalul corpului panglicii. Stabiliți un z-index de 500, deoarece dreptunghiul trebuie să fie stivuit deasupra triunghiurilor pe care le vom crea în continuare. Am adăugat atât -moz-box-shadow și box-shadow pentru a ține cont de Firefox și -webkit / IE9 respectiv:
.dreptunghi background: # e5592e; înălțime: 62px; poziție: relativă; -moz-box-shadow: 0px 0px 4px rgba (0,0,0,0,55); box-shadow: 0px 0px 4px rgba (0,0,0,0,55); -webkit-border-radius: 3px; -moz-border-radius: 3px; raza de graniță: 3 pixeli; z-index: 500; / * comanda stiva: foreground * / margin: 3em 0;Apoi, vom adăuga triunghiurile la marginile panglicii:
- link 1
- link 2
- link 3
- link 4
În cele din urmă, vom adăuga niște magie la nivel de margine. Cheia pentru aceasta este stabilirea unei culori a marginii transparente pentru fiecare parte a elementului, cu excepția celei de jos (pentru triunghiurile de sus) și a celei de sus (pentru triunghiurile de jos). Apoi, am stabilit o lățime a graniței de 50px. Acest lucru creează un triunghi isoscel, pe care îl vom poziționa apoi în spatele corpului principal al panglicii:
.l-triunghi-top border-color: # d9542b transparent transparent; Stil de frontieră: solid; border-width: 50px; înălțime: 0px; lățime: 0px; poziție: relativă; plutește la stânga; top: 1px; stânga: -50px; .l-triunghi-jos culoare-limită: transparent transparent # d9542b; Stil de frontieră: solid; border-width: 50px; înălțime: 0px; lățime: 0px; poziție: relativă; plutește la stânga; top: -40px; stânga: -150px;Vom face același lucru și pentru partea dreaptă:
.r-triunghi-top border-color: # d9542b transparent transparent; Stil de frontieră: solid; border-width: 50px; înălțime: 0px; lățime: 0px; poziție: relativă; float: dreapta; drept: -45px; top: -107px; .r-triunghi-fund culoare-limită: transparent transparent # d9542b; Stil de frontieră: solid; border-width: 50px; înălțime: 0px; lățime: 0px; poziție: relativă; float: dreapta; sus: -149px; drept: -145px;Și am terminat! Acest lucru se va face perfect în browserele Firefox și Webkit. IE este notoriu rău la utilizarea acestor proprietăți CSS3, așa că nu se va face perfect acolo, dar vom face tot posibilul pentru a ajunge destul de aproape folosind o pereche de stiluri personalizate.
Pentru IE8 și IE9, vom adăuga câteva reguli de poziționare personalizate prin foaia de stil "ie.css":
.l-triunghi-top stânga: 150px; top: 50px; .l-triunghi-jos left: 50px; top: -12px; .r-triunghi-top .r-triunghi-partea de jos top: -169px;Doar pentru a fi în siguranță (și din moment ce credem în îmbunătățirea progresivă), vom adăuga, de asemenea, un remediu pentru IE7, care poate fi plasat fie în secțiunea cap a paginii dvs., fie într-o foaie de stiluri separate IE7. Alegerea mea a unei soluții este de a ascunde pur și simplu triunghiurile din browserele mai mici decât IE8. Proprietatea lățimii browserului este acceptată în IE7, dar spațiul va fi puțin oprit. Depinde de dvs. dacă doriți să petreceți timpul suplimentar pentru a re-poziționa elementele din IE7:
Înfășurați-o
Imaginile de fundal sunt doar pentru distracție - puteți adăuga propriile dvs. și construiți în jurul acestui document? sau doar să luați totul deasupra și să îl aruncați în propriul design. Dar, în interesul de a fi cuprinzător, iată CSS care adaugă în acele imagini:
html background: # 77d5fb url ('bottom_bg.jpg') centru de jos nu-repeta; corp background: transparent url ('top_bg.png') top centru no-repeat; lățime: 100%; înălțime: 100%; marja: 0 0;Credite: Imaginile sunt de la iStockPhoto - nu putem distribui imaginea de pe insula de jos cu demo-ul, dar o poți apuca aici.
Asta e!
Sper că v-ați bucurat de asta! Amintiți-vă că acesta este un set destul de nou de tehnici? dacă obiectivul tău este 100% stabilitate pe toate browserele cunoscute omului, există modalități mai stabile de a realiza acest lucru folosind imagini de bază pentru fundal. Lăsați-vă comentariile și întrebările de mai jos;)
Aflați mai multe despre crearea unei panglici sau a efectului de pliere:
Creați un efect de bandă 3D în bandă largă (plus un PSD gratuit!)
Am crezut că ar putea fi distractiv să creezi un tutorial despre efectul populare 3D Wrap-Around Ribbon care a apărut atât de mult în acest an. Aceasta este o modalitate excelentă de a adăuga adâncimea designurilor dvs. și este destul de greu de completat.
Vizitați postarea
Sfat rapid: Forme CSS practice
O tehnică obișnuită de design în ultima vreme este crearea unui efect fold, în cazul în care se pare ca o rubrică se înfășoară în spatele containerului. Acest lucru se realizează în general prin utilizarea unor imagini minuscule; Cu toate acestea, cu CSS, putem imita acest efect destul de ușor. Îți arăt cum în patru minute.
Vizitați postarea
Accentsconagua
