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


Page 1 of 2 << [1] [2] >>

Date: 2015-01-10 09:31 am (UTC)
From: [identity profile] grizzly-ru.livejournal.com
На все кнопочки понажимал!!! :)))))))))))
...а кнопка "поддерживаю" и та что в самом конце поста - не работают :)
Спасибо! :)))

Date: 2015-01-10 09:49 am (UTC)
From: [identity profile] fotovivo.livejournal.com
Спасибо за развернутый тестинг!

Проверяла кроссбраузерность в Хроме, Опере и ФФоксе, в них работает (не под логином тоже),
IE эксплорер, известная проблема - он?
( И в мобилках даже не представляю насколько что применимо )

(no subject)

From: [identity profile] grizzly-ru.livejournal.com - Date: 2015-01-10 09:57 am (UTC) - Expand

(no subject)

From: [identity profile] fotovivo.livejournal.com - Date: 2015-01-10 10:14 am (UTC) - Expand

(no subject)

From: [identity profile] grizzly-ru.livejournal.com - Date: 2015-01-10 10:22 am (UTC) - Expand

(no subject)

From: [identity profile] fotovivo.livejournal.com - Date: 2015-01-10 10:24 am (UTC) - Expand

(no subject)

From: [identity profile] grizzly-ru.livejournal.com - Date: 2015-01-10 10:25 am (UTC) - Expand

Date: 2015-01-10 10:33 am (UTC)
From: [identity profile] alena-15.livejournal.com
Ну ты сильна!..

Date: 2015-01-10 10:38 am (UTC)
From: [identity profile] fotovivo.livejournal.com
Забавляюсь )

Date: 2015-01-10 11:54 am (UTC)
From: [identity profile] avkost1955.livejournal.com
Полезные штуки:). Сохраню в избранных.

Date: 2015-01-10 12:59 pm (UTC)
From: [identity profile] fotovivo.livejournal.com
Всегда велкам!:)

Date: 2015-01-10 12:18 pm (UTC)
From: [identity profile] balahnina.livejournal.com
У меня аж мозги вскипели..

Все-таки, я тупая(((

Date: 2015-01-10 01:01 pm (UTC)
From: [identity profile] fotovivo.livejournal.com
Они сработают, даже если во внутренности не всматриваться,
тож самое как коды тестов-гадалок встраивать.

(no subject)

From: [identity profile] balahnina.livejournal.com - Date: 2015-01-10 01:04 pm (UTC) - Expand

(no subject)

From: [identity profile] fotovivo.livejournal.com - Date: 2015-01-10 01:06 pm (UTC) - Expand

(no subject)

From: [identity profile] balahnina.livejournal.com - Date: 2015-01-10 01:11 pm (UTC) - Expand

(no subject)

From: [identity profile] fotovivo.livejournal.com - Date: 2015-01-10 01:15 pm (UTC) - Expand

(no subject)

From: [identity profile] balahnina.livejournal.com - Date: 2015-01-10 01:33 pm (UTC) - Expand

Date: 2015-01-10 12:39 pm (UTC)
From: [identity profile] irsenas.livejournal.com
какая красота!

Date: 2015-01-10 01:01 pm (UTC)
From: [identity profile] fotovivo.livejournal.com
Забавные штучки )

Date: 2015-01-10 12:43 pm (UTC)
From: [identity profile] brirene.livejournal.com
Класс!!! Всё работает, но для меня это всё равно, что по-китайски... Ничего в этом не понимаю... А жаль.

Date: 2015-01-10 01:04 pm (UTC)
From: [identity profile] fotovivo.livejournal.com
Иногда начинаешь с юзинга - тупо скопировал скрипт (захотелось, скажем, падающего снежка на страничке), воткнул в коды как заклинание,
а потом раз-другой, приглядываешься и что-то начинает проступать понимаемое - как вещи в сумерках.

(no subject)

From: [identity profile] brirene.livejournal.com - Date: 2015-01-10 01:33 pm (UTC) - Expand

(no subject)

From: [identity profile] fotovivo.livejournal.com - Date: 2015-01-10 02:09 pm (UTC) - Expand

Date: 2015-01-10 02:36 pm (UTC)
From: [identity profile] luvida.livejournal.com
Китайская грамота)))
Но на всякий случай заберу в избранное. Вдруг поумнею когда-нибудь)))))

