Веб-разработка → Вкладки с внешними скруглениями
Скругленные уголки на сегодняшний день делаются тривиально с помощью border-radius. Благодаря border-radius мы можем «обрезать» блоки сообразно необходимости, но что делать, если нам нужно скруглить «внешний» угол? Проблему проще пояснить графически:

Верхние уголки сделать не проблема, а вот нижние — посложнее. Под катом поясняем как.

Верхние уголки сделать не проблема, а вот нижние — посложнее. Под катом поясняем как.
Веб-разработка → Crosspixel — как PixelPerfect для Firefox, только в любом браузере
Crosspixel — небольшая программка на Javascript (около 15 Кб), которая показывает макет поверх вёрстки; как PixelPerfect для Firefox, только работает в любом браузере :)
Работает так:
Проект на GitHub
Работает так:
- скачайте crosspixel.js и подключите в ваш html-файл;
- укажите путь до вашего файла-макета и его размеры;
- в браузере появится панелька, которая позволяет показывать/скрывать макет (при показе меняет размер окна браузера под макет, при сокрытии восстанавливает прежний размер), менять его прозрачность.
Проект на GitHub
Хабрахабр → HTML-абзацы в текстах топиков на хабре и в хабраредакторе
Я уже давно активно читаю и участвую в обсуждениях постов на Хабрахабр, и вот сейчас, понабравшись кармы, пытаюсь написать вторую статью. И при её оформлении у меня не получается оформить мой текст HTML-абзацами <p>Текст абзаца.</p> — почему-то хабраредактор их вырезает!
Я решил взять пример с остальных авторов, проверил остальные статьи и с удивлением обнаружил что все абзацы у них оформлены тегами <br/>, причём преимущественно двумя! Этим я был очень удивлён, ведь сообщество Хабра публикует множество статей по правильной HTML-верстке, а в самих статьях для разделения статей не использует специально предназначенный для этого тег абзаца <p>!
Я решил взять пример с остальных авторов, проверил остальные статьи и с удивлением обнаружил что все абзацы у них оформлены тегами <br/>, причём преимущественно двумя! Этим я был очень удивлён, ведь сообщество Хабра публикует множество статей по правильной HTML-верстке, а в самих статьях для разделения статей не использует специально предназначенный для этого тег абзаца <p>!
Персональные блоги → Делаем фотографию только средствами php+css+html
На днях мне приснилась бесполезная, но прикольная мысль, а что если попытаться создавать изображения только при помощи php и библиотеке GD2, CSS и HTML. Сказано-сделано.
Идея очень простая — берем исходное изображение, пробегаем по всем его пикселя и узнаем код цвет каждого, после этого создаем див размеров 1px на 1px и задаем ему цвет фона такойже как и у исходного пикселя в изображении. В результате получаем полный аналог графического собрата. Но правда чтобы наслождаться HTML-графикой нужен хороший процессор и современный браузер.
Результат моего эксперемнта можно увидеть тут: HTML-фотосумашествие. Вся суть заключена в исходном коде страницы. Но перед тем как смотреть, на всякий случай откройте отдельное окно браузера, желательно чтобы это был Chrome, он точно справится.
Конечно, на промышленное применение это не потянет, но как just for fun — вполне сойдет.
Идея очень простая — берем исходное изображение, пробегаем по всем его пикселя и узнаем код цвет каждого, после этого создаем див размеров 1px на 1px и задаем ему цвет фона такойже как и у исходного пикселя в изображении. В результате получаем полный аналог графического собрата. Но правда чтобы наслождаться HTML-графикой нужен хороший процессор и современный браузер.
Результат моего эксперемнта можно увидеть тут: HTML-фотосумашествие. Вся суть заключена в исходном коде страницы. Но перед тем как смотреть, на всякий случай откройте отдельное окно браузера, желательно чтобы это был Chrome, он точно справится.
Конечно, на промышленное применение это не потянет, но как just for fun — вполне сойдет.
Персональные блоги → Оптимизация сайтов под IE6 — добро или зло?
Принято считать, что любой уважающий себя HTML-верстальщик должен делать сайты, которые корректно отображаются, кроме прочего, в Internet Explorer 6.0. Как известно, множество проблем во время вёрстки связано как раз с «хаками» и разными ухищрениями, которые приходится придумывать, чтобы IE6 корректно отобразил ваш сайт.С другой стороны, никто особенно не спорит с тем, что среди простых пользователей необходимо популяризировать нормальные браузеры (Opera, Firefox, IE8), чтобы наконец похоронить IE6 и забыть его как страшный сон.
В итоге, имеем парадокс. Если пользователь заходит на страницу из-под IE6, и она корректно отображается, у него нет причин менять свой браузер. И сколько ни говори ему о том, что браузер устаревший и вообще, обновляться он не захочет. Зачем — всё же работает. А вот если значительное количество сайтов у него разъезжается и всячески глючит, то объяснять ему даже ничего не придётся — он сам разберётся в причинах и обновит браузер (или попросит друга).
В связи с вышеизложенным, вопрос: может быть, не нужно оптимизировать сайты для IE6? Может, от этого — только вред? Может, если перестать это делать, пользователи быстрее перейдут на что-нибудь более приличное?
P.S.: Ни в коем случае не призываю специально делать сайты, криво отображающиеся в IE6, да и вообще ни к чему не призываю — просто хочется обсудить наболевший вопрос.
Персональные блоги → Полный html-код для вывода списка регионов России
При создании формы, в строке «регион» потребовалось сделать перечисление регионов. Поискав в сети подобного списка, да ещё к тому же совпадающего с текстом Конституции, не нашёл. В итоге создал свой. Делюсь им со всеми желающими.
1. Важно — регионов сейчас 83 (upd!). Не все программисты заметили, что в последние годы некоторые регионы успели объединиться. Под катом html-код.
2. Создал три варианта для Value. Один по названиям регионов, второй по автомобильным кодировкам, третий — по ISO. Регионы отсортированы по тому, как идут в Конституции, однако у новообъединённых регионов вроде Забайкальского края, код не соответствует положению.
UPD: регионов всё-таки 83. Прошу прощения. Код поправлен.
UPD: создан третий вариант с ISO-3166-2 в качестве ID и Value для регионов.
UPD: добавил недостающие названия республик.
Пожалуйста, пользуйтесь.
1. Важно — регионов сейчас 83 (upd!). Не все программисты заметили, что в последние годы некоторые регионы успели объединиться. Под катом html-код.
2. Создал три варианта для Value. Один по названиям регионов, второй по автомобильным кодировкам, третий — по ISO. Регионы отсортированы по тому, как идут в Конституции, однако у новообъединённых регионов вроде Забайкальского края, код не соответствует положению.
UPD: регионов всё-таки 83. Прошу прощения. Код поправлен.
UPD: создан третий вариант с ISO-3166-2 в качестве ID и Value для регионов.
UPD: добавил недостающие названия республик.
Пожалуйста, пользуйтесь.
Веб-дизайн → этот удивительный tabindex
Многие веб-разработчики часто забывают или совсем не используют параметр tabindex, который определяет последовательность перехода между полями при нажатии на клавишу «Tab». Таким образом, при переходе из одного поля в другое прощелкиваются еще несколько элементов, что рано или поздно начинает уничтожать нервные клетки пользователей.


Каскадные Таблицы Стилей → Тривиальные задачи по вёрстке (часть 1)

Начинаю вести серию статей про вёрстку html css js, начинаю с самого простого, потом планирую описать более сложные вещи и всякие тонкости