使用CSS3和HTML5 5个简单步骤创建便签效果

在本教程中，您将学习如何将 html 列表转换为“便笺”墙，其外观和工作方式如下：

效果逐渐建立，适用于所有最新的浏览器，如 chrome、safari、Firefox 和 Opera。较旧的浏览器只会得到一些黄色方块。

第 1 步：HTML 和基本方块

我们将使用一些适用于所有浏览器的通用 css 属性。由于我们使用 html5 实现效果，便笺的基本 HTML 是一个无序列表，其中包含一个包含每个列表项中所有其他元素的链接：

<ul>
  <li>
    <a href="#">
      <h2>Title #1</h2>
      <p>Text Content #1</p>
    </a>
  </li>
  <li>
    <a href="#">
      <h2>Title #2</h2>
      <p>Text Content #2</p>
    </a>
  </li>
  […]
</ul>

请注意，每个注释都被一个链接包围。这是用于交互式项目的好元素，因为它自动意味着我们的笔记可以通过键盘访问。如果我们使用列表项来实现效果，我们需要设置一个tabindex 属性来获得相同的访问权限。

把它变成黄色方块的 CSS 很简单：

body {
  margin: 20px auto;
  font-family: 'Lato';
  background:#666;
  color:#fff;
}

*{
  margin:0;
  padding:0;
}

h2 {
  font-weight: bold;
  font-size: 2rem;
}

p {
  font-size: 1rem;
  font-weight: normal;
}

ul,li{
  list-style:none;
}
ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:10em;
  width:10em;
  padding:1em;
}
ul li{
  margin:1em;
}

我们重置浏览器通常给我们的东西，比如边距和填充以及列表样式，以摆脱列表中的项目符号。

我们希望列表项并排。我们会使用 float 属性来实现这一点。但是，我们现在可以使用功能更强大的 flexbox 布局模块。这使我们可以很容易地将元素放置在二维布局中。

我们所要做的就是将 display 属性 设置flex 为 ul 元素。这会将我们所有的列表项放在一行中。列表元素将在某个时候开始溢出。避免这种情况的最佳方法是使用该 flex-wrap 属性并将其值设置为 wrap. 额外的元素现在将继续移动到下一行而不是溢出。

我们将链接样式设置为黄色矩形，并将所有列表项浮动到左侧。结果是我们列表的一系列黄色框：

目前所有主流浏览器都支持 Flexbox。 在撰写本教程时，这涵盖了大约 98.5% 的用户。如果需要支持旧版浏览器，可以考虑使用 float 来布局元素。

第 2 步：阴影和涂鸦字体

现在是时候为笔记添加阴影以使其突出，并使用潦草的手写字体作为笔记字体。为此，我们使用谷歌字体 和他们提供给我们的字体，称为“Reenie Beanie”和“Lato”。

使用它，我们得到一行简单的 HTML 来将这个新字体包含到页面中。所有现代浏览器都支持这一点。

<link href="https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap" rel="stylesheet">

然后我们可以为便笺中的标题设置一些填充，并将段落的字体设置为我们包含的新字体。请注意，Reenie Beanie 需要很大才能可读：

h2 {
  font-weight: bold;
  font-size: 2rem;
}
p {
  font-family: 'Reenie Beanie';
  font-size: 2rem;
}

为了给便笺添加阴影以使它们从页面中脱颖而出，我们需要应用 box-shadow. 今天使用的大多数浏览器都支持此属性，而无需使用前缀。

ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:10em;
  width:10em;
  padding:1em;
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
}

该 box-shadow属性设置阴影的偏移、扩散和颜色：在本例中，为不透明度为 70% 的深灰色。加上新字体，我们的便签现在看起来像这样：

第 3 步：倾斜音符

音符的倾斜和我们将在下一步中添加的缩放都已经在 Zurb 的这篇文章中解释过。非常感谢他们发布了这个技巧。

为了倾斜元素，您使用transform:rotate CSS3 的属性，再次为每个浏览器添加前缀：

ul li a{
  transform: rotate(-6deg);
}

这会将所有链接向左倾斜 6 度。现在，为了让便签看起来随机倾斜，我们可以使用 nth-child CSS3 的属性：

ul li:nth-child(even) a{
  transform:rotate(4deg);
  position:relative;
  top:5px;
}
ul li:nth-child(3n) a{
  transform:rotate(-3deg);
  position:relative;
  top:-5px;
}
ul li:nth-child(5n) a{
  transform:rotate(5deg);
  position:relative;
  top:-10px;
}

