使用CSS3构建的PS、AI和ID的图标

Adobe公司出品的著名软件Photoshop，Illustrator的图标。

css3，图标

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1998
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
}
html,
body {
    font-family: "Press Start 2P", Arial, sans-serif;
    background: #202020;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}
.icon {
    position: relative;
    margin: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    border: 10px solid;
}
.icon-text {
    font-weight: bold;
    font-size: 112px;
    letter-spacing: -5px;
}
.ps {
    border-color: solid #afd4f1;
    background: #080151;
    color: #afd4f1;
}
.id {
    border-color: #e2319f;
    background: #19000d;
    color: #e2319f;
}
.ai {
    border-color: #ffb449;
    background: #210;
    color: #ffb449;
}

HTML

Adobe公司出品的著名软件Photoshop，Illustrator的图标。

css3，图标

编辑器支持Emmet

快捷键

Adobe公司出品的著名软件Photoshop，Illustrator的图标。

css3，图标

CSS3 简单的回形针/别针图标

5个很棒的纯CSS3图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：