Deerua about Coding

Если навесить фон на текст, он будет выглядеть довольно просто, но если строки начинают переносится, фон пересекается не особо красиво… Что бы нам помочь, сделано свойство в CSS outline. О нём писал ранее, в статье о CSS debag’e.

Что же за зверь такой, этот outline — это внутренний бордер элемента, который не влияет на параметры длины элемента… Параметры такие же как у бордера

* { outline: #outline-color   outline-style outline-width px ­}

Для примера посмотрим на текст с разными свойствами:
 

Просто перенос	line-height: 90%	outline: 1px solid red	font-family: ’Calibri’
HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО

Вывод, вопрос «можно решить»:

• через line-height, но когда у текста паддинг выглядит не очень
• через подстановку другого фонта, и опять паддинг
• с помощью outline. Казалось бы, задача решена, но есть одно но, или даже два — это старые ИЕ и тупая Опера, которая с этим свойством делает что хотит. Ещё иногда в ФФ при больших значениях падинга текста, и аутлайне, появляются артефакты, но они лечатся с помощью -moz-outline-offset (достаточно указать смещение на полпихеля)

Есть ещё одна проблема, фон картинкой будет выглядеть ужасТно. Что же делать с толпой недобраузеров и фоновой картинкой? Тут приходится хитрить. Для этого можно просто использовать 3 спана (position: relative;), 2 которых смещены друг от друга в разные стороны + кастомный фонт  

3 spans (left: -5px, 5px, -2.5px)	всё + line-height: 95%	background-image	background-attachment: fixed
HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО
Тут всё круто	line-height делает прикольній декор	фон едет на следующей строке	fixed — правит это всё, но не для ИЕ6-7 (нужен expression)

Итого мы имеем:

.smaple, .sampleB {
	font-size: 18px­;
	font-family: 'Calibri', 'Trebuchet MS'­; 
	line-height: normal­;
}
.sample span {
	position: relative­;
	background: red­;
	color: white­;
	left: -5px­;
}
	.sample span span {left: 5px­;}
	.sample span span span {left: -2.5px­;}
	
.sampleB span {
	position: relative­;
	background: transparent url('bg.png') 0 0 fixed repeat­;
	left: -5px­;
}
	.sampleB span span {left: 5px­;}
	.sampleB span span span {left: -2.5px­;}

ps: по материалам chikuyonok.ru — Серёге привет!

Всем привет :)

По нужде добавил обработчики мыши (клик, влёт, вылет) и функцию обработки селектора — в простонародье each(). Рание немного модифицировал селектор + расширил обработку параметров, что бы можно было работать с each ;)

Работает each() вот так:

u$("#chars td").each(function(){
	u$(arguments[0]).onmouseover(function(){
		alert(arguments[0].tagName);
	});
});

Обращаться к передаваемому обжекту пока через arguments[0], в планах сделать через this, но там нужно сделать хитрые манипуляции + свой собственный eval() через добавление к заголовку джаваскрипта с контентом самой функции ;)

Для примера прикрутил к предыдущей статье ZeroClipboard, что бы при клике Копировать содержимое ячейки ;) Там всё просто:

• создаём объект типа ZeroClipboard.Client()
• через each() вешаем на onmouseover() обработчик
• дальше уже ZeroClipboard вешает свой флешовый click() по срабатыванию которого и происходит копи-в-буфер

• Посмотреть Пример
• Почитать о minijQuery
• Скачать minijQuery 0.0.2.0a

Есть проекты разны-вкусны, делаешь его на англицком и руссише, а тут клиент бац и говорит что нужно ещё пару-тройку европеских ленгвиджей, а CMSка то windows1251 и точить ой как лень под UTF8 всё и везде. Вместо желанных умляутов, клиент в лучшем случаи увидит букву без точек, запятых, а что ещё хуже знаки вопроса.

Простой выход — помахать дороговизной переработки, и объяснить то-сё, а можно просто сделать через ВИЗИВИГ реплейсы непонятных символов в альтернативные спецсимволы, а в простых инпутах заставить вставлять вместо тех символов спец-коды.

Пример таблички (бабосики):

Display	Friendly Code	Numerical Code	Hex Code	Description
€	€	€	€	Euro
₣		₣	₣	Franc
₧		₧	₧	Peseta
₤			₤	Lira

