Главная / Сайтостроение / Как я делала кнопки CSS3

Как я делала кнопки CSS3

Как я делала кнопки CSS3Я очень люблю CSS. Неровно дышу я и к кнопкам на сайте. Так что возможность «нарисовать» кнопки прямо из  каскадной таблицы стилей  не могла оставить меня равнодушной. Эта статья не будет подробным «уроком», хотя я покажу все коды, чтобы читатели смогли повторить мой опыт (ДЕМО — под статьей). Просто попытаюсь рассказать о том, как я искала и находила информацию, как исправляла ошибки.

Зачем вообще нужны кнопки CSS

В принципе, если сделать кнопки вообще без использования иконок соцсетей, то это уменьшит количество запросов — с трех до двух (на каждую кнопку). Отказаться же от картинок в jpeg или png можно тремя путями:

  1. Использовать текст — просто написать на кнопке «Твиттер», «Фейсбук» и так далее. Сделать это легко, но кнопка должна быть вытянутой. А мне хотелось сделать круглые…
  2. Использовать специальные шрифты со значками, например, такие, как представлены на сайте fontello.com — можно выбрать нужный и загрузить его себе на блог. Но там нет значков русских соцсетей!
  3. Закодировать картинку в base64. В результате мы получаем километровый набор символов и знаков, который можно пихать прямо в CSS. Мне, лично, не нравится объем кода. И потом, я не разобралась с этим инструментом до конца. Очевидно, нужно не только кодировать, но и как-то раскодировать изображение. В общем, не вникая в нюансы, наскоком сделать мне это не удалось…

Поскольку ни один из этих трех путей мне не подошел, на моих новых кнопках все-таки присутствуют иконки в png. И это повод для дальнейшей оптимизации…

Можно ли было сделать подобные кнопки, меньше полагаясь на CSS? — Можно. Нарисовать полупрозрачные цветные пузыри с логотипами, а эффект «раздувания» при наведении курсора прописать в таблице стилей. Суммарный объем кода при этом был бы меньше… Но это уже известный, хоженый путь, а значит, не такой интересный.

С кода по строчке — кнопочки на блог

Есть два пути познания. Можно засесть за азы и последовательно продвигаться к более сложным примерам. А можно пытаться сразу ухватить суть непростого решения, по ходу дела подсматривая основы. В свое время я заставила себя осознать правила записи CSS, многократно перекроила оформление шаблона на собственных блогах. Так что, с азами у меня относительно в порядке.

Но, конечно, многие свойства CSS и их атрибуты мне еще не приходилось использовать. Поэтому я не стала изобретать велосипед, а полезла искать готовые стили для подобных кнопок. Таковых я нашла три. Из них, сверяясь со справочником на htmlbook.ru (не делайте ничего, не открыв этот сайт — он бесконечно полезный!), я составила один код, который должен был создать именно «мою» кнопку «Поделиться в соцсетях!».

/* общий вид кнопки без цвета и теней*/
.mybutton { 
  display: inline; /* расположение в линию без переносов */
  background: transparent; /* прозрачный фон */
  height: 60px; /* высота */
  width: 60px; /* ширина */
  position: relative; /* положение на странице - относительно других элементов */
  border-radius: 50%; /* закругление границы - получаем круг */
  -webkit-border-radius: 50%; /* закруление для Safari 3+ и Хрома */
  -moz-border-radius: 50%; /* закругление для Мозилы */
  border: 0; /* отсутствие рамки */
  -webkit-transition: All 0.5s ease; /* переходы для разных браузеров */ 
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  -ms-transition: All 0.5s ease;
  transition: All 0.5s ease; /* переход - плавность эффекта раздувания */
}

.mybutton:hover {height: 70px; width: 70px;} /* эффект раздувания при наведении курсора */

/* дополнительные свойства цвета - голубой */
.blue {
    box-shadow: 0px 3px 0px 0px rgb(64,64,64), /* две тени снаружи */
    	        0px 7px 10px 0px rgb(17,17,17), 
  	        inset 0px -12px 35px 0px rgb(94, 132, 201); /* цветная тень внутри */
}

/* дополнительные свойства цвета - оранжевый */
.oran {
    box-shadow: 0px 3px 0px 0px rgb(64,64,64), 
    	        0px 7px 10px 0px rgb(17,17,17), 
       	        inset 0px -12px 35px 0px rgb(249, 135, 51); 
}

