Pull to refresh
0
0
Сергей Арустамов @almone

Фотограф

Send message

simpleTooltip: HTML начиненный CSS и приправленный jQuery

Reading time8 min
Views33K


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

На разработку собственного варианта подсказок меня натолкнул Tipsy Tooltip используемый в Twitter Bootstrap. По началу я пользовался им, но все возможности плагина мне были не нужны и, будучи перфекционистом, лишний код смущал естество. Решил: напишу-ка я то, что нужно мне и ни строчкой больше. Написал и осмеливаюсь поделиться рецептом с сообществом. Авось кому-то приглянется…
Ознакомиться с рецептом
Total votes 68: ↑46 and ↓22+24
Comments37

Верстка почтовых рассылок

Reading time6 min
Views71K
Привет, Хабр!

В этой статье я бы хотел поделиться своими познаниями в кроссбраузерной и кроссмейлерной верстке почтовых рассылок. Под словом кроссмейлерность подразумевается — корректное отображение верстки во всех почтовых клиентах. Я считаю, что статья вполне актуальна, в виду того, что на хабре эта тема несколько раз освещалась, но некоторые нюансы были неточными, а другие просто устарели. По долгу службы я долгое время занимался версткой html расылок по всему миру, и приведенные ниже правила будут касаться следующих почтовых клиентов и веб-интерфейсов: MS Outlook 2003-2010, mail.ru, rabmler почта, Яндекс почта, Gmail, Yahoo! Mail (Classic), Thunderbird 2.0-3.0, Hotmail, Windows Live Mail, Apple Mail 3-4, AOL Mail, Lotus Notes 8-8.5.
Читать дальше →
Total votes 150: ↑146 and ↓4+142
Comments81

Почему HTML считает, что «chucknorris» — это цвет?

Reading time1 min
Views124K
image

Вы никогда не пробовали задавать цвет фона в HTML при помощи разных строк? Например, строка

<body bgcolor="chucknorris"> test </body>

сделает фон документа кроваво-красным во всех браузерах и на всех платформах (jsfiddle).

Кстати, если слово chucknorri тоже приводит к красному цвету, то chucknorr дает желтый!

Стало интересно, почему так происходит? Добро пожаловать под кат.
Читать дальше →
Total votes 237: ↑218 and ↓19+199
Comments100

Полезные сниппеты на HTML5

Reading time4 min
Views84K
Эта подборка полезных сниппетов, использующих HTML5, может помочь вам улучшить ваш сайт.

Автозаполнение в текстовых полях


Используя HTML5-элемент datalist вы можете создать текстовое поле с автозаполнением. Очень удобно!
<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

Читать дальше →
Total votes 73: ↑59 and ↓14+45
Comments27

NooLite — система радиоуправления освещением, или первый шаг к умному дому

Reading time6 min
Views132K
Прошла неделя, и Box Overview опять готова порадовать вас новым обзором! На этот раз — система радиоуправления освещением NooLite от белорусской компании Ноотехника.
image
Система включает в себя несколько видов выключателей (тех, которые вешаются на стену), и несколько видов силовых блоков (тех, через которые подключаются светильники). При соединение всего этого получается система управления освещением во всем доме, которая может управлять как каждой лампой по отдельности, так и всеми лампами в комнате или во всем доме. Система хорошо расширяемая, имеет возможность настройки сценариев вплоть до яркости каждого канала.
Ладно, хватит рекламыописания, посмотрим что система может в действии.
Добро пожаловать под кат!
Total votes 72: ↑68 and ↓4+64
Comments102

CSS анимации на реальном проекте

Reading time9 min
Views92K


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

Производительность и гибкость CSS анимаций позволяет творить удивительные вещи, но можно ли уже использовать эти новые возможности в силу их нестабильности и незрелости на реальных больших проектах?

В этом посте мы расскажем, почему так важно начинать использовать новые технологии клиентской разработки уже сегодня и о трудностях, которые могут ждать вас на пути.
Читать дальше →
Total votes 95: ↑87 and ↓8+79
Comments66

Готовим Sublime Text 2 для front-end