• Посмотреть список char-codes для
  Spanish, Italian, German, French

О, делал УТФ8 проектик, а тут мои скриптики перестали работать + некоторые крохотные правочки.

• Посмотреть minijQuery
• Посмотреть habraAlert

Сделал их в юникс кодировочке, а не дос ;)

ps: новый Джиквери 1.4 шикарен, скорость фантастическая… Вот ещё материальчики

• Много инфы о новом jquery 1.4 (инглиш)
• 15 фенечек нового jQuery

Появилось много нового и интересного.
Главная особенность, он стал ещё быстрее (куда уж больше ;)

Посмотреть списочек нового, можно прям на его сайте.

Почитать удобную шпаргалку по 1.4 можно здесь
Перенёс её себе, а то вдруг сайт помрёт ;)

• Посмотреть шпору

ps: так же, в честь дня рождения и выхода новой версии стартанул проект посвящённый последней, читать здесь

Везде уже модные крутые браузеры, которые хорошо поддерживают CSS3 (часть), картинок на сайтах скоро вообще не будет для декорации и выделения фонтов. Начнём с мелкого, рассмотрим text-shadow:

span{text-shadow: #color left top blur­;}

По сути всё просто, указываем цвет, и отступы. Если указать минусовой отступ, тень поедет в другую сторону. Так же есть параметр blur, который тень размывает ;)

Выглядит довольно приятно
Простая тень
Обратная тень
Размазанная тень


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

Код примера выше, выглядит вот-так

.fire {
	text-shadow:0 0 4px white, 
		0 -5px 4px #ff3, 
		2px -10px 6px #fd3, 
		-2px -15px 11px #f80, 
		2px -25px 18px #f20­;
}

зы: владельцы говнобраузеров ничего не увидят.

<!-- Always need this javascript -->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
	// Джикверюшка
	google.load('jquery', '1.3.2');
	google.load('jqueryui', '1.7.2');
	//other examples
	google.load('mootools', '1.2.1');
	google.load('prototype', '1.6.0.3');
	google.load('scriptaculous', '1.8.2');
	google.load('mootools', '1.2.1');
	google.load('dojo', '1.2.3');
	google.load('swfobject', '2.1');
	google.load('yui', '2.6.0');

</script>

• Почитать доки (EN)

PS: каникулы кончились? :))

MD5 — 128-битный алгоритм хеширования, лалала, который нельзя взламать простым компом за пару лет ;)

Сам алгоритм запутан и немного ужасен, сделанных (готовых реализаций) найти через гугл очень просто, их там очень много, но смысл одинаковый и результат тоже ;)

• Посмотреть пример скрипта MD5

Есть сервис аватаров gravatar.com, в котором каждый может хранить на каждый свой мейл по 1 аватару. Работает давно и надёжно.

Как же получить с него нужный аватар? Для этого достаточно к урлу http://www.gravatar.com/avatar/ добавить MD5 хэш емейла и параметр s которым мы указываем размер ;)

md5 = MD5(mail.value);
var gravatar = 'http://www.gravatar.com/avatar/';
var sURL = gravatar + md5;
var sParams = (s != '') ? 's=' + s : '';
sURL += (sParams != '') ? '?' + sParams : '';
avatar.src = sURL;

• Посмотреть Пример

function in_string($needle, $haystack, $insensitive = 0) {
	if ($insensitive) {
		return (false !== stristr($haystack, $needle)) ? true : false;
	} else {
		return (false !== strpos($haystack, $needle)) ? true : false;
	}
}	

Как видим, это просто stristr и strpos ;)

1. styleDeclaration в тэге;
2. #idName с правиле;
3. .className и pseudo-className в правиле;
4. tagName и pseudo-tagName;

Все 4 правила сводяться в одну систему a-b-c-d(где а — наивысший приоритет) и образуют специфичность.

Селектор	Специфичность a-b-c-d	Правило №
*	0-0-0-0	-
li	0-0-0-1	4
li:first-line	0-0-0-2	4
ul li	0-0-0-2	4
ul ol+li	0-0-0-3	4
form + *[type=text]	0-0-1-1	3, 4
table tr td.second	0-0-1-3	3, 4
h2.block.title.	0-0-2-1	3, 4
#xyz	0-1-0-0	2
style=«»	1-0-0-0	1