みなさんはCSS3での装飾はどれくらいしていますか?
僕はモダンブラウザのシェアが最近上がってきているので、PCサイトでも気にせず使ったりしています。
ちょっとしたコードでPhotoshopを使わずに簡単に装飾出来るのでズボラな僕にはピッタリです。
しかし!毎回コードを書くのは面倒くさい・・・
ということで、すぐにコピペして使えるようにまとめて見ました!良ければ使ってみて下さい!
気が向いたらどんどんサンプルを増やしていきます!
斜線による装飾
SAMPLE 1
1 2 3 |
background-color: #F9F2B3; background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent)); -webkit-background-size: 7px 7px; |
SAMPLE 2
1 2 3 |
background-color: #CAE9FF; background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #E7F8FC), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #E7F8FC),color-stop(.75, #E7F8FC), color-stop(.75, transparent),to(transparent)); -webkit-background-size: 7px 7px; |
SAMPLE 3
1 2 3 |
background-color: #ECECEC; background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent)); -webkit-background-size: 7px 7px; |
SAMPLE 4
1 2 3 |
background-color: #F4BBBB; background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #FFEFEF), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #FFEFEF),color-stop(.75, #FFEFEF), color-stop(.75, transparent),to(transparent)); -webkit-background-size: 7px 7px; |
SAMPLE 5
1 2 3 |
background-color: #F9F2B3; background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent)); -webkit-background-size: 14px 14px; |
SAMPLE 6
1 2 3 |
background-color: #CAE9FF; background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #E7F8FC), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #E7F8FC),color-stop(.75, #E7F8FC), color-stop(.75, transparent),to(transparent)); -webkit-background-size: 14px 14px; |
SAMPLE 7
1 2 3 |
background-color: #ECECEC; background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent)); -webkit-background-size: 14px 14px; |
SAMPLE 8
1 2 3 |
background-color: #F4BBBB; background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #FFEFEF), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #FFEFEF),color-stop(.75, #FFEFEF), color-stop(.75, transparent),to(transparent)); -webkit-background-size: 14px 14px; |
ボーダー(横線)による装飾
SAMPLE 9
1 2 3 |
background-color: #F9F2B3; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #F9F9F9), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 5px; |
SAMPLE 10
1 2 3 |
background-color: #CAE9FF; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #E7F8FC), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 5px; |
SAMPLE 11
1 2 3 |
background-color: #ECECEC; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #F9F9F9), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 5px; |
SAMPLE 12
1 2 3 |
background-color: #F4BBBB; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #FFEFEF), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 5px; |
SAMPLE 13
1 2 3 |
background-color: #F9F2B3; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #F9F9F9), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 10px; |
SAMPLE 14
1 2 3 |
background-color: #CAE9FF; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #E7F8FC), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 10px; |
SAMPLE 15
1 2 3 |
background-color: #ECECEC; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #F9F9F9), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 10px; |
SAMPLE 16
1 2 3 |
background-color: #F4BBBB; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #FFEFEF), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 10px; |
ストライプ(縦線)による装飾
SAMPLE 17
1 2 3 |
background-color: #F9F2B3; background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #F9F9F9), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 5px; |
SAMPLE 18
1 2 3 |
background-color: #CAE9FF; background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #E7F8FC), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 5px; |
SAMPLE 19
1 2 3 |
background-color: #ECECEC; background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #F9F9F9), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 5px; |
SAMPLE 20
1 2 3 |
background-color: #F4BBBB; background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #FFEFEF), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 5px; |
SAMPLE 21
1 2 3 |
background-color: #F9F2B3; background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #F9F9F9), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 10px; |
SAMPLE 22
1 2 3 |
background-color: #CAE9FF; background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #E7F8FC), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 10px; |
SAMPLE 23
1 2 3 |
background-color: #ECECEC; background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #F9F9F9), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 10px; |
SAMPLE 24
1 2 3 |
background-color: #F4BBBB; background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #FFEFEF), color-stop(.5, transparent), to(transparent)); -webkit-background-size: 10px; |
四角(ブロックパターン)による装飾
SAMPLE 25
1 2 3 4 |
background-color: #dddddd; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, #ffffff), to(#ffffff)), -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, #ffffff), to(#ffffff)); -webkit-background-size: 5px 5px; |
SAMPLE 26
1 2 3 4 |
background-color: #dddddd; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, #ffffff), to(#ffffff)), -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, #ffffff), to(#ffffff)); -webkit-background-size: 10px 10px; |