Как оформить и анимировать кнопки рубрик блога и соцсетей. Пособие от чайника для чайников
Многие хотят иметь красивую авторскую страничку и немаловажным фактором являются кнопки, которые вы располагаете в ней. Кнопки соцсетей, добавления в друзья, RSS или рубрик блога, если таковые у вас имеются.
Я уже довольно давно играюсь с дизайном журнала и должен признать - это как ремонт, пока есть время и желание, он продолжается вечно. Слава Богу, денег это у меня не отнимает. Началось всё как раз со вставки кнопок соцсетей, когда я наткнулся на пост yoksel в сообществе journals_covers. Она же впоследствии и помогала мне с дизайном журнала. Для начала расскажу, как я сделал кнопки рубрик в верхнем посте журнала.
Конечно, простейшим способом сделать «кнопочные» рубрики в верхнем посте является банальная загрузка фоток, где в соответствующих полях вы прописываете url страницы, на которую можно перейти при клике на фото. Там же вы прописываете размер изображения, дабы несколько рубрики могли идти в одну строку.
Хотя, на мой взгляд, гораздо удобнее оперировать напрямую кодом html, т.к. можно сразу написать его для нескольких кнопок и потом просто вставить в пост. Выглядит он так:
a>
Таких кодов вы можете навставлять друг за дружкой, сколько душа пожелает, но нужно понимать, что в зависимости от размерности вставляемых картинок и ширины с которой отображается ваш пост, часть из них может быть автоматически перенесена на следующую строку. Я для рубрик использовал картинки шириной 160 рх, т.к. всего рубрик 10 и нужно было отобразить их в две строки по 5 штук соответственно.
Теперь о том, как я делал картинки рубрик. Мне хотелось что-то довольно оригинальное и нестандартное, но при этом отражающее суть той или иной рубрики. Т.к. с фотошопом я не дружен, то пришлось воспользоваться услугами более простых графических редакторов.
Удобным и довольно простым в использовании является Picasa
, а если вы привыкли работать с Google Фото и Google+, для вас он будет вообще незаменим. В нём я делал не только картинки для рубрик, но и коллажи оформления блога.
Кнопки решил оформить в стиле Polaroid, что впоследствии заставило меня воспользоваться уже другим графическим редактором для устранения огрехов. Но об этом позже. Если вы хотите воспользоваться такой же опцией, то лучше сначала кадрировать фотку в квадратный формат (обложка CD), ибо при использовании функции Polaroid фото так и так обрежется, но в случае с кадрированием вы сами сможете определить нужную область:
Далее, собственно, применяем Polaroid:
Важно! Оставьте фон серым, если в вашем блоге фон страницы является прозрачным или просто отличным от белого. Ниже я поясню почему.
По желанию можно добавить текст под картинкой, но стоит понимать, что придётся, немного помучится, ибо отображение его при «косых» фото, какие выдаёт Polaroid, может быть не в том месте и не под тем ракурсом, каковой вы обозначали изначально. Но терпение и пара «добрых» слов в адрес разработчиков программы и всё ok:
На этом с Picasa всё, правой кнопкой мыши выбираете в меню сохранить, либо же напрямую грузите фото в Google Фото, кому как удобнее. Также, не стоит забывать про размерность фотографии, её можно изменить как при загрузке уже в ЖЖ, так и на некоторых сервисах-хостингах. Смотря, через что вы грузите фотографии в интернет. Я, для удобства, сразу изменил его в старом добром Paint.
Теперь о том огрехе, который произошёл, при использовании Polaroid и почему стоило оставить серый фон у картинки, если фон вашего блога отличен от белого или любого другого, который вы могли бы подобрать в программе…
Например, мне не подошёл бы никакой фон картинки ввиду того, что фон моего блога полупрозрачен, а значит и фон косой картинки должен быть прозрачен. К тому же впоследствии я предполагал анимировать рубрики, а при анимации картинка с ещё каким-то левым фоном, выделяющимся на фоне блога, выглядела бы убого.
И в этом случае меня спас онлайн фото-редактор Pixlr
, благодаря которому я сделал фон картинки прозрачным. Загружаем в него фото или прописываем его url, а далее в поле «слои» два раза кликаем на замочек, чтобы открыть возможность редактирования заднего фона фотографии:
Потом выбираем в инструментах «Волшебную палочку» и кликаем её на наш с вами серый фон, он же задний. Область выделится штриховыми линиями и можно смело нажимать кнопку delete. Вот так у вас должно было получиться:
При сохранении не забываем изменить формат на png, ибо только в этом случае прозрачность фона сохранится:
Рекомендую работать в этом приложении с маленькими изображениями, ибо при работе с этой фоткой (3434х4000 рх) редактор жутко тупил.
А вот и плод моих чресл нашей работы:
Красиво, да? Кликнув на неё, вы попадёте... А вот кликните и узнаете!
Так, я рассказал вам, как сделать красивую картинку с прозрачным фоном для рубрики блога, теперь расскажу, как её можно анимировать, ведь просто красивые кнопки это фигня, а вот анимированные красивые кнопки... Впрочем, тоже фигня, но если кому интересно, то милости просим далее.
Для анимации вам понадобятся коды CSS, которые вставляются в соответствующее поле в настройках оформления журнала. Сразу оговорюсь, что речь в данном случае идёт только о стилях Chameleon, для других стилей есть свои коды.
Так, например, код, при котором картинка в прикреплённом посте будет менять цвет, и вертеться выглядит так:
.j-e-text DIV[data-sticky-nav] A:hover IMG {
transform: rotate(360deg);
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.j-e-text DIV[data-sticky-nav] IMG {
transition: all .5s;
}
Чтобы данный код затрагивал лишь определённые изображения в посте, нужно их обернуть в тег. Выглядит это так (внимание на подчёркнутое):
Я ограничился лишь верчением кнопок рубрик, а вот для кнопок соцсетей выбрал опцию изменения цвета.
Что касается кнопок соцсетей, то конечно, во многих дизайнах они предустановлены и временами даже анимированы, но лично мне представленного опциона было мало (нужен был YouTube, Instagram, Gmail, Google+), да и хотелось вставить какие-то выбранные мною, более красочные кнопки.
Сами кнопки соцсетей вставляются по принципу, описанному выше, только теперь уже в виджет профиля в вашем сайдбаре. Впрочем, сунуть вы их можете, куда душа пожелает. Но лучше ознакомится с методикой у профессионалов в соответствующем посте.
Код CSS для анимации кнопок в виджете профиля может выглядеть так:
.j-w-profile-text a:hover {
transform: rotate(-360deg);
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
Не забудьте убрать предустановленные в дизайн кнопки, если таковые у вас имеются:
.j-w-social-networks-nav {
display: none;
}
На этом всё, если же вы хотите большего, то отправляю вам в вышеописанное сообщество, где его хозяйка вам всё расскажет и покажет, ибо я чайник. Результаты работы можно пронаблюдать в моём верхнем посте и в сайдбаре блога.
P.S. У матросов есть вопросы? Ах да, один есть: стоит ли мне ещё писать посты на подобную тематику?
Я уже довольно давно играюсь с дизайном журнала и должен признать - это как ремонт, пока есть время и желание, он продолжается вечно. Слава Богу, денег это у меня не отнимает. Началось всё как раз со вставки кнопок соцсетей, когда я наткнулся на пост yoksel в сообществе journals_covers. Она же впоследствии и помогала мне с дизайном журнала. Для начала расскажу, как я сделал кнопки рубрик в верхнем посте журнала.
Конечно, простейшим способом сделать «кнопочные» рубрики в верхнем посте является банальная загрузка фоток, где в соответствующих полях вы прописываете url страницы, на которую можно перейти при клике на фото. Там же вы прописываете размер изображения, дабы несколько рубрики могли идти в одну строку.
Хотя, на мой взгляд, гораздо удобнее оперировать напрямую кодом html, т.к. можно сразу написать его для нескольких кнопок и потом просто вставить в пост. Выглядит он так:
Таких кодов вы можете навставлять друг за дружкой, сколько душа пожелает, но нужно понимать, что в зависимости от размерности вставляемых картинок и ширины с которой отображается ваш пост, часть из них может быть автоматически перенесена на следующую строку. Я для рубрик использовал картинки шириной 160 рх, т.к. всего рубрик 10 и нужно было отобразить их в две строки по 5 штук соответственно.
Теперь о том, как я делал картинки рубрик. Мне хотелось что-то довольно оригинальное и нестандартное, но при этом отражающее суть той или иной рубрики. Т.к. с фотошопом я не дружен, то пришлось воспользоваться услугами более простых графических редакторов.
Удобным и довольно простым в использовании является Picasa
, а если вы привыкли работать с Google Фото и Google+, для вас он будет вообще незаменим. В нём я делал не только картинки для рубрик, но и коллажи оформления блога.
Кнопки решил оформить в стиле Polaroid, что впоследствии заставило меня воспользоваться уже другим графическим редактором для устранения огрехов. Но об этом позже. Если вы хотите воспользоваться такой же опцией, то лучше сначала кадрировать фотку в квадратный формат (обложка CD), ибо при использовании функции Polaroid фото так и так обрежется, но в случае с кадрированием вы сами сможете определить нужную область:
Далее, собственно, применяем Polaroid:
Важно! Оставьте фон серым, если в вашем блоге фон страницы является прозрачным или просто отличным от белого. Ниже я поясню почему.
По желанию можно добавить текст под картинкой, но стоит понимать, что придётся, немного помучится, ибо отображение его при «косых» фото, какие выдаёт Polaroid, может быть не в том месте и не под тем ракурсом, каковой вы обозначали изначально. Но терпение и пара «добрых» слов в адрес разработчиков программы и всё ok:
На этом с Picasa всё, правой кнопкой мыши выбираете в меню сохранить, либо же напрямую грузите фото в Google Фото, кому как удобнее. Также, не стоит забывать про размерность фотографии, её можно изменить как при загрузке уже в ЖЖ, так и на некоторых сервисах-хостингах. Смотря, через что вы грузите фотографии в интернет. Я, для удобства, сразу изменил его в старом добром Paint.
Теперь о том огрехе, который произошёл, при использовании Polaroid и почему стоило оставить серый фон у картинки, если фон вашего блога отличен от белого или любого другого, который вы могли бы подобрать в программе…
Например, мне не подошёл бы никакой фон картинки ввиду того, что фон моего блога полупрозрачен, а значит и фон косой картинки должен быть прозрачен. К тому же впоследствии я предполагал анимировать рубрики, а при анимации картинка с ещё каким-то левым фоном, выделяющимся на фоне блога, выглядела бы убого.
И в этом случае меня спас онлайн фото-редактор Pixlr
, благодаря которому я сделал фон картинки прозрачным. Загружаем в него фото или прописываем его url, а далее в поле «слои» два раза кликаем на замочек, чтобы открыть возможность редактирования заднего фона фотографии:
Потом выбираем в инструментах «Волшебную палочку» и кликаем её на наш с вами серый фон, он же задний. Область выделится штриховыми линиями и можно смело нажимать кнопку delete. Вот так у вас должно было получиться:
При сохранении не забываем изменить формат на png, ибо только в этом случае прозрачность фона сохранится:
Рекомендую работать в этом приложении с маленькими изображениями, ибо при работе с этой фоткой (3434х4000 рх) редактор жутко тупил.
А вот и плод моих чресл нашей работы:
Красиво, да? Кликнув на неё, вы попадёте... А вот кликните и узнаете!
Так, я рассказал вам, как сделать красивую картинку с прозрачным фоном для рубрики блога, теперь расскажу, как её можно анимировать, ведь просто красивые кнопки это фигня, а вот анимированные красивые кнопки... Впрочем, тоже фигня, но если кому интересно, то милости просим далее.
Для анимации вам понадобятся коды CSS, которые вставляются в соответствующее поле в настройках оформления журнала. Сразу оговорюсь, что речь в данном случае идёт только о стилях Chameleon, для других стилей есть свои коды.
Так, например, код, при котором картинка в прикреплённом посте будет менять цвет, и вертеться выглядит так:
.j-e-text DIV[data-sticky-nav] A:hover IMG {
transform: rotate(360deg);
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.j-e-text DIV[data-sticky-nav] IMG {
transition: all .5s;
}
Чтобы данный код затрагивал лишь определённые изображения в посте, нужно их обернуть в тег. Выглядит это так (внимание на подчёркнутое):
Я ограничился лишь верчением кнопок рубрик, а вот для кнопок соцсетей выбрал опцию изменения цвета.
Что касается кнопок соцсетей, то конечно, во многих дизайнах они предустановлены и временами даже анимированы, но лично мне представленного опциона было мало (нужен был YouTube, Instagram, Gmail, Google+), да и хотелось вставить какие-то выбранные мною, более красочные кнопки.
Сами кнопки соцсетей вставляются по принципу, описанному выше, только теперь уже в виджет профиля в вашем сайдбаре. Впрочем, сунуть вы их можете, куда душа пожелает. Но лучше ознакомится с методикой у профессионалов в соответствующем посте.
Код CSS для анимации кнопок в виджете профиля может выглядеть так:
.j-w-profile-text a:hover {
transform: rotate(-360deg);
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
Не забудьте убрать предустановленные в дизайн кнопки, если таковые у вас имеются:
.j-w-social-networks-nav {
display: none;
}
На этом всё, если же вы хотите большего, то отправляю вам в вышеописанное сообщество, где его хозяйка вам всё расскажет и покажет, ибо я чайник. Результаты работы можно пронаблюдать в моём верхнем посте и в сайдбаре блога.
P.S. У матросов есть вопросы? Ах да, один есть: стоит ли мне ещё писать посты на подобную тематику?