如何制作像 iCloud 一样的图标？

Question

有人知道如何让这一切变得非常简单吗？我是初学者，希望在我的网站上有 3 个图标，以便为学校的任务制作一个基于 icloud 的网站。我只是真的不知道该怎么做，我已经做了一些研究，但我什么也没找到。检查元素有点难以理解......欢迎任何帮助！

iCloud Exemple

Answer 1

这个怎么样：

在 https://www.google.com/search?q=icloud+icon

找到更多

此外，Assembly app 是我最喜欢的图形应用程序。

您可以使用它通过拖放形状来制作高分辨率图标。它制作 4096x4096 图形。它也是免费的，但现在有更多功能的付费订阅。因为我在订阅之前就有了应用程序，所以他们免费给了我。

Answer 2

这将是您作业的开始:)

body {
  background: red;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, red, yellow);
  /* For Safari     5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, red, yellow);
  /* For Opera 11.1     to 12.0 */
  background: -moz-linear-gradient(bottom right, red, yellow);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, red, yellow);
  /* Standard syntax */
}

div.one,
div.two,
div.three {
  float: left;
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 12px;
  margin: 20px;
  text-align: center;
}

<div class="one">Some text</div>
<div class="two">Some text</div>
<div class="three">Some text</div>

Answer 3

试试这个：

.icloud-icon-container {
    vertical-align: middle;
    text-align: center;
    left: 10%;
    position: relative;
    display: table-cell;
}

.icloud-icon {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  border-radius: 50px;
  margin: 20px;
  text-align: center;
  border: 1px solid #e2e2e2;
}

.icloud-icon-label {
   text-align: center;
}

<div class="container">
  <div class="row">
    <div class="col-md-12 icloud-icon-container">
      <div class="icloud-icon"></div>
      <p class="icloud-icon-label">Icon Title</p>
    </div>
  </div>
</div>

如何制作像 iCloud 一样的图标？

How to make icons like iCloud?

html

css

icloud

此外，Assembly app 是我最喜欢的图形应用程序。