http://cssnite.jp/archives/post_2476.html

1. 鷹野雅弘（スイッチ）

13. /* Firefox v3.6+ */
background-image:-moz-linear-gradient(50% 0% -90deg,rgb(195,228,234) 0%,rgb(79,175,196)
99%);
/* safari v4.0+ and by Chrome v3.0+ */
background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0,
rgb(195,228,234)),color-stop(0.99, rgb(79,175,196)));
/* Chrome v10.0+ and by safari nightly build*/
background-image:-webkit-linear-gradient(-90deg,rgb(195,228,234) 0%,rgb(79,175,196) 99%);
/* Opera v11.10+ */
background-image:-o-linear-gradient(-90deg,rgb(195,228,234) 0%,rgb(79,175,196) 99%);
/* IE v10+ */
background-image:-ms-linear-gradient(-90deg,rgb(195,228,234) 0%,rgb(79,175,196) 99%);
background-image:linear-gradient(-90deg,rgb(195,228,234) 0%,rgb(79,175,196) 99%);
width:287px;
height:99px;
border-color:rgb(74,180,200);
border-width:1px;
/* Firefox v1.0+ */
-moz-border-radius:11px;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:11px;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+ and by IE v9.0+ */
border-radius:11px;
border-style:solid;
/* Firefox v3.5+ */
-moz-box-shadow:inset 1px 1px 2px rgb(255,255,255);
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-box-shadow:inset 1px 1px 2px rgb(255,255,255);
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
box-shadow:inset 1px 1px 2px rgb(255,255,255);
-ms-
filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffc3e4ea,endColorstr=#ff4
fafc4,GradientType=0)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffc3e4ea,endColorstr=#ff4f
afc4,GradientType=0);

19. background: #4fafc4;
! background-image: url(data:image/svg
+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9
IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBp
ZD0iZzIyOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIx
MDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjYzNlNGVhIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNGZhZmM0
IiBvZmZzZXQ9IjAuOTkiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9
IjEiIGZpbGw9InVybCgjZzIyOSkiIC8+PC9zdmc+);
! background: -moz-linear-gradient(50% 0% -90deg, #c3e4ea 0%, #4fafc4 99%);
! background: -o-linear-gradient(-90deg, #c3e4ea 0%, #4fafc4 99%);
! background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #c3e4ea), color-
stop(0.99, #4fafc4));
! background: -webkit-linear-gradient(-90deg, #c3e4ea 0%, #4fafc4 99%);
! background: linear-gradient(180deg, #c3e4ea 0%, #4fafc4 99%);
! border: 1px solid #4ab4c8;
! -webkit-border-radius: 11px;
! border-radius: 11px;
! -webkit-box-shadow: inset 1px 1px 2px #fff;
! box-shadow: inset 1px 1px 2px #fff;

20. /* Firefox v3.6+ */
background-image:-moz-linear-gradient(50% 0% -90deg,rgb(195,228,234) 0%,rgb(79,175,196)
99%);
/* safari v4.0+ and by Chrome v3.0+ */
background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0,
rgb(195,228,234)),color-stop(0.99, rgb(79,175,196)));
/* Chrome v10.0+ and by safari nightly build*/
background-image:-webkit-linear-gradient(-90deg,rgb(195,228,234) 0%,rgb(79,175,196) 99%);
/* Opera v11.10+ */
background-image:-o-linear-gradient(-90deg,rgb(195,228,234) 0%,rgb(79,175,196) 99%);
/* IE v10+ */
background-image:-ms-linear-gradient(-90deg,rgb(195,228,234) 0%,rgb(79,175,196) 99%);
background-image:linear-gradient(-90deg,rgb(195,228,234) 0%,rgb(79,175,196) 99%);
width:287px;
height:99px;
border-color:rgb(74,180,200);
border-width:1px;
/* Firefox v1.0+ */
-moz-border-radius:11px;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:11px;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+ and by IE v9.0+ */
border-radius:11px;
border-style:solid;
/* Firefox v3.5+ */
-moz-box-shadow:inset 1px 1px 2px rgb(255,255,255);
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-box-shadow:inset 1px 1px 2px rgb(255,255,255);
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
box-shadow:inset 1px 1px 2px rgb(255,255,255);
-ms-
filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffc3e4ea,endColorstr=#ff4
fafc4,GradientType=0)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffc3e4ea,endColorstr=#ff4f
afc4,GradientType=0);

21. background: #4fafc4;
! background-image: url(data:image/svg
+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9
IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBp
ZD0iZzIyOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIx
MDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjYzNlNGVhIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNGZhZmM0
IiBvZmZzZXQ9IjAuOTkiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9
IjEiIGZpbGw9InVybCgjZzIyOSkiIC8+PC9zdmc+);
! background: -moz-linear-gradient(50% 0% -90deg, #c3e4ea 0%, #4fafc4 99%);
! background: -o-linear-gradient(-90deg, #c3e4ea 0%, #4fafc4 99%);
! background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #c3e4ea), color-
stop(0.99, #4fafc4));
! background: -webkit-linear-gradient(-90deg, #c3e4ea 0%, #4fafc4 99%);
! background: linear-gradient(180deg, #c3e4ea 0%, #4fafc4 99%);
! border: 1px solid #4ab4c8;
! -webkit-border-radius: 11px;
! border-radius: 11px;
! -webkit-box-shadow: inset 1px 1px 2px #fff;
! box-shadow: inset 1px 1px 2px #fff;

22. background: #4fafc4;
! background-image: url(data:image/svg
+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9
IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBp
ZD0iZzIyOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIx
MDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjYzNlNGVhIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNGZhZmM0
IiBvZmZzZXQ9IjAuOTkiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9
IjEiIGZpbGw9InVybCgjZzIyOSkiIC8+PC9zdmc+);
! background: -moz-linear-gradient(50% 0% -90deg, #c3e4ea 0%, #4fafc4 99%);
! background: -o-linear-gradient(-90deg, #c3e4ea 0%, #4fafc4 99%);
! background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, #c3e4ea), color-
stop(0.99, #4fafc4));
! background: -webkit-linear-gradient(-90deg, #c3e4ea 0%, #4fafc4 99%);
! background: linear-gradient(180deg, #c3e4ea 0%, #4fafc4 99%);
! border: 1px solid #4ab4c8;
! -webkit-border-radius: 11px;
! border-radius: 11px;
! -webkit-box-shadow: inset 1px 1px 2px #fff;
! box-shadow: inset 1px 1px 2px #fff;

44. .角丸長方形_1 {
border-radius: 10px;
background-color: rgb( 234, 104, 162 );
position: absolute;
left: 270px;
top: 194px;
width: 142px;
height: 142px;
z-index: 2;
}

61. // LESS
@color: #4D926F;
#header { #header {
color: #4D926F; color: @color;
} }
h2 { h2 {
color: #4D926F; color: @color;
} }

66. CSS Preprocessor
Shootout

91. ありがとうございました。