CSS Nite LP25(Shift 6)『ツールと制作環境、電子書籍2012-2013』(鷹野 雅弘)

1,677 views

Published on

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

Published in: Technology

CSS Nite LP25(Shift 6)『ツールと制作環境、電子書籍2012-2013』(鷹野 雅弘)

  1. 1. 鷹野雅弘(スイッチ)
  2. 2. /* 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);
  3. 3. 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;
  4. 4. /* 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);
  5. 5. 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;
  6. 6. 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;
  7. 7. .角丸長方形_1 { border-radius: 10px; background-color: rgb( 234, 104, 162 ); position: absolute; left: 270px; top: 194px; width: 142px; height: 142px; z-index: 2;}
  8. 8. // LESS @color: #4D926F;#header { #header { color: #4D926F; color: @color;} }h2 { h2 { color: #4D926F; color: @color;} }
  9. 9. CSS Preprocessor Shootout
  10. 10. ありがとうございました。

×