html+CSS3实现iOS7扁平化newsstand图标

2026-02-21 12:35:34

1、新建html文档。

2、书写hmtl代码。

<div class="travel"> <span class="label">Travel</span> <span class="picto"></span> </div>

<div class="sports"> <span class="label">Sports</span> </div>

</div>

html+CSS3实现iOS7扁平化newsstand图标

3、初始化css代码。

<style>

html, body { width : 100%; height : 100%; margin : 0; padding : 0; }

.wrapper { position : relative; width : 420px; margin : 0 auto; padding : 0; font-size : 0; }

.icon { position : relative; display : inline-block; width : 100px; height : 100px; margin : 20px; border-radius : 18px; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; }

</style>

html+CSS3实现iOS7扁平化newsstand图标

4、书写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); }

html+CSS3实现iOS7扁平化newsstand图标

5、代码整体结构

html+CSS3实现iOS7扁平化newsstand图标

6、查看效果

html+CSS3实现iOS7扁平化newsstand图标