» » Pure CSS to achieve the effect of suspending the bottom right side of simplicity

 

Pure CSS to achieve the effect of suspending the bottom right side of simplicity

Author: bamboo06 on 29-10-2014, 02:49, views: 1673

3
We've seen a lot of pages on the right side floating effect, the earliest contact panel, couplet advertising, most of them are based on the dynamic effects of javascript implementation, and today I just need to share a combination of the right side of the floating effect by CSS DIV.
Pure CSS to achieve the effect of suspending the bottom right side of simplicity

HTML
We hope that the suspension effect last load, it is generally placed at the end of the HTML page, we have established a .side-bar, which contains the online consultation, micro-channel (mouse slide effect pop-dimensional code), microblogging, and Email contact information and other content that we have to [a] label package.
<div class="side-bar"> 
	<a href="#" class="icon-qq">Online consult</a> 
	<a href="#" class="icon-chat">Skype<div class="chat-tips"><i></i><img style="width:100px;height:100px;" src="goocode.png" alt=""></div></a> 
	<a target="_blank" href="#" class="icon-blog">Twitter</a> 
	<a href="#" class="icon-mail">Mail</a> 
</div>	

CSS
We use CSS to complete the floating pop-up effect that is slid mouse. We prepare a picture right_bg.png, contains several elements of the icon, and then a corresponding content via background-position of each icon. We use position: fixed and set bottom and right values ​​will .side-bar fixed to the lower right corner, so no matter how the page scrolling, .side-bar will remain unchanged in the lower right position. It should be mentioned under ie6 require separate treatment under the fixed effects, but the article does not explain, give up ie6.
.side-bar a,.chat-tips i {background: url(right_bg.png) no-repeat;} 
.side-bar {width: 66px;position: fixed;bottom: 20px;right: 25px;font-size: 0;line-height: 0;z-index: 100;} 
.side-bar a {width: 66px;height: 66px;display: inline-block;background-color: #ddd;margin-bottom: 2px;} 
.side-bar a:hover {background-color: #669fdd;} 
.side-bar .icon-qq {background-position: 0 -62px;} 
.side-bar .icon-chat {background-position: 0 -130px;position: relative;} 
.side-bar .icon-blog {background-position: 0 -198px;} 
.side-bar .icon-mail {background-position: 0 -266px;} 

There is also a micro-channel icon mouse slide effects, when mouse hover, .chat-tips display property set to block, and set the position location, the code also contains an arrow CSS wording:
.side-bar .icon-chat:hover .chat-tips {display: block;} 
.chat-tips {padding: 20px;border: 1px solid #d1d2d6;position: absolute;right: 78px;top: -55px;background-color: #fff;display: none;} 
.chat-tips i {width: 9px;height: 16px;display: inline-block;position: absolute;right: -9px;top: 80px;background-position:-88px -350px;} 
.chat-tips img {width: 138px;height: 138px;} 

A few simple lines of CSS code on the bottom right corner to complete a simple suspension effect, go and try it.

Category: CSS

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
26 November 2017 23:08

Emmy Robbins

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This has really been quite helpful to me. I have been working with some bestdissertationassist.net as they have helped me a lot with gaining the best interest in Pure CSS to achieve the effect of suspending the bottom right side of simplicity. Would love to see more from you soon

<
  • 0 Comments
  • 0 Articles
10 December 2017 17:55

James

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
The design surely marvelous. Every one of those modest material are actually fashioned utilising wide range of the past past experiences. I'd like the lot tremendously. Jual tinta Printer

<
  • 0 Comments
  • 0 Articles
25 January 2018 08:15

Aftabkhan8

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This website is especially for the developers and this post is actually related to Css bottom right side of simplicity. As we know that we find a lot of solutions of different development languages like Html, Css, Java etc. It will helpful for all of us. On the other hand, I need assignment help uk and i would like to great thanks for this approach. Keep sharing such articles.

Information
Comment on the news site is possible only within (days) days from the date of publication.