Date: 2015-01-10 02:38 pm (UTC)
From: [identity profile] fotovivo.livejournal.com
Можно пользоваться особо не вникая, если понадобится )

(no subject)

From: [identity profile] luvida.livejournal.com - Date: 2015-01-10 02:41 pm (UTC) - Expand

Date: 2015-01-10 02:52 pm (UTC)
From: [identity profile] my-name-s-busy.livejournal.com
а мне бы создание гифки, толковую прогу, ибо вчера накалила зависшая Gifcam)))

Date: 2015-01-10 03:07 pm (UTC)
From: [identity profile] fotovivo.livejournal.com
Самое подручное - FastStone http://fotovivo.livejournal.com/134756.html
проще только он-лайновые сервисы типа "добавь снежок/дождик на аватарку"
Если толковое всм - при полном функционале, так чего б не фотошоп.
Edited Date: 2015-01-10 03:09 pm (UTC)

Date: 2015-01-10 03:56 pm (UTC)
From: [identity profile] caquet.livejournal.com
Вот что значит - быть гуманитарием: если половина просто непонятно, то что касается второй половины - не слишком понятно, зачем себе так жизнь усложнять %)

Date: 2015-01-10 06:29 pm (UTC)
From: [identity profile] fotovivo.livejournal.com
Надо ж и поусложнять для поддержания тонуса, не так, так как-нить еще, хоть по-гуманитарному )

(no subject)

From: [identity profile] caquet.livejournal.com - Date: 2015-01-11 10:25 pm (UTC) - Expand

(no subject)

From: [identity profile] fotovivo.livejournal.com - Date: 2015-01-11 11:27 pm (UTC) - Expand

(no subject)

From: [identity profile] caquet.livejournal.com - Date: 2015-01-11 11:30 pm (UTC) - Expand

ты разошлась!

Date: 2015-01-10 03:57 pm (UTC)
From: [identity profile] tinaword.livejournal.com
Вон чего только не натворила))))

Re: ты разошлась!

Date: 2015-01-10 06:27 pm (UTC)
From: [identity profile] fotovivo.livejournal.com
Оттянулась, ага )

Date: 2015-01-10 07:27 pm (UTC)
From: [identity profile] tais2016.livejournal.com
Утащу себе и буду разбираться.
Здорово!

Date: 2015-01-10 07:35 pm (UTC)
From: [identity profile] fotovivo.livejournal.com
Всегда велкам )

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

Date: 2015-01-10 07:29 pm (UTC)
From: [identity profile] livejournal.livejournal.com
Пользователь [livejournal.com profile] tais2016 сослался на вашу запись в своей записи «Новые игрушки для ЖЖ (http://tais2016.livejournal.com/406526.html)» в контексте: [...] Оригинал взят у в Поиграем с кнопками! [...]

Date: 2015-01-10 08:09 pm (UTC)
From: [identity profile] tangrusha.livejournal.com
Ну зачем я на ночь сюда залезла? Теперь спать не буду :)
Спасибо, ужжжжасно интересно, хочется попробовать что-нибудь. Взяла на вооружение, да.

Date: 2015-01-10 08:10 pm (UTC)
From: [identity profile] fotovivo.livejournal.com
Я два дня не вылезала, как разыгралась )

(no subject)

From: [identity profile] tangrusha.livejournal.com - Date: 2015-01-10 08:20 pm (UTC) - Expand

(no subject)

From: [identity profile] fotovivo.livejournal.com - Date: 2015-01-10 08:51 pm (UTC) - Expand

