30 сент. 2008 г.

Как реализовать кнопку, не используя, собственно, кнопку?

Вопрос достаточно интересный. Как сделать эмуляцию кнопки, которая реагирует на наведение курсора не прибегая к слайд-эффектам, основанным на ява-скриптах? С помощью CSS - очень просто. Для меня, кстати, было настоящим открытием, что в CSS свойство "hover" применимо практически к любому элементу. Но, обо всем по порядку. Сначала - вот она, кнопка:



А вот ее код:

CSS
#button {
width: 60px;
height: 30px;
background: url(1.jpg);
}
#button:hover {
width: 60px;
height: 30px;
background: url(2.jpg);
}

#button a {
text-decoration: none;
font-size: 18px;
}
#button a:hover {
text-decoration: none;
font-size: 18px;
}

HTML:

<body>
<div id="button"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
</div>


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

А можно поступить проще и написать текст кнопки в ссылке, вместо пробелов. А для того, чтобы ссылка полностью перекрывала область кнопки - правильно расставить padding'и. Тут уж все зависит от вашей фантазии.
-----------------------------------------------------


Хостинг изображений - radikal.ru

25 сент. 2008 г.

Обмен опытом...

http://rotorweb.ru/dizajn/smena-dizajna-po-vremenam-goda.html - довольно простой и интересный способ реализации смены дизайна по временам года.

Все подробно разобрано и объяснено.
-----------------------------------------------------

Хостинг изображений - imageshack.us

22 сент. 2008 г.

В помощь фотожоперу - эффект "глубокой" фотографии.

Для начала, найдем фотографию, которую мы будем делать "глубокой". Я нашел вот такую:

Теперь копируем слой (Ctrl+J), нижнему слою даем Gausian Blur (радиус фильтра зависит от того, насколько сильно выхотите отделить передний план). Затем на верхний слой кидаем векторную маску (Alt+Add Layer Mask). И по маске (установив белый в качестве Foreground Color) рисуем Radial Gradient.

Получиться должно примерно так:


Применений у данного эффекта множество.
-----------------------------------------------------

Хостинг изображений - imageshack.us

20 сент. 2008 г.

"Намертво приколочено к центру"

По адресу http://www.wpdfd.com/editorial/thebox/deadcentre4.html лежит хороший пример того, как div можно намертво приколотить к центру экрана. Решение кроссбраузерное. Таблицы все больше уходят в небытие:-)

Если же сайт у нас с динамическим содержанием, то для помещения блока по центру надо использовать вычисленное значение его ширины и высоты, деленное на "2". Скажем, ASP позволяет в прописывать в стилевых таблицах имена переменных в качестве числового значения. И там же совершать с ними некие арифметические действия.
-----------------------------------------------------

Хостинг изображений - imageshack.us

17 сент. 2008 г.

Спецификация CSS2 в переводе на русский

если кому интересно, лежит здесь
-----------------------------------------------------

Хостинг изображений - imageshack.us

CSS и верстка

Подкинули мне тут задачку с подвохом. Типа, сделай так:

Для тех, кто по жизни в носу ковыряет - поясняю. Задача сделать два div-блока, да так, чтобы один перекрывал другой. Я подмал-подумал, да и выдал кросс-браузерную резину:
CSS:

body {
padding: 0px;
margin: 0px;
}

#corn {
position: relative;
float: right;
width: 200px;
height: 100px;
background: #00ffff;
margin-right: -50px;
margin-top: -50px;
z-index: 100:
}

#main {
position: relative;
width: 90%;
height: 450px;
background: #00ff00;
margin: 50px;
z-index: 1;
}

HTML:

<body>
<div id="main">
<div id="corn">
</div>
</div>
</body>


Фишка в том, что элемент считается родительским для другого элемента в том случае, если его позиция отлична от static:-)
-----------------------------------------------------

Хостинг изображений - imageshack.us

13 сент. 2008 г.

web. Садистское.

Как же порой хочется приложить создателей IE6 головой о стену. Верстаю. Резину. На div'ax. Везде все нормально, кроме IE. Даже маковские Camino с Safari все правильно отображают. А вот IE парсит страницу черт-те знает как. Одна из основных головных болей - непонимание "ослом" отрицательных отступов. Сугубо из-за этого придется страницы сайта сохранять с расширением *.php и в таком виде заливать на хостинг. Ибо для многотысячной толпы пользователей IE6 придется подсовывать другую стилевую таблицу. Специально под "осла" заточенную. А на JavaScript переключатель писать тоже не очень правильно - он почти у всех по умолчанию запрещен. Поэтому надо, чтобы сервер до отправки страницы клиенту решил, какую стилевую таблицу ему подсунуть, чтобы все у всех выглядело одинаково.

Да, кстати. Конструкции вида:

voice-family: "\"}\"";

как-то уж очень по-индусски выглядят:-)
-----------------------------------------------------

Хостинг изображений - imageshack.us

3 сент. 2008 г.

В помощь фотожоперу - хитрость с Unsharpen Mask

Сегодня я расскажу вам об одной хитрости при работе с фильтром Unsharpen Mask. Но для начала, несколько слов о том, как работает фильтр в общем виде. Фильтр находит в изображении резкие градации по свету/тону между пикселями и визуально делает их еще резче. То есть - светлые пиксели вдоль границы он высветляет, темные - затемняет.

Вот описания настроек фильтра. Источник - http://www.publish.ru/adobe/2008/02/5185072/

Amount — это «мощность» фильтра, степень усиления контрастности контуров. Radius — ширина контуров, которые мы хотим усилить. Чем мельче интересующие нас детали, тем меньше радиус. Например, для пейзажа или натюрморта с большим количеством мелких элементов значения Radius могут быть 0,3–0,8 пикселя, для крупнопланового портрета 0,6–1,5 и т. д. Подбирать толщину контура удобнее всего при максимальной «мощности» фильтра 500%, а потом, при необходимости, уменьшать значение Amount. Если для снимков с большим количеством деталей это вполне уместно, для портрета вряд ли потребуется больше 200%.
Третий параметр настройки Unsharp Mask — это Treshold, пороговое значение, позволяющее фильтру отличать контрастные границы и значимые детали от цифрового мусора или зернистой структуры плёнки.


Показать все необходимое мне сегодня поможет Кейт Мосс (это ведь Кейт Мосс?:-) ) Встречайте:

Хинт: я не показываю как надо шарпить фотографии. Я показываю как избежать некоторых нежелательных эффектов при применении фильтра Unsharp Mask. Сообразно этому выбрана и степень "расшарпливания" фоторафии.
Сделаем два слоя-копии нашего фото (создать слой-копию - Ctrl+J).
Итак, если мы применим к фото фильтр Unsharp Mask, то достаточно часто мы можем видеть вот такую картину:

Темные участки, ставшие еще темнее, не так бросаются в глаза, как участки светлые. Вот эти светлые участки, которые "фи", "буэ" и вообще неэстетичны, можно замаскировать следующим образом - включите видимость одному из слоев-копий и задайте режим смешивания (Blending Mode) Darken. Видите, светлые участки пропали? Изменяя прозрачность слоя с примененным Darken можно достаточно эффективно маскировать лезущие в глаза светлые артефакты. А если сделать видимым второй слой-копию и задать ему режим смешивания Lighten, то можно регулировать видимость и темных участков.
Тот же самый шар после описанных выше манипуляций:

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

Хостинг изображений - imageshack.us