键盘左右键改变css样式_CSS上的3D键盘键| 现在是现实

键盘左右键改变css样式

介绍 (Introduction)

Hello, today we will create a 3D Keyboard Key like on the picture below (of course this will be a reality).

您好，今天我们将创建一个3D键盘按键，如下图所示(当然，这是现实的 )。

史前史 (Prehistory)

I have already written an article about how to create a 3D Keyboard Key. But it had a little portion of deception (just look at the expectation above). I inserted an image above in the article but created the key with very different styles.

我已经写了一篇有关如何创建3D键盘键的文章 。 但是它有一些欺骗性(只是看上面的期望 )。 我在文章上方插入了一张图片，但是创建了风格迥异的键。

I didn't do it on purpose. I understood my mistake when I had read one comment.

我不是故意的 我读了一条评论后就明白了自己的错误。

I promised that I would create a Keyboard Key like on the preview image. I kept my promise. Let's start the creation!

我保证我会像预览图像一样创建一个键盘键。 我信守诺言 让我们开始创作吧！

创作过程 (Creation process)

The creation of such key in CSS is a hard task. I spend a whole evening (~ 3 hours) to implement this 3D Keyboard Key. It will be very cool if you vote for this article and leave any comment below.

在CSS中创建此类密钥是一项艰巨的任务。 我花了整个晚上(〜3个小时)来实现此3D键盘键 。 如果您投票给这篇文章并在下面留下任何评论，那将非常酷。

Before we start writing CSS we need to create an HTML structure.

在开始编写CSS之前，我们需要创建一个HTML结构 。

<div class="key" type="button">
  <span class="text">C</span>
</div>

Okay, we have a container with class .button and .text which contains the needed key letter. Let's add CSS to the .key class.

好的，我们有一个包含.button和.text类的容器，其中包含所需的键字母。 让我们将CSS添加到.key类。

.key {
  position: relative;
  z-index: 50;

  display: flex;
  justify-content: center;
  width: 20rem;
  height: 20rem;
  overflow: hidden;

  background-color: #b7ad9b;
  border: 1rem solid #857e71;
  border-radius: 3rem;
  cursor: pointer;

  transition: 0.1s;
}

Let's discuss some CSS properties.

让我们讨论一些CSS属性。

• z-index allows placing an item on a layer above or below it. For example, an element with z-index: 100 will be positioned higher and overlap the element with z-index: 50.

  z-index允许将项目放置在其上方或下方的层上。 例如， z-index：100的元素将位于较高位置，并与z-index：50的元素重叠。

• display: flex is a part of Flexbox which allows to position elements on the web-page. In our class .key justify-content: center; places elements in the center of the page along the X-axis. Note: Flexbox is a great tool nowadays. It is a modern approach to the creation of web-page layouts. I highly recommend you to learn it. There is a Flexbox Froggy. It is a fascinating game to learn Flexbox.

  显示：flex是Flexbox的一部分，它允许在网页上放置元素。 在我们的课程中， key 正当性内容：center; 将元素沿X轴放置在页面中心。 注意： Flexbox是当今的绝佳工具。 这是创建网页布局的现代方法。 我强烈建议您学习它。 有一个Flexbox Froggy 。 这是一个学习Flexbox的有趣游戏。

• overflow: hidden removes scrolling inside an element, and if there is too much content, it hides some of that content.

  溢出 ：隐藏可删除元素内的滚动，如果内容过多，则会隐藏其中的某些内容。

• 

  cursor: pointer change the cursor on the image of a pointing hand after hovering the cursor over an element.

  cursor ：将光标悬停在元素上之后， 指针会更改指向手形图像上的光标。

Okay, we got it covered. Now let's add styles to the class .text inside the class .key.

好吧，我们把它覆盖了。 现在让我们在.key类中的.text类中添加样式。

