Rimon Lusi (fotovivo) wrote,
Rimon Lusi
fotovivo

Поиграем с кнопками!

jaga

Занятный элемент нашелся на просторах развитого ХТМЛ
- рисует на странице кнопочку:

<button> Нажми на меня </button>

Такую же, как прочие системные "продолжить", "готово", "отправить", внешний вид которых зависит от версии браузера.

Такая же, да не совсем - для "бутона" можно определять стили:



раскрашивать - менять цвета и обрамление,
задавать фон картинкой, кучерявые шрифты, тени и скругления уголков;
button переносит стилевые издевательства, которые традиционная команда input напрочь игнорировала.

Например, в конструкции для лайкаунтера -
можно обойтись без трюка с подменой изображений - button воспроизводит эффект нажатия автоматически
(в ФайрФоксе хорошо выражено, в Хроме менее заметно).

Отличие button-а от ссылок-картинок не только в имитации нажатия:
кнопка - тянется. Подстраивается под надпись любой длины, сохраняя шрифтовые эффекты.

Повод поразмяться на тему Каскадные стили - это просто! -:)


   Счетчик посещений Counter.CO.KZ - бесплатный счетчик на любой вкус!


Код кнопки вместе со счетчиком:


<a href="http://UZER.livejournal.com" target="_blank"><button  style=" height:55px; box-shadow: 2px 3px 5px;"><img alt="fotovivo.lj.ru" src="http://ic.pics.livejournal.com/fotovivo/19078119/64942/64942_original.gif" style="padding:10px; box-shadow: inset 2px 1px 3px #eee, inset 2px 3px 3px, 2px 1px 3px #eee, 2px 3px 5px; border: 6px solid #4378d9; border-radius: 60px; vertical-align: middle" /> ВАШ_ТЕКСТ </button></a>
<a href="http://counter.co.kz" target="_blank"><img alt="Счетчик посещений Counter.CO.KZ - бесплатный счетчик на любой вкус!" border="0" height="45" src="http://counter.co.kz/CounterCoKz?page=UZER.livejournal.com_000001.html&style=candy&digits=4" width="180" /></a>

(вместо UZER вставьте свое имя; в режиме ХТМЛ-редактора)


Несколько примеров с кнопками:






Простая кнопка со встроенным изображением:


<a href="http://UZER.livejournal.com/000000.html" target="_blank"><button style="height:60px;"><img alt="☺" src="http://ic.pics.livejournal.com/fotovivo/19078119/67317/67317_original.gif" style="margin:6px; vertical-align:middle" /> ТЕКСТ_ДЛЯ_КНОПКИ</button></a>


В первых угловых скобках <а hrеf="..."> - адреc cтраницы, которая откроется при нажатии на кнопку,
вторым пунктом собственно <button>, он прекрасно работает и в таком аскетическом виде (браузер отрисует
серенький скромный прямоугольник), style= это для прикрас. Следующая позиция
<img аlt="☺" srс="httр://...."> для встраивания картинки, к которой тоже можно
применять или не применять CSS стили.
И все эти развесистые таинственные письмена - только оболочка для надписи ТЕКСТ_КНОПКИ :)
но это для нас много написано, хтмл насамделе очень легкий код, браузером заглатывается влёт -)











∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°




Повторим пройденное:


<button style="height:75px; font-size:1.2em; font-family: Candara; color: #0254b8; box-shadow: 1px 1px 10px #0254b8;  "><img src="http://ic.pics.livejournal.com/fotovivo/19078119/65160/65160_original.gif" alt="☹" style="background:#f0f7f7; border:0; border-radius: 60px; box-shadow: inset -2px -3px 16px #0254b8; color: #5c4545; padding:20px; vertical-align:middle" />_ПУСК_</button>


Стили button-а:
height:75px - размер по вертикали
font-size:1.2em - размер шрифта
(1.2 от используемого по умолчанию, того, что у вас в браузере установлен)
font-family: Candara; - название шрифта (как и все прочие параметры не является обязательным,
если не указывать, на кнопке будет тот же, что на остальной странице)
color: #0254b8; - цвет шрифта (только буквы, фон прописывается иначе)
box-shadow: 1px 1px 10px #0254b8; - тень вокруг элемента (в пикселях смещение: вбок-вниз, размах,
# цифрами - цвет, смотрим в напр. в верхнем меню жж-редактора новой записи)

Стили img :
background:#f0f7f7 - цвет фона
border:0; - нулевая толщина внешней каймы (а если нужна рамочка -
то в пикселях (2рх напр) и цвет соответствующим образом)
border-radius: 60px; - вот это интересный параметр, скругление уголков,
делает картинку закругленной, а при больших значения и полностью круглой.
box-shadow: inset -2px -3px 16px #0254b8 - аналогично предыдущему,
только атрибут inset задает отбрасывание тени внутрь элемента.
color: #5c4545 - это еще зачем? цвет надписи.. на картинке же никакую надпись не сделаешь?
- поверх картинки нет, но, обратим внимание, перед style есть еще один атрибут
alt="☹", который выводит заданное сообщение, если изображение не грузится. Вот его
цвет можно определять в стилях (ну, да - не больно надо, но в принципе возможность есть:)
padding:20px; - весьма важная штука, отступы. Широкие поля вокруг крохотной картинки с чашечкой - его рук дело.