/* дополнительные свойства цвета - зеленый */
.green {
    box-shadow: 0px 3px 0px 0px rgb(64,64,64), 
    	        0px 7px 10px 0px rgb(17,17,17), 
                inset 0px -12px 35px 0px rgb(204, 204, 102); 
}

Это тот промежуточный итог, который сейчас работает у меня на Блоготее. Почему промежуточный? — Потому что есть несколько задач, которые я пока не решила (скорее всего из-за отсутствия в моем подходе системности)

Задача №1

Все-таки прописать адреса картинок прямо в коде CSS через кодировку base64 (писала о ней выше) или просто адресом через свойство background-img: url (…) Почему-то не показывалась у меня иконка. То ли потому, что сначала написано background: transparent (прозрачный фон), то ли еще почему-то  sad

Задача №2

Оптимизация кода. Сначала я написала три кода к трем видам кнопок. Но, когда все заработало и моя душенька успокоилась, я поняла, что это не рационально — ведь основной массив свойств для всех кнопок одинаков. Тогда я прописала эти свойства в класс mybutton, а только тени и цвета вынесла в отдельные дополнительные классы — blue (голубая кнопка), oran (оранжевая кнопка) и green (зеленая кнопка).

Однако переместить в mybutton свойства тени (которые снаружи под кнопками и одинаковы во всех трех случаях) мне почему-то не удалось. Причины мне пока не ясны.

Битва с html

Неожиданную свинью подложила мне реализация этих кнопок соцсетей уже в html. Вот уж откуда я не ожидала никаких сюрпризов.

Началось все с того, что подобные штуки предлагается писать с тегом button — «кнопка» (подробнее о тегах html ). А этот тег заворачивать в контейнер form. То есть, должно выглядеть примерно так:

<form>
<button class="mybutton oran"><a href="url"><img src="url"></a></button>
</form>

В этом варианте кнопки очень красиво появились на странице, раздувались, но… ссылки не работали. Методом слепого, но быстрого тыка я поменяла form на всеми любимый div и связь с социальными сетями была налажена.

Я поспешила раструбить на весь свет о своих достижениях и попросила протестировать эту красоту (естественно, не ожидая никаких проблем!). Но вскоре выяснилось, что это было лишь затишье перед решающей схваткой — выяснилось, что ни в Опере, ни в Мозиле мои кнопки не работают!  crazy

Конечно, как вы думали? Думали я проверяю результаты в других браузерах? — Естественно, нет!  punish Я пользуюсь Хромом, значит, все должны пользоваться только им…

Я перелопатила горы информации, присваивала класс оформления разным тегам, пыталась прописать адрес ссылки на соцсеть в атрибутах button — ничего не помогало! Сейчас уже невозможно перечислить все варианты, которые были испробованы и отвергнуты. Периодически я с грустью размышляла, что надо-таки снова вернуться к азам и двигаться планомерно…

В общем, в один прекрасный момент я просто избавилась от тега button и тупо прописала ссылки и адреса иконок. Класс оформления (class=»mybutton oran») я присвоила картинке… Кто бы мог подумать, что именно этот вариант с удовольствием схавают все три браузера (Хром, Мозила и Опера)!

Итак, вот, как прописаны эти мои кнопки для подписки и расшаривания в социальных сетях на странице Single.php:

