Miles of interface icons packed into one sprite. Social media buttons with custom CSS sprites (image optimization) Colored social media icons for html
Online Resources for Folding CSS sprites for example http://spritepad.wearekiss.com/ or http://www.spritecow.com/ . Vtim, you will easily know what suits you. Here I am ready to win CSS sprite. Stink Axis:
html structure
Container div space container div social buttonsіz transition.
CSS structure for whistleblowing sprites
body( background: url("fon.png"); color: #1aa5ca; ) .box ( margin: 250px; padding: 25px; background: #; text-indent: -9999px; display: inline-block; ) .click ( background: url("click.png"); width: 200px; height: 86px; display: block; ) .vk( background: url("vc.png"); width: 51px; height: 52px; margin: 10px background-position: 0 0px, transition: opacity 0.5s; -moz-transition: opacity 0.5s; opacity 0.5s; /* Opera */ opacity: 0.6; float: left;) .vk:hover ( background: url(" vc.png"); width: 51px; height: 52px; opacity: 1; ) .ya( background: url("ya.png"); width: 50px; height: 50px; margin: 10px; background-position: 0 0px; transition: opacity 0.5s; 0.5s;/* Firefox 4 */ -webkit-transition: opacity 0.5s; /* Safari and Chrome */ -o-transition: opacity 0.5s; :hover ( background: url(" ya.png"); width: 50px; height: 50px; background-position: 0 -50px; opacity: 1; ) .ma( background: url("ma.png"); width: 51px; height: 52px; margin : 10px; background-position: 0 0px; transition: opacit y 0.5s; -moz-transition: opacity 0.5s; /* Firefox 4 */ -webkit-transition: opacity 0.5s; /* Safari and Chrome */ -o-transition: opacity 0.5s; /* Opera */ opacity: 0.6; float: left; : url("ma.png"); width: 51px; height: 52px; background-position: 0-51px; opacity: 1 )It is possible background-position: 00px; Forget your respect, I set the opacity to 0.6, a little bit of transparency. Hovered opacity: 1; everything is taken in (0.5s) transition: opacity 0.5s; When hovering, the position of the image changed background-position: 0-51px;
Vikoristovuyuchi tsyu tekhnіku can significantly optimize the image(less zvernen to the server).
P.S. Like food to write!
Zhovten 29, 2019 The post has been updated
Yuri Nimets
The effectiveness of social media buttons for the site
How do you think you can get social media buttons that image? For both of them, it looked even more beautiful and creative. So, you can do it in a different way. I navit not one, but dekilkom. And if you want to be more precise, you will find 12 ways to create cool effects for social media buttons when hovering over an image. For some interactions, it is necessary not only to point, but also to click the mouse, which also adds to the interactive. A unique way to see your site, vicarious and the same effect when hovering over the image.
Use 12 examples to marvel at and zavantazhivayte for the efforts below:
take advantage
Before the speech, how effective it is when pointed, there are more articles on the site on this topic:
Having vouchsafed the effect - wink!
For example, having fallen to my soul, the first effect. Hover the image below to see the effect.
(point to image)
Get the best way to see the most important images both on the site and on the one-sided site. Ale, as I already wrote, the effects are much greater (12!).
Krok 1 - HTML
For icons, like you can see on buttons social measures FA (Font Awesome) wins. Connected icons in one row between blocks :
| 1 | <link rel="stylesheet" href= "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
In addition, as you were fascinated by all the vihіdniki, it is necessary to choose the effect that you deserved. My effect is found in the file index.html. This file has all the necessary styles in order to create the hover effect.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="image-effect-fallback"> <div class="share layer"> <a href = "#" class = "share-button share-via-vk" > <i class = "fa fa vk" > In contact with</a> <href = "#" class = "share-button share-via-facebook"> <i class = "fa facebook" > Facebook</a> <href = "#" class = "share-button share-via-twitter"> <i class = "fa fa-twitter" > Twitter</a> </div> <div class="image-layer"> <img src = "images/tree.jpg" width = "500" alt = "(!LANG:(!LANG:California surf" > !}!} </div> </div> |
All necessary structure є. Lost to put more styles in CSS. To that we pass to the 2nd i, one hour, the rest of the croc.
Krok 2 - CSS
Styles are found in skin HTML file between blocks . So in the skin file with different effects, this block of the document has different styles.
You need to take these styles and place them in your style file:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | .image-effect-fall-back ( width : 500px ; height : 300px ; position : relative ; margin : 0 auto ; -webkit-perspective : 800px ; perspective : 800px ; ) .image-effect-l-back ( position : absolute ; top : 0 ; left : 0 ; height : 300px ; -webkit-transition : 0.6s; transition : 0.6s; z-index : 1 ; ) .image-effect-fall-back :hover .image-layer( -webkit -transform : rotateX(70deg) ; transform : rotateX(70deg) ; overflow : visible ; ) .image-effect-fall-back .image-layer img ( height : 100% ; ) .image-effect-fall -back .image -layer :before (content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -shadow : 0 0 100px 50px rgba(0 , 0 , 0 , 0.5 ) ; opacity : 0 ; -webkit-transition : all 0.5s; ) translateY(110px ) scale(0.75 ); transform : rotateX(114deg) translateZ(-26px ) translateY(110px ) scale(0.75 ) ; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; ) .image-effect-fall-back :hover .image-layer :before ( opacity : 0.3 ; ) .image-effect-fall-back .share-layer( position : absolute ; bottom : 100px ; left : 0 ; width : 100% ; height : 100px ; opacity : 0 ; z-index : 10 ; -webkit-transition : 0.6s; transition : 0.6s; -effect-fall-back :hover .share-layer ( opacity : 1 ; -webkit- transform : rotateX(0deg) translateY(-70px ) ; transform : rotateX(0deg) translateY(-70px ) ; ) /*styles for all buttons*/.share-button( display : inline-block; text-decoration : none ; color : #ffffff ; padding : 12px ; width : 90px ; border-radius : 2px ; margin : 25px 10px ; ) /*colour of social media buttons*/.share-via-vk ( background-color : #4C75A3 ; ) .share-via-facebook ( background-color : #3b5998 ; ) .share-via-twitter ( background-color : #00aced ; ) |
I’ll let you know ahead of time: in some cases jQuery is used, so for the full effect you need to click on the image. You just need to take all the JS code, which is victorious on the side with the butt, which you have been honored with.
Respect! After you paste the CSS code into the style file, the buttons may not look the same as they do on the application. It may be related to the fact that the style file has other styles for elements and classes that are featured in the demo.
Visnovok
As a rule, creativity is always on the rise. I think here you can choose one effect out of 12 and win over in your projects.
We continue to socialize our sites. Readers often have to manually select blog updates right in their favorite social media. Let's give them such a reward. For whom it is necessary to register in these social services. You can create an administrator profile or the author of the site, or you can public side company to the project. It will be necessary for you to regularly publish in the lines of new profiles new updates to the site, so that your payers could get to know them. Tse, before the speech, handily work for the help of those we have installed earlier. Posting on social profiles can be done with the help of CSS sprite or CSS sprites.
What is a CSS sprite and a sprite?
Sprite- A collection of small pictures, like combined into one. You should try not to transfer 10-20 small light pictures from the server to the computer of the coristuvach, but to transfer them in one stream, merging them into one file. Sprite came to web design from the gaming industry, where stench was victorious for creating animated 2D graphics, for example, monsters, what to shoot, and so on.
The design of sites can also be stopped by, with some difference, the icons are combined into one file, for example:
How can you work in this application in one file, they took not only social media icons, but also other design elements, such as arrows, menu buttons, etc. Ale poddnuvati absolutely all the graphics, as vikoristovuetsya on the site in one sprite is not correct. It is better to divide the elements into groups and to add more than necessary to the singing type of sides.
On this little one, I tried to schematically show the principle of robotic css sprites. If the block is larger than the background image, then it will be placed in the upper left corner, as no-repeat is set in css styles. But we can change the position of the background image as much as possible upper kut block. Especially tse corisno, like a block, for example, for the rozmіrom dorivnyuє okremiy іkontsі. We have this icon of size 32x32 leather. The stench is spread horizontally, but vertically, we do not need to change the position of the ashes. We set the position of the background baby -32 px is taken in the block icon, -64 px is the Facebook icon, etc.
How to create push buttons on social media profiles?
After registering with the relevant records, I removed the message on the profile, the address of my RSS page and sent it to the subscription form for the cancellation of the update by mail. Then I'll combine the following code and paste it into the text widget in the WordPress admin panel:
In an anchor, send a tag to your code : . The very fault of this very block, in which the icon is needed. The background image zsv is specified in the style file style.css through authority background position:
/* Update subscription buttons*/ .spmenu ( padding: 0px; margin: 0px; color: #4682B4; text-align: left; font-size: 100%; ) .spmenu a, .spmenu a:hover ( cursor: pointer;color: #1E90FF;text-decoration: none;font-size: 100%; ) .spmenu span ( display: inline-block; width: 32px; height: 32px; ) no-repeat; ) .spmenu span.sprite_gplus(background-position: 0px 0px;). .spmenu span.sprite_rss(background-position: -96px 0px;) .spmenu span.sprite_email(background-position: -128px 0px;)
In this rank, for the skin element in the middle of the class spmenu» ask background image icons.png, which is a set of icons. Respect what є row vbudovanim elementіv for specifіkatsієyu HTML, to ask you strict razmіri (width and height), we are responsible to change the way of yogo display to blocky CSS Powers(row: display: inline-block). Expand the 32x32 block to match the format of our icons.
Often zamіst
tags
,
,
etc., I consider this pidkhid to be wrong. Now you can change the styles of standard tags, as well as being universal
. A tag
in a flash create a request to the server, and we, zastosovayuchi sprite, help speed up the quantity of these requests.
Where to get the icons for the sprite?
- Paint yourself.
- Search in the search system among the pictures.
- At Merezhya there are special dobirki іkon, yakі often lunayut without a cost.
- A lot of social media and services are posted on the websites of official logos and icons, which you can use on your addendums.
- To sprite the social media icon sprite file automatically, you can speed it up with the service. We select icons in the required order, select archives with a script, unpack and bachimo a picture icons.png- Ready sprite file.
Sprite the window to display the colored icons when expanding the animated menu, if when hovering over the menu item, the wine is either darkened or saved. Then, in the sprite file, save two sets of buttons and, after hovering the mouse, dynamically change the position of the background little one with the help of JS.
Please note the button menu button-send on the channels to remove the update, it is broken, to the end of the article. Subscribe to updates, if you need to start over.
Hello, shovny friends. Today's article will be dedicated to the creation of a block of social buttons without services and plugins. And even before this block, you will see buttons that allow you to support the site to promote a side, send a message to the statistics on e-mail and make a mortgage on your article. Such buttons can be seen today on the skin site. Only the axis of the stench is implemented for additional services or plug-ins. And I'll show you how to grow independently.
Services, like I'm a victorist on the websites of clients and on my own blog - i . Qi services allow you to easily implement the set task.
Why is the power of social buttons in front of services and plugins
- An irreversible, non-peripheral factor is the speed of interest to the site. So, for example, the PLUSO service, which is the vicarious one on the blouse, with a shorter spread, it adds up to 633 milliseconds.
On this block there are no more necessary images of social buttons, combined in . All styles are reduced to a minimum. Plus a simple html framework.
- The way, which I pronounce, is not to take revenge on one's hello. Hі, posilannya є, but all the stench will be, like internal posilannya. For the bajannya, you can zavzhdi. You won't be able to see them either.
- duje easy installation. It is enough to insert the html code in the block at the exit code of the side of the site, start the sprite, add css styles that installation is completed. You will need to edit the path to the file with button images.
- This point, shvidshe, is not a plus and not a minus for the block of social buttons. The trick is that your block does not have a lichnik to press on the buttons. І tse you can think for a minus. Ale, from the other side, it is possible to put on the skin button and you will definitely know how many times you pressed on the buttons and shared your articles with the social networks of your viewers.
- The statistics collected by the services will no longer be passed on to third parties on your site.
Inserting a block of social buttons at the exit code
We look like a classic option, if the buttons are expanded after the article.
You can also open the file that you need to submit for the publication of articles (single.php) and add a block of social buttons to the exit code. Or you can zrobiti through the file functions themes (functions.php).
I will show you the options, and you can choose what you need for yourself.
Inserting a block in the output code single.php
Properedzhennya: Before the cob of all diy sprout backup copy single.php file!
Open the WordPress admin panel. « Starry look» — "Editor" — "Single entry (single.php)".
At the exit code, look at the place, de end the review of the stats, and start the comments, or post-navigation. You will need to insert the html code for the block of social buttons in the same place.
It is respectful to look at the screenshot, focus on the codethat comments. І insert guidance code below.
Naturally, your templates will have a lot of discretion, but there will be no changes, whatever you can think of, there is nothing collapsible in it. Until then, you have a backup copy, there is nothing to be afraid of.
And the axis i itself is the html code for the block of social buttons:
Explanation behind the code: tse one block DIV іz class. Forced to open up in a slick merging window, for that, the onClick=window.open function is enabled. Substitution of the force on the article is set by the axis of the cim code. The skin of the force may have its own class, through which the image of the button is supposed to be.
On whom the insertion through the output code is completed. I gave you the necessary to enable css styles.
Inserting a block in the output code of single.php through the functions of themes
Beforehand: before the cob, make a backup copy of the functions.php file!
In order to win this option, you need to open the functions.php file and finally add the code:
/* Insert social buttons */ add_action("comments_template","soc_button"); function soc_button() (?> And be careful if you insert the code, you are not guilty of missing those other symbols. Is it better to close the php code?>. Otherwise, the site will stop working.Explanation behind the code: The place where the social media buttons will be placed is set via the API key comments_template . Behind the cim key is the space before the comments. The code of the social buttons itself is stowed at the return tags of the php code. At the code, I recognized them with a red color. who has all the cunning of insertion html code in PHP, via themes functions.
In this way and in this way it is finished, let's move on to getting the image to the site.
Upload button images to the server
For example, I prepared a sprite sprite from images of social buttons. You can take advantage of them.
Sprite, like a vicorist like a butt, is less important 3.97 kb and more needless buttons. And if it's a sprite, then it will only take one to the base, and not for the skin button.
Capture an image or prepare your own and capture it on your site. I think it’s not my fault to blame these problems. Sending a message to this sprite is necessary for the design of buttons through css styles.
Connecting CSS styles
This krok can be zvichayno, vikonati first, but I will volіyu vikonati all folded technical work, and then proceed to the receiving stuff from css styles.
Also, add the style.css file, which is used for the design of your site. І insert the q-axis style:
Share a ( display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test ..png ") no-repeat scroll 0px 0px transparent;) .share a.vkontakte ( background: url("http://test..png ") no-repeat scroll -168px 0px transparent; ) .share a.google ( background: url("http://test..png ") no-repeat scroll -252px 0px transparent; ) .share a.livejournal ( background: url("http://test..png ") no-repeat scroll -336px 0px transparent; ) .share a.twitter ( background: url("http://test..png ") no-repeat scroll -42px 0px transparent; ) .share a.mail ( background: url("http ://test..png ") no-repeat scroll -294px 0px transparent; ) .share a.odnoklassniki ( background: url("http://test..png ") no-repeat scroll -126px 0px transparent; ) .share a.pinterest ( background: url("http://test..png ") no-repeat scroll -210px 0px transparent; ) .share a.liveinternet ( background: url("http://test..png ") no-repeat scroll -378px 0px transparent; ) .share a.evernote ( background: url("http://test..png ") no-repeat scroll -420px 0px transparent; ) .share a.bookmark ( background: url("http://test.. ) png ") no-repeat scroll -462px 0px transparent; ) .share a.email ( background: url("http://test..png ") no-repeat scroll -504px 0px transparent; ) .share a.print ( background: url("http://test.. png ") no-repeat scroll -546px 0px transparent; ) .share a.digg ( background: url("http://test..png ") no-repeat scroll -588px 0px transparent; ) .share a.spring ( background: url("http://test..png ") no-repeat scroll -630px 0px transparent; )
Explanation behind the code: class.share assigns a bright look to the block, expands the skin button, and sets a single background. And farther skin power can have its own class and such skin power, through the power of the background, the appearance of the button is assigned. Wicon buttons like css sprite and skin button have a width and height of 40px, and between them a 2px margin, which allows you to accurately designate the image for the skin button. The first button is shown as 0, and the other as 42 and so on. In the code qi, the meaning is marked with an orange color. Sending to the sprite is also seen with an orange color, you can change it on the way to your sprite.
For this, the whole process of creating your block of social buttons is completed. You can boldly move on to the revision.
And I also have a video tutorial, in which the whole process of readings is shown directly, the pole is shown to the robot of the buttons themselves. Marvel at it on your websites and blogs.
Axis now mustache. Z we will put the heads of the rest. We wish you good luck and good luck with new articles and video lessons.
