rimonfotovivo: (Default)
[personal profile] rimonfotovivo

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 работает по прямому назначению - активирует заданное действие:
открывает форму ответа и вписывает туда предустановленное значение -


From:
Anonymous( )Anonymous This account has disabled anonymous posting.
OpenID( )OpenID You can comment on this post while signed in with an account from many other sites, once you have confirmed your email address. Sign in using OpenID.
User
Account name:
Password:
If you don't have an account you can create one now.
Subject:
HTML doesn't work in the subject.

Message:

 
Notice: This account is set to log the IP addresses of everyone who comments.
Links will be displayed as unclickable URLs to help prevent spam.

Profile

rimonfotovivo: (Default)
rimonfotovivo

November 2016

S M T W T F S
  12345
6789101112
13141516171819
20212223 242526
27282930   

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Oct. 18th, 2017 09:18 am
Powered by Dreamwidth Studios