<div>
<!-- подписка на блог -->
<a rel="nofollow" target="_blank" href="http://feeds.feedburner.com/blogotey/new" title="Подписаться!"><img src="http://blogotey.ru/wp-content/uploads/2013/01/rss_w_off.png" class="mybutton oran"></a>
<!-- твиттер -->
<a rel="nofollow" target="_blank" href="http://twitter.com/intent/tweet?text=RT @Katyaru <?php the_title(); ?>: <?php the_permalink(); ?>" title="Твитнуть!"><img src="http://blogotey.ru/wp-content/uploads/2013/01/tw_w_off.png" class="mybutton blue"></a>
<!-- Лиру -->
<a rel="nofollow" target="_blank" href="http://www.liveinternet.ru/journal_post.php?action=n_add&cnurl=<?php the_permalink(); ?>&cntitle=<?php the_title(); ?>" title="Поделиться в Ли.ру!"><img src="http://blogotey.ru/wp-content/uploads/2013/01/li_w_off.png" class="mybutton green"></a>
<!-- Фейсбук -->
<a rel="nofollow" target="_blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" title="Поделиться в Фейсбуке!"><img src="http://blogotey.ru/wp-content/uploads/2013/01/fb_w_off.png" class="mybutton blue"></a>
<!-- ЖЖ -->
<a rel="nofollow" href="http://www.livejournal.com/update.bml?event=<?php echo urlencode(strip_tags(get_the_excerpt(), '<a><strong>'));echo urlencode('<br/><a href="' . get_permalink() . '">Прочитать целиком</a>');?>&amp;subject=<?php the_title(); ?>" target="_blank" title="Поделиться в ЖЖ"><img src="http://blogotey.ru/wp-content/uploads/2013/01/jj_w_off.png" class="mybutton green"></a>
<!-- Мой Мир -->
<a rel="nofollow" target="_blank" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>" title="Отправить в Мой Мир!"><img src="http://blogotey.ru/wp-content/uploads/2013/01/mail_w_off.png" class="mybutton blue"></a>
<!-- Я.ру -->
<a rel="nofollow" target="_blank" href="http://my.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Поделиться в Я.ру"><img src="http://blogotey.ru/wp-content/uploads/2013/01/ya_w_off.png" class="mybutton green"></a>
<!-- Вконтакте -->
<a rel="nofollow" target="_blank" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" title="Поделиться Вконтакте!"><img src="http://blogotey.ru/wp-content/uploads/2013/01/vk_w_off.png" class="mybutton blue"></a>
<!-- Одноклассники -->
<a rel="nofollow" target="_blank" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&amp;st.s=1&amp;st._surl=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Отправить в Одноклассники!"><img src="http://blogotey.ru/wp-content/uploads/2013/01/odn_w_off.png" class="mybutton oran"></a>
</div>

 

Не могу сказать, что мне этот вариант кнопок соцсетей как-то особенно нравится. Но сам факт их создания — вдохновляет. Очевидно, что это не последний набор кнопок, который появился на страницах Блоготея!

Читайте также

Как оптимизировать картинки для блога?

Как оптимизировать картинки для блога?

Недавно мы обсуждали, как важен для блога качественный графический контент. В комментах к статье было ...

Один комментарий

  1. Вячеслав

    Реанимированные комменты

    Катерина Борисова:
    29.01.2013 в 14:21
    Вот, это то что нужно! и хотя я предпочитаю не морочится с кнопками и поставила у себя pluso, но кое что в тыоей статье открыло мне глаза на косячки в других местах моего блога.

    katyaru:
    29.01.2013 в 14:26
    smile ) Более того, пока писала — у самой себя тут нашла немало всяких косяковsmile Вообще, эта возня с кодами всегда оказывается полезной!

    Elena:
    29.01.2013 в 18:46
    Катя, только вчера думала о смене кнопок, сейчас почитала, почитала и решила: нет, пусть лучше будут как есть — боюсь что-то напутать smile

    katyaru:
    29.01.2013 в 19:03
    Да ну, тут никакое «напутывание» не страшно. Можно всегда все назад откатить. Зато опыт прокачивается со страшной силой!smile

    katyaru:
    29.01.2013 в 19:03
    К тому же, если просто делать кнопки на иконках и html — то это значительно менее помороченно…

    Elena:
    29.01.2013 в 19:52
    Катя, соблазняешь. Уже руки зачесались. Но я потерплю до завтра, а завтра наверное попробую smile

    katyaru:
    29.01.2013 в 21:01
    smile

    Блогобабушка:
    29.01.2013 в 20:19
    Вот классно, теперь осталось только расшарить и к тебе повалят люди за кнопками. Многим хочется необычных кнопок.

    katyaru:
    29.01.2013 в 21:02
    Да уж, не знаю, повалят ли…

    Александра:
    29.01.2013 в 23:43
    Катюш, как всегда, на высоте… Надо попробовать такую красоту поставить.

    katyaru:
    29.01.2013 в 23:45
    Ох, спасибо! Я надеюсь, что мы будем двигаться в направлении этой технологичной красоты)))

    tanichka:
    30.01.2013 в 01:10
    Мне трудно сейчас разобраться во всех подробностях (поздно уже и глаза слипаются), но я обязательно вернусь.
    Хочу добавить, может ты это и знаешь и даже где-то писала, но я пропустила: спецы рекомендуют объединять такие небольшие изображения в блоги, то есть в одну картинку, как я поняла, состоящую из нескольких изображений. Тоже через список стилей, это уменьшает нагрузку, но подробно разбираться в этом я не стала, отложив в долгий ящик.

    katyaru:
    30.01.2013 в 09:59
    Да, такие блоки называются спрайты. Не уверена, что можно собрать иконки кнопок. А фот фоновые изображения, например, на главной — очень даже хорошо объединить.

Добавить комментарий

Ваш e-mail не будет опубликован.