ஞாயிறு, 25 மார்ச், 2012
6 Awesome CSS3 Image Hover Effects
.img{
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
float:left;
margin-left:-50px;
margin-right:-50px;
margin-top:-10px;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
.img img{
padding:10px;
border:1px solid #fff;
width:400px;
height:225px;
}
.img:hover{
-webkit-transform:scale(0.8);
-webkit-box-shadow:0px 0px 30px #ccc;
-moz-transform:scale(0.8);
...
வெள்ளி, 23 மார்ச், 2012
Make Page Peel Effect Using CSS 3
#page-peel {
width: 40px;
height: 40px;
position: fixed;
top: 0;
left: 0;
}
#page-peel:hover {
width: 350px;
height: 350px;
transition: ease 1s;
-webkit-transition: ease 1s;
-moz-transition: ease 1s;
-o-transition: ease 1s;
}
#page-peel-content {
background: transparent;
white-space: normal;
overflow: hidden;
width: 35px;
height: 35px;
position: fixed;
top: 0;
left: 0;
}
#page-peel-content:hover {
width: 300px;
height: 300px;
transition: ease 1s;
-webkit-transition:...
வியாழன், 22 மார்ச், 2012
count own
.lcdstyle{ /*Example CSS to create LCD countdown look*/
background:#fff;
color:#289728;
font: bold 20px arial;
padding: 15px;
border:5px solid #333;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow: 5px 5px 5px #CCCCCC;
}
.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 120%
}
/***********************************************
* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
*...
Top 10 Widely Used Image Hover Effects In Blogosphere!
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #7AA1C3;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: white;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover...
How To Add Opacity Effects to Your Blog Images
a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }...
EDITER --------------My Blogger Tricks
body {
margin:0;
padding:0;
background:#ddd;
}
#wrapper {
margin:0 auto;
padding:0;
width:955px;
}
a{ color:#0080ff; text-decoration:none;}
a:hover{color:#0080ff; text-decoration:underline;}
a:visited {color:#0080ff; text-decoration:none;}
.mbt1 {
font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-size: 10px; color: #289728;
}
.h {
color: #0080ff;
}
.sidebar {display:none}
(function(d,...
Opacity effect CSS
.opacity {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
...
புதன், 21 மார்ச், 2012
CSS Lifted corner Drop Shadow
.box{
width:200px;
height:100px;
}
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow...
செவ்வாய், 20 மார்ச், 2012
Multiple Borders with CSS 2.1
/* ----------------------------------------------------------------------------------------------------------------------------
== EXAMPLES
** ---------------------------------------------------------------------------------------------------------------------------- */
#full-border1 {position:relative; z-index:10; padding:20px; background:#eee;}
#full-border1:before {content:""; display:block; position:absolute; z-index:-1; top:5px; left:5px; right:5px;
bottom:5px;...
CSS Box Model Explained
.shadow{margin:0 30px 10px 50px;padding:0 5px 5px 0;background:white url(http://ago.tanfa.co.uk/images/shadow.gif) no-repeat 100% 100%;height:1%;}
Updates:
Discuss this article
Resources:
W3C - Technical explanation - CSS1 - the formatting model
W3C - World Wide Web Consortium - CSS2 Recommendations for Box Model Properties
RichInStyle CSS2 tutorial - tutorial about the box model
Box Model Hacks - for IE - listed by CSS discuss
...
3D Border Box
* {
font-family:verdana;
font-size:12px;
line-height:14px;
}
body {
margin:0;
padding:0;
}
p.one, p.two, p.three {
width:90px;
margin:0;
padding:10px;
border-left:10px solid #b11;
border-right:10px solid #b11;
background-color:#fff;
}
p.one {
border-top:10px solid #fc0;
border-bottom:6px solid #c88;
}
p.two {
border-top:10px solid #633;
border-bottom:6px solid #c88;
}
p.three {
border-top:10px solid #633;
border-bottom:6px solid #fc0;
}
#inner {
width:130px;
margin:0;
padding:0 0 10px 0;
border-top:10px solid #fc0;
...
திங்கள், 19 மார்ச், 2012
Tutorial Blog for Stylish Blogger java script close and hover
Tutorial Blog for Stylish Blogger
Hover Here!!!XSorot Aku!!!X
function showBox(is){
document.getElementById(is).style.display="block";
}
function hideBox(is)
{
document.getElementById(is).style.display="none";
}
var _gaq=[['_setAccount','UA-1656750-13'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)})(document,'script')
*
{margin:0;padding:0;}
footer
{background:#D3A76F;position:fixed;width:100%;border-top:1px...
ஞாயிறு, 18 மார்ச், 2012
How To Display XML Code as Plain Text in Blogger
code{ background:url("http://i39.tinypic.com/a47lat.jpg") repeat scroll left top #FFFFFF; border:1px solid #99CC66; color:#666666; display:block; font:100%/17px 'Courier New',Fixed,monospace; margin:1em 0; overflow:auto; padding:0 20px 0 30px; text-align:left; }
low :
...
தொடர்புடைய இடுகைகள் பக்க உறுப்பு
--------------------------தொடர்புடைய இடுகைகள் பக்க உறுப்பு ------------------------
---------------------------தொடர்புடைய இடுகைகள் பக்க உறுப்பு -------------------------
------------------------------------@@@@@@@@@@@@@@-----------------------
----------------------------------டெஸ்ட் -----------------------------------------------------
-----------------------------------TESTPOST ---------------------------------------------------
var ry='Related Posts';rn='No Related Posts';rcomment='Comment';rdisable='Comment...
வெள்ளி, 16 மார்ச், 2012
Handling onClick event with CSS
#lightbox {
display:none;
}
/* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */
#lightbox:target {
display:block;
}
Hide me
Hi!!
i am the lighbox
Show the ligh...
Blue Color (உதா)
#pcm{display:none;}
ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.cssMenu,ul.cssMenu ul {
margin:0px;
list-style:none;
padding:0px 1px 1px 0px;
background-color:#A5A5A5;
background-repeat:repeat;
border-color:#A6A6A6;
border-width:0px;
border-style:solid;
}
ul.cssMenu table {border-collapse:collapse}ul.cssMenu {
display:block;
zoom:1;
float: left;
}
ul.cssMenu ul{
width:175.35px;
}
ul.cssMenu li{
display:block;
...
Green Color (பச்சை நிறத்திற்கு )
#pcm{display:none;}
ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.cssMenu,ul.cssMenu ul {
margin:0px;
list-style:none;
padding:0px 1px 1px 0px;
background-color:#A5A5A5;
background-repeat:repeat;
border-color:#A6A6A6;
border-width:0px;
border-style:solid;
}
ul.cssMenu table {border-collapse:collapse}ul.cssMenu {
display:block;
zoom:1;
float: left;
}
ul.cssMenu ul{
width:175.35px;
}
ul.cssMenu li{
display:block;
...