CSS-спрайт (англ. sprite — ельф, фея, домовик) — розміщення кількох зображень у одному файлі і подальше їх вирізання засобами CSS. Це дозволяє зменшити кількість HTTP-запитів до сервера, а отже й зменшити час завантаження сторінки. Проте верстальнику потрібно докластись до попіксельного позиціонування зображення тла. Слово «sprite» почали застосовувати до графічних об’єктів мультиплікатори студії Діснея, звідки й походить така дивна назва. Було б чудово, якби українські мовознавці придумали питомо український відповідник для цього слова.
Щоб вирізати будь-яку ділянку із зображення досить знати 2 пари чисел: розмір зображення по висоті і ширині і координати лівої верхньої точки. У CSS висота задається аргументом height, а ширина аргументом width. На практиці зображення у файлі спрайту краще розміщувати по вертикалі. Тоді значення ширини можна не вказувати зовсім. Координати точки на зображенні тла з якої треба починати відображення задаються аргументом background-position.
Отже візьмемо таку картинку:
і зробимо кнопку, яка міняє тло при наведенні курсора:
Кнопка
(ще…)
Кілька порад для прихорошення звичайного тексту (не заголовки, не меню, не списки, не форми).
Перед тим: Дані поради є в дечому гіперболізовані. Якщо дотримуватись їх усіх, то Мережа стане одноманітною і некрасивою. ;)
Не робіть широких рядків
У друкованій продукції цього правила совісно дотримуються. Книга має невелику ширину. 19-дюймовий монітор ширший за неї більш ніж у 2 рази. В газетах сторінка поділяється на шпальти. А на сайтах рядок дуже часто довший за 100 символів і це утруднює читання. Я думаю, частково це пов’язано зі стереотипами. Перший — стереотип паперового читання і писання, у яких сторінка заповнена повністю з метою економії паперу. Другий — стереотип маленьких моніторів і низьких роздільних здатностей. А окрім стереотипів підключається ще й звичайна психологія. Мозок погано сприймає пустоту (відсутність інформації). Тому перед дизайнером, який хоче хорошого usability, стоїть завдання не робити широких рядків і одночасно заповнити чимось порожній простір.
У одному з підручників по LaTeX я зустрічав, що рядок має містити не більше 66 символів. Для програмного коду рекомендують вкластися у 80 символів, але це більше пов’язано з особливостями старих терміналів, які мали таку ширину. Рахуйте!
(ще…)
Формати і сумісність
Єдиного стандарту користувацьких шрифтів ще немає. На це звання претендує WOFF (Web Open Font Format), який поки підтримується тільки у Firefox 3.6+. Сучасні версії популярних браузерів підтримують підключення шрифтів форматів OTF (OpenType) і TTF (TrueType). Це:
- Webkit/Safari 3.1+
- Opera 10+
- Firefox 3.5+
- Chrome 4+
WOFF підтримує стиснення і тому файл займає в середньому на 40% менше, ніж OTF/TTF.
IE 4+ має власний пропрієтарний формат EOT (Encapsulated OpenType).
Усі ці формати шрифтів підключаються за допомогою правила CSS @font-face.
(ще…)
Привіт світ! Старт новому блогу про веб-дизайн і веб-програмування! Це навчальний блог. Я не професіонал ні в дизайні, ані в програмуванні. Я тільки аматор, що всюди суне свого носа. Але сучасні технології настільки різноманітні, що будь-який noob у якомусь питанні може виявитись обізнанішим за досвідченого професіонала. А мені вигода та, що учачи когось, навчаєшся сам. Це гарно розписано у Ярослава Федорака.
Автор відомий в Мережі під ніком chugylo. Мене ще можна почитати на особистому блозі, Твітері та Енетрях.
Ідея блогу строга і проста. Автор шукає корисні матеріали про верстку та веб-програмування, застосовує їх тут же на цьому блозі і описує як зробити так само. Стиль викладання матеріалу лаконічний і динамічний. Передбачається, що читач цього блогу виконує якесь важливе завдання і йому ні до чого високохудожні витрибеньки.
Блог працює на CMS Wordpress, про Wordpress же буде написано багато хороших статей. У якості теми вибрана тема за замовчуванням Classic. Стандартна тема добре задукоментована і стандартизована, по ній має бути легко вчитись. У JavaScript-програмуванні перевага надається фреймворку JQuery.
Блог називається «Номер третій», тому що це мій третій сайт на окремому домені. Блог Чугила — перший, а майже мертвий Лічильник населення України — другий.
Щасти нам!
