Яндекс.Субботник в Киеве — вёрстка, API и другое…

15.04.2009

Категория: Веб-разработка

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

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

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

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

, , , ,

Резиновые кнопки с помощью button

3.10.2008

Категория: Веб-разработка

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

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

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

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

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

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

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

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

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

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

, ,

Как Internet Explorer поддерживает CSS?

11.06.2008

Категория: Веб-разработка

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

, ,

Facebox IE6 png transparency fix!

26.03.2008

Категория: Веб-разработка

С пылу с жару! Как я рад, что пофиксил немного «Facebox» (особенно учитывая мои слабые познания js)!!!
Суть проблемы проста — .png рамки непрозрачны в ИЕ :(
Для этого перепробовал кучу решений и остановился на Ifixpng, плагине для jQuery, который фиксит прозрачность. Качаем, подключаем скрипт и инициализируем его на страничке:

1
2
3
4

jQuery().ready(function(){
        $('a[rel*=facebox]').facebox();
        $('#facebox td').ifixpng();   < ------
});

Ура, уголки стали прозрачными! Но у нас появилась новая проблема — ifixpng не поддерживает CSS свойство «background-repeat», из-за чего некорректно ображаются рамки. Так что напильничком подрихтовываем стили facebox’а (facebox.css): 

1
2
3
4
5

#facebox .b {
  background: #555;
  opacity: .70;
  filter: alpha(opacity=70); /* for IE6 support */
}

Теперь нам совсем не нужен файл "b.png" и с моего полупинка фейсбокс работает как и задумывал автор (которому, кстати, огромный респект)! Удачи!

, ,

Перенос слов в теге PRE

28.12.2007

Категория: Веб-разработка

html-pre-tag.png

Вы наверное не раз замечали, что при использовании тега PRE или CODE для отображения какого-то куска кода получается весьма некрасивая картина. А именно: строки отображаюся без переносов, растягивая и портя дизайн сайта. До того как я написал прошлую заметку я особо не заморачивался данной проблемой. Сегодня же пришлось погуглить и найти красивое CSS решение проблемы:

1
2
3
4
5
6
7

pre {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}
,

PNG-прозрачность в IE 5.5-6-7

27.12.2007

Категория: Веб-разработка

png-menu.jpg
Ковырялся недавно с PNG в менюшке и пришлось перепробовать несколько решений. Приведу те, которые понравились.

, , ,

CSS-debug

25.12.2007

Категория: Веб-разработка

Вот и настало время выплеснуть из себя заметку по CSS :)
Что-то из инструментария хочется описать. Упрощаем и делаем свою работу удобнее! Зачем? И ребёнку ясно — возможность в рабочее время иметь законные минутки, чтобы написать в блог или порубиться в КС с коворкерами :)

Сегодня я расскажу о КСС-дэбаге и диагностике :)
Подробнее »

,
Стр. 2 из 212