无HTML元素构建的企鹅图标

巧妙的使用web页面中的head，script，meta固有元素实现的图标。

css3, logo

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #ccc;
    padding: 50px;
}
body:before {
    content: "Abdullah AbuSall (abdullah-abusall.com)" "\aNo HTML Tags Added";
    display: block;
    width: 320px;
    position: absolute;
    top: 10px;
    line-height: 2em;
    font-family: monospace;
}
head {
    display: block;
    width: 200px;
    height: 250px;
    background: #FFF;
    margin: 10px auto;
    border: 30px solid #171717;
    border-bottom-left-radius: 150px 100px;
    border-top-left-radius: 150px 300px;
    border-top-right-radius: 150px 300px;
    border-bottom-right-radius: 150px 100px;
    position: relative;
    text-indent: -9999em;
}
head script,
head script:before {
    content: "";
    display: block;
    width: 10px;
    height: 20px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 40px;
    left: 70px;
}
head script:before {
    left: auto;
    top: 0;
    right: -50px;
}
head meta:first-of-type {
    display: block;
    width: 75px;
    height: 30px;
    background: #FF7F2A;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    position: absolute;
    bottom: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
head meta:last-of-type,
head meta:last-of-type:before {
    content: "";
    display: block;
    width: 75px;
    height: 75px;
    background: #171717;
    border-bottom-left-radius: 150px 100px;
    border-top-left-radius: 150px 300px;
    border-bottom-right-radius: 150px 100px;
    position: absolute;
    top: 30%;
    left: 0;
    -webkit-transform: translateX(-90px) rotate(40deg);
    transform: translateX(-90px) rotate(40deg);
}
head meta:last-of-type:before {
    left: auto;
    top: -200px;
    right: -140px;
    border-top-left-radius: 0;
    border-top-right-radius: 150px 300px;
    -webkit-transform: translateX(90px) rotate(-80deg);
    transform: translateX(90px) rotate(-80deg);
}
head link:first-of-type,
head link:first-of-type:before {
    content: "";
    display: block;
    width: 75px;
    height: 75px;
    background: #FF7F2A;
    border-bottom-left-radius: 150px 100px;
    border-top-left-radius: 150px 300px;
    border-top-right-radius: 150px 300px;
    border-bottom-right-radius: 150px 100px;
    position: absolute;
    top: 100%;
    left: -10px;
    z-index: -1;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
head link:first-of-type:before {
    left: auto;
    top: -50px;
    right: -150px;
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
}

HTML

巧妙的使用web页面中的head，script，meta固有元素实现的图标。

css3, logo

编辑器支持Emmet

快捷键

巧妙的使用web页面中的head，script，meta固有元素实现的图标。

css3, logo

使用HTML5 CSS3构建的Chrome浏览器标题栏仿真界面

HTML5 CSS3在球形表面运动的彩色圆形元素

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：