Advanced Search

Safari CSS3 Fun - target + border-radius + box-shadow

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style type="text/css">
  2. #r, #g, #b {
  3.   position:relative;
  4.   margin:0 auto;
  5.   margin-top:20px;
  6.   width:30px;
  7.   height:30px;
  8.   display:block;
  9.  
  10.   -webkit-border-radius: 15px;
  11. }
  12.  
  13. #r {
  14.   -webkit-box-shadow: 1px 1px 1px red;
  15.   background-color:red;
  16. }
  17.  
  18. #r:hover {
  19.  
  20.   -webkit-box-shadow: 2px 2px 40px red;
  21. }
  22.  
  23. #g {
  24.   -webkit-box-shadow: 1px 1px 1px green;
  25.   background-color: green;
  26. }
  27.  
  28. #g:hover {
  29.   -webkit-box-shadow: 2px 2px 40px green;
  30. }
  31.  
  32. #b {
  33.   -webkit-box-shadow: 1px 1px 1px blue;
  34.   background-color: blue;
  35. }
  36.  
  37. #b:hover {
  38.   -webkit-box-shadow: 2px 2px 40px blue;
  39. }
  40.  
  41. #a {
  42.   margin:30px;
  43.   width:60px;
  44.   height:170px;
  45.   border:1px #666 solid;
  46.   -webkit-box-shadow: 4px 4px 10px #666;
  47.   -webkit-border-radius: 5px;
  48. }
  49.  
  50. #rgb {
  51.   position:absolute;
  52.   left:140px;
  53.   top:10px;
  54.   font-size:150px;
  55.   font-family:"Arial Black";
  56.   letter-spacing:10px;
  57. }
  58.  
  59. #red, #green, #blue {
  60.   opacity:0.8;
  61. }
  62.  
  63.  
  64. #red:hover, #green:hover, #blue:hover {
  65.   opacity:1;
  66. }
  67.  
  68.  
  69. #red:target {
  70.   opacity:1;
  71.   text-shadow:4px 0px 20px red;
  72. }
  73.  
  74. #green:target {
  75.   opacity:1;
  76.   text-shadow:4px 0px 20px green;
  77. }
  78.  
  79. #blue:target {
  80.   opacity:1;
  81.   text-shadow:4px 0px 80px blue;
  82. }
  83.  
  84. #red a::selection {
  85.   background-color:red;
  86.   color:white;
  87. }
  88.  
  89. #green a::selection {
  90.   background-color: green;
  91.   color:white;
  92. }
  93.  
  94. #blue a::selection {
  95.   background-color: blue;
  96.   color:white;
  97. }
  98.  
  99. a {
  100.  text-decoration:none;
  101.  color: inherit;
  102. }
  103. </style>
  104.  
  105. <div id="a">
  106.   <a href="#red" title="Red" id="r"></a>
  107.   <a href="#green" title="green" id="g"></a>
  108.   <a href="#blue" title="blue" id="b"></a>
  109. </div>
  110.  
  111. <div id="rgb">
  112. <span id="red"><a href="#red">R</a></span><span id="green"><a href="#green">G</a></span><span id="blue"><a href="#blue">B</a></span>
  113. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.