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

Question

有人知道如何让这很容易吗？我是初学者，我希望在我的网站上有3个图标，可以在学校创建一个基于icloud的网站。 我只是不知道该怎么做，我已经做了一些研究，但我没有找到任何东西。检查元素有点难以理解......欢迎任何帮助！

iCloud Exemple

Answer 1

试试这个：

.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>

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

这个怎么样：

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

了解详情

Assembly app也是我最喜欢的图形应用程序。

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