| 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 | 31 |
21 января 2010, 12:36 более месяца назад
CSS: outline такой outline — или делаем равномерный фон для текста
Что же за зверь такой, этот 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 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 — Серёге привет!
18 января 2010, 12:52 более месяца назад
minijQuery 0.0.2a (each, onclick, onmouse*) + demo with ZeroClipboard
По нужде добавил обработчики мыши (клик, влёт, вылет) и функцию обработки селектора — в простонародье 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() по срабатыванию которого и происходит копи-в-буфер
15 января 2010, 18:25 более месяца назад
HTML CharCodes for special symbols (Spanish, Italian, German, French)
Простой выход — помахать дороговизной переработки, и объяснить то-сё, а можно просто сделать через ВИЗИВИГ реплейсы непонятных символов в альтернативные спецсимволы, а в простых инпутах заставить вставлять вместо тех символов спец-коды.
Пример таблички (бабосики):
| Display | Friendly Code | Numerical Code | Hex Code | Description |
| € | € | € | € | Euro |
| ₣ | ₣ | ₣ | Franc | |
| ₧ | ₧ | ₧ | Peseta | |
| ₤ | ₤ | Lira |
15 января 2010, 17:19 более месяца назад
minijQuery, habraAlert fix %)
Сделал их в юникс кодировочке, а не дос ;)
ps: новый Джиквери 1.4 шикарен, скорость фантастическая… Вот ещё материальчики
14 января 2010, 15:34 более месяца назад
Чудестная новость — вышел jQuery 1.4 (малышу 4 года)
Главная особенность, он стал ещё быстрее (куда уж больше ;)
Посмотреть списочек нового, можно прям на его сайте.
Почитать удобную шпаргалку по 1.4 можно здесь
Перенёс её себе, а то вдруг сайт помрёт ;)
ps: так же, в честь дня рождения и выхода новой версии стартанул проект посвящённый последней, читать здесь
13 января 2010, 16:28 более месяца назад
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; }
зы: владельцы говнобраузеров ничего не увидят.
12 января 2010, 13:51 более месяца назад
Javascript API load from google ;)
<!-- 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>
PS: каникулы кончились? :))
24 декабря 2009, 17:33 более 2-х месяцев назад
Javscript: MD5 и пример использования (gravatar)
Сам алгоритм запутан и немного ужасен, сделанных (готовых реализаций) найти через гугл очень просто, их там очень много, но смысл одинаковый и результат тоже ;)
Есть сервис аватаров 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;
21 декабря 2009, 15:49 более 2-х месяцев назад
PHP: in_string (аналог in_array)
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 ;)
17 декабря 2009, 21:55 более 2-х месяцев назад
Приоритет селекторов
- styleDeclaration в тэге;
- #idName с правиле;
- .className и pseudo-className в правиле;
- 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 |