CSS3でさまざまなグリッドテクスチャ効果を実現_html/css_WEB-ITnose

<スタイル>body{font-family: Georgia, serif;}.ストライプ{高さ: 250px;幅: 375px;float: left;margin: 10px;-webkit-background-size: 50px 50px;-moz-background-size: 50px 50px;背景サイズ: 50px 50px;-moz-box-shadow: 1px 1px 8px グレー;-webkit-box-shadow: 1px 1px 8px グレー;box-shadow: 1px 1px 8px グレー;}.angled{background-color: #ac0 ;背景画像: -webkit-gradient(linear, 0 100%, 100% 0,color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, 透明),カラーストップ(.5、透明)、カラーストップ(.5、rgba(255、255、255、.2))、カラーストップ(.75、rgba(255、255、255、.2))、 color-stop(.75, 透明),to(透明));背景画像: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, 透明 25%,透明 50% 、rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,透明 75%, 透明);background-image: -o-linear-gradient(45deg, rgba (255, 255, 255, .2) 25%、透明 25%、透明 50%、rgba(255, 255, 255, .2) 50%、rgba(255, 255, 255, .2) 75%、透明75%、透明);背景画像: Linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, 透明 25%,透明 50%, rgba(255, 255, 255, .2) 50 %, rgba(255, 255, 255, .2) 75%,透明 75%, 透明);}.angled-135{背景色: #c16;背景画像: -webkit-gradient(linear, 0 0, 100% 100%,カラーストップ(.25, rgba(255, 255, 255, .2)), カラーストップ(.25, 透明),カラーストップ(.5, 透明), カラーストップ(. 5、rgba(255、255、255、.2))、カラーストップ(.75、rgba(255、255、255、.2))、カラーストップ(.75、透明)、to(透明)) ;背景画像: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, 透明 25%,透明 50%, rgba(255, 255, 255, .2) 50% 、rgba(255, 255, 255, .2) 75%,透明 75%, 透明);背景画像: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%,透明 25%、透明 50%、rgba(255, 255, 255, .2) 50%、rgba(255, 255, 255, .2) 75%、透明 75%、透明);背景画像: 線形グラデーション(-45度、rgba(255、255、255、.2) 25%、透明25%、透明50%、rgba(255、255、255、.2) 50%、rgba(255、255、255、.2) ) 75%,透明 75%, 透明);}.horizo​​ntal{背景色: #0ae;背景画像: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255) 、255、255、.2))、color-stop(.5、透明)、to(透明));背景画像: -moz-linear-gradient(rgba(255, 255, 255, .2) 50% 、透明 50%、透明);背景画像: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, 透明 50%, 透明);背景画像: linear-gradient(rgba( 255, 255, 255, .2) 50%、透明 50%、透明);}.vertical{background-color: #f90;background-image: -webkit-gradient(linear, 0 0, 100% 0, color- stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, 透明), to(透明));背景画像: -moz-linear-gradient(0deg, rgba(255) , 255, 255, .2) 50%, 透明 50%, 透明);background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, 透明 50%, 透明);背景画像: 線形グラデーション(0度, rgba(255, 255, 255, .2) 50%, 透明 50%, 透明);}.checkered{背景画像: -webkit-gradient(線形, 0 0) , 100% 100%, color-stop(.25, #555), color-stop(.25, 透明), to(透明)), -webkit-gradient(linear, 0 100%, 100% 0, color- stop(.25, #555), color-stop(.25, 透明), to(透明)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, 透明), color-stop(.75, #555)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, 透明), color-stop(.75, #555));background -image: -moz-linear-gradient(45度、#555 25%、透明25%、透明)、-moz-linear-gradient(-45度、#555 25%、透明25%、透明)、-moz-linear -gradient(45度、透明75%、#555 75%)、-moz-linear-gradient(-45度、透明75%、#555 75%);背景画像: -o-linear-gradient(45度、#555) 25%、透明 25%、透明)、-o-linear-gradient(-45deg、#555 25%、透明 25%、透明)、-o-linear-gradient(45deg、透明 75%、#555 75%) 、-o-linear-gradient(-45deg、透明 75%、#555 75%);background-image: Linear-gradient(45deg、#555 25%、透明 25%、透明)、linear-gradient(-45deg、 #555 25%、透明 25%、透明)、線形グラデーション(45度、透明 75％、#555 75％)、線形グラデーション(-45度、透明 75％、#555 75％);}.picnic{背景色:白;背景画像: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, 透明), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))), -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, 透明), color-stop (.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));background-image: -moz-linear-gradient(透明 50%, rgba( 200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -moz-linear-gradient(0deg, 透明 50%, rgba(200, 0, 0, .5) 50 %, rgba(200, 0, 0, .5));背景画像: -o-linear-gradient(透明 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -o-linear-gradient(0deg, 透明 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));background-image : Linear-gradient(透明 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5))、linear-gradient(0deg, 透明 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));}#footer{text-align: center;clear: Both;padding-top: .5em;border-top: 1pxソリッド#ccc;font-variant: small-caps;}

http://www.999jiujiu.com/