Reading time7 min
Views268K
Ни для одного опытного программиста или верстальщика не секрет, что настроенная под себя среда разработки (не в смысле IDE, а в более общем) — жизненная необходимость. Было время, когда я делал очередную верстку в практически голом Notepad++ на единственном мониторе, поочередно открывая Photoshop, браузер и редактор. Сегодня, в эпоху «автоматизации всего», мне сложно представить, как вообще можно было так работать.

Sublime Text 2 — популярный расширяемый кроссплатформенный текстовый редактор, для которого написано множество плагинов если и не на все случаи жизни, то на многие. В этом посте я попытаюсь рассказать как из этого конструктора сложить удобный инструмент front-end разработчика для работы с HTML, CSS и JavaScript.
Читать дальше →
Total votes 107: ↑95 and ↓12+83
Comments134

Новое для веб-дизайнера за первую половину декабря

Reading time1 min
Views53K
Новые полезные штуки для веб-дизайнеров за первую половину декабря 2012. Прошлый месяц: ноябрь. Во все подобные топики буду добавлять тег "новое для веб-дизайнера"

Сервисы и инструменты


Weavly — бесплатный онлайн-сервис для удобного создания роликов из видео, аудио и gif-картинок.

Читать дальше →
Total votes 96: ↑85 and ↓11+74
Comments11

[Перевод] Современный веб-разработчик, или 6 вещей, которые вы должны знать, чтобы выжить

Reading time4 min
Views97K
Это статья об изменениях, которые произошли в мире веб-разработки. Я наблюдаю огромное количество веб-разработчиков, которые буквально застряли в устаревших технологиях, особенно в мире .NET. Если вы еще не начали совершенствовать свои навыки, и адаптироваться к изменяющимся трендам, вы должны начинать уже сегодня.
Читать дальше →
Total votes 169: ↑132 and ↓37+95
Comments90

Фоторама

Reading time4 min
Views55K


Около полугода назад я написал простой джейкверный плагин для галерей на сайтах. Назвал его Фоторамой и выложил в интернет. По клику кроссфейдом показывалась следующая фотография, клик с шифтом мотал назад — вот и всё.

За эти месяцы Фоторама повзрослела, обзавелась сайтом с логотипом и, думаю, теперь можно написать о ней на Хабре.
Читать дальше →
Total votes 304: ↑295 and ↓9+286
Comments111

Прокачиваем DropBox аккаунт почтой в зоне .EDU за 15 минут

Reading time2 min
Views90K


Многие из нас имеют аккаунт в сервисе Dropbox, о данном сервисе написано много статей и лайф-хаков, но сегодня я хочу вам показать, как можно заполучить заветный e-mail в зоне .edu за 15 минут.

Интересно? Добро пожаловать под кат.
Total votes 218: ↑147 and ↓71+76
Comments143

Онлайн-курс «Разработка для OS X» на Hexlet стартовал

Reading time2 min
Views22K


Примерно три недели назад я писал на Хабр про создание небольшого образовательного проекта Хекслет. Благодаря этому посту в команду Хекслет вступило несколько хороших людей, и мы рады объявить, что первый бесплатный курс стартовал! Правда, стартовал он еще неделю назад, так что если вы решите зарегистрироваться на него, то наверстать нужно будет лишь вводную лекцию. Вторая неделя занятий начинается завтра (во вторник, 30 октября).

О структуре и содержании курса можно узнать из короткого первого модуля первой лекции:



Читать дальше →
Total votes 64: ↑59 and ↓5+54
Comments27

Как верстать красиво или чем плохи css-фреймворки

Reading time8 min
Views33K
Преимущества дивной вёрстки, семантичной разметки и разделения содержимого и дизайна описаны десятки, сотни раз, но все-равно находятся люди, которые не понимают самой идеи html и css, пишут в коде такие ужасные вещи, как
<span style="color:blue">

, когда хотят расскасить текст в синий цвет и искренне считают, что эта запись чем-то лучше, чем
<font color="blue">

, наивно веря в этом деле валидатору. А ведь правильный подход в написании html и css лежит на поверхности. Достаточно просто посмотреть историю развития этого языка, почитать статьи десятилетней давности и проанализировать. Я, при поддержке theshock, постаралась в этот статье упорядоченно и коротко изложить наше видение этого вопроса.

Читать дальше →
Total votes 200: ↑166 and ↓34+132
Comments174

Использование cdn Amazon Cloudfront в wordpress в картинках

