Красива заголовна буква і рядок, що біжить HTML
Здрастуйте шановні початківці веб-майстра. У цій статті ми навчимося робити красиву велику літеру, і змусимо бігти по сторінці будь-який елемент контенту.
Забігаючи вперед, попереджу, що зробити красиву велику букву, тільки тегами html - не вийде.
Можна, звичайно, застосувати атрибут style (що я теж покажу), і заповнити його різними властивостями, але такий код застосовувати не рекомендується, хоча він чудово працює і проходить валідацію.
Тому, після налагодження, всі властивості з атрибуту style, краще перенести у файл style.css, а елементу (красивої великої літери), задавати class.
Спочатку подивимося, як виглядає код великої літери, створеної за допомогою світових стилів. Тут нічого переносити та ставити не потрібно.
Красива велика літера /* Оформлення великої літери */ #yau color : #0000FF ; / * Колір літери * / font-size: 30px; /* Розмір літери */ font-family: "Monotype Corsiva"; /* Шрифт літери */ > p text-indent :3 0px; /* Червоний рядок */ >
Де шукати Бога і звідки чекати диявола? Та тільки в собі самому, і з самого себе! Тут вони обидва. А то - небеса-а-а, підземелля.
Де шукати Бога і звідки чекати диявола? Та тільки в собі самому. Тут вони, обидва. А то — небеса, підземелля.
Після чого, як я вже казав, всі властивості потрібно буде перенести до файлу style.css.
І ще один варіант коду прекрасної великої літери, який на сьогоднішній день є вже застарілим. Але оскільки він часто зустрічається, я його покажу, щоб Ви, зустрівши такий код, знали що це таке.
Тепер залишилося вибрати гарний шрифт для літери, і можна прикрашати текст. Але тут є один підводний камінь.
Справа в тому, що декоративнихшрифтів, які мають кросбраузерність, в інтернеті немає.
«Monotype Corsiva» із сімейства cursive, який я вказав у коді, мабуть єдиний шрифт із заявкою на декоративність, який відобразиться у більшості браузерів.
У ній я розповів, де знайти оригінальний шрифт, та як застосувати його на своєму сайті.
Як зробити красиву велику літеру, відразу для всіх абзаців статті, можна дізнатися в статті Як зробити красиву велику літеру CSS
Переходимо до рядка, що біжить. Щоб будь-який елемент контенту «побіг» по сторінці, потрібно укласти його в тег
— створює рядок, що біжить.
На жаль, цей тег досі не включений до специфікації і тому видає помилку при валідації.
Одна помилка - нісенітниця, але коли їх десяток на сторінці - це вже погано. Тому я наводжу тільки код, без прикладів, щоб уникнути багатьох помилок.
Подивимося, як змінюється швидкість, напрямок руху, довжина бігової доріжки, і ще деякі параметри.
Напрямок руху рядка задається атрибутом direction . У значенні вказується напрямок руху об'єкта.
left - рух вліво; right - рух вправо; ur - рух знизу вгору; down - рух зверху вниз;
Довжина бігової доріжки, при русі по горизонталі, визначається атрибутом width, а при русі по вертикалі - атрибутом height, і впроваджується в тег атрибутом style.