Метка: css

Хорошая статейка по CSS и Float блоки (поплавки)

Вот искал и нашел эту статейку со всеми премудростями обращения с блоками — поплавками (float) в CSS. Спешу с вами поделиться 😉

http://designformasters.info/posts/css-float-theory-and-practice/

Для тех, кто хочет иметь этот адрес всегда под рукой в мобильнике, вот QR-Code:

DOCTYPE & Images в таблицах — почему разваливается дизайн?

Это будет краткий обзор моего исследования на тему DOCTYPE (подробнее о DOCTYPE я напишу как нибудь позднее) и поведения <IMG> элементов. Итак, если вы еще не знаете, а являетесь вебдизайнером или верстальщиком HTML страниц, вам надо знать, что лучше указывать тип документа для HTML диррективой DTD в начале любого HTML документа: <!DOCTYPE …>. Потому как иначе, ваша страница может выглядеть и работать не так, как вам хочется (например, без этого определения не работает CSS «position: fixed»). Я долго мучался с этим DOCTYPE, чтобы все работало так, как хотелось бы, и пришел к выводу, что лучше делать именно такое объявление типа: Читать далее DOCTYPE & Images в таблицах — почему разваливается дизайн?

Пипетка цветов прямо из Firefox

Сегодня поставил очень полезный плагинчик для вебмастера сайтов. Кто работал с Фотошоп, знают инструмент «пипетка» — тыкаешь в любое место картинки, получаешь параметр цвета. Я раньше так и делал для сайтов — делал скриншот, потом копировал в Фотошоп, там получал цвет пипеткой. Но если вам надо получить цвет из веб страниц, самый лучший способ — ColorZilla плагин.

Итак, скачиваем, ставим. Внизу слева появляется значок «пипетки». По правой кнопке мыши можно вызвать опции, установить разные настройки. Быстрый вызов — Shift + Esc. При этом появляется мишень — вы наводите на любое место в Firefox, хоть на менюшки самого Firefox, при этом видите цвет в мишени там, где пипетка. Клик — и цвет запомнен. Очень рекомендую поставить опцию «Options» -> «Auto Copy» -> «Enabled». Тогда автоматом цвет при клике будет запоминаться в Clipboard. Работает даже для картинок вебстраницы.
Если удерживать Alt + Shift, то можно прокручивать страницу вправо-влево, вверх-вниз мышкой, с нажатой на ней левой кнопкой (удобно, когда страница больше чем экран).

Но! Этот плагин имеет очень много других полезных фишек. Это:

  • Измерение расстояния (ΔX, ΔY) между текущей позицией мишени пипетки и позицией от предыдущего измерения
  • Редактор цветов
  • Палитры цветов и history по ним (иногда удобно использовать это)
  • И самая полезная штучка — Анализатор цветов страницы (Webpage DOM Color Analyzer). Один вызов этого зверя, и он проанализирует всю страницу, построит палитру цветов, что в ней используется и выдаст вам эту палитру. Если при этом наводить мышкой на цвета, он подсвечивает и показывает куски страницы, где используется этот цвет. Я думаю, полезно это может оказаться, например, в таком случае: вам понравился сайт и его цветовая гамма, вы вызываете анализатор, а потом эту палитру используете. В ней можно исключать какие либо цвета, или разделять ее между участниками через общий сайт addon-са. Вообщем, если поразбираться, должно понравиться. Думаю, на самом сайте можно найти много готовых палитр (не пробовал пока)

Есть у него маленький минус. Если линки имеют :hover псевдокласс, и когда вы наводите на такой линк мишенью, то цвет линка меняется на :hover класс. Поэтому, получить цвет :hover класса можно, а вот цвет простого линка — нельзя, по крайней мере я не нашел этого.

Уже после публикации этого поста, я выяснил, что можно узнать цвет под :hover линком. Не знаю, как я просмотрел это на странице help автора плагина. Вообщем, тыкаем в :hover линк, у нас — цвет после наведения мышки. Кликаем правой кнопкой мыши по пипетке в Status Bar — там есть «Resample Last Location». Выбираем этот пункт — у нас цвет до изменения.