.key .text {
  position: relative;
  top: 2rem;
  z-index: 100;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 12rem;
  height: 12rem;

  font-size: 10rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #009bd1;

  background-color: #eee0ce;
  border: 1rem solid #f6e5d6;
  border-radius: 3rem;
  box-shadow: 
    0 -10rem 10rem 3rem #f6e5d6,
    inset 0rem -0.8rem 2rem #baaf9e;

  transition: 0.1s;

  -webkit-user-select:      none;
     -moz-user-select: -moz-none;
          user-select:      none;

   -khtml-user-select:      none;
       -o-user-select:      none;
}

I understand that you are now looking at the end of the class and your face looks like this picture:

我了解到您正在看完课程的结尾，您的脸像这张照片：

But keep calm. This set of weird properties just removes a selection of the text in different browsers. If you wish you can omit it. Let's discuss the most unclear properties of the class .text.

但是要保持冷静。 这组怪异的属性只会删除不同浏览器中的文本选择 。 如果您愿意，可以忽略它。 让我们讨论类.text的最不清楚的属性。

• top: 2rem; translates element with class .text on 2rem from the top of an element with class .key. It works only if you will write the property position: value.

  顶部：2rem; 从.key类的元素的顶部开始在2rem上转换.text类的元素。 仅当您将写入属性position ：value时，它才有效。

  Note: the rem unit sets the size relative to the font size of the html tag.

  注意： rem单位设置相对于html标签的字体大小的大小。

• transition: 0.1s; allows you to define the transition between two states of an element.

  过渡 ：0.1s; 允许您定义元素的两种状态之间的过渡。

• box-shadow creates the shadow for the element. If you write inset before its value the shadow will be inside. The full template of the box-shadow property: offset-x | offset-y | blur-radius | spread-radius | color.

  box-shadow为元素创建阴影。 如果在其值之前写入插图 ，则阴影将在其中。 box-shadow属性的完整模板： offset-x | 偏移量| 半径 扩散半径| 颜色 。

The result of our manipulations with .key and .text classes gives us something like this:

我们使用.key和.text类进行操作的结果为我们提供了以下内容：

We also need to add another stroke of a different color, as in this picture:

我们还需要添加另一种颜色的笔触，如下图所示：

It will be more rational if we do this with the pseudo-element ::before. Note: you can read about pseudo-elements here.

如果我们使用伪元素:: before这样做会更加合理。 注意：您可以在此处阅读有关伪元素的 信息 。

.key::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;

  width: 90%;
  height: 90%;

  border: 1rem solid #d9ccbc;
  border-radius: 2rem;
}

Okay, now we need to add an animation of the pressing on the 3D Keyboard Key. We can do it by using pseudo-class :active. it is triggered after we click on the element. Note: you can read about pseudo-classes here.

好的，现在我们需要在3D键盘按键上添加按下动画 。 我们可以使用伪类：active做到这一点。 单击元素后将触发该事件。 注意：您可以在此处阅读有关伪类的信息 。

.key:active {
  box-shadow: inset 0 -10rem 7rem #857e71;
}

.key:active .text {
  width: 11rem;
  height: 11rem;

  font-size: 9rem;
}

.key:active .text {
  width: 11rem;
  height: 11rem;

  font-size: 9rem;

  box-shadow: 0 -10rem 10rem 3rem #f6e5d6,
  inset 0rem 1rem 2rem #baaf9e;
}

This code creates a complex animation by changing some CSS property values after the user clicks on our Keyboad Key. It looks like this:

该代码通过在用户单击我们的Keyboad Key之后更改一些CSS属性值来创建复杂的动画。 看起来像这样：

It already looks cool and awesome. But it doesn't look like a preview image yet. We need to create a bulge effect on the key. We will do it by adding 4 elements in the HTML structure with an absolute position.

它看起来已经很酷了。 但是它看起来还不像预览图像。 我们需要在键上创建凸出效果 。 我们将通过在HTML结构中以绝对位置添加4个元素来完成此操作 。

<div class="key" type="button">
        <span class="text">C</span>

        <div class="angle-shadow left-top top-section"></div>
        <div class="angle-shadow right-top top-section"></div>
        <div class="angle-shadow left-bottom bottom-section"></div>
        <div class="angle-shadow right-bottom bottom-section"></div>
 </div>

