designer de Wonderful Orman Clark a prezentat o dată cititorilor săi un foarte frumos nor de tag-ul de design. Am folosit pe un singur site-ul meu. O să-ți spun cum să marcați aceste tag-uri pentru site-ul tau.
În primul rând avem nevoie pentru a găti tag-ul mult timp cunoscut o imagine care este alegerea sigură pentru etichetele de lungimi diferite. Am făcut aici este:
Dacă luăm în considerare în timpul aspectul devenit browser învechit Internet Explorer 7, va trebui să utilizeze o etichetă imbricată suplimentare:
Cu toate acestea, IE7, nu vom fi luate în considerare, astfel încât am ajuns la ajutorul pseudo-: după.
Se face referire la blocul într-un rând, îndepărtați subliniere, interzicerea ambalaj text la o nouă linie, adăugați o umbră la frumusete, padding pe stânga și dreapta și specificați fundal tag-ul (așa cum vom folosi afișajul de proprietate :. inline-bloc, apoi lungimea blocului cu tag-ul egală cu lungimea textului, plus marjele din stânga și din dreapta, respectiv, partea dreaptă a fundalului nu va fi vizibil):
Acest lucru ne dă următoarea imagine:
Acum adăugați partea dreaptă a fundalului. Facem acest lucru cu ajutorul pseudo-: după. care ne permite să renunțe la tag-ul opțiune. Poziționarea absolut pe partea dreaptă a etichetei de la înălțimea lui completă și specifică partea din dreapta a imaginii:
Și vom obține rezultatul avem nevoie de:
Rămâne doar pentru a adăuga un efect atunci când treceți pe link-ul:
Bonus - vom face până frumos tag-ul pe CSS pur
Tehnologiile moderne permit să impună o astfel de etichetă este în întregime în CSS, fără a utiliza o singură imagine.
Complet va arăta în următoarele browsere: Opera, Google Chrome, Firefox și Safari. În Internet Explorer 9, eticheta va fi lăsată fără pantă, dar că aspectul său este încă acceptabil. Dar, în IE8 și sub tag-ul arata deja nepotrivit.
Pornim de pe partea dreaptă a dreptunghiular. Specificați gradient de fundal, setați limitele de culoare, adăuga efecte de cutie interne și externe ochi umbra si umbra pentru text, extern și intern padding (padding externe 10px Situat chiar pentru a lăsa spațiu pentru triunghiul tag-ul adiacent):
Acum, cu ajutorul pseudo: înainte de a crea triunghiul din stânga. Inițial un pătrat (cu același gradient, rotit doar cu 45 de grade, iar limitele umbră), care vor fi transformate în continuare în triunghi:
Este demn de remarcat faptul că atrage gradienți WebKit în direcția opusă, astfel încât pentru el dat valoare negativă: -45deg. În plus, este posibil să observați că sunt specificate în proprietatea gradientului besprefiksnom nu este de 45, și 135 de grade. Nu înțeleg această logică (probabil, ceva ce nu știu), dar este de a fi în acest fel pentru afișarea corectă.
Pentru a face pătrat triunghiului, folosim proprietatea de a transforma Rotație de valoare (45deg). Cu toate acestea, acest lucru nu este suficient - este de asemenea necesar să aibă un unghi de tocit. Acest obiectiv este realizat prin scalarea axei Y de valorile de scală pentru transformare:
Rezultatul este aproape terminat de design tag-ul:
A fost ultima atingere - pentru a face o gaură în această etichetă. Acest lucru ne va ajuta la o altă pseudo -: după. Pur și simplu a crea un pătrat mic, care rotunjeste colțuri, astfel încât se transformă într-un cerc. Ei bine, pentru a crea efecte surround adăuga o umbră:
Ura! Aceasta are ca rezultat un design substanțial identică a etichetei, care este reprezentat în prima imagine pentru acest post:
În cele din urmă, la fel ca în cazul cu o imagine, puteți adăuga efectul modificării textului sub cursorul mouse-ului.