Web 2.0 style design: simplicity as art
Perfection is achieved not when there is already nothing to add, but when nothing can be taken away (Antoine de Saint-Exupery. "Planet of people", 1939) Far in the fall of…

Continue reading →

Vintage and innovation cocktail: retro style in web design
Once on a blog, I already wrote about the retro style for the Internet, or rather just published a very interesting selection of retro website designs. Now let’s add a…

Continue reading →

Tips for Using Images on Websites and Blogs
Of course, the image is the epicenter of any website, because a person is visual in nature. When creating a website or blog, we pay particular attention to content, design…

Continue reading →

Google+ style buttons, download 200 Google+ icons

The Google+ social network, even in beta testing, burst into the lives of advanced users, so do not be surprised at the interest that this social network causes, including web designers, developers and seo optimizers. This interest is quite large and is constantly “fueled” by Google developers who are constantly improving the project and adding integration with their other services. So, for example, Google+ buttons and icons are popular among SEOs that allow you to add “+1” to your site or page.

But not “+1” unified, in the last year, Google+’s appearance dictated fashion to other Google services that have undergone a change in design and style. A common element for many projects is the stylish menu at the top of the page, similar icons, control buttons, and indeed many different elements that can be found in all projects – from Gmail to Google Reader. Today I present to your attention an interesting set of Google+-style buttons found on shrapp.nl. This set is not just icons of the social network Google+, but rather a whole framework that allows you to add interface buttons from Google+ to your site.

google + icons
You can see the demo of how the Google+ buttons work, download these icons and read the documentation for their installation on this page. First of all, of course. You can just say these cute minimalist icons for different actions, situations, etc. in order to use in your design or website. A more advanced option is to connect the framework (scripts) for applying icons via css styles easily and quickly.

SET GOOGLE + BUTTONS
A complete and more detailed instruction can be found at the link above – there are various options and examples of use. I will only consider the installation process + one of the options for using the buttons after you have downloaded the corresponding archive.

google + button framework
So, the installation order:

1. Place the css file and images in the root directory of the site, well, or wherever you have the styles for the template.

2. “Connect” the stylesheet to do this, add a link to the code (added anywhere between <head> and </head>):

<link rel = “stylesheet” href = “css / css3-buttons.css” type = “text / css” media = “screen”>
3. Next, connect the jQuery TipTip plugin and the corresponding stylesheet (added anywhere between <head> and </head>):

<! – Using TipTip jQuery plugin for the tooltips ->
<link rel = “stylesheet” href = “tiptip.css” type = “text / css” media = “screen”>
<script src = “http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”> </script>
<script src = “jquery.tiptip.js”> </script>
<script>
$ (document) .ready (function () {
// Launch TipTip tooltip
$ (‘. tiptip a.button, .tiptip button’). tipTip ();
});
</script>
4. If you need a dropdown menu, add also:

<script>
$ (document) .ready (function () {
// Toggle the dropdown menu’s
$ (“. dropdown .button, .dropdown button”). click (function () {
$ (this) .parent (). find (‘. dropdown-slider’). slideToggle (‘fast’);
$ (this) .find (‘span.toggle’). toggleClass (‘active’);
return false;
});
}); // END document.ready

// Close open dropdown slider / s by clicking elsewhwere on page
$ (document) .bind (‘click’, function (e) {
if (e.target.id! = $ (‘. dropdown’). attr (‘class’)) {
$ (‘. dropdown-slider’). slideUp ();
$ (‘span.toggle’). removeClass (‘active’);
}
}); // END document.bind
</script>
On this installation can be considered complete. Now, for example, to display these buttons:

google + buttons
… add the code:

<a href=”#” class=”button left”> <span class = “label”> Left </span> </a>
<a href=”#” class=”button middle”> <span class = “label”> Middle </span> </a>
<a href=”#” class=”button right”> <span class = “label”> Right </span> </a>

<a href=”#” class=”button left”> <span class = “icon icon63″> </span> </a>
<a href=”#” class=”button middle”> <span class = “icon icon58″> </span> </a>
<a href=”#” class=”button right”> <span class = “icon icon64”> </span> </a>
That is, due to the framework, all Google+ buttons can be displayed via css and html by simple actions. You can find other examples of using Google+-style buttons in the documentation that I referred to earlier. In principle, there is nothing complicated, but it turns out very nice and stylish – especially, I think, it will be relevant for the development of some intracorporate sites where the buttons will be used for the system interface.

Google+ style buttons, download 200 Google+ icons
The Google+ social network, even in beta testing, burst into the lives of advanced users, so do not be surprised at the interest that this social network causes, including web…

...

Trends in the design and design of email newsletters in 2020
Despite the fact that email marketing has existed for decades, it still remains an actual trend in Internet marketing in 2020 and a popular way to promote services online. The…

...

Trends in the design and design of email newsletters in 2020
Despite the fact that email marketing has existed for decades, it still remains an actual trend in Internet marketing in 2020 and a popular way to promote services online. The…

...

How to create a website that increases your brand awareness
If you want your site to become successful, just good design will not be enough: it should first of all reflect the personality of your brand. When developing a design,…

...