С помощью 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 октября.

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

Форум со скрипом перебрался на новый облачный хостинг и возобновил свою работу. Теперь должен загружаться быстрее и стабильнее работать. Проверяйте сами.

forum.htmlbook.ru

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

В HTML5 добавлен элемент для индикатора выполнения, который позволяет показывать прогресс выполнения определённых задач вроде скачивания или загрузки, в основном всё, что занимает некоторое время.

В этой статье мы обсудим, как добавить этот элемент в документ, задать ему стиль через CSS и сделать анимацию прогресса.

Мне очень не нравится MathML — он громоздкий, неудобный, избыточный и не приспособлен для редактирования вручную. Попробуйте быстро поменять один символ в длинной формуле и вы возненавидите MathML. Вот то ли дело TEX, старина Кнут знал своё дело и писал систему для себя, впоследствии TEX стал стандартом де-факто в научной среде для написания формул. Если вы знакомы с HTML и CSS, то разобраться в TEX не составит никакого труда, он интуитивно понятен и имеет синтаксис, в чём-то схожий с этими языками.

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

С 1 сентября по 1 октября для посетителей сайта небольшая акция — бесплатно доступен справочник по HTML в формате CHM. Справочник обновлён и содержит ту же информацию, что и на сайте.

Также вы можете купить эту версию за 30 рублей, если сочтёте нужным, чтобы, так сказать, поддержать сайт.

В формате CHM

В формате PDF

Недавно <main> был официально добавлен в спецификацию W3C HTML. Теперь, когда осела пыль, настало время погрузиться и узнать, где и когда будет уместно использовать <main>. Давайте начнём.

Одна из немногих вещей, которую не так просто сделать с помощью CSS — это создание колонок одинаковой высоты. Существуют разные подходы, у каждого из них есть свои плюсы и минусы, здесь я хочу показать четыре метода.

Задумаемся над тем, что мы подразумеваем под колонками одинаковой высоты. Как правило, мы не хотим, чтобы контент внутри каждой колонки был одинаковой высоты. Если бы это было так, тогда нет никакой проблемы, поскольку высота колонок, естественно, будет такой же. На деле под колонками одинаковой высоты мы имеем в виду колонки, которые выглядят одинаковыми без контента внутри.

Не вдаваясь в обсуждение того, почему HTML5 доступен сегодня, а не в 2022 году, эта статья даст вам набор шаблонов HTML5, которые вы можете использовать в своих проектах прямо сейчас.

В CSS нумерованный список может быть с латинскими и греческими буквами. А вот русских букв для списка нет. Нам это обещают в CSS3, но когда в реальности браузеры начнут поддерживать эту возможность никому не известно. Так что не станем пассивно ждать этого момента, и с помощью возможностей CSS3 добавим русские буквы в наш список прямо сейчас.