Tutorial : Blockquote Version
Credit : Wanaseoby
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lobortis luctus. Donec posuere sollicitudin diam, non semper metus vulputate nec. Curabitur lobortis porttitor convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
| Preview |
Code :
blockquote{
padding:10px;
display:block;
font:11px arial;
color:#ccc;
letter-spacing:1px;
border-radius:10px;
border:2px solid #FFE2E2;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
background-position:0% 0%;
background:url(http://media.tumblr.com/tumblr_m33wmx1T171qdlkyg.gif);
background-repeat:no-repeat;
background-size:0px;
}
blockquote:hover{
background:url(http://media.tumblr.com/tumblr_m33wmx1T171qdlkyg.gif);
background-repeat:no-repeat;
background-position:100% 100%;
background-size:80px;
color:#777;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lobortis luctus. Donec posuere sollicitudin diam, non semper metus vulputate nec. Curabitur lobortis porttitor convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
| Preview |
Code :
blockquote{
background:url(http://25.media.tumblr.com/tumblr_mbamchIsvG1qhhbndo1_500.jpg);
padding:10px;
color:#000;
letter-spacing:1px;
border-radius:10px;
border:2px solid #ccc;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-shadow: -1px 0 fff, 0 1px fff,
1px 0 fff, 0 -1px fff;
}
blockquote:hover{
background:url(http://25.media.tumblr.com/tumblr_mbamchIsvG1qhhbndo1_500.jpg);
background-position:50% 50%;
}
Although tiring, there will be days to smile, eventually a day to smile will come
| Preview |
Code :
blockquote{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqJ_CxLaClhHFXAgyh4HrIJhwxl-i4piz5Bq2DMLlpSg4zm9OTvGXegtiWlcDD40ez4aWTYoakB9BQkn_M1pkNo_3LmKgln-G8ojblXH3ISNDlxIUo18vjsRZxSvZdZqpkK5yFV0_Qo8LA/s1600/grey.png);
padding:10px;
border:3px solid #ffd5d5;
color:#808080;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
blockquote:hover{
border-radius:20px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
-webkit-box-shadow: 0px 0px 8px #ffd5d5;
-moz-box-shadow: 0px 0px 8px #ffd5d5;
box-shadow: 0px 0px 8px #ffd5d5;
}
Blockquote {two} live preview.
| Preview |
Code :
blockquote{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqJ_CxLaClhHFXAgyh4HrIJhwxl-i4piz5Bq2DMLlpSg4zm9OTvGXegtiWlcDD40ez4aWTYoakB9BQkn_M1pkNo_3LmKgln-G8ojblXH3ISNDlxIUo18vjsRZxSvZdZqpkK5yFV0_Qo8LA/s1600/grey.png
);
padding:10px;
border-radius:10px;
border-left:10px solid #CCC4FB;
border-right:10px solid #CCC4FB;
border-top:2px solid #DED9FC;
border-bottom:2px solid #DED9FC;
color:#808080;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
font-family:calibri
}
blockquote:hover{
border-radius:20px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
-webkit-box-shadow: 0px 0px 8px #B0AAFF;
-moz-box-shadow: 0px 0px 8px #B0AAFF;
box-shadow: 0px 0px 8px #B0AAFF;
}
Blockquote version one
| Preview |
Code :
blockquote{
background:url(http://i.imgur.com/2qzVi.png);
padding:10px;
border-left:20px solid #E4F2C7;
border-right:0px solid #E4F2C7;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
color:#555;
}
blockquote:hover{
border-left:0px solid #F2EAC7;
border-right:20px solid #F2EAC7;
color:#555;
}
- Blogskin / Classic Template : Paste Code Tadi Sebelum Code </style>
- Template Designer : Paste Code Tadi Sebelum Code ]]></b:skin>
Post a Comment