VCard - це цифрова візитна картка, призначена для інтерпретації вашим поштовим клієнтом або іншими програмами, що імпортують контактні дані, такі як Outlook, Thunderbird або адресна книга. Включаючи vCard на своєму веб-сайті, ви полегшуєте відвідувачам завантаження вашої інформації та легке зв’язування з вами в майбутньому. Однак vCard не має візуального компонента, тому розробляти сторінку для нього повністю на ваш розсуд. Ви можете здивуватися як завгодно або як занижено. Якщо ви просто хочете отримати базовий вигляд, що імітує зовнішній вигляд традиційної візитної картки, ви можете зробити це за допомогою елемента div та декількох простих стилів CSS.
1
Завантажте файл vCard на свій веб-сайт. Переконайтеся, що vCard містить лише професійні дані, які вам зручно поширювати в Інтернеті.
2
Створіть елемент div, який ви хочете представляти своєю візитною карткою. Надайте йому унікальний ідентифікатор, наприклад "vcard", та заповніть дані, які ви хочете відобразити на картці. Основна картка може містити ваше ім’я, веб-сайт та електронну адресу. Ви також можете зробити посилання на свою сторінку у Facebook, свій обліковий запис у Twitter чи інші веб-сайти соціальних мереж. Не забудьте включити посилання для завантаження візитної картки. Основний div може виглядати приблизно так:
(555) 555-5555
//www.yourwebsite.com
Завантажте vCard
3
Додайте ідентифікатор vcard у свою таблицю стилів, щоб змінити спосіб відображення div. Якщо ви хочете порівняно велику презентацію картки, використовуючи білий фон і чорну рамку, посвідчення може виглядати приблизно так:
div # vcard {ширина: 400px; висота: 200px; переповнення: приховане; фон: #FFFFFF; межа: 1 піксель суцільний # 000000; }
"Переповнення: приховане;" зупиняє розширення картки по ширині чи висоті, якщо вміст перевищує розмір. Ви також можете визначити розмір та колір шрифту. Наприклад, якби ви хотіли, щоб усе використовувало темно-сірий шрифт Times New Roman у 14 точках, ваш посвідчення матиме такий вигляд:
div # vcard {ширина: 400px; висота: 200px; переповнення: приховане; фон: #FFFFFF; межа: 1 піксель суцільний # 000000; сімейство шрифтів: 'Times New Roman'; розмір шрифту: 14pt; колір: # 3B3131; }
4
Зробіть своє ім’я більшим і помітнішим, додавши елемент div # vcard h1; це змінює лише тег H1 у розділі div vCard. Якщо ви хочете використати 22-крапковий шрифт і додати маленьку сіру тінь, ваш CSS буде виглядати так:
div # vcard h1 {size-font: 22pt; text-shadow: 1px 1px #CCCCCC; }
Елемент "тінь" тексту визначається зміщенням осі x, зміщенням осі y та кольором. Якщо вам потрібна трохи розмита тінь, ви повинні додати третє значення в пікселях, щоб визначити розмиття, наприклад
text-shadow: 1px 1px 4px #CCCCCC;
5
Додайте будь-які інші візуальні чи декоративні елементи, які хочете, щоб ваш елемент vCard вирізнявся. Ви можете додавати зображення, змінювати висоту рядка та вирівнювання абзаців, змінювати кольори - дивіться! Чим візуально привабливіше ваш дизайн, тим більше він буде виділятися.
6
Перевірте посилання для завантаження vCard на своєму веб-сайті, щоб переконатися, що посилання є точним.