Each of our elements has 3 classes:

我们的每个元素都有3个类：

• .angle-shadow adds common styles for each 4 elements.

  .angle-shadow为每个4个元素添加通用样式。

• .left(right)-top(bottom) adds styles that are unique to a particular element.

  .left(right)-top(bottom)添加特定元素独有的样式。

• .top-section and .bottom-section classify styles to the elements that are placed at the top and bottom of the element with class .key.

  .top -section和.bottom-section使用.key类将样式分类到元素的顶部和底部。

Let's look at the CSS code for these 4 elements.

让我们看一下这4个元素的CSS代码 。

1) .angle-shadow:

1) .angle-shadow ：

.angle-shadow {
  position: absolute;
}

2) .left(right)-top(bottom):

2) .left(right)-top(bottom) ：

.angle-shadow.top-section {
  top: 3rem;

  width: 7rem;
  height: 0.5rem;

  background-color: #f6e5d6;
  box-shadow: 0 0 1rem #f6e5d6;
}

.angle-shadow.bottom-section {
  bottom: 0rem;

  border-right: 1rem solid transparent;
  border-bottom: 9rem solid #dfd2bf;
  border-left: 1rem solid transparent;
}

You maybe have a question: "Why do I use border-right, border-bottom, etc.?" The answer is very simple. It needs to create a triangle in CSS. The value transparent just makes transparent the part of the rectangle. We simply fill in the corresponding triangle in the square with the desired color. This will be more clear if you look at this picture:

您可能会有一个问题：“ 为什么要使用border-right，border-bottom等？ ”答案很简单。 它需要在CSS中创建一个三角形 。 透明值只是使矩形的一部分透明。 我们只需在正方形中用所需的颜色填充相应的三角形即可。 如果您看这张图片，将会更加清楚：

Note: the code for the picture above you can find here.

注意：以上图片的代码可在此处找到。

3) Finally, we will add unique styles for every 4 elements:

3)最后，我们将为每4个元素添加独特的样式 ：

.angle-shadow.left-top {
  left: 0.5rem;
  transform: rotate(36deg);
}

.angle-shadow.right-top {
  right: 0.5rem;
  transform: rotate(-36deg);
}

.angle-shadow.left-bottom {
  left: 2.5rem;
  transform: rotate(30deg);
}

.angle-shadow.right-bottom {
  right: 2.5rem;
  transform: rotate(-30deg);
}

The transform: rotate(90 deg) property simply rotates the element by the specified degree.

transform：rotation(90 deg)属性只是将元素旋转指定的度数。

The final result of 3D Keyboard Key:

3D Keyboard Key的最终结果：

最终密码 (The Final Code)

The final code of the 3D Keyboard Key you can find in my CodePen account. Link: Single 3D Keyboard Key

您可以在我的CodePen帐户中找到3D键盘键的最终代码 。 链接： 单个3D键盘键

最终代码如预览图所示 (The Final Code like on the preview image)

Here is a code of 3 Keyboard Keys like on the preview image. it contains the code for a Long Keyboard Key. Link: 3D Keyboard Keys (with long Key)

这是3个键盘按键的代码，如预览图所示。 它包含长键盘键的代码。 链接： 3D键盘键(带长键)

结论 (Conclusion)

I think this article was useful for you and you learned something new about CSS and HTML. If so, you can vote below and leave a comment.

我认为本文对您很有用，并且您了解了CSS和HTML的新知识。 如果是这样，您可以在下面投票并发表评论。

我的社交网络 (My social networks)

Also if you want to get notifications about my new articles you can follow me in Medium and my Twitter account:

另外，如果您想获得有关我的新文章的通知，则可以在Medium和我的Twitter帐户中关注我：

• Twitter

  推特

• Medium

  中

If you have questions or you interested in my articles, you can check and subscribe on my social media:

如果您有问题或对我的文章感兴趣，可以在我的社交媒体上查看和订阅：

• GitHub

  的GitHub

• Telegram

  电报

• VK

  VK

翻译自: https://habr.com/en/post/490562/

键盘左右键改变css样式