Испытание: иконки iOS [6/23]

Курсы §19. Линейные градиенты
1

html,
body {
margin: 0;
padding: 0;
}

body {
width: 500px;
height: 500px;
background-color: #f5f5f5;
}

.icon {
float:left;
width: 220px;
height: 220px;
margin: 20px;
margin-bottom: 0;
margin-right: 0;
border-radius: 45px;
background-color: #cccccc;
}

.messages {
background-image: linear-gradient(180deg, #86ff65, #06d315)
/* градиент от #86ff65 к #06d315 */
}

.weather {
background-image: linear-gradient (#1f76ed, #70edfe)
/* градиент от #1f76ed к #70edfe */
}

.camera {
background-image: linear-gradient ( #f7f7f7, #898b91)
/* градиент от #f7f7f7 к #898b91 */
}

.itunes {
background-image: linear-gradient ( 145deg, #fb5bc4, #a645fe)
/* градиент от #fb5bc4 к #a645fe */
}

.icon-inner {
height: 220px;
background-repeat: no-repeat;
background-position: 50% 50%;
}

.messages .icon-inner {
background-image: url("/assets/course70/messages.png");
}

.weather .icon-inner {
background-image: url("/assets/course70/weather.png");
}

.camera .icon-inner {
background-image: url("/assets/course70/camera.png");
}

.itunes .icon-inner {
background-image: url("/assets/course70/itunes.png");
}

2

Покажите свой код.

3

html,
body {
margin: 0;
padding: 0;
}

body {
width: 500px;
height: 500px;
background-color: #f5f5f5;
}

.icon {
float:left;
width: 220px;
height: 220px;
margin: 20px;
margin-bottom: 0;
margin-right: 0;
border-radius: 45px;
background-color: #cccccc;
}

.messages {
background-image: linear-gradient(180deg, #86ff65, #06d315)
/* градиент от #86ff65 к #06d315 */
}

.weather {
background-image: linear-gradient (#1f76ed, #70edfe)
/* градиент от #1f76ed к #70edfe */
}

.camera {
background-image: linear-gradient ( #f7f7f7, #898b91)
/* градиент от #f7f7f7 к #898b91 */
}

.itunes {
background-image: linear-gradient ( 145deg, #fb5bc4, #a645fe)
/* градиент от #fb5bc4 к #a645fe */
}

.icon-inner {
height: 220px;
background-repeat: no-repeat;
background-position: 50% 50%;
}

.messages .icon-inner {
background-image: url("/assets/course70/messages.png");
}

.weather .icon-inner {
background-image: url("/assets/course70/weather.png");
}

.camera .icon-inner {
background-image: url("/assets/course70/camera.png");
}

.itunes .icon-inner {
background-image: url("/assets/course70/itunes.png");
}

4

О том, как задавать направление градиентам, было в теории: https://htmlacademy.ru/courses/70/run/2

5

Полный код 100%

html,
body {
margin: 0;
padding: 0;
}

body {
width: 500px;
height: 500px;
background-color: #f5f5f5;
}

.icon {
float:left;
width: 220px;
height: 220px;
margin: 20px;
margin-bottom: 0;
margin-right: 0;
border-radius: 45px;
background-color: #cccccc;
}

.messages {
/* градиент от #86ff65 к #06d315 */
background-image: linear-gradient(#86ff65, #06d315);
}

.weather {
/* градиент от #1f76ed к #70edfe */
background-image: linear-gradient(to right, #1f76ed, #70edfe);
}

.camera {
/* градиент от #f7f7f7 к #898b91 */
background-image: linear-gradient(to bottom, #f7f7f7, #898b91);
}

.itunes {
/* градиент от #fb5bc4 к #a645fe */
background-image: linear-gradient(to right, #fb5bc4, #a645fe);
}

.icon-inner {
height: 220px;
background-repeat: no-repeat;
background-position: 50% 50%;
}

.messages .icon-inner {
background-image: url("/assets/course70/messages.png");
}

.weather .icon-inner {
background-image: url("/assets/course70/weather.png");
}

.camera .icon-inner {
background-image: url("/assets/course70/camera.png");
}

.itunes .icon-inner {
background-image: url("/assets/course70/itunes.png");
}

1 лайк
6

Код 93%

Код

html,
body {
margin: 0;
padding: 0;
}

body {
width: 500px;
height: 500px;
background-color: #f5f5f5;
}

.icon {
float:left;
width: 220px;
height: 220px;
margin: 20px;
margin-bottom: 0;
margin-right: 0;
border-radius: 45px;
background-color: #cccccc;
}

.messages {
/* градиент от #86ff65 к #06d315 */
background-image: linear-gradient(to top right, #86ff65, #06d315);
}

.weather {
/* градиент от #1f76ed к #70edfe */
background-image: linear-gradient(to right bottom,#1f76ed,#70edfe)
}

.camera {
/* градиент от #f7f7f7 к #898b91 */
background-image: linear-gradient(to top, #898b91, #f7f7f7);
}

.itunes {
/* градиент от #fb5bc4 к #a645fe */
background-image: linear-gradient(to top right, #fb5bc4 ,#a645fe )
}

.icon-inner {
height: 220px;
background-repeat: no-repeat;
background-position: 50% 50%;
}

.messages .icon-inner {
background-image: url("/assets/course70/messages.png");
}

.weather .icon-inner {
background-image: url("/assets/course70/weather.png");
}

.camera .icon-inner {
background-image: url("/assets/course70/camera.png");
}

.itunes .icon-inner {
background-image: url("/assets/course70/itunes.png");
}

7

Самый простой способ 100%
image

8

.messages {
/* градиент от #71d5f4 к #337cd2 */
background-image: linear-gradient(#71d5f4, #337cd2);

}

.weather {
/* градиент от #ff792e к #ffe662 */
background-image: linear-gradient(to right top, #ff792e, #ffe662);
}

.camera {
/* градиент от #9a66ba к #f98edb */
background-image: linear-gradient(to right, #9a66ba, #f98edb);
}

.music {
/* градиент от #6ffc75 к #4cb350 */
background-image: linear-gradient(to bottom right, #6ffc75, #4cb350);
}

2 лайка
9

100%

.messages {
background-image: linear-gradient(180deg, #71d5f4, #337cd2);
}

.weather {
background-image: linear-gradient(45deg,#ff792e, #ffe662);
}

.camera {
background-image: linear-gradient(to right, #9a66ba, #f98edb);
}

.music {
background-image: linear-gradient(to right bottom, #6ffc75, #4cb350);
}