• 120 dpi и шрифты в em

      шрифт в em

      Шрифты в Em/% хороши всем — возможностью пользователей IE увеличивать кегль, заботой о пользователях, что предпочитают увеличивать размер шрифта браузера по-умолчанию, чтоб лучше видеть текст, да и просто являются нормой для профессиональных верстальщиков.

      Минусы: … их вроде как нет, но!
      А что если у пользователя разрешение экрана выставлено не в стандартное 96 dpi, а в 120?
      Сайт с увеличенными шрифтами смотрится уже не так красиво, как нарисовал дизайнер — ведь масштабируются только шрифты, а не весь сайт! А разрешение 120dpi становится всё популярней, особенно на ноутбуках! Что же делать? Возвращаться к px?

      Нет!
      как сделать сайт одинаковым на 96 dpi и 120
    • Печатаем сайты — о незаслуженно игнорируемом правиле @media

        Сегодня я попытаюсь рассказать о том, почему на современных сайтах не должно быть ссылки «версия для печати».
        Спецификация CSS 2.1 подразумевает, что наша страничка может выводится на следующие типы носителей:
        all — стили будут работать для любого типа устройства по мере его способностей
        braille — для вывода на устройства, выводящие информацию азбукой Брайля для слепых
        embossed — то же что и braille, но не для устройств, а для физических страниц
        handheld — говорит за себя — для устройств, ограниченных в разрешении и пропускной способности сети
        print — тоже очевидно — для вывода на устройство печати постраничного материала (он же будет отображен в предпросмотре печати большинством современных броузеров)
        projection — для презентаций, тоже постраничных
        screen — для вывода на экран компьютера, где мы чаще всего сейчас и видим HTML-документы
        speech — для вывода на «читалки»-синтезаторы (в CSS2 назывался «aural»)
        tty — для любителей Lynx, проще говоря — для терминального вывода с ограничениями по форматированию
        tv — для вывода на телевизор (низкое разрешение, проблемы с промоткой)
        Мы остановимся на print и screen
        Читать дальше →
      • Floomby — мгновенный обмен скриншотами

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

          Floombyпростой способ обмениваться скриншотами и файлами.

          Читать дальше →
        • Как найти нужный шрифт, не зная его названия?

            Я уверен, что у любого дизайнера был такой момент, когда он видел где-то какой-то шрифт, который так мог бы пригодится в проекте, но… что за шрифт?.. Ответ на этот вопрос затаился в глубине Вашего сознания, либо в глубине Вашего «незнания» (что разумеется простительно).



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

            Конечно, нельзя рассчитывать, что эти источники дадут вам 100 процентную уверенность в том что вы найдете нужный шрифт, но что помогут, так это точно.
            Читать дальше →
          • Практический HTML: работаем с таблицами

            • Перевод
            Примечание: ниже находится перевод статьи «Bring on the tables», в которой рассматривается использование таблиц по прямому назначению и некоторые методы по увеличению их доступности.

            UPD: текст статьи полностью убран в связи с его неконтролируемыми преобразованиями с момента публикации.
          • Стилизация файл-инпутов

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

              Дело в том, что изменение внешнего вида инпутов, как правило, не вызывает трудностей, но этот вид инпутов отличается от остальных. В первую очередь это связано с безопасностью, во вторую с тем, что каждый браузер по своему отображает этот элемент, и на это почти нельзя повлиять.
              Читать дальше →
            • 39-й способ скругления блока. Один тэг, одна картинка.

                Пару дней назад наткнулся на статью про 38 способов скругления блоков. Очень понравилось. Однако там я не встретил способа, которым пользуюсь уже около года. Он не требует лишних тэгов и требует загрузки только одной картинки (спрайт). Работает во всех современных баузерах и IE6+
                Читать дальше →
              • Лучшие расширения для Firebug

                  Adam DuVander из команды сайта WebMonkey составил список пяти лучших надстроек над Firebug. Вне конкуренции, оказался YSlow, но остальные 4 тоже очень полезны:

                  * Firecookie для простоты работы с cookies
                  * FirePHP для интеграции серверного PHP дебагинга с интерфейсом Firebug
                  * Pixel Perfect для наложения макета на HTML шаблон для контроля соответствия вёрстки
                  * Rainbow для подсветки Javascript синтаксиса

                  Пользуйтесь.
                • Веб-типографика сегодня. Часть V

                    Часть IЧасть IIЧасть IIIЧасть IVЧасть V — Часть VI

                    Часть V



                    Очевидно, что в сфере высоких технологий развитие зачастую происходит быстро и бурно. Так произошло и со средствами отображения информации. В течении каких-то двух-трёх лет обычные ЭЛТ-мониторы почти целиком и полностью были вытеснены стремительно дешевеющими ЖК-собратьями. Что позволило существенно улучшить как геометрию отображения, так и цветопередачу, а также снизить утомляемость глаз за счёт отсутствия вредного мерцания. И если несколько лет назад подобное утверждение в пользу TFT-панелей можно было бы оспорить, то теперь этот факт не вызывает ни у кого сомнений: ЖК-дисплеи намного лучше для повседневной работы рядового пользователя. В связи с этим фактором возникла необходимость поиска качественно новых алгоритмов отображения шрифтов. Одно из таких решений пусть не сразу, но всё же получило определённое признание в среде пользователей, и на сегодняшний день является чуть ли не самым популярным на современных платформах. Речь, конечно же, о технологии рендеринга ClearType, которая послужила причиной разработки новых веб-ориентированных шрифтов…

                    Читать дальше →
                  • Меню «Гаражные двери»

                      garagemenuexample
                      Очень красивое меню, реализованное при помощи Jquery, сравнимое только с меню реализованными на флеше.
                      Это меню работает за счет изменения background-position наложенных друг на друга слоями изображений.
                      Читать дальше
                    • Расставив все элементарные точки над «семантикой»

                        читайте уже наконеч что-то умное
                        Как сказал Robots: « а если без шуток, …, дилетантам лучше читать и учиться, а создание топиков оставить профессионалам.»

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

                        Не раз боролся Delka (Зенич Игорь) за семантичность кода, который пишут в статьях и который в последствии может использоваться как некий учебник для начинающих, тем самым осуществляя нарастание ошибок.

                        В этой статье я объединил (скомпилировал) уже изложенные мысли (!) многих людей, но почему-то так и не донесенные до большинства. (www.flack.ru, www.pepelsbey.net и некоторые другие)

                        Читать дальше →
                      • IE PNG Fix 2.0 Alpha 2 — теперь с поддержкой background position и background repeat

                          — Кросс-пост из моего блога
                          Всем известный IE PNG Fix, который был всем хорош, но который не умел работать с background position и background repeat, наконец — таки исправил этот изъян.
                          Читать дальше →
                        • 9 статей на тему круглых кнопок

                            9 статей на тему круглых кнопок

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

                            Здесь представлены
                            9 отличных статей на тему создания кнопок с изменяемой шириной
                          • Ещё один способ разобраться с PNG в IE6

                              Существует несколько способов избавиться от глюка использования PNG картинок в Internet Explorer 6.

                              Unit Interactive предложили свой вариант решения — Unit PNG Fix.

                              Ключевые особенности:
                              • Малый вес, около 1 килобайта
                                Решает некоторые проблемы функциональность атрибута filter
                                Работает как с тегоми img, так и атрибутом background-image
                                Автоматически запускается
                                Позволяет выставлять авто ширину и высоту
                                Полностью бесплатен


                                Скачать и посмотреть можно на странице Unit PNG Fix
                            • Изучаем наличие layout

                              • Перевод
                              Примечание: ниже представлен официальный перевод статьи «On having Layout» на русский язык. Статья не является окончательной. Этот перевод отражает 9 версию от 23.10.2007.

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