css nite lp25（shift 6）『ツールと制作環境、電子書籍2012-2013』（鷹野 雅弘）
DESCRIPTION
http://cssnite.jp/archives/post_2476.htmlTRANSCRIPT
鷹野雅弘（スイッチ）
/* 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=#ff4fafc4,GradientType=0)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffc3e4ea,endColorstr=#ff4fafc4,GradientType=0);
background: #4fafc4;! background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzIyOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjYzNlNGVhIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNGZhZmM0IiBvZmZzZXQ9IjAuOTkiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzIyOSkiIC8+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;
/* 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=#ff4fafc4,GradientType=0)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffc3e4ea,endColorstr=#ff4fafc4,GradientType=0);
background: #4fafc4;! background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzIyOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjYzNlNGVhIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNGZhZmM0IiBvZmZzZXQ9IjAuOTkiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzIyOSkiIC8+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;
background: #4fafc4;! background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzIyOSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjYzNlNGVhIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNGZhZmM0IiBvZmZzZXQ9IjAuOTkiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzIyOSkiIC8+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;
.角丸長方形_1 { border-radius: 10px; background-color: rgb( 234, 104, 162 ); position: absolute; left: 270px; top: 194px; width: 142px; height: 142px; z-index: 2;}
// LESS
@color: #4D926F;
#header { color: @color;}h2 { color: @color;}
#header { color: #4D926F;}h2 { color: #4D926F;}
CSS PreprocessorShootout
ありがとうございました。