Ниже пойдёт речь о методе поиска по выпадающему списку (select).

Для этого требуется поле ввода текста и собственно сам выпадающий список:

<input class="type-search" type="text" />
<select size="10" id="list">
    <option value="val">Text</option>
    ...
    <option value="val*n">Text</option>
</select>

Чтобы результат поиска был нагляднее для пользователя, стоит задать тегу select атрибут size со значением 10.

Добавим к этому немного css:

input, select {
    width: 300px;
    margin: 10px auto;
    display: block;
}

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

Уважаемые жители Хабра!

Вашему вниманию представляется история о том, как мы оптимизировали свой сайт. Сайт работает на движке Wordpress (на этой фразе большинство читателей должны поморщиться, зная, как обстоят дела у WordPress со скоростью). Однако все-таки у нас получилось, и сайт стал летать. Сразу скажу, что меня вряд ли можно считать профессионалом по серверной оптимизации, однако то, чего удалось достичь, меня сильно радует. Также, был получен бесценный опыт, которым я хочу поделиться с читателями Хабра.

Работать дизайнером очень интересно. Это творческая работа. И как любому творческому человеку, дизайнеру нужна муза или вдохновение.

Я уверен, что у каждого дизайнера есть набор сайтов, на которые они периодически заходят для того что бы черпать это самое вдохновение. У меня так же есть такой список. И я хочу им с вами поделиться.

Естественно, если вы расскажите о своих ресурсах, я буду благодарен.

Хочу сразу предупредить, что практически все ресурсы, собранные мной — англоязычные. Только лишь один на русском. Так же я не очень приветствую узкопрофильные ресурсы (речь о ресурсах, на которых можно скачать только кисти для photoshop и прочее).

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

За эти месяцы Фоторама повзрослела, обзавелась сайтом с логотипом и, думаю, теперь можно написать о ней на Хабре.

Введение

А теперь давайте поговорим о полевых транзисторах. Что можно предположить уже по одному их названию? Во-первых, поскольку они транзисторы, то с их помощью можно как-то управлять выходным током. Во-вторых, у них предполагается наличие трех контактов. И в-третьих, в основе их работы лежит p-n переход. Что нам на это скажут официальные источники?

Полевыми транзисторами называют активные полупроводниковые приборы, обычно с тремя выводами, в которых выходным током управляют с помощью электрического поля. (electrono.ru)

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

Еще один факт о полевых транзисторах можно узнать, обратив внимание на их другое название — униполярные. Это значит, что в процессе протекания тока у них участвует только один вид носителей заряда (или электроны, или дырки).

Три контакта полевых транзисторов называются исток (источник носителей тока), затвор (управляющий электрод) и сток (электрод, куда стекают носители). Структура кажется простой и очень похожей на устройство биполярного транзистора. Но реализовать ее можно как минимум двумя способами. Поэтому различают полевые транзисторы с управляющим p-n переходом и с изолированным затвором.

Вообще, идея последних появилась еще в 20-х годах XX века, задолго до изобретения биполярных транзисторов. Но уровень технологии позволили реализовать ее лишь в 1960 году. В 50-х же был сначала теоретически описан, а затем получил воплощение полевой транзистор с управляющим p-n переходом. И, как и их биполярные «собратья», полевые транзисторы до сих пор играют в электронике огромную роль.

Перед тем, как перейти к рассказу о физике работы униполярных транзисторов, хочу напомнить ссылки, по которым можно освежить свои знания о p-n переходе: раз и два.

Представляю вашему вниманию перевод статьи под названием "Site Search: Strategies for No Results Found" от Linda Bustos. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании Elastic Path.

Эта статья написана по мотивам книги Грега Ньюдельмана "Designing Search: UX Strategies for Ecommerce Success". Необычно видеть книгу на 300 страниц, посвященную одному единственному аспекту создания интернет-магазинов, но оптимизация поиска по сайту действительно заслуживает такого внимания!



Есть одна составляющая оптимизации поиска по сайту, на которой мы часто зацикливаемся: как удержать пользователя на сайте, даже если в результате поиска ему не удалось найти то, что требовалось. Статья основана на разделе "No Search Results Strategy: Not a Zero-Sum Game" вышеупомянутой книги. Ньюдельман говорит о том, что «нет простого набора правил, которые гарантировали бы успешное внедрение страницы результатов поиска в случае, когда не было найдено ни одного совпадения. Но есть четыре принципа, от которых стоит отталкиваться»:

Так получилось (и прошу считать это удачным совпадением), именно сегодня на Хабре опубликован топик про практическое применение теней из CSS3 для создания интересных эффектов, а мы в свою очередь подготовили топик про основы для этого творчества.

Мы попробуем разобраться в том, как работают тени в новых модулях CSS3. С практической точки зрения, мы рассмотрим два правила: box-shadow и text-shadow, определенные соответственно в модулях CSS3 Backgrounds and Borders и CSS3 Text.

Оба правила работают схожим образом (вплоть до соответствующей отсылки в спецификации), поэтому имеет смысл рассматривать их вместе. Вместе с этим есть некоторые различия, о которых тоже нельзя не сказать.

