Несколько наиболее интересных ссылок, о которых я писал в своём Твиттере в апреле. Это полезные статьи, сервисы и просто разные разности ))). Берём на вооружение, сохраняем в закладки, делимся с другими – не пропадать же добру!

• Полезный сервис для вёрстальщиков – генератор css спрайтов. Есть визуальный редактор. Удобно!

• Для тех, кто использует браузер Firefox наверняка прийдтся по вкусу красивая тема – SoCool.

• «CSS3 Glow Tabs» (анг.) – статья о том, как сделать табы без единой картинки, используя CSS3.

• Планируйте своё время и составляйте to-do списки с помощью оригинального таск-менеджера «The Big Picture»

• «The Ultimate Guide To WordPress Hacks And Customizations» (анг.) – громаднейшая коллекция статей по настройке и хакам WordPress.

• «Floating panel» – плагин для jQuery, позволяющий создать плавающий виджет c поддержкой IE6. (CSS свойство position: fixed)

• «30 Stunning jQuery Slider Plugins and Tutorials To Boost Your Work» (анг.) – отличнейшая коллекция статей и плагинов для jQuery для создания слайдшоу и всевозможных слайдеров. В закладки!

• «ПТ Санс» – бесплатный русский шрифт (+версия для веба!). Гарнитура состоит из 8 начертаний: 4 стандартных начертания; 2 начертания с расширенными пропорциями для мелкокегельного набора; 2 узких начертания для экономного набора.

• И на последок немного юмора! Суперобложки для книг, которые стыдно читать в метро. Берем такую обложку и оборачиваем ею что-нибудь постыдное. И сразу все понимают: едет интересный человек.

Похожие статьи:

1. jQuery – статьи, уроки, книги…
2. Facebox IE6 png transparency fix!
3. Коллекции бесплатных иконок социальных сетей – зима 2010

Очень полезная вещь, особенно при вёрстке всевозможных кнопок. Вешаем на нужный блок класс inline:

.inline {
	display: -moz-inline-stack; /* FF2 */
	display: inline-block; /* good browsers */
}
 
*html .inline {
	overflow: hidden;
	zoom: 1;
	display: inline;
/* IE6 */}
 
*+html .inline {
	display: inline;
/* IE7 */}

Похожие статьи:

1. 10 CSS фишек, которые станут доступны после исчезновния IE6
2. Непростое CSS меню с использованием спрайтов
3. PNG-прозрачность в IE 5.5-6-7

Всем привет! Снова с вами я, а значит настало время очередной заметки. Ударимся немного в трудовые будни создания сайтов, а точнее горизонтального меню. Но не простого, а… нет, не золотого :) Просто немного нестандартного.

Все вы, надеюсь, вдоволь начитались и наделали css меню с использованием спрайтов (объяснять не вижу смысла, есть много материла на данную тематику – «CSS Sprites: все, что вы знали, но боялись спросить»).

Техника до ужаса проста – делаем список, на фон ссылки стилями вешаем картинку, по :hover смещаем фон…

Создавал десятки простых меню (с прямыми границами) и я…
К примеру такое:

Но однажды попалось с диагональными:

При создании такого меню придётся немного заморочиться. Первым делом нужно создать спрайт-матрицу для каждого состояния кнопок. Пример:

Не пинайте за код (хотя всё в нём ОК) – главное идея! ))

Начнём с xhtml кода меню. Обычный список, у каждой ссылки уникальный id, т.к. меню полностью графическое:

1
2
3
4
5
6
7
8

<ul id="menu">
	<li><a href="#" id="menu-home" class="hide">Home</a></li>
	<li><a href="#" id="menu-incentives" class="hide">Federal Incentives</a></li>
	<li><a href="#" id="menu-approach" class="hide">Personal Approach</a></li>
	<li><a href="#" id="menu-solutions" class="hide current">Custom Solutions</a></li>
	<li><a href="#" id="menu-opportunities" class="hide">Partnership Opportunities</a></li>
	<li><a href="#" id="menu-contacts" class="hide">Contact Us</a></li>
</ul>

Создадим также css спрайт:

И стили для данного меню:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.hide {text-indent:-9999px; overflow:hidden; zoom:1; display:block;}
 
#menu {width:990px; margin:0; padding:0;overflow:hidden; zoom:1;}
 
	#menu li {list-style-type:none; display:inline; margin:0; padding:0;}
 
		#menu li a {float:left;height:30px;background: #145395 url(../img/menu.png) no-repeat 0 0;}
 
		#menu a#menu-home {width:97px;background-position:0 0;}
		#menu a#menu-home:hover, #menu .prev a#menu-home:hover, #menu a#menu-home.current {background-position:0 -30px;}
		#menu .prev a#menu-home {background-position:0 -60px;}
 
		#menu a#menu-incentives {width:174px;background-position:-97px 0;}
		#menu a#menu-incentives:hover, #menu .prev a#menu-incentives:hover, #menu a#menu-incentives.current {background-position:-97px -60px;}
		#menu .prev a#menu-incentives {background-position:-97px -90px;}
 
		#menu a#menu-approach {width:174px;background-position:-271px 0;}
		#menu a#menu-approach:hover, #menu .prev a#menu-approach:hover, #menu a#menu-approach.current {background-position:-271px -90px;}
		#menu .prev a#menu-approach {background-position:-271px -120px;}
 
		#menu a#menu-solutions {width:186px;background-position:-445px 0;}
		#menu a#menu-solutions:hover, #menu .prev a#menu-solutions:hover, #menu a#menu-solutions.current {background-position:-445px -120px;}
		#menu .prev a#menu-solutions {background-position:-445px -150px;}
 
		#menu a#menu-opportunities {width:220px;background-position:-631px 0;}
		#menu a#menu-opportunities:hover, #menu .prev a#menu-opportunitie:hover, #menu a#menu-opportunities.current {background-position:-631px -150px;}
		#menu .prev a#menu-opportunities {background-position:-631px -180px;}
 
		#menu a#menu-contacts {width:139px;background-position:-851px 0;}
		#menu a#menu-contacts:hover, #menu .prev a#menu-contacts:hover, #menu a#menu-contacts.current {background-position:-851px -180px;}

Но у автора вышеупомянутой статьи была ситуация проще – только один край кнопки скошен. У нас же – оба. Получается, что кроме указания фона активному пункту (он жёстко прописан у текущей страницы – класс «current»), нужно ещё позаботиться и о предыдущем (класс «prev» – навесим на li, т.к. IE6 не любит много классов на одном элементе):

Далее задача наша сводится нескольким пунктам (js код ниже):

1. запомнить текущий активный пункт (2)
2. при наведении курсора на пункт меню (4) убрать все классы (6)
3. на предыдущий пункт навесить класс «prev» (7)
4. при убирании курсора (9) убрать клас «prev» (10)
5. вернуть активный пункт меню к первоначальному состоянию (11)

Обратимся за помощью к javascript, а точнее к jquery – благо, данную библиотеку использую почти на всех проектах:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function() {
	var $current = $('#menu .current');
	$current.parent().prev().addClass('prev');
	$('#menu a').hover(
		function() {
			$(this).parent().parent().find('li').removeClass('prev').find('a').removeClass('current');
			$(this).parent().prev().addClass('prev');
		},
		function() {
			$(this).parent().prev().removeClass('prev');
			$($current).addClass('current').parent().prev().addClass('prev');
		}
	);
});

В итоге всё заработает, можете посмотреть демо1.

Можно даже немного пошаманить со картинкой-спрайтом, упростив её!

Смотрим демо2.

PS: и без js тоже вполне приемлимо… и без… Но об этом в следующий раз. Удачи!

Похожие статьи:

