Есть ли у технарей своя кнопка?

[George Smith]

Кстати при помощи CSS можно делать анимации(прогресс бары, например), можно делать градиенты, скругления углов, непрозрачность(opacity - не работает в недобраузере IE), рамку, шрифт, цвет шрифта. Короче в CSS можно делать практически всё. Иногда даже проще CSS прописать, чем нарисовать картинку в том же фотошопе.

Дык вот это меня и интересует, давай я нарисую нашу кнопку в двух кадрах, а ты напишешь код для сайтов. На вид просто кнопка, а при нажатии мыши она утапливается ? ...

 

[GlaZZZ]

Дык вот это меня и интересует, давай я нарисую нашу кнопку в двух кадрах, а ты напишешь код для сайтов. На вид просто кнопка, а при нажатии мыши она утапливается ? ...

Ага!))) Именно. У вас скайп есть? если есть скиньте логин в ЛС.

 

[George Smith]

Ага!))) Именно. У вас скайп есть? если есть скиньте логин в ЛС.

Нет у меня скайпа, Инет медленный, я в Тундре, вся моя радость коннект МТС - Который "Быстрый олень" ... )

 

[GlaZZZ]

МТС - Который "Быстрый олень" ...

Ключевое слово Олень?? )

Тогда киньте кнопку тут

 

[GlaZZZ]

Попробую сегодня несколько вариантов кнопки сделать при помощи css стилей

 

[George Smith]

Артем попробуй вот так, при нажатии, чтобы кнопка утопилась, т.е. два разных кадра, размер абсолютно одинаковый. Кнопка прозрачная, использовать можно на любом фоне. В архиве есть и двухкадровый ГИФ и два кадра по отдельности ...

 

[GlaZZZ]

Извините, но ваши кадры понадобились, только для цветов рамки
Я взял оригинальную картинку и рамку уже при помощи CSS сделал.
Кстати немного увлёкшись я добавил скругление в 5px и плавный перелив в 0.5 секунд.

Чтобы посмотреть откройте в архиве html страницу или перейти по ссылке
файловый хостинг DropBоx

 

[George Smith]

Артем, ты не понял, не при наведении мыши, а при нажатии, пользователю секунду будет видно, даже при самом быстром Инете. Пи наведении не естественно ...

 

[GlaZZZ]

Вот, сделал https://dl-web.dropbox.com/get/Publ...AD-BitMCa5pyxQyjYasDpzw-oXuHWg3tVlG3sbcLg8bDA

 

[DimkaSP]

Не знаю о каких кнопках тут говорят. А мои две кнопки щас дерутся за коробку с игрушками >_<

 

[Eli]

Дмитрий - а если вам все же прочитать внимательно посты?

кнопка перехода на форум технарей с личного сайта Форумчан.. ( вот о чем речь)


Юра - не возражаешь если я возьму твою иконку? ту которую ты в гифке прикрепил?

 

[DimkaSP]

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

 

[George Smith]

Юра - не возражаешь если я возьму твою иконку? ту которую ты в гифке прикрепил?

Олег, погоди Артем делает к ней анимационный код, будет еще лучше, ну если не надо анимацию, то чё у меня спрашиваешь, я для этого и делал ...

 

[GlaZZZ]

Артем делает к ней анимационный код

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

 

[Eli]

как только поставил анимацию от юры - что то сайт сглюкнул у меня ... (тормозить зараз начал )


вот что теперь получалось - решил сделать из оригинальных да и дизайн заодно сменил ...

 

[George Smith]

Ссылку на сайт то дай взглянуть, как в Инете ?...

 

[Eli]

вроде я тебе давал уже....

www.invw.cu.cc

 

[George Smith]

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

 

[Big Daddy]

Наша кнопка

<a href="http://www.tehnari.ru/"><img src="http://www.tehnari.ru/img/tehnari_ru.gif" alt="tehnari.ru" border="" /></a>

Хорошо мне нравится уже поставил на сайте.

 

[GlaZZZ]

Вот, сегодня дошли руки и я исправил косяк с плавностью. Убрал плавность вообще.

Вот код кнопки:
HTML

<a href="http://www.tehnari.ru" target="blank"><img class="button" src="http://www.tehnari.ru/img/tehnari_ru.gif"></a>

Таблица стилей CSS(должна быть практически в любом шаблоне, любого движка) Это файлы шаблона с форматом ".css"

.button {border-left: 2px #e7e7ff solid; border-top: 2px #e7e7ff solid; border-bottom: 2px #0073bd solid; border-right: 2px #0073bd solid; border-radius: 5px; }
.button:active {border-left: 2px #0073bd solid; border-top: 2px #0073bd solid; border-bottom: 2px #e7e7ff solid; border-right: 2px #e7e7ff solid; }

Если вдруг нет Таблицы Стилей CSS, то можно просто вставить эти стили непосредственно в HTML страницу вот таким образом(Показываю полный код кнопки, если нет CSS таблицы)

<style type="text/css">
.button {border-left: 2px #e7e7ff solid; border-top: 2px #e7e7ff solid; border-bottom: 2px #0073bd solid; border-right: 2px #0073bd solid; border-radius: 5px; }
.button:active {border-left: 2px #0073bd solid; border-top: 2px #0073bd solid; border-bottom: 2px #e7e7ff solid; border-right: 2px #e7e7ff solid; }
</style>

<a href="http://www.tehnari.ru" target="blank"><img class="button" src="http://www.tehnari.ru/img/tehnari_ru.gif"></a>