Зачем нужен word-spacing

Свойство word-spacing относится к той группе свойств для оформления текста, которые применяются довольно редко либо вообще никогда. Насильно задавать расстояние между слов приходится разве только для экзотических шрифтов, в которых небольшой пробел. Впрочем, есть ещё одно применение word-spacing — для чисел больше 999. Это тоже достаточно узкая область использования, но хоть что-то.

Голосование за лучшее изображение

Закончился приём работ на мини-конкурс «Хэллоуин», посвященный созданию изображения только средствами CSS3. Всего в конкурсе приняло участие 14 человек, подано 20 работ, правила позволяли подавать сразу несколько изображений. Осталось выбрать победителей, они определятся путём простого голосования в этом опросе. Принять участие в голосовании может любой зарегистрированный на форуме, у кого написано не менее двух сообщений, это сделано для защиты от накруток.

Вообще, уровень поданных работ приятно удивил. Порой даже не верится, что подобные штуки сделаны не в каком-нибудь графическом редакторе, а в браузере на чистом CSS. Вот несколько понравившихся мне монстриков в виде скриншотов, зацените сами.

124

Три дня до конца мини-конкурса

Напоминаю, что до окончания приёма работ на мини-конкурс Хэллоуин остаётся три дня. Поучаствовать в конкурсе может любой зарегистрированный на форуме, нужно сделать изображение монстра, используя только возможности CSS3. На данный момент выставили 8 работ, посмотреть их пока, согласно правилам, нельзя. Победители определяются путём голосования на форуме с 25 по 31 октября.

Правила конкурса

Если подходить без фанатизма, то создание простой работы, по моим прикидкам, займёт часа два.

Иконки из символов

Кодировка UTF-8 позволяет не только одновременно вставлять текст на нескольких языках, но и добавлять разные символы, которые с успехом могут применяться как элементы дизайна, а также вместо некоторых изображений. Вот какие плюсы это сулит:

  • меньше пересылаемый объём данных по сравнению с изображениями;
  • к текстовому символу можно легко применить любое стилевое оформление;
  • опять же легко изменить стиль символа при наведении на него курсора мыши;
  • допустимо увеличивать размер без потери качества.

Рамки и границы

С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border, как наиболее универсальное, а также outline и, как ни удивительно, box-shadow, основная задача которого — создание тени. Далее рассмотрим эти методы и их различия между собой.

Возвращение ножа и паровоза. Работа с графикой для веба

Реклама

Когда:  25 октября
Где:  г. Киев

Не всегда получается «нарезать» графику для веба? Хотите узнать о других графических редакторах, помимо Photoshop? На мастер-классе «Возвращения ножа и паровоза. Работа с графикой для веба» Вадим Макеев научит вас этому и многим другим штукам, которые должен уметь опытный верстальщик.

Вадим – участник и организатор многих IT конференций, в том числе и международных,  разработчик интерфейсов для Yandex, автор известного блога Пепелсбей.net, руководитель объединения «Веб-стандарты».

Всего за три часа вы узнаете о нюансах работы в разных графических редакторах, подготовке изображения для Ретины, имитации графики, трюках и фолбеках и конечно же получите ответы на все интересующие вас вопросы.

Мастер-класс рассчитан не только на фронтенд-разработчиков среднего и начинающего уровня, но может пригодиться как дизайнерам, так и программистам, которым приходится работать с вёрсткой

Также, вы можете принять участие в онлайн-трансляции данного мероприятия. Для этого укажите код скидки ONLINE в регистрационной форме. Стоимость участия в онлайн трансляции составляет 50% от стоимости участия в живую.

Во время участия в онлайн трансляции вы сможете задавать вопросы автору в режиме чата – ваши вопросы будут озвучены организаторами и вы сможете получить на них ответ. Все участники онлайн-трансляции получают доступ ко всем информационным материалам, как и офлайн-участники.

Подробная информация и регистрация по ссылке: smartme.com.ua/workshops/vozvrashchenie-nozha-i-parovoza-rabota-s-grafikoy-dlya-veba

Форум умер, да здравствует форум!

В последнее время форум htmlbook работал, мягко говоря, нестабильно. Растущая популярность имеет и обратную сторону — не каждый хостинг выдерживает нагрузку и со временем с форумом начинаются проблемы. Но теперь всё будет по другому.

Во-первых, форум взяла к себе под крыло компания it-patrol, на хостинге которого давно уже работает htmlbook.ru. Хотя это один из самых посещаемых ресурсов по вёрстке, сайт много лет работает стабильно, за что спасибо компании it-patrol и её специалистам.

Во-вторых, форум теперь это отдельный проект с новым адресом htmlforum.ru. Такой шаг позволяет следить за работой форума не только мне, но и группе заинтересованных людей, что в итоге опять же положительно скажется на работе форума. В остальном всё осталось прежним, все ваши сообщения и темы на месте, какой-либо повторной регистрации не требуется.

Пример слайдера, управляемого только с помощью CSS3

Стремительное развитие программного обеспечения, а параллельно с ним ещё более резвый рост производительности компьютерного оборудования, растворяют в себе злободневность полемики об эффективном коде. И вот уже в очередном проекте 2-3-страничного сайта нам проще использовать нечто типа jQuery('.spoiler').show(), чтобы оживить статичный сайт. Ведь за мощью компьютера совсем не заметно расточительство ресурсов, вызванное цепочкой внутри библиотечных действий от такой команды, и только ради организации простейшей бизнес-логики на клиентской стороне.

Нынче в том нет ничего зазорного, ведь эволюция ПО и техники позволяет программисту решать задачу, не заботясь о цене и вникании в тонкости процесса. Однако для повышения кругозора и как замечательный экспонат в кунсткамеру, дам ссылку на пример того, что определённая часть бизнес-логики сайта, посвящённая оживлению статики, в принципе могла бы быть реализована вообще без применения скриптовых технологий.

Любителям сначала поразгадывать ребус — как же мне удалось запрограммировать такой интерфейс на CSS — следуйте на страницу примера. Если не отгадаете, загляните за подсказкой в исходный код примера. Там всё прокомментировано и разложено по секциям. Остальным рекомендую читать дальше, где изложена суть этого механизма.

Мини-конкурс Хэллоуин

На форуме продолжается практика небольших конкурсов по разным направлениям веб-разработки. К Хэллоуину надо сделать изображение с помощью CSS3. Правила конкурс изложены в этой теме, вопросы можете задавать там же.

Принять участие в конкурсе может любой желающий, требуется только регистрация на форуме. Победитель определяется путём открытого голосования 31 октября.

Буквица

Буквица является художественным приёмом оформления текста и представляет собой увеличенную первую букву, базовая линия которой находится на одну или несколько строк ниже базовой линии основного текста. Буквица привлекает внимание читателя к началу текста, особенно если страница лишена других ярких деталей. Обычно кроме самого символа используются изображения растений, животных и других объектов. Это, конечно, не обязательно, но может придать определённый настрой содержанию. Если хочется применить на сайте этот эффект, лучше всего для этого подойдет рисунок, выровненный по левому краю (пример 1).