html+CSS3实现iOS7扁平化newsstand图标
新建html文档。
书写hmtl代码。
初始化css代码。
书写css代码。
.newsstand { border : 1px #cfcfcf solid; overflow : hidden; background : -webkit-linear-gradient(top, white 0%, #dbdbdb 81%, white 82%); background : -moz-linear-gradient(top, white 0%, #dbdbdb 81%, white 82%); background : -ms-linear-gradient(top, white 0%, #dbdbdb 81%, white 82%); background : -o-linear-gradient(top, white 0%, #dbdbdb 81%, white 82%); background : linear-gradient(top, white 0%, #dbdbdb 81%, white 82%); }
.newsstand .news { position : absolute; width : 47px; height : 52px; top : 13px; left : 12px; z-index : 1; background : #d0d2d1; box-shadow : 0 0 0 1px rgba(0, 0, 0, 0.1) inset; }
.newsstand .news span { position : absolute; width : 100%; height : 10px; top : 2px; left : 0; font-family : "Helvetica Neue", Helvetica, Arial; font-size : 10px; font-weight : bold; text-align : center; line-height : 10px; letter-spacing : -1px; text-align : center; text-shadow : 0 0 1px white; color : #1c1c1c; }
.newsstand .news:before { position : absolute; content : ''; width : 14px; height : 4px; top : 14px; left : 4px; background : #c0c1c3; }
.newsstand .news:after { position : absolute; content : ''; width : 9px; height : 2px; top : 19px; left : 4px; background : #c0c1c3; }
.newsstand .art { position : absolute; width : 34px; height : 45px; top : 35px; left : 6px; z-index : 2; background : #fecb00; box-shadow : 0 0 0 1px rgba(0, 0, 0, 0.1) inset; }
.newsstand .art span { position : absolute; width : 100%; height : 10px; top : 3px; left : 0; font-family : "Helvetica Neue", Helvetica, Arial; font-size : 10px; font-weight : bold; text-align : center; line-height : 10px; letter-spacing : -1px; text-align : center; text-transform : uppercase; text-shadow : 0 0 1px #ffe708; color : #1a1a1a; }
.newsstand .art span:before { position : absolute; content : ''; top : 12px; left : 16px; border-color : transparent transparent white transparent; border-style : solid; border-width : 10px; }
.newsstand .art:before { position : absolute; content : ''; width : 10px; height : 10px; top : 18px; left : 10px; border-radius : 6px; background : #01acea; }
.newsstand .art:after { position : absolute; content : ''; width : 10px; height : 10px; top : 30px; left : 3px; background : #ff3b2f; }
.newsstand .travel { position : absolute; width : 38px; height : 54px; top : 26px; left : 30px; z-index : 3; overflow : hidden; background : #27aae0; box-shadow : 0 0 0 1px rgba(0, 0, 0, 0.1) inset; }
.newsstand .travel .label { position : absolute; width : 100%; height : 10px; top : 3px; left : 0; font-family : "Helvetica Neue", Helvetica, Arial; font-size : 10px; font-weight : bold; text-align : center; line-height : 10px; letter-spacing : -1px; text-align : center; text-transform : uppercase; text-shadow : 0 0 1px #22bae5; color : #303493; }
.newsstand .travel .label:before { position : absolute; content : ''; width : 40px; height : 40px; top : 29px; left : -1px; background : #7dcceb; box-shadow : 0 0 0 1px rgba(0, 0, 0, 0.1); -webkit-transform : rotateZ(45deg); -moz-transform : rotateZ(45deg); -ms-transform : rotateZ(45deg); -o-transform : rotateZ(45deg); transform : rotateZ(45deg); }
.newsstand .travel .picto { position : absolute; width : 16px; height : 4px; top : 50%; left : 50%; margin : -2px 0 0 -8px; background : #fff; border-radius : 0 3px 3px 0; -webkit-transform : rotateZ(-90deg); -moz-transform : rotateZ(-90deg); -ms-transform : rotateZ(-90deg); -o-transform : rotateZ(-90deg); transform : rotateZ(-90deg); }
.newsstand .travel .picto:before { position : absolute; content : ''; width : 0; height : 0; top : -3px; left : 0; border-color : transparent transparent transparent white; border-width : 5px; border-style : solid; }
.newsstand .travel .picto:after { position : absolute; content : ''; width : 8px; height : 8px; top : -3px; left : 0; border-right : 2px white solid; border-bottom : 2px white solid; -webkit-transform : rotateZ(-45deg); -moz-transform : rotateZ(-45deg); -ms-transform : rotateZ(-45deg); -o-transform : rotateZ(-45deg); transform : rotateZ(-45deg); }
.newsstand .sports { position : absolute; width : 32px; height : 40px; top : 40px; left : 60px; z-index : 4; background : #38b349; box-shadow : 0 0 0 1px rgba(0, 0, 0, 0.1) inset; }
.newsstand .sports .label { position : absolute; width : 100%; height : 10px; top : 3px; left : 0; font-family : "Helvetica Neue", Helvetica, Arial; font-size : 8px; font-weight : bold; text-align : center; line-height : 10px; letter-spacing : -1px; text-align : center; text-transform : uppercase; text-shadow : 0 0 1px #2fac48; color : #fff; }
.newsstand .sports .label:before { position : absolute; content : ''; width : 12px; height : 12px; top : 12px; left : 11px; background : #ebe11b; border-radius : 14px; box-shadow : 0 0 0 1px rgba(0, 0, 0, 0.1); }
代码整体结构
查看效果