这将每隔一个链接向右倾斜 4 度，并从顶部偏移 5 个像素。每三个链接向左倾斜 3 度并向上推 5 个像素。每五个链接向右旋转 5 度，并从底部偏移 10 个像素。总而言之，这给人一种随机便签的印象：

第 4 步：缩放悬停和聚焦的便笺

为了使便签脱颖而出，我们使用了更大的阴影和scale CSS3 的转换。

ul li a:hover,ul li a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  transform: scale(1.25);
  position:relative;
  z-index:5;
}

我们还添加了一个更高的值 z-index ，以确保放大的便签覆盖其他内容。当我们将其应用于悬停和焦点时，这意味着现在将鼠标移到链接上或切换到链接会使其脱颖而出：

第 5 步：添加平滑过渡和颜色

最后一步是使从倾斜到缩放的变化平滑且吸引人，而不是突然的。为此，我们 在其不同的浏览器供应商实现中使用CSS3 转换模块：

ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:10em;
  width:10em;
  padding:1em;
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  transition: transform .15s linear;
}

本质上，这就是说：如果要改变这个元素，不要只是切换到另一个定义，而是在四分之一秒内逐渐改变。作为另一个附加功能，让我们通过将每第二个便签变成绿色和每三个浅蓝色来添加一些颜色：

ul li:nth-child(even) a{
  position:relative;
  top:5px;
  background:#cfc;
}
ul li:nth-child(3n) a{
  position:relative;
  top:-5px;
  background:#ccf;
}

您的便笺现在应该如下图所示：

第 6 步：使便笺可编辑

使便笺可编辑的最简单方法是 contenteditable 在所有链接上使用该属性。这将允许用户在标题或便笺的内容内单击并更改它。

但是，如果用户重新加载页面，这些更改将不会生效。我们可以通过使用一些 javascript 来改变它。在网页上加载最新版本的 jquery，然后添加以下 JavaScript。

我们将 localstorage 用于存储关于我们的便签的数据。将 key基于我们列表项的索引，其 value 将是便签的标题和内容。

all_notes = $("li a");

all_notes.on("keyup", function () {
  note_title = $(this).find("h2").text();
  note_content = $(this).find("p").text();

  item_key = "list_" + $(this).parent().index();

  data = {
    title: note_title,
    content: note_content
  };

  window.localStorage.setItem(item_key, JSON.stringify(data));
});

上面的代码将一个事件附加 keyup到所有便笺上。每当用户在便笺的标题或内容中键入内容时，我们都会使用该 text() 方法获取其内容。该数据 localStorage 通过使用便笺的索引作为键存储在浏览器中。

localStorage 如果我们无法检索更新的列表并将其显示给用户，那么将更新的列表存储在 其中就毫无用处。以下代码将遍历所有列表项并检查它们在 localStorage. 如果密钥存在，我们会从中提取标题和内容，并更新列表项的 HTML。

all_notes.each(function (index) {
  data = JSON.parse(window.localStorage.getItem("list_" + index));

  if (data !== null) {
    note_title = data.title;
    note_content = data.content;

    $(this).find("h2").text(note_title);
    $(this).find("p").text(note_content);
  }
});

有了这段代码，您现在应该尝试编辑任何粘性项目并重新加载页面以查看更改是否生效。这是我的便签的截图。

这是您需要在一个地方使用的完整 javaScript 代码。请确保您还在页面上加载 了jQuery  。

$(document).ready(function () {
  all_notes = $("li a");

  all_notes.on("keyup", function () {
    note_title = $(this).find("h2").text();
    note_content = $(this).find("p").text();

    item_key = "list_" + $(this).parent().index();

    data = {
      title: note_title,
      content: note_content
    };

    window.localStorage.setItem(item_key, JSON.stringify(data));
  });

  all_notes.each(function (index) {
    data = JSON.parse(window.localStorage.getItem("list_" + index));

    if (data !== null) {
      note_title = data.title;
      note_content = data.content;

      $(this).find("h2").text(note_title);
      $(this).find("p").text(note_content);
    }
  });
});

概括

有了它——流畅的动画和倾斜的便签。Firefox、Opera、Safari 和 Chrome 都支持所有这些，并且在旧版浏览器中回退到一组黄色框。通过巧妙地使用nth-child选择器和 CSS 转换和过渡，我们节省了一些脚本。

此外，Google 的 Web Font API 使自定义字体的使用变得容易。同时使用悬停和焦点效果意味着键盘用户也可以观察结果。我们还能够通过使用一些 JavaScript 为便签添加一些有用的功能。