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


Сразу оговорюсь, что я не буду использовать opacity и абсолютное позиционирование, чтобы разместить контент поверх полупрозрачного блока.

Доброго, Хабр.

Данная статья является ответом всем, кто «читал», «знает» и «разбирается» в проблеме описанной в http://habrahabr.ru/blogs/webdev/50353/.

Так сказать — наш ответ Чемберлену.

Известен следующий баг «народного» браузера — картинки в формате .png, содержащие участки с альфа-прозрачностью отображаются неправильно. А именно — область этих участков заливается серым цветом (спасибо dreamhelg за лаконичное описание сути происходящего в данном случае).

Сегодня в в своей RSS-ленте обнаружил ссылку на очередную статью о конфронтации .png и IE. Воспринял ее, пожалуй, как и бóльшая половина удививших заголовок выше — с предубеждением (мол, опять двадцать пять). Тем не менее, выяснилось много интересного. Например, теперь фоновые .png отлично подчиняются свойствам background-position и background-repeat.

Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

 



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

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

На Хабре так и не смог найти соответствующей темы, известной довольно давно.
Кусочек скрина из QIP Infium -> Настройки -> Общие

Обе галки стоят по-умолчанию.

Самое интересное, что возможность изменить эту настройку появляется только после первого входа в QIP Infium и принудительной регистрации учетной записи qip.ru (jabber). То есть, при первом входе пароли отсылаются, а потом вы уже можете, если вспомните, снять эти галки.

Делайте выводы сами.

Обсуждение на ixbt.com

После заметки о Peppy я почти обрадовался — вот оно, счастье. Наконец появился движок CSS-селекторов, который делает тоже самое, что и jQuery, только быстрее. Сильно быстрее.

Радоваться было недолго, как только я посмотрел в код, то немного ужаснулся: он не соответствовал моим представлениям об исключительной производительности. Совсем не соответствовал. Точнее, немного удовлетворял, но не до конца. Поэтому сразу встал вопрос: а если быстрее?

Почему нельзя сделать быстрое мини-ядро для CSS-селекторов, которое обеспечит базовую функциональность для работы с DOM (ну, совсем базовую — просто выборку элементов, например)? И, самое главное, чтобы это работало не медленнее (в идеале, даже быстрее), чем нативные вызовы.

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

Посмотреть тест.

PS: opacity в тесте не будет.

UPD: тест обновлен: добавлено 5 тестов, исправлена ошибка в css

Google сообщила, что ее браузер Chrome будет находиться в режиме «нескончаемого бета-тестирования». У пользователей будет три вариантa обновления копий браузеров, различающиеся по временным интервалам. Несмотря на то, что формальный ярлык «бета-версии» с браузера был снят около месяца назад, в Google сообщают, что обновления для браузера будут распространяться по каналам бета-версий.

Вы никогда не задумывались, насколько велика может быть так называемая статистическая погрешность? Особенно — в мировых масштабах. Особенно — у, казалось бы, солидных и многократно цитируемых агентств или онлайновых сервисов. Я попробую показать вам, насколько всё грустно. Естественно — на примере статистики использования браузеров (кто меня знает — поймёт, почему). Надеюсь, после прочтения данного мини-исследования вы будете более критично относиться к очередным громким заявлениям различных изданий о рыночной доле той или иной программы.

Управлять потоком можно не только свойствами clear или overflow. Возможно, вы найдёте полезным для себя использование display:inline-block или display:table-cell, способных полностью заменить вам упомянутый overflow, избавляя вас от опасности указания размеров элемента, а также предоставляя дополнительные возможности.

Статья не содержит универсальных решений, но открывает вашему взору дополнительный инструментарий для управления потоком.

Уже неоднократно на хабре (вот в этой публикации и в этой) ставился вопрос о том, что было бы хорошо кнопкам формы, отправляемой на сервер, ставить свойство disabled = "disabled".

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

Свойство clear со значениями left, right, both действительно очищает поток в отличие от overflow со значеним hidden, которое создаёт отдельный контекст форматирования для выбранного элемента, тем самым локализуя действие свойства float внутри элемента к которому применён.

Эта тема в сети не новая, но тут статью об этом не нашла. Оказывается, у IE, начиная с версии 7, есть поддержка интерполяции (режима масштабирования) изображений и управления им через CSS-свойство -ms-interpolation-mode, описанного в MSDN.

Свойство имеет 2 значения:
— nearest-neighbor (менее качественный режим) — по умолчанию
— bicubic (более качественный бикубический метод)

W3C рекомендует использовать это свойство с префиксом -ms.

Новое расширение Firefox под названием Pirates of the Amazon («Пираты Амазонки») превращает крупнейший в мире интернет-магазин в полноценный каталог пиратского контента. Идея простая: «Пираты Амазонки» просто добавляют на каждую страницу каталога Amazon.com ссылку на торрент для бесплатного скачивания этого файла.

