Création des Logiciels de gestion d'Entreprise, Création et référencement des sites web, Réseaux et Maintenance, Conception
seo Social Follower CSS3 for blogger 2013
Seo Master present to you:
Learn How To Create a CSS3 Animated Flyout Social Menu. Social Follower CSS3 fo blogger
DEMO
2013, By: Seo Master
Learn How To Create a CSS3 Animated Flyout Social Menu. Social Follower CSS3 fo blogger
<ul class="social">
<li><a href="#"><span class="facebook icon"></span>Join Us on Facebook</a>
</li>
<li><a href="#"><span class="twitter icon"></span>Follow Us on Twitter</a>
</li>
<li><a href="#"><span class="pinterest icon"></span>Join Us on Pinterest</a>
</li>
<li><a href="#"><span class="email icon"></span>Send Us Email</a>
</li>
<li><a href="#"><span class="rss icon"></span>Subscrible RSS Feed</a>
</li>
</ul>
CSS3
.social{
max-width:300px;
}
.social li{
min-height:40px;
clear:both;
float:none;
margin-bottom:10px;
}
.social a{
color:#232323;
position:relative;
display:block;
line-height:40px;
padding-left:55px;
}
.social span{
display:block;
width:40px;
height:40px;
background:url(http://www.matrixar.com/-ng7-UhdRPSA/UHf6kUbvs6I/AAAAAAAABoA/0Aw1xGCRstc/s1600/social.png) no-repeat;
position:Absolute;
left:0;
border-radius:32px;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
.social .facebook{
background-color:#2d309a;
}
.social .twitter{
background-color:#00FFFF;
background-position:0 -40px;
}
.social .pinterest{
background-color:#FF0000;
background-position:0 -80px;
}
.social .email{
background-color:#00FF00;
background-position:0 -120px;
}
.social .rss{
background-color:#ffba16;
background-position:0 -160px;
}
.social a{
/*--code trước--*/
z-index:1;
-moz-transition:color 0.4s ease;
-webkit-transition:color 0.4s ease;
-o-transition:color 0.4s ease;
transition:color 0.4s ease;
}
.social span{
/*--code trước--*/
z-index:-1;
opacity:0.8;
-moz-transition:opacity 0.4s ease,width 0.4s ease;
-webkit-transition:opacity 0.4s ease,width 0.4s ease;
-o-transition:opacity 0.4s ease,width 0.4s ease;
transition:opacity 0.4s ease,width 0.4s ease;
}
.social a:hover{
color:white;
text-shadow:0 1px 0 rgba(0,0,0,0.5);
}
.social a:hover span{
width:300px;
opacity:1;
}
]]></b:skin>
seo CSS3 Animated Bubble Buttons for Blogger 2013
Seo Master present to you:
The HTML
To turn a regular link on your page into a fancy animated CSS3 button, you just need to assign the .button class and one of the supported colors. See some examples below:
Demo:
DEMO
The class names are chosen so they are straightforward and easy to remember, but this raises the possibility of a clash with some of the classes on your page.
CSS3
Inserting before
]]></b:skin>
2013, By: Seo Master
The HTML
To turn a regular link on your page into a fancy animated CSS3 button, you just need to assign the .button class and one of the supported colors. See some examples below:
Demo:
<a class="duy-button" href="http://demo.com" target="_blank">DEMO</a>
The class names are chosen so they are straightforward and easy to remember, but this raises the possibility of a clash with some of the classes on your page.
CSS3
.duy-button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ2gC1G0w5EQFGDQ7u34s1hLJKLc1wmS6Ts44TybRfZFNf74UWi55bCLap-6yIoheLpJbnqbAdjh96BKH9BbepU4fqNfOfjA1v2MkOWKmNATbaAJiUc54mugAtCLeJzuv3sC6ZMrG-A78y/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
height:150;
width:200px;
font-size:25px;
}
.duy-button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.duy-button:active{
bottom:-1px;
}
/* The three buttons sizes */
.duy-button.big { font-size:30px;}
.duy-button.medium { font-size:18px;}
.duy-button.small { font-size:13px;}
/* BlueButton */
.duy-button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ2gC1G0w5EQFGDQ7u34s1hLJKLc1wmS6Ts44TybRfZFNf74UWi55bCLap-6yIoheLpJbnqbAdjh96BKH9BbepU4fqNfOfjA1v2MkOWKmNATbaAJiUc54mugAtCLeJzuv3sC6ZMrG-A78y/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ2gC1G0w5EQFGDQ7u34s1hLJKLc1wmS6Ts44TybRfZFNf74UWi55bCLap-6yIoheLpJbnqbAdjh96BKH9BbepU4fqNfOfjA1v2MkOWKmNATbaAJiUc54mugAtCLeJzuv3sC6ZMrG-A78y/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ2gC1G0w5EQFGDQ7u34s1hLJKLc1wmS6Ts44TybRfZFNf74UWi55bCLap-6yIoheLpJbnqbAdjh96BKH9BbepU4fqNfOfjA1v2MkOWKmNATbaAJiUc54mugAtCLeJzuv3sC6ZMrG-A78y/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ2gC1G0w5EQFGDQ7u34s1hLJKLc1wmS6Ts44TybRfZFNf74UWi55bCLap-6yIoheLpJbnqbAdjh96BKH9BbepU4fqNfOfjA1v2MkOWKmNATbaAJiUc54mugAtCLeJzuv3sC6ZMrG-A78y/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.duy-button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ2gC1G0w5EQFGDQ7u34s1hLJKLc1wmS6Ts44TybRfZFNf74UWi55bCLap-6yIoheLpJbnqbAdjh96BKH9BbepU4fqNfOfjA1v2MkOWKmNATbaAJiUc54mugAtCLeJzuv3sC6ZMrG-A78y/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ2gC1G0w5EQFGDQ7u34s1hLJKLc1wmS6Ts44TybRfZFNf74UWi55bCLap-6yIoheLpJbnqbAdjh96BKH9BbepU4fqNfOfjA1v2MkOWKmNATbaAJiUc54mugAtCLeJzuv3sC6ZMrG-A78y/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ2gC1G0w5EQFGDQ7u34s1hLJKLc1wmS6Ts44TybRfZFNf74UWi55bCLap-6yIoheLpJbnqbAdjh96BKH9BbepU4fqNfOfjA1v2MkOWKmNATbaAJiUc54mugAtCLeJzuv3sC6ZMrG-A78y/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ2gC1G0w5EQFGDQ7u34s1hLJKLc1wmS6Ts44TybRfZFNf74UWi55bCLap-6yIoheLpJbnqbAdjh96BKH9BbepU4fqNfOfjA1v2MkOWKmNATbaAJiUc54mugAtCLeJzuv3sC6ZMrG-A78y/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
Inserting before
]]></b:skin>
2013, By: Seo Master
seo CSS3 Transitions and Transforms in Gmail for the iPad 2013
Seo Master present to you: The Mobile Gmail team recently announced a new stacked cards interface for the iPad. In this interface we make use of CSS3 transitions and transforms to provide a more intuitive interface that has a look and feel that is similar to native applications. In this post we will describe CSS3 transitions and transforms and how they were used to develop this interface. All of the CSS and JavaScript examples currently work only in WebKit-based browsers, such as Safari on the iPad. However, Mozilla-based browsers have their own versions of WebKit-based extensions that use the ‘-moz’ prefix, and that should behave similarly.
CSS3 Transitions
CSS3 transitions allow the browser to animate the change of a CSS property from an initial value to a final value. A transition is configured by setting four CSS properties on an HTML element:
The transition properties can also be set simultaneously using the
CSS3 Transforms
CSS3 transforms allow the rendering of an HTML element to be modified using 2D and 3D transformations such as rotation, scaling, and translations. Transforms are applied by setting the
Using
Terminology
There are a few terms here that begin with ‘trans,’ and they can easily be confused if you are not familiar with them. Here they are again:
In the stacked cards interface, cards representing selected conversations transition onto the screen when their corresponding conversation is selected, and transition off of the screen when it is deselected.
When cards are selected, they are transitioned out from underneath the conversation list on the left side of the application into the selected conversation area on the right side of the application. To move the card onto the screen, we set an initial transform, configure the transition, and finally apply the desired final transform to the element.
To simplify the layout, the un-transformed position of each card is its normal position in the selected conversation area. This allows the card to have no translation applied when in this position, although it will need a translation to animate the movement. Initially the card has a transform that translates it to the left. The z-index property is used to ensure that the card will render underneath the conversation list. The rotation of the card is also initially applied, since we chose not to have the card rotate as it transitions onto the screen.
Since the particular translation and rotation can vary, we chose to apply this property using JavaScript rather than including it in the CSS class applied to the card. It is important that the CSS3 transition is not yet applied because we do not want this transform to be a transition. Moreover, it is important that the card is rendered at its initial transform before the transition is configured and the destination transform is applied. This is easily achieved by wrapping these next steps in a call to window.setTimeout with a timeout of 0 ms.
Completion of the Transition
It is useful to know when the transition is complete. In the stacked cards interface, we use this to improve performance by setting display:none on obscured cards so that they do not need to be rendered. Adding an event listener allows the application to be notified when the transition has completed.
Interrupting a Transition
In some cases, you may want to change a transition while it is in progress. For example, if the user unselected a conversation while the corresponding card was still animating onto the screen, we might apply a new transition to send the card back off of the screen again. When you apply a new CSS value while a transition is already in progress, a new transition will occur between the current value of the property in the transition and the new value that you apply. For example, suppose a card is halfway through it’s transition onto the screen, and we apply this CSS transform:
Since the transition properties are still configured, a new transition will occur. The initial value for the transition will be the halfway point - approximately
Conclusion
I hope that this introduction to CSS3 transitions and transforms has been useful, and that the insight into the implementation of Mobile Gmail on the iPad has been interesting. Based on positive feedback, the Mobile Gmail team is looking forward to making more use of transitions and transforms in the future.
2013, By: Seo Master
CSS3 Transitions
CSS3 transitions allow the browser to animate the change of a CSS property from an initial value to a final value. A transition is configured by setting four CSS properties on an HTML element:
-webkit-transition-property-webkit-transition-duration-webkit-transition-timing-function -webkit-transition-delay
-webkit-transition-property property identifies the CSS properties where changes to the property will trigger a transition between the old value of the property and the new value. The -webkit-transition-duration property specifies, in milliseconds, the length of time over which the transition should take place. The -webkit-transition-timing-function property describes the speed at which the transition progresses over the duration of the transition. For example, -webkit-transition-timing-function: ease-in-out describes a transition that will proceed slowly at the beginning and the end of the transition, but that will proceed quickly during the middle of the transition. You can also provide a custom, cubic-bezier function for a higher degree of control over the timing. The -webkit-transition-delay property specifies a delay, measured in milliseconds, before the transition begins. The transition properties can also be set simultaneously using the
-webkit-transition property, by simply specifying them in the above order. Once the transitions properties are set and up to the point where the value of -webkit-transition-property is changed, all modifications of the specified CSS properties will trigger transitions.CSS3 Transforms
CSS3 transforms allow the rendering of an HTML element to be modified using 2D and 3D transformations such as rotation, scaling, and translations. Transforms are applied by setting the
-webkit-transform CSS property with the desired list of transforms. Each transform takes the form of a transformation function, such as translate3d or rotate, and a list of parameters enclosed in brackets. For example, to move an object to the right by 100 pixels and rotate it by 45 degrees you can use the -webkit-transform property:-webkit-transform: translate(100px, 0) rotate(45deg); Using
-webkit-transform as the transition property when moving an element is advantageous relative to using the standard top and left properties because transitions using -webkit-transform are hardware-accelerated in Safari. An exception here is that it seems that 2D translations are not hardware-accelerated. But, since any 2D translation is equivalent to a corresponding 3D translation with the same translations in the x and y and no translation in the z axis, it is easy to use a hardware accelerated translate3d(x, y, 0) transform instead of a non-hardware accelerated translate(x, y) transform.Terminology
There are a few terms here that begin with ‘trans,’ and they can easily be confused if you are not familiar with them. Here they are again:
- Transition: An implicit animation of CSS properties between an initial and a final value.
- Transform: A modification to the appearance of an HTML element by manipulating it in a 2D or 3D space.
- Translation: A particular type of transformation that moves the HTML element in 2D or 3D space.
In the stacked cards interface, cards representing selected conversations transition onto the screen when their corresponding conversation is selected, and transition off of the screen when it is deselected.
When cards are selected, they are transitioned out from underneath the conversation list on the left side of the application into the selected conversation area on the right side of the application. To move the card onto the screen, we set an initial transform, configure the transition, and finally apply the desired final transform to the element.
To simplify the layout, the un-transformed position of each card is its normal position in the selected conversation area. This allows the card to have no translation applied when in this position, although it will need a translation to animate the movement. Initially the card has a transform that translates it to the left. The z-index property is used to ensure that the card will render underneath the conversation list. The rotation of the card is also initially applied, since we chose not to have the card rotate as it transitions onto the screen.
card.style.WebkitTransform = ‘translate3d(-700px, 0, 0) rotate(5deg)’; Since the particular translation and rotation can vary, we chose to apply this property using JavaScript rather than including it in the CSS class applied to the card. It is important that the CSS3 transition is not yet applied because we do not want this transform to be a transition. Moreover, it is important that the card is rendered at its initial transform before the transition is configured and the destination transform is applied. This is easily achieved by wrapping these next steps in a call to window.setTimeout with a timeout of 0 ms.
window.setTimeout(function() {
card.style.WebkitTransition =
‘-webkit-transform 300ms ease-in-out’;
card.style.WebkitTransform =
‘translate3d(0, 0, 0) rotate(5deg)’;
}, 0);Completion of the Transition
It is useful to know when the transition is complete. In the stacked cards interface, we use this to improve performance by setting display:none on obscured cards so that they do not need to be rendered. Adding an event listener allows the application to be notified when the transition has completed.
element.addEventListener(‘webkitTransitionEnd’, listener, false); Interrupting a Transition
In some cases, you may want to change a transition while it is in progress. For example, if the user unselected a conversation while the corresponding card was still animating onto the screen, we might apply a new transition to send the card back off of the screen again. When you apply a new CSS value while a transition is already in progress, a new transition will occur between the current value of the property in the transition and the new value that you apply. For example, suppose a card is halfway through it’s transition onto the screen, and we apply this CSS transform:
card.style.WebkitTransform =
‘translate3d(-700px, 0, 0) rotate(5deg)’;
Since the transition properties are still configured, a new transition will occur. The initial value for the transition will be the halfway point - approximately
translated3d(-350px, 0, 0) rotate(5deg). The final value will be translate3d(-700px, 0, 0) rotate(5deg). The full duration of the transition will still apply, so the card will move about half as quickly as it usually does. It is possible to determine the current transform applied to an HTML element using the WebKitCSSMatrix and to use this to recalculate more appropriate transition parameters, but this is outside the scope of this post. Conclusion
I hope that this introduction to CSS3 transitions and transforms has been useful, and that the insight into the implementation of Mobile Gmail on the iPad has been interesting. Based on positive feedback, the Mobile Gmail team is looking forward to making more use of transitions and transforms in the future.
2013, By: Seo Master
seo Threaded comments - Blogger simple and beautiful 2013
Seo Master present to you: 
This is a default style for Thread Comments Blogger. Comment thread hierarchy with CSS for Blogger - blogspot, improved from Blogger + Duy Pham hope it fits the style the majority of blog. First, save a copy of the original template to prevent uncertainties. After that, go to the HTML editor, delete all old Threaded comments apply CSS in your template. Continuing insert this code before ]]> </ b: skin>Source: http://bloggersviet.blogspot.com2013, By: Seo Master
This is a default style for Thread Comments Blogger. Comment thread hierarchy with CSS for Blogger - blogspot, improved from Blogger + Duy Pham hope it fits the style the majority of blog. First, save a copy of the original template to prevent uncertainties. After that, go to the HTML editor, delete all old Threaded comments apply CSS in your template. Continuing insert this code before ]]> </ b: skin>/* Comments
----------------------------------------------- */
.comments {background: none repeat scroll 0 0 #FFFFFF;clear: both;margin-top: 10px;padding: 10px;width: 96%;}
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#ff9000}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #ff9000;border-right:20px solid transparent;width:0;height:0;line-height:0}
.comments .avatar-image-container{width:42px;max-height:42px;height:42px;padding:2px;border:1px solid #CCCBCB}
.comments .avatar-image-container img{max-width:42px;width:100%}
.comments .inline-thread .avatar-image-container{width:36px;height:36px}
.comments .comment-block{margin-left:53px;padding:5px 10px;border:1px solid #CCCBCB;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px}
.comments .inline-thread .comment-block{margin-left:48px}
.comments .comment-block::before,.comments .comment-block::after{content:"";width:0;height:0;border-width:10px 8px;border-style:solid;border-color:transparent #CECECE transparent transparent;position:absolute;top:8px;right:100%}
.comments .comment-block::after{border-color:transparent white transparent transparent;right:auto;left:-15px}
.comments .comments-content .comment-header{border-bottom:1px solid #CCCBCB;padding-bottom:3px;margin:-1px -3px 10px}
.comments .comments-content .comment{margin-bottom:12px;padding:0}
.comments .comments-content .icon.blog-author{position:absolute;right:10px;top:-3px;width:65px;height:20px;background-color:#FF9000;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-o-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}
.comments .comments-content .icon.blog-author::after{content:"Admin";position:absolute;color:white;text-shadow:0 1px 2px #646464;top:0px;left:10px}
#comments-block{margin:1em 0 1.5em;line-height:1.6em}
.comment-form{max-width:100%}
#comments-block .comment-author{margin:.5em 0}
#comments-block .comment-body{margin:.25em 0 0}
#comments-block .comment-footer{margin:-.25em 0 2em;line-height:1.4em;text-transform:uppercase;letter-spacing:.1em}
#comments-block .comment-body p{margin:0 0 .75em}
seo Building Web Apps? Check out our Field Guide 2013
Seo Master present to you: 
By Pete LePage, Developer Advocate
Yesterday, the Chrome Developer Relations team launched several new resources, including the Field Guide to Web Applications. It’s a new resource that is designed to help web developers create great web apps. We’ve heard loud and clear from users that they want more and better web apps, and we hope this new field guide will enable you to create those web apps. Our fictitious author Bert Appward guides you through topics like the properties of web applications, design fundamentals, tips for creating great experiences, and a few case studies that put best practices to use. Whether you're building your first web app or are just looking for ways to improve your existing apps, I hope you'll find the field guide useful.
We built the field guide to embody the principles and best practices that it preaches. We stepped away from the normal webpage look, and instead designed the experience around a field guide. We used many CSS3 features like box-shadow, opacity, multiple backgrounds and more to provide a rich, visual experience. To make sure that it worked offline, we used AppCache and other than some URL rewriting techniques, didn't use any server-side code. We used the HTML5 History API to maintain page state even though everything is served from a single HTML page. We've started working on a new case study about the field guide, so check back soon for that!
Pete LePage is a Developer Advocate on the Google Chrome team and works with developers to create great web applications for the Chrome Web Store. He recently helped launch the +Chrome Developers page on Google+.
Posted by Scott Knaster, Editor
2013, By: Seo Master
By Pete LePage, Developer Advocate
Yesterday, the Chrome Developer Relations team launched several new resources, including the Field Guide to Web Applications. It’s a new resource that is designed to help web developers create great web apps. We’ve heard loud and clear from users that they want more and better web apps, and we hope this new field guide will enable you to create those web apps. Our fictitious author Bert Appward guides you through topics like the properties of web applications, design fundamentals, tips for creating great experiences, and a few case studies that put best practices to use. Whether you're building your first web app or are just looking for ways to improve your existing apps, I hope you'll find the field guide useful.
We built the field guide to embody the principles and best practices that it preaches. We stepped away from the normal webpage look, and instead designed the experience around a field guide. We used many CSS3 features like box-shadow, opacity, multiple backgrounds and more to provide a rich, visual experience. To make sure that it worked offline, we used AppCache and other than some URL rewriting techniques, didn't use any server-side code. We used the HTML5 History API to maintain page state even though everything is served from a single HTML page. We've started working on a new case study about the field guide, so check back soon for that!
Pete LePage is a Developer Advocate on the Google Chrome team and works with developers to create great web applications for the Chrome Web Store. He recently helped launch the +Chrome Developers page on Google+.
Posted by Scott Knaster, Editor
2013, By: Seo Master