You can create fast loading social icons with pure CSS and no images at all like the ones you see in our sidebar. We have replaced the social icons with letters and styled them with CSS, so that they appear similar, but load instantly.
It removes multiple http server requests and replaces them with clean CSS which loads instantly, unlike images which take time to load. It also reduces the CDN bandwidth costs which we used for those images. Thought you can try CSS sprites, this is even faster. This CSS styling is made easier by the fact that people recognize colors and letters which help them identify social media icons like those of Facebook, Twitter, Google+, and Linkedin.
CSS Social Media Icons
Here is the buttons HTML code to add to your sidebar widget or anywhere you want to place the code. It contains a single container #socialiconbox to style all the icons as well as act as a box which can be styled. Each icon is represented by letters and styled by CSS. Each has a common class .socialicons which can be styled to apply style to all icons as whole and each icon has an individual class to to style each icon separately also, for example to apply different colors and padding.
<div id="socialiconbox"> <a class="facebook socialicon" href="https://www.facebook.com/abc" title="Facebook " target="_blank">f</a> <a class="twitter socialicon" href="https://twitter.com/abc" title="Twitter " target="_blank">t</a> <a class="googleplus socialicon" href="https://plus.google.com/abc" title="Google+" target="_blank">g+</a> <a class="linkedin socialicon" href="https://linkedin.com/abc" title="Linkedin" target="_blank">in</a> </div>
CSS Styling Social Media Icons
Now you need to add the id and classes to the style.css file or any other primary css file. We have added multiple parameters so you can style your icons perfectly depending on your site design.
#socialiconsbox { margin: 10px 0; } .socialicons { color: #FFF; font-size: 1.5em; margin-right: 6px; font-family: georgia, serif; letter-spacing: -1px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } .facebook { background:#3B5998; padding:2px 10px; } .twitter { background:#00ACED; padding:2px 10px; } .googleplus { background:#D2412E; padding:2px 3px; } .linkedin { background:#4A9CC9; padding: 2px 6px; }
Custom CSS styles – The idea here is to use the #socialiconsbox as your container, so you can style the whole box with the icons as you like, like adding a border, or styling link colors etc. We have applied a margin here on top and bottom. The .socialicons is the primary class applied to the text – we have kept Georgia since it is a safe font and Googleplus icon especially looks good with this. The letter spacing is reduced to allow ‘g+’ and ‘in’ text to come close together. The padding is variable due to the different number of letters in the icons. The text is finished off with browser compatible mild curved borders for a nice button look – increase the border to make more circular buttons. You can increase the font size to get bigger icons.
Show off your CSS icons - Do try this out and see how fast your buttons load. Do experiment with the CSS to create amazing icons (and post in the comments) and we shall be happy to showcase your icons in a subsequent post. It would be great if you credit the original source code was here.
Original article: How to Create Social Media Icons with Pure CSS
©2013 QuickOnlineTips (QOT). All Rights Reserved.
Have you seen your WolframAlpha Personal Analytics Facebook Report? Wolfram claims to be the world’s only computational knowledge engine, and will provide free Facebook reports with unique insights into your Facebook friends and their activities in your social network.
It will help you answer many questions you always wanted to ask about your social network and did not know how to analyze the data - now Wolfram can do this for you. Be sure to grab your report right away.
How to Get Wolfram Facebook Report
1. Visit the WolframAlpha Facebook page and click the button Get the Report.
2. Wolfram would then seek your permission to allow access.
3. Then WolframAlpha will ask you to create a Wolfram ID (same as your email). All data is prefilled – you only need to add a password.
4. Now Wolfram is ready to analyze your Facebook data and generate your Facebook Personal Analytics report.
5. Then Wolfram will load Facebook data and then present your report.
Now enjoy your report. There is indeed a wealth of Facebook data out there which is presented in ways that probably you would never be able to analyze using any other analytics tool. You will particularly enjoy your Friends cluster maps. Note you can clip and share any part of the report with your Facebook friends and also generate a permanent sharable page for your Facebook analytics data.
Get your Wolfram Facebook Personal analytics report first and amaze your friends. Share this now.
Original article: Get Your Free WolframAlpha Analytics Facebook Report
©2013 QuickOnlineTips (QOT). All Rights Reserved.
How much can you pay to win an auction for a coffee meeting with Tim Cook, Apple CEO. Well it seems what started as an already huge estimated bid of $50,000 has already invited bids of $175,000 and the active auction is still open for 19 more days!
Bid to Meet Tim Cook
Well this is a charity auction run by Charity Buzz where Tim Cook will donate the proceeds to The RFK Center for Justice and Human Rights. Celebrity auctions often do generate enormous bids and gives lot of credibility to the auction sites.
The fine print of the terms include that the winner deal is valid for 2 people, who can have a coffee meeting for 30min-1 hour with Apple CEO Tim Cook at Apple Headquarters in Cupertino, California at a mutually agreeable date. The deal cannot be resold or re-auctioned and does not include travel and accommodation.
What do you think will be the final winning bid in this auction? Why would people pay so much for this meeting?
Original article: Auction Open for Coffee Meeting with Tim Cook, Apple CEO
©2013 QuickOnlineTips (QOT). All Rights Reserved.
.png "Www.BestTheme.Net")
Posts
No comments:
Post a Comment