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

Автор: веб-дизайнер | веб-дизайн | 30 Сен 2008 10:00 пп

Вопрос достаточно интересный. Как сделать эмуляцию кнопки, которая реагирует на наведение курсора не прибегая к слайд-эффектам, основанным на ява-скриптах? С помощью 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

Прочтите еще:

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

Автор: веб-дизайнер | веб-дизайн | 22 Сен 2008 6:42 дп

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

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

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

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

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

Прочтите еще:

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

Автор: веб-дизайнер | веб-дизайн | 20 Сен 2008 9:13 дп

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

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

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

Прочтите еще:

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

Автор: веб-дизайнер | веб-дизайн | 17 Сен 2008 9:29 пп

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

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

Прочтите еще:

CSS и верстка

Автор: веб-дизайнер | веб-дизайн | 17 Сен 2008 1:22 пп

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

Для тех, кто по жизни в носу ковыряет – поясняю. Задача сделать два 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

Прочтите еще:

Позже »