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


#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");
}


#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");
}