Вдохновлённый недавним постом и комментарием к нему, решил сделать аналогичную интерактивную версию.
Есть навигация с клавиатуры, подсветка активных строк, а также индикация соответствия строки регулярному выражению. Для удобства подсказки выделенной ячейки поворачиваются горизонтально.
Разметка – чистый HTML+CSS3.
Почти работает в последних версиях популярных браузеров. В IE9 глючит навигация мышкой, в FF и Opera наблюдаются проблемы с производительностью. И только Chrome – 100% OK.
Буду благодарен за советы по оптимизации.
Ссылка – вот. Детали реализации – под катом.
Читать полностью »
Рубрика «html» - 129
Кроссворд из регулярных выражений: интерактивная версия
2013-04-09 в 9:36, admin, рубрики: css3 transform, html, javascript, кроссворд, ненормальное программирование, Регулярные выражения, метки: css3 transform, html, javascript, кроссворд, регулярные выраженияПрощай, Zen Coding. Привет, Emmet!
2013-04-07 в 20:15, admin, рубрики: css, emmet, html, zen coding, Веб-разработка, плагин 
Еще в 2009 году, 
Сергей Чикуёнок опубликовал статью, в которой представил новый способ написания HTML и CSS кода. Этот революционный плагин, назывался Zen Coding, он помогал многим разработчикам на протяжении многих лет и в настоящее время вышлел на новый уровень.
Emmet, ранее известный как Zen Coding, является самым производительным и экономным во времени плагином для текстового редактора. Простые сокращения мгновенно расширяются в сложные фрагменты кода, Emmet превратит вас в более продуктивного разработчика.
Для тех, кто предпочитает смотреть, а не читать, вот видео любимых трюков автора.
Читать полностью »
Стильный CSS переключатель без JavaScript
2013-04-06 в 15:08, admin, рубрики: button, css, html, метки: button, css, html Здесь я покажу, как сделать переключатель на основе input-а на чистом CSS.
Дайджест интересных новостей и материалов из мира айти за последнюю неделю №51 (30 марта — 5 апреля 2013)
2013-04-05 в 19:28, admin, рубрики: Blink, css, css3, Facebook Home, HTC First, html, html5, jquery, JS, mozilla, servo, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Интересное, Новости, ресурсы, ссылки, ссылки на сми, метки: Blink, css, css3, Facebook Home, HTC First, html, html5, jquery, mozilla, servo, браузеры, веб-дизайн, Веб-разработка, дайджест, интересное, новости, ресурсы, ссылки, ссылки на смиПредлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №51 (30 марта — 5 апреля 2013)")
Инструменты и примеры кода для разработки ARIA
2013-04-03 в 13:00, admin, рубрики: accessibility, html, web-доступность, Веб-разработка, вспомогательные технологии, метки: accessibility, web-доступность, вспомогательные технологии Подборка инструментов, примеров кода и других ресурсов по теме разработки с использованием WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications), инициативы обеспечения доступности высокофункциональных Интернет-приложений.
Читать полностью »
Создание аддона для браузера Maxthon на примере (HTML TO FB2)
2013-04-02 в 21:26, admin, рубрики: fb2, html, аддон, браузеры, Песочница, метки: fb2, html, аддонПредыстория в 2 моментах.
Люблю очень читать — читать на электронной книжке.
Момент 1.
у меня есть вот такая э-книжка eMatic EB105. Книга читает текстовые форматы:PDF/ePUB/TXT/FB2/HTM/MOBI/RTF. Но есть один огромный минус этой книги — в книге нету подключения к Инету. И получается что почитать в онлайне нельзя.
Момент 2.
Пользуюсь браузером Maxthon. Хороший облачный браузер(правда по-моему китайский — ну ниче). В нем есть возможность самому дописывать плагины(аддоны)
В результате возникла идея создания аддона с помощью которого можно сохранять страницы сайта(статьи) в формат FB2 которые можно будет «закидывать» в э-книжку.
Итак, условия задачи:создание аддона для браузера Maxthon на примере аддона HTML_FB2. При чем аддон будет ссылатся на сайт где можно в онлайне конвертировать текст или страницу. Хотите написать что-то круче — пожалУйста пишите.
Уф! Чуть не забыл — нужно зарегится на форуме браузера.
Читать полностью »
Верстка писем. Снова баги
2013-04-02 в 4:01, admin, рубрики: css, html, mail.ru, метки: mail.ru, Яндекс.Почта 
Автор изображения Eva Galesloot
Привет!
Прежде всего хочу принести извинения в адрес mail.ru и лично Андрею Сумину AndrewSumin за пост, написанный сгоряча. Проблема верстки писем изрядно наболела, но местами все не так плохо как казалось. Присутствуют и проблемы.
Касательно mail.ru на данный момент претензий почти не имею. Верстать письма под эту вебморду так же приятно, как и для гуглопочты. Очень приятно видеть, что русские вебморды стали поддерживать фоновые изображения.
Знаете чего очень не хватает? Фичлиста от разработчиков почтовых клиентов и вебморд. Было бы очень здорово узнавать из первых рук, какие фичи ввели в обращение, а какие наоборот — урезали. Это облегчило бы головную боль верстальщика, да и пользователь перестал бы получать кривые письма. Да, это очень важная информация.
Ниже приведу несколько новых багов, которые стоит учесть при подготовке писем, а разработчикам — закрыть их.Читать полностью »
Первоапрелськие CSS снипеты
2013-04-01 в 7:44, admin, рубрики: css, css3, html, html5, javascript, метки: css, css3, html, html5Предлагается вот такой вот комплект CSS снипетов, которыми можно раскарсить первое апреля.
/*
Turn every website upside down
*/
body {
/*-webkit-transform: rotate(180deg);
transform: rotate(180deg);*/
}
/*
blur every website for a split second every 30 seconds
*/
body {
/*-webkit-animation: blur 30s infinite;*/
}
/*
Spin every Website
*/
body {
/*-webkit-animation: spin 5s linear infinite;
animation: spin 5s linear infinite;*/
}
Дайджест интересных новостей и материалов из мира айти за последнюю неделю №50 (23 — 29 марта 2013)
2013-03-29 в 20:17, admin, рубрики: css, css3, html, html5, jquery, JS, spamhaus, WebRTC, windows blue, YouTube, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Интересное, Новости, ресурсы, ссылки, ссылки на сми, Часы, метки: css, css3, html, html5, jquery, retina, spamhaus, WebRTC, windows blue, youtube, браузеры, веб-дизайн, Веб-разработка, дайджест, интересное, новости, ресурсы, ссылки, ссылки на сми, ЧасыПредлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №50 (23 — 29 марта 2013)")
Игры с физикой благодаря HTML5 и JS. Программист симулирует движение ткани
2013-03-29 в 0:09, admin, рубрики: canvas, css, html, html5, javascript, метки: Canvas, css, html5, javascriptПрограммист, именующий себя Stuffit, опубликовал исходный код на портале Codepen. Код симулирует физику ткани. Использует HTML5, Canvas, CSS и JavaScript, приблизительно 300 строчек кода. Ткань без текстуры, простая сетка, но демонстрационным целям служит отлично.
Есть возможность испытать код прямо на Codepen
Если потянуть мышкой очень сильно, полотно может и порваться. Впечатсяет простота кода, которому для работы нужен только браузер. Дает представление о том, в каком направлении будут развиваться веб-игры. Staffit Читать полностью »