Как стать автором
Обновить
75
Карма
0
Рейтинг
Константин Жандов @kostos

Пользователь

jQuery Horizontal Accordion — «играем» на аккордеоне

Чулан
Перевод
В этом примере я покажу как создать «эффект аккордеона», который можно использовать как для меню, так и для любых других целей. Раньше для этих целей использовался Flash, но теперь можно воспользоваться и jQuery.

image

Чтобы использовать jQuery на Вашем сайте, Вы сначала должны загрузить последнюю версию этой javascript-библиотеки, а затем подключить ее к Вашей странице.
Читать дальше →
Всего голосов 18: ↑13 и ↓5 +8
Просмотры 1.5K
Комментарии 11

Набор иконок Simplicio

Дизайн
Smashing Magazine совместно с дизайнером Neurovit предлагают для скачки бесплатный набор иконок Simplicio:

Simplicio

Все иконки доступны в форматах 32*32, 64*64, 128*128, 16*16 (ICO). Также в комплекте есть исходники (.ai) всех иконок.

Кстати, интересна модель предоставления таких качественных иконок бесплатно. Все просто: Smashing Magazine объявил, что пропиарит (100000 подписчиков, регулярные выходы тем на digg.com) любого, кто пришлет им достаточно качественный бесплатный материал. Как вы понимаете, такой человек без работы на ближайший год не останется. Схема работает, при чем довольны все, больше всех — мы, потребители :)
Всего голосов 93: ↑66 и ↓27 +39
Просмотры 2.9K
Комментарии 37

Кадрирование картинок с использованием JQuery

Чулан
Кадрирование фотографий сейчас востребовано, потому что любое сообщество подразумевает общение живых людей. А общатся с собеседником проще «зная его в лицо».

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

Требования такие:
1. Иконки за которые надо тянуть, чтоб изменить блок, должны быть большие.
2. Часть изображения которое вырежется должна быть оригинальная, а то что образается полупрозрачно прикрыто.

Вид кадрирования

Скрипт использует библиотеку JQuery. Сам контрол сделан как плагин к JQuery.
Можете посмотреть ПРИМЕР в работе, там же подробнее о плагине.

Интерфейс плагина следующий:

// Создает в указанном блочном элементе структуру элемента управления кадрирования
$(element).CropImageCreate(src, src_width, src_height, min_width, min_height, proportion, options);

// Возвращает данные о кадрированном изображении в виде объекта {src, left, top, width, height}
$(element).CropImageGetData());

P. S. Из готовых скриптов которые я нашел на мой взгляд лучший — imgAreaSelect.
Всего голосов 25: ↑22 и ↓3 +19
Просмотры 1.3K
Комментарии 14

Грабли при верстке HTML писем

Разработка веб-сайтов *
Довольно часто наши клиенты устраивают регулярные рассылки с новостями. Почти всегда их не устраивают текстовые рассылки или простое оформление HTML рассылок. Наши дизайнеры вовсю креативят, а мы потом набиваем шишки при верстке их макетов с корректным отображением во множестве почтовых клиентов.

Ниже список встретившихся нам особенностей и способы их разрешения (как то упорядочить их мне не удалось, поэтому всё идет единым списком)
Читать дальше →
Всего голосов 282: ↑273 и ↓9 +264
Просмотры 102K
Комментарии 77

Вращение предметов без флэш

JavaScript *
Всем привет.

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

Пожалуй, все встречали подобные инструменты основанные на технологии flash. Однако я считаю, что её использование здесь не к чему. Поэтому потратив несколько часов я реализовал подобный функционал на javascript в виде плагина к jQuery.

вертеть дальше
Всего голосов 118: ↑103 и ↓15 +88
Просмотры 10K
Комментарии 103

Сверхплавное передвижение объектов

JavaScript *
Иногда у веб-разработчиков возникает задача, которая требует плавного движения объекта по экрану. Это может быть строка загрузки, какой-то спрайт (например, машинки на клавогонках) или что-то ещё. Проблема возникает, когда сдвиг даже на одну точку кажется слишком резким и портит общее ощущение от происходящего. Как этого избежать? Использовать приёмы антиалиасинга.

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

Как это сделано?
Читать дальше →
Всего голосов 217: ↑212 и ↓5 +207
Просмотры 6.8K
Комментарии 103

4 способа как создать блоки одинаковой высоты

CSS *
Перевод
fourmethodsbanner
Раньше, когда все верстали с использованием таблиц, создать колонки одинаковой высоты было очень просто.  Достаточно создать таблицу, например, с 3мя колонками и все они автоматически будут иметь одинаковую высоту.  Но в блочной верстке не все так просто.
В этой статье я расскажу вам о некоторых способах создания колонок равной высоты и о совместимости этих методов с браузерами (включая IE6). Все эти способы описывают создание 3х колоночного макета.
Читать дальше →
Всего голосов 78: ↑66 и ↓12 +54
Просмотры 225K
Комментарии 138

Расширенный сборник CSS-хаков

CSS *
Статья является расширенным сборником CSS-хаков в сравнении с аналогичной статьей.
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)

Подробности под катом
Всего голосов 116: ↑110 и ↓6 +104
Просмотры 37K
Комментарии 77