Таким образом, мечта любого любителя халявы доведена до абсолюта: вы ходите по магазину, смотрите на ценники и выбираете подходящий фильм (программу, музыкальный альбом, игру), а когда выбор сделан — просто берёте товар бесплатно, нажав на баннер “Download 4 free”.

Плагин работает по типу Greasemonkey, модифицируя код страницы в браузере. Ссылки на торренты получают с популярного трекера The Pirate Bay.

Привет.

Наверное, многие из вас пользовались стандартными javascript-виджетами, написанными как безвестными разработчиками, так и крепкими профессионалами, так и гуру. Есть великолепные коллекции виджетов, поставляемых в качестве плагинов к известным фреймворкам (вроде jQuery, Prototype JS, YUI), так и целые фреймворки, акцентирующие свое внимание на создании виджетов, вроде Ext JS или qooXdoo.

Но что, если вы не хотите использовать достаточно объемный фреймворк для создания простого диалогового окна, или хотите разобраться в том, как создаются такие виджеты, или даже разрабатываете собственный фреймворк?

Об этом и пойдет речь в сегодняшнем посте — как сделать простейшее диалоговое окно и alert средствами чистого javascript, без применения каких-либо фреймворков.

Иногда приходится искать файлы на всяких файлопомойках типа rapidshare. Так как единого поискового механизма не предлагается, слепил левою рукою такую штуковину–искалку. Её можно вставлять в страницы, при нажатии на линк «искать» выкидывается промпт, куда задаётся искомое понятие, по нажатию «поиск» открывается новое окно/таб с результатами поиска. Набросал две версии, для ие и фф. К тому ж вывешиваю список 1689 файлопомоек, которые можно вставлять в искалку. И ещё учитывайте, что гуглостринг ограничен по длине.

Для ФФ
a href="javascript:Qr=document.getSelection();if(!Qr){void(Qr=prompt('Find files ',''))};if(Qr)location.href='http://www.google.com/search?num=50&hl=en&safe=off&q='+escape(Qr)+'+%28rapidshare.+%7C+megaupload+%7C+любое другое название файлопомойки%29&btnG=Search'" target="_blank" rel="nofollow" >Find files</a

Для ИЕ
a href="javascript:Qr=document.selection.createRange().text;if(!Qr){void(Qr=prompt('Find files ',''))}if(Qr)location.href='http://www.google.com/search?hl=en&q='+escape(Qr)+'+%28rapidshare+%7C+megaupload+%7C+любое другое название файлопомойки%29&btnG=Google+Search'" target="_blank" onclick="Qr=prompt('Dateien bei Free File Hosters finden','');if(Qr)location.href='http://www.google.com/search?hl=en&q='+escape(Qr)+'+%28rapidshare+%7C+megaupload+%7C+любое другое название файлопомойки%29&btnG=Google+Search';return false" rel="nofollow" >Find files</a

Список 1689 файлопомоек

посмотреть, как работает, можно тут.

UPDFree file hosting services часто называются файлопомойками из–за несортированности складируемых файлов и неразборчивости сервисов в вопросах того, что там складируется. И вы и я знаем об этом, поэтому большая просьба не обижаться на это название и не обвинять меня в попытке оскорбления.

Решил поделиться файликом, который я использую каждый раз, когда рисую макет или проектирую интерфейс.
Экономит мне кучу времени.



Скачать архив с пээсдэшником (49 kb)

UPD:
Ссылка от saltommeister
Контролы для Эксплорера, Файрфокса, Оперы и Сафари

Ссылка от niker
designerstoolbox.com/designresources/elements/

Ссылка от fatal
456bereastreet.com/archive/200409/styling_form_controls/

Ссылка от AlmeZ
Free Photoshop browser templates for webdesigners and screendesigners

Ссылка от 3fonov
Yahoo Design Stencil Kit

Разрабатывая проект наткнулся на странный глюк в IE. Некоторые стили просто не применялись к странице. Т.к. проект большой и стилей много, на этапе разработки CSS был разбит на много файлов для каждого логически отдельного блока. Выясняя причину я, опытным путём, пришёл к тому, что IE подгружает максимально 31 внешний CSS файл через. Остальные файлы просто игнорируются.
Проверял на IE6 и IE7.

Естественно, когда сайт пойдёт в продакшн весь CSS будет в одном файле, но на этапе разработки этот момент подставил подножку.

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

Raphaël — это небольшая JavaScript библиотека с простым синтаксисом для работы с векторными форматами: SVG и VML (для IE). Впрочем, как я успел заметить у разработчика возникают проблемы с VML (когда многие вещи в SVG делаются очень просто в VML не всегда есть простая альтернатива)