• Inline-block как замена float

      Полгода назад я делал перевод статьи на Хабре Подробно о свойстве float. В этот раз взглянем на него немного под другим углом. При разработке сайта мы часто используем float'ы для позиционирования некоторых блоков на странице, например сайдабара. Но так ли это необходимо?

      Float не всегда удобен: например при верстке сетки с изображением. Иногда уместно применять inline-block, который имитирует поведение float'а.

      Что такое inline-block?


      Обычная структура блочного элемента:



      Inline-block — это значение, которые можно назначить свойству display. Название происходит от некоторых характеристик как строчного, так и блочного элементов.
      Читать дальше →
    • Новое для веб-дизайнера за сентябрь 2012

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

        Полезные сервисы


        Easel.io — отличный сервис для прототипирования прямо в браузере.

        Читать дальше →
      • Новое для веб-дизайнера за октябрь 2012

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

          Сервисы и инструменты


          Cut&Slice me — бесплатный плагин для фотошопа, который помогает быстро готовить элементы дизайна для различных типов устройств.

          Читать дальше →
          • +106
          • 70,1k
          • 23
        • Самые простые техники адаптивной верстки

          • Перевод
          Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. Но адаптивный дизайн — это просто! В этой статье представлено 5 примеров адаптивной разметки различных элементов веб-страниц.


          Читать дальше →
        • Руководство по оформлению HTML/CSS кода от Google

          • Перевод

          От переводчика


          С удовольствием ознакомился с этими рекомендациями и теперь предлагаю вам перевод.

          Введение


          Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

          Это относится к рабочим версиям файлов использующих HTML, CSS и GSS

          Разрешается использовать любые инструменты для минификации компиляции или обфускации кода, при условии, что общее качество кода будет сохранено.
          Читать дальше →
        • ikSelect — идеальный плагин для стилизации селектов

            Около года назад, я уже делал подробный обзор jQuery-плагинов для стилизации селектов. Итог остался неутешительным, у каждого из них были свои недостатки, и я так и не смог найти то, что хотел. В комментариях отписалось довольно много разработчиков, но все мы сошлись на том, что идеального плагина нет, и что над любым из них приходится хорошо поработать напильником.

            Недавно на хабре проскакивал Selectik — довольно неплохой плагин, но не без недостатков. Работа над ним, судя по GitHub, ещё идёт, но пока он не очень удобен, и его основные проблемы ещё имеют место быть.

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

            В двух словах: он умеет практически всё, что умеет стандартный селект, при этом отлично стилизируется и подстраивается под особенности реализации селектов разных браузеров. Плагин полностью копирует внешний вид родного селекта Mac OS X, но его без проблем можно стилизировать через css.

            Вот так он выглядит в закрытом виде:

            Вот так в открытом:
            Чем же он лучше остальных?
          • Улучшаем юзабилити за 5 минут

            • Перевод
            • Tutorial
            В этой блогозаписи я намерена поделиться несколькими такими советами по увеличению юзабилити сайта, каждый из которых очень лёгок в реализации. Не все они кросс-браузерны, но всё равно они «глазурь на тортике»: читатель и не заметит, что их нет.

            1. Отображайте нажатия кнопок и кнопкоподобных ссылок


            Мой излюбленный совет. Когда стиль кнопки задаётся в CSS, или когда для отображения необычной кнопки используется рисунок (либо как фон, либо как элемент <img />), то кнопка не реагирует на нажатие во всех или в некоторых браузерах (зависит от ситуации). Вот какой простой уловкою вы можете дать знать посетителю сайта, что он и впрямь нажал на нечто нажимаемое:

            .mybutton:active {
               position: relative;
               top: 1px;
               left: 1px;
            }
            

            Этим кодом кнопка смещается на 1 пиксел направо и на 1 пиксел вниз, когда её нажимают. Испробуйте: выглядит весьма убедительно.

            Есть другие, не менее быстрые варианты: придать границе свойство inset, указать свойству text-indent значение 1px, изменить направление градиентного фона (что можно сделать быстро, если для этого не придётся прибегнуть ко графическому редактору, то есть если где-то ещё на сайте используется готовый перевёрнутый градиент), или комбинация нескольких из них.

            2. Плавные переходы (CSS3 transitions)


            Читать дальше →
          • Чёртова дюжина советов начинающим верстальщикам. Часть первая

              Доброго времени суток!

              Введение


              Я являюсь фрилансером. Раньше я не особо задумывался над тем, как и что делают верстальщики. Я делал серверную часть, а мой друг верстал и набивал контент. Совсем недавно мне захотелось попробовать «что и как». Пару дней назад мне на глаза попался материал, который мне очень понравился. Он наглядно обЪяснял, что и как нужно писать. К сожалению, сылку дать не могу, так как я не запаомнил, где располагался сей мануал, но… Казалось бы, можно это и запомнить, но я пошёл ещё одним путём — законспектировал это дело. Собственно, добро пожаловать в мою записку.
              Читать дальше →
            • Float'омания: разъяснение как работает css свойство float


                После того как меня шестьдесят восьмой раз спросили почему блок с float отображается неправильно, я решил написать эту заметку, которая объяснила бы типичные ситуации, с которыми сталкивается начинающий верстальщик, а так же для того, чтобы в следующий раз просто дать ссылку на эту статью.
                Читать дальше →
              • Несколько полезных сервисов

                  Хочу поделиться ссылками на несколько полезных сервисов. Некоторые из них помогут сэкономить время, другие — сделают за Вас незнакомую/нелюбимую работу. Список разбит по категориям, чтобы было легче ориентироваться.

                  Сервисы опросов
                  userreport.com (добавил Romanych)
                  simpoll.ru
                  webanketa.com (добавил mihass)

                  Кнопки постинга в социальные сети
                  Кнопка от Яндекса
                  addthis.com (добавил UksusoFF)
                  share42.com
                  Читать дальше →
                • Фоторама



                    Около полугода назад я написал простой джейкверный плагин для галерей на сайтах. Назвал его Фоторамой и выложил в интернет. По клику кроссфейдом показывалась следующая фотография, клик с шифтом мотал назад — вот и всё.

                    За эти месяцы Фоторама повзрослела, обзавелась сайтом с логотипом и, думаю, теперь можно написать о ней на Хабре.
                    Читать дальше →
                  • Свежие бесплатные шрифты с кириллицею: PT Mono, ROSA Arion, ROSA Verde, Oxygen

                      Девятое января 2012 года — последний день январских праздников в России. Позади не только западная, но и русская православная дата Рождества Христова, а также и Новый год между ними. (Впереди остаётся только возможность отметить Новый год по старому стилю — реликт павшей Империи, бережно сохраняемый православной церковью и народной традицией со дня его отмены в 1918 году.) Декада праздников стремительно уступает место суровым будням, и ужé сегодня многие из нас лягут спать с учётом завтрашней необходимости раннего бодрствования. И с каким же радостным, увесистым грузом бесплатных подарков мы вступаем в начинающуюся середину января? Насчёт шрифтов своими ответами на этот вопрос всех нас стремились порадовать сразу три словолитни.



                      PT Mono


                      Производитель «ПараТайп» 30 декабря 2011 года объявил в LiveJournal о выходе в свет PT Mono моноширинного шрифта, естественным образом дополняющего шрифтовую систему ПТ Проект, состоящую из семейств PT Sans и PT Serif, появившихся в 2009 и в 2010 году соответственно. Новый шрифт, что небезынтересно, разработан при финансовом участии компании Google и, вероятно, займёт вскорости своё место в её коллекции Google Web Fonts. Как и прежние работы ПТ Проект, новый шрифт включает буквы не только русской кириллицы, но и кириллических систем письменности десятков других народов современной России и ряда соседствующих народов и стран. Он также может считаться свободным, потому что одна из его версий распространяется по лицензии OFL (SIL Open Font License). И вот опубликованная на сайте у «ПараТайп» картинка внешнего вида шрифта:

                      [PT Mono]
                      Нетрудно видеть, что у новинки почти нет недостатков, кроме, быть может, строчной буквы «г», нижняя засечка у которой неимоверно длинна, да и верхняя также увесиста настолько, что отличие от «т» становится, мне кажется, менее значительным, чем могло бы быть.

                      Этот шрифт доступен в единственном (прямом нежирном) начертании.



                      ROSA Arion и ROSA Verde


                      Читать дальше →
                    • RE: Иконки популярных в рунете сервисов

                        Вот смотрю как товарищ grokru выложил свое творчество и прямо вдохновляюсь. И поскольку мне было скучно, я решил тоже вспомнить былое и наштампить иконок. Заняло все это порядка 18-20 минут.



                        Попробовал себя в народном творчестве так сказать. Может совместно создадим habrapack?

                        Архив с .PSD и .PNG
                        Читать дальше →
                      • Перемещения и трансформации в CSS3

                        • Перевод

                        Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!
                        Читать дальше →
                      • Красивый вывод изображений

                          image
                          Всегда мне не нравилось, как выводятся изображения на моих сайтах. Хотелось какой-то упорядоченности, зависимости. Поэтому, я полез искать скрипты и решения в гугле. После безуспешных поисков, решено было делать что-то самому.
                          Но что? Я стал смотреть, как сделан вывод картинок у популярных сайтов. Всё мне не нравилось, пока я не додумался посмотреть вывод в google images и google+. Меня поразило то, что я никогда этого не замечал картинки выравниваются по ширине и высоте не обрезаясь. Такой принцип я и захотел реализовать. Получается мозаика. И всё будто на своём месте.
                          Не долго думая, я сел писать код, который сможет вывести картинки так же.
                          Читать дальше →
                        • Визуальный редактор jHtmlArea

                            Очень компактный, но в то же время довольно удобный визуальный редактор jHtmlArea. По первой букве в названии можно догадаться, что используется jQuery.

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