Как я делала кнопки 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 (прозрачный фон), то ли еще почему-то 

Задача №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 и связь с социальными сетями была налажена.

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

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

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

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

Итак, вот, как прописаны эти мои кнопки для подписки и расшаривания в социальных сетях на странице Single.php (о страницах шаблона Вордпресс читайте тут):

<div>
<!-- подписка на блог -->
<a rel="nofollow" target="_blank" href="http://feeds.feedburner.com/blogotey/new" title="Подписаться!"><img src="/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="/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="/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="/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="/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="/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="/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="/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="/wp-content/uploads/2013/01/odn_w_off.png" class="mybutton oran"></a>
</div>

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