1. CSS-debug
2. Как сделать Web IDE портабельной?
3. Facebox IE6 png transparency fix!

Большинство дизайнеров либо не разбираются в веб типографике, либо не хотят. Им нужно готовое решение для разных ОС – Windows, Mac или Linux. Те же, кто достаточно многое в ней понимают – могут чувствовать себя ограниченными в креативе, используя только безопасные веб шрифты.

Использование готовых групп CSS шрифтов (свойство font-face) поможет и тем и другим. Наборы сгруппированы по схожести с основными часто используемыми шрифтами и составлены в такой последовательности: шрифт, его аналоги, кроссплатформенный аналог и общее название семейства.

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

Times New Roman:
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

Georgia:
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

Garamond:
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

Helvetica/Arial:
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

Verdana:
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

Trebuchet:
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

Impact:
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

monospace:
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

Используйте и экспериментируйте!
(По материалам статьи 8 Definitive Web CSS Font Stacks)

Похожие статьи:

1. Aptana – IDE для AJAX, HTML, CSS
2. Cufon или Typeface.js – что лучше?
3. CSS-debug

Для осознания что это за зверь советую почитать замечательную статью от Вадима Макишвили – «Вёрстка в IntelliJIDEA». Часть №1 и Часть №2.

Но самое главное в моей заметке не это. Главное – новость о том, что…

JetBrains открыла программу EAP (Early Access Program) для JetBrains Web IDE. JetBrains Web IDE это IDE для веб программирования. Она построена на основе платформы JetBrains IDE Framework.
Web IDE доступна в двух вариантах: в стандартный вариант включена поддержка HTML, CSS, Javascript. В PHP Developer edition добавляется поддержка PHP и SQL.

Т.е. имеем на выходе:

• всё лишнее (связанное с Java) убрано;
• работа с проектами стала удобнее (нет модулей и пр.);
• дополнительно конфигурировать ничего не нужно;
• запускается и бегает шустрее;
• добавлена синхронизашия с FTP и SFTP!!!

Плюс из того что уже было:

• удобнейшая навигация по файлам проекта и коду;
• анализ и подсветка ошибок в коде на лету;
• встроенная поддержка Subversion, Perforce, Git, и CVS;
• и конечно же кроссплатформенность (Windows, Mac OS X и Linux)

Качаем и кодим с удовольствием!
Ребятам из JetBrains огромное СПАСИБО!

UPD: Чтобы добавить LiveTempalte для CSS нужно скачать архив и распаковать файл в папку «%user%\.WebIde10\config\templates\»!

Похожие статьи:

1. Как сделать Web IDE портабельной?
2. Цветовая схема Monokai для JetBrains WebIDE
3. Aptana – IDE для AJAX, HTML, CSS

Cufon и Typeface.js – это две javascript библиотеки для использования на сайте любых(!) шрифтов (аналоги sIFR), использующих для отображения canvas и VML. В чем же между ними отличия? И какая из них лучше?

Принципы работы

Cufon и Typeface.js конвертируют нестандартный шрифт в свой внутренний формат и потом отображают его с помощью canvas в современных браузерах и VML в Internet Explorer’е. Плюсы такого подхода в том, что нет нужды в плагине для отображения флеш! По сравнению с sIFR, мы получаем большую скорость и гарантию работоспособности на всех компьютерах.

ТТХ

Генерирование шрифтов

Обе библиотеки имеют удобные онлайн-конвертеры шрифтов:
* конвертер для Cufon
* конвертер для Typeface.js
Загружаете свой шрифт, выбираете необходимые группы символов (верхний\нижний регистр, цифры, спецсимволы и т.п.), а на выходе получаете готовый .js файл. Typeface.js поддерживает только TrueType (.ttf) шрифты. Cufón – OpenType (.otf), Printer Font Binary и postscript. Жаль, что конвертер Typeface.js имеет встроенную проверку лицензии и откажется конвертировать запрещённый к распространению шрифт.
Вопрос о выборе групп символов Typeface.js задаст только посе загрузки шрифта. Cufon же позволяет задать все опции сразу на одной страничке, плюс имеет возможность включить полужирный и курсивный варианты в конечный файл. Кроме того(!), позволяет ограничить использование на определённых доменах и указать качество шрифта.

