O vCard este o carte de vizită digitală concepută pentru a fi interpretată de clientul dvs. de e-mail sau de alte programe care importă date de contact, cum ar fi Outlook, Thunderbird sau Agenda de adrese. Prin includerea unei carduri vCard pe site-ul dvs. web, le permiteți vizitatorilor să vă descarce ușor informațiile și să vă contacteze cu ușurință în viitor. Cu toate acestea, o vCard nu are o componentă vizuală, deci proiectarea unei pagini pentru aceasta este în întregime la alegerea dvs. Puteți merge la fel de sălbatic sau subestimat pe cât doriți. Dacă doriți pur și simplu un aspect de bază care să imite aspectul unei cărți de vizită tradiționale, puteți face acest lucru cu un element div și un stil simplu CSS.
1
Încărcați fișierul vCard pe site-ul dvs. web. Asigurați-vă că vCard conține doar date profesionale pe care vă simțiți confortabil să le distribuiți online.
2
Creați elementul div pe care doriți să îl reprezentați cartea de vizită. Dă-i un ID unic, cum ar fi „vcard” și completează detaliile pe care vrei să le afișezi pe card. Un card de bază ar putea include numele dvs., site-ul web și adresa de e-mail. De asemenea, puteți să vă conectați la pagina dvs. Facebook, contul dvs. Twitter sau alte site-uri de rețele sociale. Nu uitați să includeți un link pentru a descărca vCard. Div de bază ar putea arăta cam așa:
(555) 555-5555
//www.yourwebsite.com
Descărcați vCard
3
Adăugați ID-ul vcard în foaia de stil pentru a schimba modul în care apare div. Dacă doriți o prezentare relativ mare a cardului, utilizând un fundal alb și o margine neagră, ID-ul ar putea arăta cam așa:
div # vcard {width: 400px; înălțime: 200px; overflow: ascuns; fundal: #FFFFFF; chenar: 1px solid # 000000; }
„Overflow: ascuns;” oprește extinderea cardului în lățime sau înălțime dacă conținutul depășește dimensiunea. De asemenea, puteți defini dimensiunea și culoarea fontului. De exemplu, dacă doriți ca totul să folosească un font Times New Roman gri închis la 14 puncte, ID-ul dvs. ar arăta astfel:
div # vcard {width: 400px; înălțime: 200px; overflow: ascuns; fundal: #FFFFFF; chenar: 1px solid # 000000; font-family: „Times New Roman”; dimensiunea fontului: 14pt; culoare: # 3B3131; }
4
Faceți-vă numele mai mare și mai proeminent adăugând elementul div # vcard h1; acest lucru modifică doar eticheta H1 din div. vCard. Dacă doriți să utilizați fontul cu 22 de puncte și să adăugați o mică umbră gri, CSS ar arăta astfel:
div # vcard h1 {font-size: 22pt; text-shadow: 1px 1px #CCCCCC; }
Elementul text-umbră este definit de decalajul axei x, decalajul axei y și de culoare. Dacă doriți o umbră ușor neclară, ați adăuga o a treia valoare în pixeli pentru a defini neclaritatea, de ex.
text-shadow: 1px 1px 4px #CCCCCC;
5
Adăugați orice alte elemente vizuale sau decorative pe care doriți să le scoate în evidență elementul vCard. Puteți adăuga imagini, puteți schimba înălțimea liniei și alinierea paragrafelor dvs., puteți modifica culorile - înnebuniți! Cu cât designul dvs. este mai atrăgător din punct de vedere vizual, cu atât va ieși în evidență.
6
Testați linkul de descărcare vCard pe site-ul dvs. web pentru a vă asigura că linkul este corect.