Reading time2 min
Views14K

Однажды в студенную летнюю пору решил я прикрутить к блогу отдачу файлов из cdn Amazon CloudFront. Инфы как всегда мало и сделал все методом быстрого научного тыка.
Статья изобилует большим количеством пояснений и картинок.
Читать дальше →
Total votes 30: ↑27 and ↓3+24
Comments23

UICloud: Самая большая база пользовательских интерфейсов

Reading time1 min
Views34K


UICloud — это база бесплатных пользовательских интерфейсов с поисковой системой, рейтингом и каталогизатором в которой собрано все от исходников в формате PSD, до готовых решений на HTML, CSS или jQuery: формы, слайдеры, кнопки, календари, элементы и полноценные интерфейсы для мобильных и веб приложений. В проекте уже сейчас можно найти практически все что нужно для облегчения процесса разработки дизайнерам и разработчикам.

На данный момент в базе 23586 элементов и почти тысяча UI-сэтов включающие в себя готовые решения в едином стиле. Проект создан Британской студией Double-J Design целью проекта является создание самой обширной UI базы.
Total votes 163: ↑161 and ↓2+159
Comments40

[Перевод] CSS Filters

Reading time5 min
Views133K
CSS Filters были созданы для получения различных визуальных эффектов при применении их к DOM элементам. В данной статье мы поговорим об истории фильтров, о том, что они делают и как их применять. Так же рассмотрим их влияние на производительность как на десктопах, так и на мобильных устройствах.
Читать дальше →
Total votes 72: ↑69 and ↓3+66
Comments31

Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев

Reading time6 min
Views66K
Привет, Хабр.
Сразу хочу отметить, что если мы говорим об иконках, их можно масштабировать двумя способами (других я просто не знаю): конвертировать иконки в шрифт и подключать их через @font-face, либо использовать SVG в качестве формата для этих иконок.

Немного отойду от темы и расскажу предысторию.

Предыстория


Я было решил использовать у себя на сайте шрифтовые иконки, казалось бы все хорошо: и размер менять можно, и цвет задавать и запрос к серверу всего один (на подключение шрифта). Другими словами, подключаемый шрифт это и есть своеобразный «CSS спрайт», верно?

Я давай проверять, везде ли все красиво выглядит. Оказалось, что не все так хорошо как хотелось бы, потому как в некоторых размерах иконки выглядели кособокими, а при отключенном сглаживании вообще противно смотреть на них стало. Что делать? Использовать второй вариант — SVG, о чем и пойдет речь.
Подробно о создании CSS спрайтов с SVG
Total votes 64: ↑57 and ↓7+50
Comments73

Двадцатка лучших веб-шрифтов

Reading time9 min
Views764K
Top 20 Fonts

Сейчас самое время повышать уровень дизайна своих работ с помощью веб-шрифтов


Без преувеличения, сейчас сетевая типографика переживает захватывающий период своей жизни. Недавние технологические скачки приблизили нас еще на шаг ближе к типографической нирване в интернете. Шаг, которого все так долго ждали.

Свобода использования веб-шрифтов вне безопасного списка на всех ведущих ОС стала возможной, по большому счету, благодаря трем основным, почти одновременным технологическим факторам: широко распространенной поддержке правила @font-face в браузерах; появлению таких «шрифтохранилищ» как Typekit и Fontdeck; создание нового формата шрифтов — архивированного файла шрифта WOFF.

Читать дальше →
Total votes 146: ↑128 and ↓18+110
Comments71

Развитие образного мышления

Reading time3 min
Views67K
image

Пламенный привет, дорогие хабравчане!

В своей дебютной статье я хочу рассказать вам об упражнениях-играх на развитие образного мышления, которые будут полезны не только людям творческих профессий: в отличие от упражнений на развитие воображения, в которых идет доминирование правого полушария, прокачка образного мышления активно задействует аналитические способности, а это уже симбиоз двух полушарий. Поэтому эти упражнения прекрасно подойдут не только для получения каких-либо плодов для людей, чья работа хоть как-то связана с образной информацией, но и любому человеку, который хочет иметь острый ум и налаженное взаимодействие обоих полушарий мозга.
Читать дальше →
Total votes 132: ↑119 and ↓13+106
Comments83

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity