HTML Academy Мастерская: декоративные эффекты на CSS3 / Испытание: статистика браузеров [19/31] - 100%, прошу проверить код.

Курсы §24. Мастерская: декоративные эффекты. Часть 2
1

Здравствуйте, скажите пожалуйста, всё ли правильно я сделал?

CSS:

html,
body {
    width: 550px;
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
    color: #333333;
    background-color: #f5f5f5;
}

main {
    position: relative;
    display: block;
    width: 500px;
    height: 300px;
    margin: 0 auto;
}

h1 {
    margin: 0;
    margin-bottom: 10px;
    padding: 10px 0;
}

.pie-container {
    position: relative;
    float: left;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8);
}

.pie-container::after {
    content: "";
    position: absolute;
    top: 25%;
    left: 25%;
    z-index: 50;
    width: 50%;
    height: 50%;
    color: white;
    background-color: #f5f5f5;
    border-radius: 50%;
    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.8);
}

.pie-container .pie {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #aaaaaa;
    border-radius: 50%;
    clip: rect(0px, 75px, 150px, 0px);
}

.pie-container .pie:first-child {
    z-index: 10;
    background-color: #aaaaaa;
    transform: rotate(-20deg);
}

.pie-container .pie:nth-child(2)  {
    z-index: 20;
    background-color: #0074d9;
    transform: rotate(160deg);
}

.pie-container .pie:nth-child(3)  {
    z-index: 30;
    background-color: #ff851b;
    transform: rotate(20deg);
}

.pie-container .pie:nth-child(4)  {
    z-index: 40;
    background-color: #2ecc40;
    transform: rotate(100deg);
}

.stats {
    float: left;
    margin-left: 50px;
}

ul {
   list-style: none;
}

li {
    position: relative;
    margin: 10px 0;
}

.stats li::before {
    content: "";
    position: absolute;
    top: 2px;
    left: -25px;
    width: 15px;
    height: 15px;
    background-color: #aaaaaa;
}

.stats li:first-child::before {
    background-color: #2ecc40;
}

.stats li:nth-child(2)::before {
    background-color: #ff851b;
}

.stats li:nth-child(3)::before {
    background-color: #0074d9;
}
2

Что-то псевдоклассов много у вас. Разве у элементов .pie и li в разметке не было дополнительных классов?

1 лайк
3

Так будет правильно?

html,
body {
    width: 550px;
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
    color: #333333;
    background-color: #f5f5f5;
}

main {
    position: relative;
    display: block;
    width: 500px;
    height: 300px;
    margin: 0 auto;
}

h1 {
    margin: 0;
    margin-bottom: 10px;
    padding: 10px 0;
}

.pie-container {
    position: relative;
    float: left;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8);
}

.pie-container::after {
    content: "";
    position: absolute;
    top: 25%;
    left: 25%;
    z-index: 50;
    width: 50%;
    height: 50%;
    color: white;
    background-color: #f5f5f5;
    border-radius: 50%;
    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.8);
}

.pie-container .pie {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #aaaaaa;
    border-radius: 50%;
    clip: rect(0px, 75px, 150px, 0px);
}

.pie-container .pie[id="safari"] {
    z-index: 10;
    background-color: #aaaaaa;
    transform: rotate(-20deg);
}

.pie-container .pie[id="ie"] {
    z-index: 20;
    background-color: #0074d9;
    transform: rotate(160deg);
}

.pie-container .pie[id="firefox"] {
    z-index: 30;
    background-color: #ff851b;
    transform: rotate(20deg);
}

.pie-container .pie[id="chrome"] {
    z-index: 40;
    background-color: #2ecc40;
    transform: rotate(100deg);
}

.stats {
    float: left;
    margin-left: 50px;
}

ul {
   list-style: none;
}

li {
    position: relative;
    margin: 10px 0;
}

.stats li::before {
    content: "";
    position: absolute;
    top: 2px;
    left: -25px;
    width: 15px;
    height: 15px;
    background-color: #aaaaaa;
}

li[data-name="Chrome"]::before {
    background-color: #2ecc40;
}

li[data-name="Firefox"]::before {
    background-color: #ff851b;
}

li[data-name="Internet Explorer"]::before {
    background-color: #0074d9;
}
4

Интересно вышли из положения)
Но если этот вариант мне нравится: li[data-name="Chrome"]::before, то такое .pie[id="safari"] - нет. Не могу сказать, что так писать нельзя, но зачем усложнять? Могли обратиться к элементу только по id.
Обращайтесь к элементам по классу, если это возможно или используйте контекстные селекторы. Чтобы не получалось так:

Вроде бы стилизуете элементы li внутри stats, а в итоге выбираете все на странице.

1 лайк
5

Исправился:

html,
body {
    width: 550px;
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
    color: #333333;
    background-color: #f5f5f5;
}

main {
    position: relative;
    display: block;
    width: 500px;
    height: 300px;
    margin: 0 auto;
}

h1 {
    margin: 0;
    margin-bottom: 10px;
    padding: 10px 0;
}

.pie-container {
    position: relative;
    float: left;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8);
}

.pie-container::after {
    content: "";
    position: absolute;
    top: 25%;
    left: 25%;
    z-index: 50;
    width: 50%;
    height: 50%;
    color: white;
    background-color: #f5f5f5;
    border-radius: 50%;
    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.8);
}

.pie-container .pie {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #aaaaaa;
    border-radius: 50%;
    clip: rect(0px, 75px, 150px, 0px);
}

.pie-container [id="safari"] {
    z-index: 10;
    background-color: #aaaaaa;
    transform: rotate(-20deg);
}

.pie-container [id="ie"] {
    z-index: 20;
    background-color: #0074d9;
    transform: rotate(160deg);
}

.pie-container [id="firefox"] {
    z-index: 30;
    background-color: #ff851b;
    transform: rotate(20deg);
}

.pie-container [id="chrome"] {
    z-index: 40;
    background-color: #2ecc40;
    transform: rotate(100deg);
}

.stats {
    float: left;
    margin-left: 50px;
}

.stats ul {
   list-style: none;
}

.stats li {
    position: relative;
    margin: 10px 0;
}

.stats li::before {
    content: "";
    position: absolute;
    top: 2px;
    left: -25px;
    width: 15px;
    height: 15px;
    background-color: #aaaaaa;
}

.stats li[data-name="Chrome"]::before {
    background-color: #2ecc40;
}

.stats li[data-name="Firefox"]::before {
    background-color: #ff851b;
}

.stats li[data-name="Internet Explorer"]::before {
    background-color: #0074d9;
}
6

#safari будет короче) В остальном хорошо.

1 лайк
7

Хотелось бы понять зачем в этом уроке у каждого элемента li - data-name="#"
нужно как то использовать content: attr(data-name)? или как у товарища SNPR?
я не понял, но задачу на 100% реализовал

в уроке - я так понимаю, это статично. вот мне теперь больше стало интересно как на таком ресурсе динамически % подбирается, с помощью js, jquery и формулы меняется размер закрашиваемой части диаграммы? …

toggl

RxF7z9N_Q3mIBI5gN0L9IA
RxF7z9N_Q3mIBI5gN0L9IA.png816×639 33.5 KB