Вставка на сайт

Обе библиотеки нуждаются в подключении ядра и сгенерированного файла шрифта.
Чтобы в Cufon указать какой именно элемент вы хотите заменять, используется следующий код:

<script type="text/javascript">
  Cufon.replace('h1');
</script>

Typeface.js работат немного по-другому. Он автоматически заменяет все заголовки, в стилях которых указано имя нашего шрифта (например «optimer»):

h1,  h2 {
  font-family:optimer;
}

Остальным же элементам необходимо дополнительно установить класс typeface-js:

<div class="myclass typeface-js">
...
</div>

Internet Explorer 7

В данном браузере есть проблема. Из-за задержки в пару миллисекунд происходит мерцание текста. Прекратить это безобразие легко. Необходимо перед закрывающем тегом добавить код:
Cufon:

<script type="text/javascript"> Cufon.now(); </script>

Typeface.js

<script type="text/javascript"> _typeface_js.renderDocument(); </script>

Лицом к лицу

Перейдём к демо страничке и посмотрим две библиотеки в работе. Как Вы можете заметить – есть отличия в отступах, особенно при изменении размера шрифта. На этом фоне Cufón в более выгодной позиции.

Вердикт

Что же лучше? Cufón или Typeface.js? По функционалу разница небольшая: Cufon поддерживает больше типов шрифтов, Typeface.js – больше CSS свойств. Typeface.js проще в использовании, Cufon меньше и имеет правильные отступы.
Итак, использование Cufon’a предпочтительней, но конечного победителя нет. Это означает, что будет лучшим тот, кто первым реализует поддержку выделения текста! :)

Оригинал статьи: Cufon vs. Typeface.js, which one is better?

Похожие статьи:

1. 8 CSS групп шрифтов для вебдизайна
2. Открытие ссылок в новом или всплывающём окне
3. Что такое RSS?

Вольный перевод статьи «10 Cool Things We’ll Be Able To Do Once IE6 Is Dead».

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

1. 1. Использование дочерних селекторов
   Не нужно больше использовать дополнительные стили для потомков, отменяющие предыдущие. С CSS2 правила применяются именно на дочерний элемент, а не на всех потомков.
2. 2. Полноценное использование 24-битных PNG
   С поддержкой альфа-каналов мы сможем (наконец-то!) использовать картинки с тенями и полупрозрачностью, не переживая за корректное отображение во всех браузерах.
3. 3. Селекторы атрибутов
   Отпадает нужда использовать классы для разных видов полей ввода, вроде <input class=»text» … />. Мы сможем можем стилизировать их, используя CSS2 – input[type="text"]. И даже делать выборку по значению атрибута (возможность из CSS3, поддерживается всеми современными браузерами, включая IE7)!
4. 4. Дополнительные свойства отображения
   Возможность использовать display:inline-block вместо плавающих блоков с последующем прерыванием потока clearfix‘ами или overflow:hidden.
   (Для Firefox используйте display:-moz-inline-stack;)
5. 5. Использование min-width and max-width
   Чистый CSS для задания граничных размеров блока. Никаких expressions!
6. 6. Избавление от 90% CSS хаков и причин для их использования
   Что тут сказать… у ИЕ6 много глюков рендеринга про которые мы сможем забыть :)
7. 7. Нормальное отображение аббревиатур (<abbr>)
8. 8. Предсказуемый z-index
   Никакой головной боли – почему слой X находится поверх слоя Y, когда должно быть наоборот? И мыслей, что сделали что-то не так… ан-нет! всё сделано правильно, это просто баги IE.
