Раиса (tais2016) wrote,
Раиса
tais2016

Новые игрушки для ЖЖ

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

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

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

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



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

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

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

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


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


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


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


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






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



В первых угловых скобках <а hrеf="..."> - адреc cтраницы, которая откроется при нажатии на кнопку,
вторым пунктом собственно







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



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




Стили 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 со скруглениями,
но тогда она утратит предустановленную анимацию - смысл теряется,
прямоугольники можно и обычными блоками
рисовать.

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

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

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





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









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


Оживляж :) -








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



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





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




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


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

Вставляете в запись в 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: перепост, уроки
Subscribe
  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 7 comments