Архив метки: дизайн

Символ тонкого пробела в html для разбиения разрядов чисел

Всегда думал, как здорово разбивать разряды в цене не целым пробелом, а вдвое меньше: и глаз не спотыкается и разряды хорошо видно.

Разделение разрядов чисел полупробелом

В интернете с этим делом казалось бы сложнее — раньше мы всегда для этих целей использовали неразрывный пробел  . Но, как выяснилось, в html есть замечательный символ   — тонкий пробел, решающий разом все проблемы.

10000000
10 000 000
10 000 000

upd. Может не работать в старых версиях некоторых браузеров. Но во всех последних версиях — работает, проверено.

upd2. Целая батарея различных символов пробелов (и тонких и толстых), которые есть в Юникоде. Спасибо Никите Иванову

Распродажа в Меге

Как легко определить, что рекламу МЕГИ, которая заполонила собой весь город, делали изначально в Москве и только потом переделывали под Питер, исправив названия станций метро?

Очень просто. Те, кто переделывали под Питер, не знали, что у нашего метро другой логотип:

Открытие портфолио в первый день лета

Свершилось: s.a.design

Вторую часть работ выложу в течение недели. Если вы заметите какие-то баги, глюки или неточности, которые там наверняка есть — незамедлительно информируйте.

Следуя незыблемому правилу «Сапожник без сапог», много лет подряд я только и мечтал о том, чтобы у меня появилось время сделать себе нормальный сайт. Вдохновившись новейшми веяниями интернет-индустрии, я собрался с силами и обуздал HTML5, со множеством его возможностей, наподключал повсюду своих шрифтов, чтобы вы наконец смогли посмотреть, чем я занимался все предыдущие годы. Спасибо всем кто верил в меня и особенно тем, кто не верил. И конечно Олегу Григорьеву, особенно за реализацию моей кнопочки «Контакты». Как показывает практика, даже великие дизайнеры могут ошибаться, и контакты бывают не только в радиоприёмнике, но и на моём сайте.

Отдельно хотелось бы написать о том, как «повезло» пользователям Оперы. 
@font-family (подключение шрифтов), к сожалению, в этом браузере реализован настолько криво, что по сравнению с ним в рейтинге «Самый убогий браузер» злосчастный Интернет Эксплорер тихо курит в сторонке. Пришлось в некоторых местах использовать специальные хаки. Частично помогло.

Вижу!

В «Этажах» по вторникам проходят отличные лекции под девизом «Вижу!». Вчера Михаил Губергриц очень интересно рассказывал про свои логоипы. На прошлой неделе наш город посетил Людвиг Быстроновский, стульев даже на всех не хватило, поскольку сами организаторы были в некоторой растерянности от того, сколько народу пришло посмотреть на живого арт-директора Студии Лебедева. А на следующей неделе обещают легендарного шрифтовика Юрия Гордона, того самого, что написал «Книгу про буквы от Аа до Яя».

Отборочный турнир чемпионата мира 2010

Чтож, вполне себе неплохо. Красавцы. Опять 3:0, но прогресс налицо — все голы мы забили уже сами. Второе место не выглядит таким безнадёжным и, обыграв дома немцев 10 октября, почти наверняка выйдем из группы с первого места.

Кстати, все эти флаги рисовал для одного футбольного проекта, получилось более 60 штук. Без пяти минут специалист по геральдике или, правильней будет сказать, вексиллологии — дисциплине, изучающей флаги и знамёна. Странно, что на флаге Марокко, например, звезда. Мандарин бы там смотрелся гораздо логичнее. А может это и есть мандарин, просто сушёный.

Вот флаги стран, которые за последние 40 лет принимали участие в финальных стадиях чемпионатов мира и Европы. Вопрос: нужны ли блики и закруглённые углы?

padonki.org

подумать только, всего три года назад я рисовал растяжки для сайта padonki.org, когда падонкаффское движение ещё только набирало обороты...
что называется, мнение редакции не всегда совпадает с мнением автора

Джа даст нам всё

ещё несколько оттуда же

Просвет на Просвете

Календарь Август

Сделал себе обоину для рабочего стола, кому симпатично — забирайте.
Между ними секунду назад было жарко. 
Снято неделю назад на Просвещения.

Лето, увы, выходит на финишную прямую.
Впрочем, всё самое весёлое у меня традиционно происходит в августе...

Как создавалась иконка «Астры»

Для создания иконки ищем подходящую картинку где-нибудь в гугле или рисуем набросок сами.

Иконка на сайте стоматологической клиники "Астры"

Простыми шейпами в фотошопе или иллюстраторе создаём основные контуры.

Иконка на сайте стоматологической клиники "Астры"

Добавляем детали — страницы в книгах. И с помощью градиента выделяем листы верхней книги.

Иконка на сайте стоматологической клиники "Астры"

Продолжаем градиентами добавлять теней.

Иконка на сайте стоматологической клиники "Астры"