Набор стилей - дело вкуса, к кнопке тоже можно применять и background и border со скруглениями,
но тогда она утратит предустановленную анимацию - смысл теряется,
прямоугольники можно и обычными блоками <div> рисовать.

Вот такая получается сине-выпуклая кнопочка:
(или такие же другими цветами)

             (подписка на комменты)

             (подписка на обновления)

             (календарь за год)





Стильное меню на кнопках:









∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°



Оживляж :) -








Код "горячей кнопки":


<a href="http://UZER.livejournal.com/000000.html" target="_blank"><button  style="height:75px; cursor:pointer; box-shadow: 2px 2px 5px #27488a; font-size:1.2em; color:red; text-shadow: 2px 2px yellow, -8px 14px #8f2c2c, -16px 24px #fca400, -30px 36px #77bf34;"><img alt="fotovivo.lj.ru" src="http://cdn1.share.slickpic.com/u/Rimonel1/Diversa/org/pik_prev_010/web.jpg" style="height:100px; padding:5px; box-shadow: 0 0 2px #eee, 0 0 4px 2px #fff, 0 -2px 4px 2px #ff3, 2px -4px 6px 4px #fd3,-2px -6px 11px 6px #f80, 2px -8px 18px 8px #f20; border: 9px dashed #fff; border-radius: 90px; margin-top:-20px; vertical-align: middle; float: left; margin-left:12px"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ГОРЯЧАЯ КНОПКА! &nbsp; </button></a>


(понятно, что адрес вместо httр://UZER.livejournal.com/000000.html можно вставить любой, не только жжешный.
Кроме троллей - всё на стилях, можете менять цвета "пламени", размеры шрифтов, другую картинку вставить.)





Любителям вставлять призыв к задружингу в посте




Забрать "добавочную" кнопку себе:
(вместо ВАШ_НИКНЕЙМ в режиме ХТМЛ-редактирования вписать свой ник)


<a href="http://www.livejournal.com/friends/add.bml?user=ВАШ_НИКНЕЙМ" target="_blank"><button style="height:60px; cursor:pointer; box-shadow:1px 1px #fff, 2px 2px 6px #27488a; font-size:1.2em; color:#7563a8; text-shadow:2px 1px #fff, 10px -12px #fff, 11px -13px #fc6d42;"><img alt="fotovivo.lj.ru" src="http://l-stat.livejournal.net/img/userinfo.gif?v=17080?v=123.1" style="padding:12px; box-shadow:inset 3px 3px 1px #fff, inset 0 0 2px #fc9d03, -2px -2px #eee, 2px  2px #fc9d03, -2px -6px 2px yellow, -2px 2px #fff, 2px 1px #fff, 10px -12px #fff, 11px -13px #fc6d42,  2px 2px #eee, 2px 2px #fc9d03, 2px 6px 2px yellow, 2px 2px #fff, 10px 12px #fff, 11px 13px #fc6d42, -2px 2px #eee, -2px 2px #fc9d03, -2px 6px 2px yellow, -2px 2px #fff, -8px 10px #fff, -11px 13px #fc6d42; border: 9px dashed #4f49fc; border: 9px dashed #4f49fc; border-radius: 60px;  vertical-align: middle; margin-left:6px" />&nbsp; придруЖЖиться &nbsp; </button></a>

(лепесточки и прочие излишества - программные, изображение - только головастик)

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



∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°∞°




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

По специальности button - посредник между пользователем и активным функционалом встроенных элементов;
простенький примерчик - кнопка в режиме "reset":


Закрыли вкладку - все исчезло, а функция "отправить" внутри поста не исполняется.

Покрутить кнопочки в интерактивном режиме - http://dabuttonfactory.com/, забавная игрушка,
коды там выдаются по-хитрому, зато наглядно ).


И классика жанра:



(в новую запись встроится пост про "Лайкаунтер")

Код "утащилки":
<a href="http://www.livejournal.com/update.bml?repost_type=c&amp;repost=http://UZER.livejournal.com/000000.html&amp;nodraft=1" target="_blank" data-service="livejournal" class="b-sharethis-item"><button alt="fotovivo.lj.ru" style="cursor:pointer; weight:105px; height:57px; color:#272b21; text-shadow: 2px 2px #fff, 3px 3px #5dfc60; font-size:0.85em"><img alt="fotovivo.lj.ru" src="http://ic.pics.livejournal.com/fotovivo/19078119/66580/66580_original.gif" style="margin-left:5px; vertical-align:middle" /> Утащить к себе</button></a>

Синим - ссылка на запись, которой хотите поделиться (не обязательно та самая, где стоит кнопка "поделиться",
не важно в каком журнале - пользователю уйдет содержимое той записи, на которую ссылается код.)



Единственный доступный в жж-записи случай,
когда button работает по прямому назначению - активирует заданное действие:
открывает форму ответа и вписывает туда предустановленное значение -


Tags: babuŝka_13, веб-штучки
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 76 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →