一个div压在另一个div上面_【CSS小分享】用CSS画一个新拟态风格键盘

什么是新拟态

新拟态的英文名称是“Neumorphism”,也有人称为“Soft UI”。

简单讲,新拟态是一种图形样式,其原理是通过模拟真实物体来为界面的UI元素赋予真实感。
新拟态风格起源于dribbble,后面陆续被收录在2020设计趋势预测里面,在2019年的年末慢慢被大家熟知,讨论,重视起来。

好吧以上都是我在网上抄的。

这些是我在网上找的一些效果图:

7e7387f79aa689ce181f380ed5b84807.png
图片来自https://dribbble.com/

ba9158190c53d5054945f58192756341.png
图片来自https://dribbble.com/

af1194b0a17b06dccc50cb1fe610f032.png
图片来自https://dribbble.com/

8a2b4ef577a81d2c5809db007037997b.png
图片来自https://dribbble.com/


其原理是:将卡片设置与背景相同的颜色,然后利用卡片阴影来实现视觉上的 [突起] 或 [凹陷] 的效果。我们要做的,就是利用CSS阴影画一个新拟态风格的键盘,最终成品如下:

2cc6a552eb0ceac3732b33df661df74f.png
成品效果

准备工作

在开始画键盘之前,先观察一下键盘的基本布局(注意这里我们不绘制小键盘部分,因为现在我手上的键盘是87键的哈哈哈)。可以看出键盘布局基本上可以看作是一个规则的栅格系统,总共6行18列,非常适合使用grid布局来实现,退格、shift、空格等较大按键的单元将占有多个列,没有按键的位置放一个空单元即可。至此可以得到一个页面结构:

<div class="keyboard"><div class="cell"><div class="key">Esc</div></div><div class="cell"></div><div class="cell"><div class="key">F1</div></div><div class="cell"><div class="key">F2</div></div><div class="cell"><div class="key">F3</div></div><div class="cell"><div class="key">F4</div></div><div class="cell"></div><div class="cell"><div class="key">F5</div></div><div class="cell"><div class="key">F6</div></div><div class="cell"><div class="key">F7</div></div><div class="cell"><div class="key">F8</div></div><div class="cell"></div><div class="cell"><div class="key">F9</div></div><div class="cell"><div class="key">F10</div></div><div class="cell"><div class="key">F11</div></div><div class="cell"><div class="key">F12</div></div><div class="cell"><div class="key">SrcLk</div></div><div class="cell"><div class="key">Pause</div></div><div class="cell"><div class="key">~</div></div><div class="cell"><div class="key">1</div></div><div class="cell"><div class="key">2</div></div><div class="cell"><div class="key">3</div></div><div class="cell"><div class="key">4</div></div><div class="cell"><div class="key">5</div></div><div class="cell"><div class="key">6</div></div><div class="cell"><div class="key">7</div></div><div class="cell"><div class="key">8</div></div><div class="cell"><div class="key">9</div></div><div class="cell"><div class="key">0</div></div><div class="cell"><div class="key">-</div></div><div class="cell"><div class="key">=</div></div><div class="cell backspace"><div class="key">Backspace</div></div><div class="cell"><div class="key">Ins</div></div><div class="cell"><div class="key">Home</div></div><div class="cell"><div class="key">PgUp</div></div><div class="cell tab"><div class="key">Tab</div></div><div class="cell"><div class="key">Q</div></div><div class="cell"><div class="key">W</div></div><div class="cell"><div class="key">E</div></div><div class="cell"><div class="key">R</div></div><div class="cell"><div class="key">T</div></div><div class="cell"><div class="key">Y</div></div><div class="cell"><div class="key">U</div></div><div class="cell"><div class="key">I</div></div><div class="cell"><div class="key">O</div></div><div class="cell"><div class="key">P</div></div><div class="cell"><div class="key">[{</div></div><div class="cell"><div class="key">]}</div></div><div class="cell"><div class="key">|</div></div><div class="cell"><div class="key">Del</div></div><div class="cell"><div class="key">End</div></div><div class="cell"><div class="key">PgDn</div></div><div class="cell caps"><div class="key">Caps</div></div><div class="cell"><div class="key">A</div></div><div class="cell"><div class="key">S</div></div><div class="cell"><div class="key">D</div></div><div class="cell"><div class="key">F</div></div><div class="cell"><div class="key">G</div></div><div class="cell"><div class="key">H</div></div><div class="cell"><div class="key">J</div></div><div class="cell"><div class="key">K</div></div><div class="cell"><div class="key">L</div></div><div class="cell"><div class="key">;:</div></div><div class="cell"><div class="key">'"</div></div><div class="cell enter"><div class="key">Enter</div></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell shift-left"><div class="key">Shift</div></div><div class="cell"><div class="key">Z</div></div><div class="cell"><div class="key">X</div></div><div class="cell"><div class="key">C</div></div><div class="cell"><div class="key">V</div></div><div class="cell"><div class="key">B</div></div><div class="cell"><div class="key">N</div></div><div class="cell"><div class="key">M</div></div><div class="cell"><div class="key">,<</div></div><div class="cell"><div class="key">.></div></div><div class="cell"><div class="key">/?</div></div><div class="cell shift-right"><div class="key">Shift</div></div><div class="cell"></div><div class="cell"><div class="key">↑</div></div><div class="cell"></div><div class="cell"><div class="key">Ctrl</div></div><div class="cell"><div class="key">Win</div></div><div class="cell"><div class="key">Alt</div></div><div class="cell space"><div class="key"></div></div><div class="cell"><div class="key">Alt</div></div><div class="cell"><div class="key">Win</div></div><div class="cell"><div class="key">Fn</div></div><div class="cell"><div class="key">Ctrl</div></div><div class="cell"><div class="key">←</div></div><div class="cell"><div class="key">↓</div></div><div class="cell"><div class="key">→</div></div>
</div>

CSS实现

首先是设置背景样式:

html, body {height: 100%;background-color: #55b9f3;display: flex;justify-content: center;align-items: center;
}

键盘的容器部分,注意键盘背景色需要与背景颜色一致,然后利用grid布局将键盘切割为6行18列:

.keyboard {width: 960px;height: 280px;padding: 10px;border-radius: 10px;background-color: #55b9f3;box-shadow:  -20px -20px 60px #489dcf, 20px 20px 60px #62d5ff;display: grid;grid-template-columns: repeat(18, 1fr);grid-template-rows: repeat(6, 1fr);
}

之后给每一个按键添加样式,对于退格、空格等特殊的键,需要特别为他们设置大小:

.cell {padding: 4px;
}.key {width: 100%;height: 100%;color: #aedbf5;font-size: 13px;display: flex;justify-content: center;align-items: center;border-radius: 10px;background: linear-gradient(315deg, #4da7db, #5bc6ff);box-shadow: -1px -1px 40px #489dcf, 1px 1px 40px #62d5ff;transition: background .3s;cursor: pointer;user-select: none;
}.backspace {grid-column: 14 / 16;
}
.tab {grid-column: 1 / 3;
}
.caps {grid-column: 1 / 3;
}
.enter {grid-column: 14 / 16;
}
.shift-left {grid-column: 1 / 4;
}
.shift-right {grid-column: 14 / 16;
}
.space {grid-column: 4 / 12;
}

最后,给按键添加一个按下时的样式即可:

.key:active {background: linear-gradient(315deg, #5bc6ff, #4da7db);
}

到此为止,整个案例就完成了。

完整代码看这里​codepen.io

结尾

最后推荐一个用来生成新拟态风格CSS代码的网站:

Neumorphism/Soft UI CSS shadow generator​neumorphism.io
ab3361820743679fe4dd00d400e9a53c.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/371370.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JBoss BRMS与JasperReports进行报告

介绍 Jasperreports是一个免费的可下载库&#xff0c;可用于为Java EE应用程序生成丰富的报告。 本指南还提供了使用Jasper iReport设计器生成报告模板的步骤。 软件需求 JBoss BRMS 5.3&#xff08;从客户门户网站http://access.redhat.com &#xff09; JasperReports 4.6…

java字符串 删除指定字符的那些事

需求如下&#xff1a; 1.算出2周以前的时间&#xff0c;以正常日期格式返回 2.如果月份和日期前面有0需要去掉返回结果&#xff0c;比如&#xff1a;2017-08-15 就需要显示2017-8-15。 Calendar calendar Calendar.getInstance();calendar.add(Calendar.DATE, -14);Date date…

Hibernate中Hql查询

这篇随笔将会记录hql的常用的查询语句&#xff0c;为日后查看提供便利。 在这里通过定义了三个类&#xff0c;Special、Classroom、Student来做测试&#xff0c;Special与Classroom是一对多&#xff0c;Classroom与Student是一对多的关系&#xff0c;这里仅仅贴出这三个bean的属…

Java代码质量工具–概述

最近&#xff0c;我有机会在本地IT社区聚会上介绍了该主题。 这是基本演示&#xff1a; Java代码质量工具 以及更有意义的思维导图&#xff1a; 但是&#xff0c;我认为我需要更深入地探讨这一主题。 这篇博客文章应该像是在此方向上进行进一步调查的起点。 1. CodePro Anal…

利用yum升级Centos6的gcc版本,使其支持C++11

下面的可以在centos6下工作&#xff0c;centos7下有问题。可能是因为centos下的scl我是拷贝的文件&#xff0c;没有完全验证centos6下肯定没问题。 https://my.oschina.net/u/583362/blog/682123 和https://www.quyu.net/info/876.html 拷贝其关键内容就是&#xff1a; 1.使用 …

cuda版本查看_ubuntu安装CUDA

0 写在前面安装环境&#xff1a;ubuntu18.04以及GTX1050Ti笔记本为什么要安装CUDA&#xff1f; 参考百科&#xff0c;CUDA是英伟达推出的集成技术&#xff0c;通过该技术可利用GeForce 8 以后的GPU或者较新的Quadro GPU进行计算。例如典型的tensorflow-GPU和pyCUDA安装之前都要…

HTML 标签列表(功能排序) HTML 参考手册- (HTML5 标准)

HTML 标签列表&#xff08;功能排序&#xff09; HTML 参考手册- (HTML5 标准) 功能排序 New : HTML5 新标签 标签描述基础 <!DOCTYPE> 定义文档类型。<html>定义一个 HTML 文档<title>为文档定义一个标题<body>定义文档的主体<h1> to <h6>…

idea新建scala文件_IDEA maven项目中新建.scala文件

本文首发于我的博客[IDEA maven项目中新建.scala文件]分为三步第一步、IDEA中安装scala插件1、搜索安装File-Sittings-Plugins-搜索安装scala2、安装完成重启安装完成之后点击重启idea第二步、下载、安装、配置Scala1、下载安装Scala SDK本体搜索引擎搜索Scala SDK或者点我去Sc…

Linux中执行shell脚本的4种方法总结

文章来源&#xff1a;http://www.jb51.net/article/53924.htm 这篇文章主要介绍了Linux中执行shell脚本的4种方法总结,即在Linux中运行shell脚本的4种方法,需要的朋友可以参考下 bash shell 脚本的方法有多种&#xff0c;现在作个小结。假设我们编写好的shell脚本的文件名为hel…

Log4j线程死锁–案例研究

此案例研究描述了影响Weblogic Portal 10.0生产环境的Apache Log4j线程争用问题的完整根本原因分析和解决方案。 它还将说明在开发和支持Java EE应用程序时适当的Java类加载器知识的重要性。 本文也是您提高线程转储分析技能和了解线程竞争条件的另一个机会。 环境规格 Java …

代码实现:求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字

import java.util.Scanner;/*题目&#xff1a;求saaaaaaaaaaaa...a的值&#xff0c;其中a是一个数字。例如222222222222222(此时共有5个数相加)&#xff0c;几个数相加有键盘控制。 程序分析&#xff1a;关键是计算出每一项的值。*/public class Test08 {public static void ma…

堆栈跟踪从何而来?

我认为&#xff0c;阅读和理解堆栈跟踪是每个程序员都必须具备的一项基本技能&#xff0c;以便有效地解决每种JVM语言的问题&#xff08;另请参阅&#xff1a; 过滤日志中无关的堆栈跟踪行和首先记录引起异常的根本原因 &#xff09;。 那么我们可以从一个小测验开始吗&#xf…

@select 怎么写存储过程_MySQL4:存储过程和函数

什么是存储过程简单说&#xff0c;存储过程就是一条或多条SQL语句的集合&#xff0c;可视为批文件&#xff0c;但是起作用不仅限于批处理。本文主要讲解如何创建存储过程和存储函数以及变量的使用&#xff0c;如何调用、查看、修改、删除存储过程和存储函数等。使用的数据库和表…

跨域访问-预请求及跨域常见问题

预请求 参考&#xff1a;https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#预请求 简而言之&#xff0c;在跨域并且尝试添加一些特殊头及自定义头的情况下&#xff0c;由于浏览器的安全机制&#xff0c;会加多一次OPTIONS预请求&#xff08;询问请求&am…

mysql查询优化之一:mysql查询优化常用方式

一、为什么查询速度会慢&#xff1f; 一个查询的生命周期大致可以按照顺序来看&#xff1a;从客户端&#xff0c;到服务器&#xff0c;然后在服务器上进行解析&#xff0c;生成执行计划&#xff0c;执行&#xff0c;并返回结果给客户端。其中在“执行”阶段包含了大量为了检索…

修复Sonar中常见的Java安全代码冲突

本文旨在向您展示如何快速修复最常见的Java安全代码冲突。 它假定您熟悉代码规则和违规的概念以及Sonar如何对其进行报告。 但是&#xff0c;如果您以前从未听说过这些术语&#xff0c;则可以阅读Sonar Concepts或即将出版的有关Sonar的书 &#xff0c;以获取更详细的解释。 为…

理解ThreadLocal

ThreadLocal:线程本地存储&#xff0c;为每个线程都创建了变量的副本&#xff0c;线程在访问变量时&#xff0c;可以直接访问自己内部的副本变量。 理解几个概念&#xff1a; 在java中ThreadLocal是一个类。 ThreadMap是一个类&#xff0c; Thread类是线程类。 ThreadLocal…

抖音右上角一个小黄点是什么_抖音官方入驻视频号,释放了一个什么样的信号?...

专注视频号观察第 328 篇这几天&#xff0c;视频号生态新入驻了一个企业号&#xff0c;在圈里引起不少的轰动&#xff0c;因为这个号的名字叫做———抖音。这件事在圈里引发不少的轰动&#xff0c;很多人惊叹&#xff1a;“连抖音都来开视频号了&#xff0c;你还在等什么&…

资源包技巧和最佳实践

今天是资源捆绑日。 通常&#xff0c;这是Java中最著名的国际化机制&#xff08;i18n&#xff09;。 使用它应该很容易。 但是&#xff0c;在弄脏手时会出现许多小问题。 如果您有相同的想法&#xff0c;则此文章适合您。 基本 java.util.ResourceBundle定义了用于访问Java中翻…

springMvc-文件上传

赶时间&#xff0c;又在写垃圾博客&#xff0c;在心里给自己一耳巴 1.单文件上传 2.多文件上传 代码&#xff1a; 页面&#xff1a; <!DOCTYPE html><html><head><meta charset"UTF-8"><title>Insert title here</title></he…