Date: 2015-01-10 09:04 pm (UTC)
From: [identity profile] ishura.livejournal.com
С кодом "утащилки" не так все просто, а в случае отложенной записи вообще не прокатит.

Date: 2015-01-10 09:11 pm (UTC)
From: [identity profile] fotovivo.livejournal.com
Отложенная или под глазом, понятно что не прокатит, дак и где сторонний юзер возьмет на них ссылку.
Коды под жжешные записи вообще на честном слове держатся, всегда можно создать условия, что все к чертям переклинит, в нормальных браузерах, при аккуратном воспроизведении и то не факт, что не заглючит где-нибудь.
На то и баловство с фокусами, что без гарантий )

Date: 2015-01-10 09:18 pm (UTC)
From: [identity profile] gal-an.livejournal.com
Круто!
Положу в избрано, буду изучать.

3000-ТОП

Date: 2015-01-10 10:03 pm (UTC)
From: [identity profile] 3000top.livejournal.com
Ваша запись появилась в рейтинге 3000-ТОП (http://www.3000top.ru). Отслеживать судьбу записи вы можете по этой ссылке (http://www.3000top.ru/search.php?search=fotovivo).

Date: 2015-01-11 05:34 am (UTC)
From: [identity profile] luckyed.livejournal.com
Вот это да! Тебя изучать надо.

Date: 2015-01-11 09:46 am (UTC)
From: [identity profile] fotovivo.livejournal.com
Сама в разных источниках подсматриваю, потом уж обыгрываю по всякому ))

Date: 2015-01-11 10:26 am (UTC)
From: [identity profile] skripta.livejournal.com
Всё потыкала. Работает! Прикольные штуки)
Особливо мне кнопочки с фотками приглянулись - стильное меню которые, только вот я не врубаюсь, как их сварганить...

Date: 2015-01-11 10:37 am (UTC)
From: [identity profile] fotovivo.livejournal.com
Изображение вклеить на кнопку, как в верхнем примере, размеры подогнать.

(no subject)

From: [identity profile] skripta.livejournal.com - Date: 2015-01-11 11:02 am (UTC) - Expand

(no subject)

From: [identity profile] fotovivo.livejournal.com - Date: 2015-01-11 11:09 am (UTC) - Expand

Date: 2015-01-11 11:05 am (UTC)
From: [identity profile] babyps.livejournal.com
Спасибо! Начинаю заниматься! :)
Чудесного воскресного дня и прекрасного настроения!

Date: 2015-01-11 11:08 am (UTC)
From: [identity profile] fotovivo.livejournal.com
Спасибо и вам удачного выходного!

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

Date: 2015-01-11 12:58 pm (UTC)
From: [identity profile] livejournal.livejournal.com
Пользователь [livejournal.com profile] dorilak сослался на вашу запись в своей записи «Новые игрушки для ЖЖ (http://dorilak.livejournal.com/64955.html)» в контексте: [...] нал взят у в Поиграем с кнопками! [...]

Date: 2015-01-11 01:05 pm (UTC)
From: [identity profile] winsin.livejournal.com
Ого, сколько кнопочек!

Date: 2015-01-11 01:18 pm (UTC)

Date: 2015-01-11 04:53 pm (UTC)
From: [identity profile] sheric-ru.livejournal.com
Надо будет завтра на работе почитать и постараться разобраться...

Date: 2015-01-11 05:13 pm (UTC)
From: [identity profile] capat.livejournal.com
Сколько же премудростей! )

Date: 2015-01-11 05:27 pm (UTC)
From: [identity profile] novser.livejournal.com
чего только не придумают )

Date: 2015-01-11 05:33 pm (UTC)

Date: 2015-01-12 12:48 am (UTC)
From: [identity profile] sen-semilia.livejournal.com
доброй ночи!
я с кнопками не играю :-)

Date: 2015-01-12 07:52 am (UTC)
From: [identity profile] fotovivo.livejournal.com
Доброго утра,
спасибо за коммент )
Page 1 of 2 << [1] [2] >>

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:20 am
Powered by Dreamwidth Studios