Книги должны отбрасывать тени как друг на друга, так и на стол. Не забываем, что чёрно-белых теней не бывает и от книги в красной обложке на столе обязательно будет тень с красным оттенком, а от синей — с синим.

Иконка на сайте стоматологической клиники "Астры"

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

Иконка на сайте стоматологической клиники "Астры"

Вот такая получилась иконка.

Иконка на сайте стоматологической клиники "Астры"

Как прижать футер к низу страницы

Бывает, что на страницах с небольшим количеством информации, «подвал» сайта некрасиво зависает в середине экрана. В таких случаях, необходимо прижимать футер к нижней границе браузера. Я достаточно давно использую один из самых простых и распространённых способов реализации этой идеи.

Суть метода заключается в следующем. На странице создаётся блок container, который мы растягиваем на всю высоту экрана. А футер, за счёт отрицательного отступа, поднимаем вверх. В блоке с самим содержимым страницы content, оставляем снизу высоту, равную высоте футера, чтобы они не наезжали друг на друга. Вот и всё.

Стоит заметить, что поскольку IE6 не знает, что такое min-height, то для него приходится использовать хак. Все браузеры применят height:auto, а IE6, не умеющий обрабатывать !important, применит последнее значение height: 100%.

Основные плюсы данного способа:
— работает во всех браузерах;
— не зависит от количества текста на странице (меньше высоты экрана или больше).

Как прижать футер к низу страницы

HTML:

<body>
    <div id="container">
        <div id="content">Содержимое страницы</div>
    </div>
    <div id="footer">Подвал</div>
</body>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
#content {
   padding-bottom: 120px;
}
#footer {
    height: 120px;
    margin-top: -120px;
}

Смотреть пример

Вышел The Bat 4. Новый интерфейс?

Новый интерфейс почтовой программы The Bat 4

Дизайн-бюро Артёма Горбунова недавно очень обрадовало сотни тысяч пользователей почтового клиента The Bat, сообщив о том, что они разработали новый интерфейс для четвертой версии. Порадовали интересные идеи и просто красивый и современный внешний вид. Естественно узнать удобство можно только испытав на себе.
Я пользуюсь батом уже не один год и почти всё меня устраивает. За исключением может крайне плохой поддержки html в письмах, отсутствия нормального органайзера с напоминалкой и морально устаревшего дизайна.
И вот, 4й бат появился на официальном сайте. Я конечно поспешил его скачать.
Так вот, никакого нового интерфейса там не оказалось, всё по-прежнему, изменения мизерные — исправлены утечки памяти и остальное по мелочи. Зато вместо нового красивого интерфейса мне установили Персональный поиск от Яндекс и Яндекс-панель для браузера. Вот и проясняется кто главный спонсор перехода с тройки на четверку.
Кому, впрочем, интересно, скачать новую версию можно на официальном сайте программы.

upd. О, запостил на Хабр, там пошло живое обсуждение темы.

Как мы делали сайт Барака Обамы

Барак Обама

Звоню я как-то прошлой весной Обаме, мол «How do you do?», да слово за слово разговорились мы. А он мне, значит — собираюсь я, Серёга, в президенты. Я говорю — с твой биографией, наркоман темнокожий из Гонолулу, только в президенты и ходить... А он — нет, — мол, — я так решил и всё, а то что курил, так кто не без греха, пусть первый кинет в меня что-нибудь.
В общем, не смог я тогда его отговорить, но предложил хотя бы сайт русский сделать.
Тут как раз вовремя Кочегар позвонил, говорит мне — дай какой-нибудь работёнки, я совсем на мели. Я говорю — не вопрос — будешь сайт Обамы раскручивать. Какой амамбы? — Я говорю, тебе есть разница какой? Вот и не выпендривайся.
Генерал за пару дней движок написал, свеженькую версию. Он под каждый новый проект свеженький движок выдаёт за пару дней. Негоже, говорит, президенскому сайту непонятно на какой древней фигне работать.

Вот так и запустили через некоторое время — http://barackobama.ru

Для справки: Во время амерканского «супер-вторника» Обама победил в большинстве штатов. 
Коллеги на Хабре отмечают, что русскоязычный сайт симпатичнее и приятнее американского. Ещё бы, что по дружбе делается и от чистого сердца, по определению не может быть говном.

greenmile.ru

Официальный сайт болельщиков ФК Кубань

Всё собирался написать — вот, запустили ещё в прошлом году официальный сайтик фанатов краснодарской «Кубани». Жалко только, пока мы сайт делали, они вылетели нафиг из Премьер-Лиги...
Но мне нравится, что в итоге получилось.
И, главное, парням он не безразличен — активно наполняют и поддерживают, что не может не радовать. А ребята там хорошие, обещали даже настоящего кубанского вина привезти в благодарность, так что ждём. 
Надеюсь, «Кубань» выкарабкается в следующем году из болота первого дивизиона обратно в премьеру... если у них там в руководстве, наконец, всё устаканится.

А пока... кому ещё сайт?) Луч, Нальчик?..))