对角线渐变背景+透明菜单栏

Transparent Menu Bar

CSS3,菜单

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto);
html,
body {
    height: 100%;
}
body {
    background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
}
nav {
    max-width: 960px;
    /* The mask-image gives us some extra fading. It is not necessary but without this, you can't face out the box-shadows. This clips our menu */
    
    mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
    margin: 0 auto;
    /* Using padding instead of margin for the top and bottom here will keep our box-shadow visible and not affected by the mask-image */
    
    padding: 75px 0;
}
nav ul {
    text-align: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    padding: 20px;
    font-family: "Roboto";
    color: rgba(0, 0, 0, 0.5);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
    font-size: 25px;
    text-decoration: none;
    display: block;
}
nav ul li a:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(0, 0, 0, 0.7);
}

HTML

Transparent Menu Bar

CSS3,菜单

编辑器支持Emmet

快捷键

Transparent Menu Bar

CSS3,菜单

8个对角线条纹渐变背景效果

带浮动网格图片预览背景的全屏菜单栏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：