Динамическая висячая пунктуация в HTML

Разработка веб-сайтов *
Наверняка вы видели на многих сайтах свешивающиеся в начале строк кавычки и скобки. И хотя на бумаге такое полное свешивание в простых текстах (не заголовках) как минимум спорно, на вебе это выглядит отлично. Такое поведение текста называется «висячая пунктация», и на текущий момент есть ровно один способ её реализации в (X)HTML/CSS — добавление парных стилей. Этот способ, скажем, применён на сайте Артемия Лебедева.

Главный минус классической «лебедевской» реализации висячей пунктуации на вебе — её статичность. Поясню, как у них это сделано.

В CSS прописаны парные стили: .h[symbol] и .s[symbol], например, .slaquo и .hlaquo. Для каждого из них прописан отвес через margin. При использовании свешивающихся символов в тексте к пробелу перед символом добавляется стиль s[symbol], а к самому символу — h[symbol]. Соответственно, когда и пробел, и символ, находятся в одной строке, отвесы взаимно компенсируются, и текст выглядит как обычно. А когда свешивающийся символ по каким-то причинам сносится на следующую строку — первый стиль (балансирующий второй блок) остаётся на предыдущей строке, поэтому нужный символ свешивается влево на заданный отвес.

Реализация по сути хорошая, с одним «но» — шрифты. Для каждого шрифта отвес, скажем, открывающей кавычки-ёлочки или открывающей скобки разный. Да, конечно, мы можем его вычислить вручную и прибить в таблице стилей гвоздями (так и сделано у Лебедева на сайте), но для этого придётся быть уверенным, что как минимум у 90% посетителей сайта будет именно этот шрифт. В случае, если браузер покажет это каким-то иным шрифтом, начнутся проблемы с разъезжающимися строками.

Что было сделано?
Читать дальше →
Всего голосов 48: ↑48 и ↓0 +48
Просмотры 5.8K
Комментарии 44

Верстка скругленных границ и острых углов

Разработка веб-сайтов *
Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет немало хлопот верстальщикам. Развивающиеся технологии позволяют создавать в WEBе сложные приложения (Google не даст мне соврать), поэтому дизайнеры себя не сдерживают и рисуют всё более навороченные вещи. Как правило, это приводит к большому количеству графики на страницах.

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

Читать дальше →
Всего голосов 190: ↑183 и ↓7 +176
Просмотры 20K
Комментарии 96

Тестирование веб-приложений — эмулятор интернет-канала Sloppy.

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

Из всех видов тестирования веб-приложений, самым, по моему мнению, востребованным и распространённым, является тестирование работы системы у пользователей с различным каналом доступа. Ну, может быть, кроме теста совместимости в разных браузерах. И так, нам почти в каждом проекте нужно или очень желательно посмотреть, как люди с разной скоростью подключения будут видеть наш проект. Особенно это касается веб-приложений — от этого иногда зависит вообще работоспособность проекта, в частности, когда загружаются большие AJAX-библиотеки и проект часто взаимодействует с сервером. Вот как раз для таких случаев есть проект Sloppy.
Читать дальше →
Всего голосов 38: ↑37 и ↓1 +36
Просмотры 15K
Комментарии 30

Супер-юзабильные формы

Разработка веб-сайтов *
super_form

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

На помощь приходит замечательный скрипт «Masked Input Plugin», который позволяет назначить для каждой формы маску, по которой данные будут заполнятся.

Возможно Вы не совсем поняли, но лучше один раз увидеть, чем сто раз услышать.
Читать дальше
Всего голосов 209: ↑164.5 и ↓44.5 +120
Просмотры 54K
Комментарии 91

38 статей о создании закругленных углов на сайтах

Разработка веб-сайтов *
Моя статья на Временно.нет
38 статей о создании закругленных углов на сайтах
Часто сталкиваешься с необходимостью создания блоков с круглыми краями. Задавшись вопросом как вообще можно решить поставленную задачу, сделал подборку интересных статей и уроков на данную тему.

Здесь представлен обзор 38 статей, разбитых на 4 категории по способам реализации.
Читать дальше →
Всего голосов 4: ↑4 и ↓0 +4
Просмотры 12K
Комментарии 79

Crop & Resize на страницах ваших сайтов

JavaScript *
Пройдясь по хабра-поиску выяснил, что готового решения для кропа-ресайза изображений, на движке JavaScript/HTML/CSS еще не предлагалось. Поэтому, позвольте представить вашему вниманию модуль для ваших сайтов, частично реализуюший функционал редактирования, распространенный на фото-хостингах.

К делу

Внешне задумка выглядит так:


Читать дальше →
Всего голосов 117: ↑102 и ↓15 +87
Просмотры 31K
Комментарии 122

Input vs. Button

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

Есть несколько вариантов решения нашей задачи:
1. Использовать /> и технику замены картинки текстом.
2. Использовать /> и прописывать для каждой кнопки соответствующий путь к изображению.
3. Использовать и вставить код картинки между тегом button.
Читать дальше →

Информация

В рейтинге
Не участвует
Откуда
Москва и Московская обл., Россия
Дата рождения
Зарегистрирован
Активность