Первая часть посвещена работе с box-shadow, во второй мы пройдемся по теням для текста.

Привет, Хабр!

Хочу поделиться замечательным мастер-классом по созданию реалистичных теней для блоков на чистом CSS, найденном на просторах рунета по адресу http://mainview.ru/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij. Естественно, для того, чтобы примеры работали как надо, необходим браузер с поддержкой CSS3.

Предисловие

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

Транзистор, как и диод, основан на явлении p-n перехода. Желающие могут освежить в памяти физику протекающих в нем процессов здесь или здесь.

Необходимые пояснения даны, переходим к сути.

Вчера (17 ноября 2011 г.) в «Smashing Magazine» был опубликован комплект бесплатных значков «Aroma», созданный Оливером Твардовским.

Бóльшая часть его — полторы сотни пиктограмм и идеограмм 24×24 пиксела:



Остальные значки (я насчитал их 103) изображают клавиши клавиатуры.

Скачать их можно в ZIP-архиве (≈полтора мегабайта), прямую ссылку на который есть просьба не приводить за пределами «Smashing Magazine» (так сказано в readme.txt ко значкам). Мне кажется, эта просьба автора разумна, так как позволяет ему в случае чего оперативно переменить предлагаемую закачку и пресечь дальнейшее распространение прежних версий архива из разошедшихся по Сети копий и переводов блогозаписи.

Введение

Диод — двухэлектродный электронный прибор, обладает различной проводимостью в зависимости от направления электрического тока. Электрод диода, подключённый к положительному полюсу источника тока, когда диод открыт (то есть имеет маленькое сопротивление), называют анодом, подключённый к отрицательному полюсу — катодом. (wikipedia)

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

В основе полупроводникового диода лежит такая известная штука, как p-n переход. Думаю, что большинству читателей о нем рассказывали на уроках физики в школе, а кому-то более подробно еще и в институте. Однако, на всякий случай приведу общий принцип его работы.

Введение

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

Хочу поделиться ссылками на несколько полезных сервисов. Некоторые из них помогут сэкономить время, другие — сделают за Вас незнакомую/нелюбимую работу. Список разбит по категориям, чтобы было легче ориентироваться.

Сервисы опросов
userreport.com (добавил Romanych)
simpoll.ru
webanketa.com (добавил mihass)

Кнопки постинга в социальные сети
Кнопка от Яндекса
addthis.com (добавил UksusoFF)
share42.com

В этом выпуске вебинаров UXRussia раскрываются 5 феноменов, обнаруженных в экспериментах психологов, показывающих, как люди принимают решение. И даются рекомендации дизайнерам о том, что делать с этим знанием:

• Люди, в основном, принимают решения неосознанно.
• Сознание медленнее познаёт мир.
• Люди хотят больше выбора и информации, чем они могут переработать.
• Людям нужно чувство контроля, когда они делают выбор.
• Люди заботятся о времени больше, чем о деньгах.

Продолжение темы

В связи с тем, что на Хабрахабре не нашёл я описания данного простого и в то же время удобного способа создания простых «тултипов» — всплывающих подсказок, я решил о нём написать.
В данном методе не будет использоваться JS, мы довольствуемся лишь CSS3 и HTML5.

В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.

В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.

Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.

Обратите внимание, что анимация/переходы будут работать только в браузерах, которые поддерживают эти CSS3-свойства.

Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.

1. Вместо вступления.

Недавно пришлось разбираться в работе алгоритма Shift-Or, который позволяет найти подстроку в строке. По результатам этого разбора я и решил написать этот пост в надежде, что кому-то он поможет понять, как работает этот алгоритм, быстрее чем мне.

Собственно, главное отличие алгоритма от, например, «наивного сравнения», заключается в том, что в его основе лежит логические операции, а именно логическое умножение (оно же AND, оно же конъюнкция).

Однажды решив зарегистрироваться как ИП я столкнулся к несколькими неожиданными проблемами, о которых в интернете не могу найти практически никакой информации. Знакомая бухгалтер, консультирующая меня, тоже не слышала о подобных проблемах, поэтому решился на написание данного топика, чтобы помочь коллегам не попасть в подобную ситуацию.
Основные пункты «обязательной программы» регистрации много раз разжеваны в интернете, но пройдемся по ним заново, используя собственный опыт. Я специально не буду давать ссылки на программы, формы бланков и постановления, так как они быстро устаревают и смысла выкладывать их я не вижу. К тому же принятое заявление в Тамбове, могут не принять в другой налоговой и т.д.
Еще в моем случае нет наемных работников, это важно для прохождения «квеста».

Стилизованный в мрачных тонах Хеллоуина постер студии «MintLeaf», описывающий наиболее распространенные ошибки начинающих веб-дизайнеров. Подходит для распечатки и вывешивания в видном месте для назидания.

Под катом длинный постер (900х5750), png, 625 кб.

Сегодня мы будем воссоздавать прогресс-бар из программы установки Adobe Flash Player средствами CSS3, используя градиенты и тени.



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