agat.in

CSS fast typing package для Komodo Edit

agat — Fri, 11 Dec 2009 12:36:00 +0000

Cделал так называемую CSS fast typing package для Komodo Edit по методу Виталия Харисова.

Аббревиатуры для ускоренного набирания CSS-свойств.

Портированная Twilight тема для Komodo Edit

agat — Tue, 08 Dec 2009 22:10:01 +0000

Любителям темных красок посвящается. Пользуйтесь на здоровье.

Тестировал на:

HTML
CSS
JavaScript
Diff
PHP

Исправляем ошибки округления ширины в Internet Explorer 6

agat — Sun, 05 Jul 2009 14:58:15 +0000

Проблема

При создании сайтов с «резиновым» дизайном, нескольких колонок с текстом, везде, где есть необходимость задавать ширины элементов в процентах — технических дизайнеров мучил один очень неприятный баг Internet Explorer 6.

Этот браузер, при получении дробных значений ширины, округляет числа в большую сторону.

В итоге, при изменении размера видимой области сайта, сумма ширин становилась больше 100%, что приводило к прыгающим блокам.

Вообще, это проблема всех браузеров и каждый с ней «борется» по разному. Но, только у IE6 сумма ширин становиться больше ширины родительского блока.

Об актуальности проблемы говорит, хотя бы тот факт, что на сайте «Студия Артемия Лебедева» есть три(1, 2, 3) способа решения данной проблемы.

Решение

Хочу предложить свой, как мне кажется, более универсальный способ решения этой проблемы.

После многочисленных экспериментов, родилось решение.

Если вкратце, то пришлось отказаться от свойстваfloat: left;и заменить его на display: inline-block;. Весь остальной код — это следствия этого изменения.

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

.columns {

    width: 100%;

    overflow: hidden;       /* to hide horizontal scrollbar */

    white-space: nowrap;    /* disable inline blocks wrapping */

}

.column-1,

.column-2 {

    display: inline-block;  /* display columns as inline blocks */

    vertical-align: top;    /* vertical aligment to top */

}

.column-1 { width: 30%; background: #faa; }

.column-2 { width: 70%; background: #afa; }

.column-content {

    padding: 1em;

    white-space: normal;    /* restore normal text wrapping inside */

}

Для Internet Explorer 6/7:

1
2
3
4
5

.column-1,

.column-2 {

    display: inline;        /* IE display: inline-block */

    zoom: 1;                /* emulation */

}

И html-код:

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

<div class="columns">

    <div class="column-1">

        <div class="column-content">

            <p>Column width 30%.</p>

        </div>

    </div><div class="column-2">

        <div class="column-content">

            <p>Column width 70%</p>

        </div>

    </div>

</div>

Тестировалось в следующих браузерах:

Internet Explorer 6/7/8
Mozilla Firefox 3
Safari 4
Google Chrome
Opera 10

xScope – забиваем гвозди микроскопом

agat — Tue, 10 Mar 2009 00:44:54 +0000

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

Незаменимый набор инструментов для тех. дизайнеров.

Включает в себя:

Dimensions — измерялка высоты/ширины всего, что есть на экране (совершенно фантастический инструмент)
Rulers — экранные линейки
Screens — области видимости различных разрешений экрана
Loupe — с возможностью попиксельного измерения увеличенных объектов
Guides — направляющие линии
Frames — прямоугольные области в любых размерах и количествах
Crosshair — координаты курсора

xScope(Mac OS X), цена $26.95.

Да, macbook pro — моя рабочая лошадка. Спасибо руководству на работе :)

css-framework – перезагрузка

agat — Mon, 01 Dec 2008 08:38:41 +0000

В cвязи с запуском новой версии сайта http://css-framework.ru, несколько дней доступ к нему будет закрыт.

Сам фреймворк также обновился, новую версию можно скачать – http://code.google.com/p/css-framework/downloads/list

IE7 как js-костыли для 7-летнего браузера

agat — Sat, 22 Nov 2008 14:36:51 +0000

Господа вебдевелоперы, кто из вас слышал о проекте IE7 { css2: auto; }?

Интересует такой вопрос — используете ли вы это в реальных проектах? С высокой нагрузкой как оно справляется? Подводные камни?

Outlook 2007 CSS

agat — Mon, 27 Oct 2008 14:41:17 +0000

Если вы ненавидите Microsoft за то, что они сделали IE… ха, вы ещё не верстали HTML-письма для Outlook 2007.

В этой чудо-программе HTML рендерит не кто иной, как Microsoft Word.

CSS support in email clients

Закруглить уголки профессионально?

agat — Tue, 08 Apr 2008 13:40:26 +0000

Самый просто способ закруглить уголки — ?

4 области с фоновым изображением уголков. Есть, что-то лучше?

Чтобы без js, динамические размеры, мало-мало лишнего кода, любой цвет для закругленного блока, любой цвет для бордеров закругленных, любая толщина для бордера, а?

Ищется решение, для включения в css-framework. Обсуждение идёт на форуме проекта.

4 ссылки в день №7

agat — Wed, 06 Feb 2008 10:11:01 +0000

Pure Css Data Chart — красивые CSS-only графики.
Offspring JavaScript Library — минималистическая javascript библиотека приучающая IE и другие браузеры к псевдоклассам first-child,last-child и похожим.
CSS layout without float — интересный взгляд на построение layout без свойства float.
Nuvio Templates — весьма добротные бесплатные шаблоны для ваших интернет проектов.

Firefox 3b2 и Acid2 Test

agat — Wed, 19 Dec 2007 11:12:01 +0000

Сегодня был приятно удивлён, что Firefox 3 Beta 2 прошёл Acid2 Test.

4 ссылки в день №6

agat — Wed, 14 Nov 2007 10:11:39 +0000

CSS PNG Image Fix for IE — одно из альтернативных решений.
Free Icons for Software & Web Application Interfaces — 140 таких жёлто-синих иконок.
Code Beautifier and Formatter — куча инструментов для форматирования и раскрашивания программного кода на ваших сайтах.
DebugBar 5: New CSS debugging for IE — плагин для IE, облегчающий CSS-отладку кода.

4 ссылки в день №5

agat — Mon, 05 Nov 2007 10:48:56 +0000

Top 17 CSS Lightbox Variations — 17 красивых способов показать что-то во всплывающем слое
CSS selectors — таблицы сравнения поддержки CSS-селекторов всеми браузерами
styleignite — ресур, содержащий всевозможные элементы сайтов, таких как меню, элементы контента, кнопки, формы в виде html/css разметки.
Периодическая таблица Менделеева — её должен увидеть каждый HTML/CSS верстальщик

4 ссылки в день №4

agat — Fri, 02 Nov 2007 22:34:03 +0000

12 Javascript Image Galleries
freelayouts — сайт с бесплатными свёрстанными CSS/XHTML дизайнами
CSS contents and browser compatibility — большая и подробная статья про CSS-хаки/фильтры.
250+ Tools and Resources For Coding the Web — мм, перевод излишен :)

