Не так давно я писал на хабре о Bootmetro — дизайне Twitter Bootstrap в стиле Windows 8. Эта разработка хороша идеей, но на практике все работает очень коряво. К счастью, есть качественно сделанный аналог от Ace Subido — CSS3 Microsoft Metro Buttons.
По сути это набор стилей для кнопок и форм, который можно использовать вместе с Twitter Bootstrap.Читать полностью »
Не так давно я писал на хабре о Bootmetro — дизайне Twitter Bootstrap в стиле Windows 8. Эта разработка хороша идеей, но на практике все работает очень коряво. К счастью, есть качественно сделанный аналог от Ace Subido — CSS3 Microsoft Metro Buttons.
По сути это набор стилей для кнопок и форм, который можно использовать вместе с Twitter Bootstrap.Читать полностью »
Больше всего в своей работе с вёрсткой я всегда не любил свойство float. Спустя годы, верстая достаточно непростой макет обнаружил, что использовал float всего один раз, потом подумал и убрал его.
Есть несколько причин. Например, для очистки всегда нужно использовать некий элемент со свойством clear, из-за чего код засорялся. Особенно страшно было на это смотреть, когда float подвергался список ul > li. Приходилось или добавлять в конец ещё один li с особым классом, или того страшнее span или div между последним li и закрывающим тегом ul (хотелось отрубить себе руку).
Ну и кто не сталкивался с неадекватным (как минимум по логике верстальщика) поведением браузера, который при нормальной, казалось бы, вёрстке шаблона в несколько колонок просто разрывал его и тогда, для лечения, призывался жуткий и прекрасный в своей жуткости .clearfix. Работу которого способны объяснить только шаманы 90лвл.
Благодаря псевдоклассу :checked, появившемуся в CSS3, можно стилизовать формы с чекбоксами и радиокнопками как угодно. В этом топике рассмотрен один очень простой способ, причем без использования JavaScript.
Попросили вот здесь про Sciter слово замолвить… Собственно вот рассказываю.
Sciter есть встраиваемый HTML/CSS/scripting engine для создания UI десктопных и мобильных приложений, классических так и [occasionally-]connected.
В принципе поддерживаются разные парадигмы приложений ограниченные лишь фантазией разработчиков. Например одной фирмой была сделана телефонная система со smart desktop phones на которых работал Sciter-based client — фактически специализированный browser загружающий UI (HTML,CSS, scripts и images) с системного контроллера станции по специализированному протоколу.
Другой пример: фирма Symantec использует sciter как UI для их consumer продуктов — Norton Antivirus со товарищи (since 2007).
На картинке: sciter.exe demo проект из SDK + открытое окно DOM inspector'а, живет в inspector32.dll (исходники в SDK). inspector.dll можно использовать в своем проекте для отладки UI. Естественно что inspector UI есть опять же HTML/CSS/script + толика native code.
Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №26 (6 — 12 октября 2012)")
Читать полностью »
Основным нововведением в новой версии Bundle Transformer стала поддержка языка TypeScript. Кроме того, были внесены изменения в ядро продукта и в следующие модули: BundleTransformer.MicrosoftAjax, BundleTransformer.Yui и BundleTransformer.Csso.
Рассмотрим основные нововведения данной версии:
Читать полностью »
7 июня EA Games запустили новую версию своего сайта. Интерфейс устроен неплохо, однако веб-шрифты выглядят такиииииими уродскими.
И, кажется, я нашёл решение, позволяющее сгладить шрифт при помощи CSS3-свойства text-shadow. Оно превосходно работает на Windows XP (отображаются ли шрифты ClearType или стандартным методом) и в более старых операционных системах, если браузер современный.
![[демонстрационная иллюстрация]](https://www.pvsm.ru/images/sglajivanie-veb-shrifta-pri pomoshi CSS3.gif "Сглаживание веб шрифта при помощи CSS3")
Псевдоэлементы :before и :after позволяют добавлять содержимое (стили) до и после элемента, к которому были применены.
Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.