9. 9. Экономия времени и денег
10. 10. Получение удовольствия от своей работы :)

Но останутся 3 вещи, которые всё ещё нельзя использовать, пока не исчезнет IE7:

• CSS счётчики, добавляющие динамику
• Свойтво box-sizing, позволяющее выбирать блоковую модель
• Продвинутый javascript (только в IE8 есть кое-какие улучшения в скриптовом движке)

Вобщем, ждём скорейшего исчезновения недобраузеров!

Похожие статьи:

1. На заметку: кроссбраузерный CSS display: inline-block
2. Facebox IE6 png transparency fix!
3. Как Internet Explorer поддерживает CSS?

Яндекс приглашает в гости всех, кому интересно поговорить о HTML-вёрстке, CSS, API и обсудить эти темы за чашкой кофе. Пройдёт субботник 25 апреля.

Субботники ориентированы на разработчиков и проходят в комфортной, неформальной обстановке офиса Яндекса. Участие в Cубботниках бесплатное. Первое мероприятие из цикла Я.Субботник — «Верстка, API и другое…» прошло 31 января 2009 года.

Отличная идея делиться таким уникальным опытом веб-разработок! К сожалению, все места уже заняты, так что остаётся только читать отзывы и статьи, листать презентации и смотреть видео о прошедшем московском:

• Список докладов
• Видеоверсии
• Отчёт о поездке от Юрия “akella” Артюха
• Впечатления на хабре

PS: уже подсел на IntelliJIDEA!
Вёрстка в IntelliJIDEA. Часть №1
Вёрстка в IntelliJIDEA. Часть №2

Похожие статьи:

1. JetBrains Web IDE
2. SVN. Версии под контролем
3. В Киеве состоится конференция LegalCamp 2009

Итак… кнопочки.. небольшое исследование… у кого есть идеи – в комменты!!!

Есть много статей, описывающие техники стилизирования кнопок. Причём оформлять можно как ссылки, так и 2 вида кнопок: input type=»image» и button. Я предпочитаю использовать последнюю.

Многие пишут об удобности этого тега и пророчат великое будущее…

Трудно подобрать себе универсальную технику. В каждой есть свои минусы. Но будем стремиться к идеалу – меньше картинок, меньше лишних пустых тегов в коде!

А.. ещё… по поводу hover – видимо не везде можно избежать использования javascript :( и зум… тоже сильно не поиграешься, так увеличение на 1-2 размера шрифта ещё прокатит, а дальше болт :(

Ознакомлю с видами оформления:

1) «sliding doors» – развижные двери двумя картинками + span.
Хотелось бы отметить сложность использования в Опере (в ИЕ6-7 тоже, но можно пофиксить с помощью CSS) – при клике на кнопке её контент сдвигается и кнопка кажется «поломанной» :(

2) Двери, только одной картинкой + span. Идея ничего так, вот только снова для ссылок и input сделали. Про button забыли :(
Не проблема – подшаманим сами! Или проблема? Фак! :)
Меняем немного код и всё работает вроде :)

Под ИЕ пофиксили нажатие кнопки, а Опера всё ещё глючит. Делаем вывод, что картинки нужно убирать с button и применять ниже, например добавив ещё один span. Этот метод последнее время и использую…

Продолжение следует!

Похожие статьи:

1. 10 CSS фишек, которые станут доступны после исчезновния IE6
2. YoYurec.Я.Ру и ЖЖ
3. WordPress: добавляем в комментарии ссылку на Twitter

«Никак», – быстрый ответ. А для особо любопытных – CSS Compatibility and Internet Explorer, объёмный документ из MSDN с громадным количеством сводных таблиц о поддерке IE5.0-IE8.0 тех или иных CSS селекторов, псевдоклассов…

Похожие статьи:

1. 10 CSS фишек, которые станут доступны после исчезновния IE6
2. На заметку: кроссбраузерный CSS display: inline-block
3. CSS-debug