4 ссылки в день №3

agat — Thu, 01 Nov 2007 19:55:31 +0000

50 советов по проектированию CSS-файлов.
Open Designs — XHTML-семантичные и CSS-валидные бесплатные дизайны сайтов.
69 сервисов для мониторинга, статистики и исследования сайтов.
Техника, для создания резиновых блоков с закруглёнными углами на страницах вышего сайта.

4 ссылки в день №2

agat — Wed, 31 Oct 2007 09:44:09 +0000

CSS Sandbox — страничка, на которой можно поиграться с CSS-свойствами одним щелчком мыши.
Удобный скрипт для тех, кто кодит email’ы. Автоматически прописывает inline css-правила для всех элементов письма.
Pill Navigation — обьёмное, отражающееся меню.
Perfect multi-column CSS liquid layouts — професионально сделанные шаблоны разметки(layouts), iPhone compatible.

4 ссылки в день №1

agat — Tue, 30 Oct 2007 14:57:08 +0000

4 ссылки для веб-разработчиков каждый новый день на этом блоге.

Fish Eye Menu — 7 бесподобных бесплатных меню, аля маковский doc.
bundle-fu — проект, который очистит header вашего документа от многочисленных ссылок на css и js файлы.
Кто сказал календарь? Посетите сборище ссылок на онлайновые календари, там вы найдёте всё связывающее слово календарь и интернет.
Если вам захочется создать свой скромный календарик для сайта, этот урок для вас.

Профессионалам и не только

agat — Wed, 05 Sep 2007 09:28:46 +0000

…предлагаю поучавствовать в дискусии, по поводу именования основных блоков на странице.

Хочется, наконец, обобщить опыт и упростить понимание кода между большинством веб-разработчиков.

Счётчик для сайтов на css|box

agat — Sat, 04 Aug 2007 12:30:24 +0000

Релиз счётчика. Показывает рейтинг сайта, размещённого на css|box.

Например:

Код счётчика есть на странице каждого сайта.

jQuery, CSS3, клиенты, картинки

agat — Tue, 31 Jul 2007 08:43:27 +0000

Проблема:

Клиент, радостный, хочет выложить фото своей новой собаки. Открывает свой сайт, создаёт статью, вставляет картинку выравнивает её по левому краю. Сохраняет, смотрит на сайт…. и о боже, у картинки нету отступов! Или наоборот, они есть с обоих сторон…

Задача

Приделать отступы к картинкам, которые обтекает текст. Для «левых» картинок отступ справа, для «правых» отступ слева.

Решение

Решение это CSS2

ХТМЛ-редактор клиента вставляет картинку с атрибутом

1	align="чего то там..."

, ага…

/* Классы для картинок в http://css-framework.ru/ */

/* Images
------------------------------ */

#content img { padding: 5px; border: 1px solid #ccc; margin-top: .4em; }
img.f-left { margin-right: 1em; }
img.f-right { margin-left: 1em; }

Если бы не самизнаетекакой браузер под номером 6(номер 7 вроде получше, но не суть, хватает пока номера 6). Мы писали бы так:

img[@align='left'], img.f-left { margin-right: 1em; }
img[@align='right'], img.f-right { margin-left: 1em; }

Утопия… номер 6 портит картину маслом. На помощь приходит JavaScript(спасибо pepelsbey).

Есть много библиотек, у нас в примере jQuery. Этот код вставляется в

head

документа.

Все довольны :)

Каждому блогеру на пиво и хостинг

agat — Wed, 11 Jul 2007 19:05:24 +0000

… достанется, если писать регулярно что нибудь интересное. 360$ в год, вполне реально. Sape — система автоматической покупки и продаж ссылок.

Для этого надо просто выделить немного места на странице, под небольшой блок ссылок. Пусть они будут и «продажные» :).

Это, кажется гораздо лояльнее, чем квадратное, мелькающее чудовище, под названием — баннер.

Кстати можно зарегистрироваться не только как продавец, но, и как покупатель. Если вам нужно, к примеру, продвигать сайты своих клиентов.

Зарегистрироваться, вставить небольшой код на страницы своего блога и ждать поступления денег на свой WM-кошелёк, всего 3 простых шага. 3 шага, которые окупят хостинг, домен и ещё останется побаловать себя любимого.