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

Рис. 1. Треугольники в веб-дизайне

Напрямую сделать треугольник средствами CSS нельзя, поэтому доступны два метода, позволяющих его добавить — через border и transform.

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

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

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

Напоминаю, что до окончания приёма работ на мини-конкурс Хэллоуин остаётся три дня. Поучаствовать в конкурсе может любой зарегистрированный на форуме, нужно сделать изображение монстра, используя только возможности 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. Такой шаг позволяет следить за работой форума не только мне, но и группе заинтересованных людей, что в итоге опять же положительно скажется на работе форума. В остальном всё осталось прежним, все ваши сообщения и темы на месте, какой-либо повторной регистрации не требуется.

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

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

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

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

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