Испытание: ювелирная работа [33/33] Помогите

ekaterina94 · 24.Август.2016 15:15:46

Пожалуйста, помогите разобраться! Не поняла совсем ничего. Честно говоря, толком не поняла даже какие селекторы за что отвечают и почем где что появляется. У кого хватит терпения? Очень хочу понять?
`.stone {
position: absolute;
}

.stone:before,
.stone:after{
content: “”;
position: absolute;
border-style: solid;
}

.rhombo {
bottom: 70px;
left: 50px;
}

.penta {
top: 20px;
right: 40px;
width: 100px;
height: 100px;
overflow: hidden;
}

.hexa {
top: 50px;
left: 40px;
width: 80px;
height: 40px;
}

.octa {
right: 45px;
bottom: 50px;
width: 90px;
height: 35px;
}

.octa {
background-color: #7fdbff;
}

.hexa {
background-color: #2ecc40;
}

.octa::before {
width: 30px;
border-color: #7fdbff transparent;
}

.penta::before {
border-color: #ff4136 transparent;
}

.hexa::before{
border-color: #2ecc40 transparent;
}

.octa::before {
top: -30px;
border-width: 0 30px 30px;
}

.penta {
border-width: 0 50px 50px;
}

.hexa::after {
bottom: -30px;
border-width: 30px 40px 0;
}

.hexa::before {
top: -30px;
border-width: 0 40px 30px;
}

.rhomba::after {
border-width: 50px 30px;
border-color: #ffdc00 transparent;
}

.penta::before {
top: 50px;
border-width: 100px 50px 0;
}

.rhomba::before {
top: 0;
border-bottom: 0;
}

.octa::{
bottom: -30px;
border-width: 30px 30px 0;
}

.rhomba:: {
bottom: 0;
border-top: 0;
}`

Ineska · 24.Август.2016 18:52:30

Попробуйте рисовать фигуры на листочке, именно частями, из которых они состоят.

ekaterina94 · 25.Август.2016 04:44:14

Я правильно разделила?

Я хочу задать немного глупые наверно вопросы, но только так смогу разобраться:

Не поняла, как сделать вторую часть ромба. Там же вначале получаются песочные часы, часть которых скрывается?
Я не совсем поняла откуда идет отсчет координат? Ведь ни какому элементу не задано относительное позиционирование?
border-width: 30px 30px 0; что означает селектор такого рода, точнее его значение? Я с таким никогда не сталкивалась и в заданиях тоже. Я примерно понимаю, но боюсь ошибиться.
border-top: 0; Или вот этот селектор. Как минимум к нему должно быть добавлено color, width или style?
И еще вопросик? У меня совсем все неправильно? или есть участки, которые не стоит трогать?

Ineska · 25.Август.2016 15:46:53

На самом деле не совсем так, как вы нарисовали. Но обо всем по порядку.
Вся сложность задания в том, что все правила перемешаны и стили в них уже сгруппированы.
Например, вот это правило:
.stone::before, .stone::after {
content: “”;
position: absolute;
border-style: solid;
}
Оно задает общие для всех псевдоэлементов свойства content, абсолютное позиционирование (в следующих правилах вы видим только координаты) и стиль рамки - сплошная (всё-таки все фигуры имеют сплошную заливку).

Для того, чтобы выполнить задание, нужно вспомнить, как делается треугольник из рамки. Об этом рассказывается в заданиях с 25 по 27 ( https://htmlacademy.ru/courses/88/run/25).
Также надо знать как работает свойство border и все его сокращенные записи.
А теперь вернемся к фигурам. Каждая из них состоит из основного блока и двух его псевдоэлементов.
Первую фигуру .hexa вы нарисовали верно. Только нижний псевдоэлемент получился черного цвета. А всё потому что в следующем правиле вы его не упомянули:
.hexa::before, .hexa::after {
border-color: #2ecc40 transparent;
}
По похожему принципу строится последняя фигура, .octa, только псевдоэлементы являются не треугольниками, потому что у них есть ширина 30px, а значит угол будет не острый, а как бы обрезанный.
Для этой фигуры у вас так же не хватает нижнего элемента :after.
.octa::before, .octa::after {
width: 30px;
border-color: #7fdbff transparent;
}
И ему не заданы координаты местоположения:
.octa::after{
bottom: -30px;
border-width: 30px 30px 0;
}
Следующая фигура .penta - единственная где используется свойство overflow. В данном случае псевдоэлементы направлены не в стороны от основного блока, а вовнутрь элемента, и за счет свойства overflow нижний псевдоэлемент обрезается. Посмотрите, как выглядит на самом деле эта фигура:

Красным цветом показан сам блок .penta, а нижний “хвост” прячется. Про свойство overflow вы можете почитать отдельно здесь.
Таким образом, цвет снова задается сразу для обоих псевдоэлементов:
.penta::before, .penta::after {
border-color: #ff4136 transparent;
}
Сверху один псевдоэлемент:
.penta::before {
border-width: 0 50px 50px;
}
А снизу другой, вытянутый вниз:
.penta::after {
top: 50px;
border-width: 100px 50px 0;
}
Осталась последняя фигура - .rhomba. В этой фигуре основной блок не имеет размеров и она складывается только из псевдоэлементов.
Это правило задает стили сразу для двух псевдоэлементов:
.rhomba::after, .rhomba::before {
border-width: 50px 30px;
border-color: #ffdc00 transparent;
}
Получается двое “песочных часов”, но поскольку координаты у них одинаковые, то они наслаиваются друг на друга. Затем с помощью координат top: 0; для ::before и bottom: 0; для ::after “песочные часы” выстраиваются в одну вертикальную линию:

Остается убрать у одного псевдоэлемента верхнюю рамку, а у другого - нижнюю.
.rhomba::before {
top: 0;
border-bottom: 0;
}
.rhomba::after {
bottom: 0;
border-top: 0;
}
По поводу вашего второго вопроса о системе координат. Относительное позиционирование задано у белого блока .chest “за кадром”. Эти стили от вас скрыты, но их можно посмотреть в инспекторе:

На остальные вопросы я отвечала по ходу разбора задания.

ekaterina94 · 27.Август.2016 04:42:35

Огромное спасибо! Все сделала)

vctr477 · 30.Ноябрь.2016 22:40:06

Я немного не по теме, у я так понимаю ты пользуешься mozilla, в нём встроенный инспектор на русском? Не знаешь как сделать в хроме, всё на анг, немного тяжко новичку

Ineska · 01.Декабрь.2016 06:08:05

Да, в мозиле на русском. На счет хрома не знаю, на моей версии линукса он не обслуживается.

raulco · 24.Декабрь.2016 21:22:22

Спасибо за подробную подсказку Хотелось бы уточнить, координаты top, bottom и т.д. относительно чего задаются? Не совсем понял точку отсчета для построения фигур.

Ineska · 24.Декабрь.2016 21:31:36

Об этом написано, в самом конце. У родителя .chest задано относительное позиционирование.

raulco · 25.Декабрь.2016 05:35:40

т.е. отсчет координат идет от белого бэкграунда так?

Ineska · 25.Декабрь.2016 06:50:47

Проверьте.

Aleksey_Agapov · 05.Февраль.2017 19:00:06

2 часа пота и 100% готовы, только не совсем еще разобрался.
А последний делал ромб…ВСЕ ПЕРЕЛОПАТИЛ, не получается и все этот ромб))
оказалась маленькая офографическая ошибка в слове RHOMBA :писал RHOMA…
Пропустил в одном месте и найти не мог.

.stone {
position: absolute;
}

.stone::before, .stone::after {
content: “”;
position: absolute;
border-style: solid;
}

.rhomba {
bottom: 70px;
left: 50px;
}

.penta {
top: 20px;
right: 40px;
width: 100px;
height: 100px;
overflow: hidden;
}

.hexa{
top: 50px;
left: 40px;
width: 80px;
height: 40px;
}

.octa {
right: 45px;
bottom: 50px;
width: 90px;
height: 35px;
}

.octa {
background-color: #7fdbff;
}

.hexa {
background-color: #2ecc40;
}

.octa::before, .octa::after {
width: 30px;
border-color: #7fdbff transparent;
}

.penta::before, .penta::after {
border-color: #ff4136 transparent;
}

.hexa::before, .hexa::after {
border-color: #2ecc40 transparent;
}

.octa::before {
top: -30px;
border-width: 0 30px 30px;
}

.penta::after{
border-width: 0 50px 50px;
}

.hexa::after {
bottom: -30px;
border-width: 30px 40px 0;
}

.hexa::before {
top: -30px;
border-width: 0 40px 30px;
}
.rhomba::before, .rhomba::after {
border-width: 50px 30px;
border-color: #ffdc00 transparent;
}

.penta::before{
top: 50px;
border-width: 100px 50px 0;
}

.rhomba::before {
top: 0;
border-bottom: 0;
}

.octa::after {
bottom: -30px;
border-width: 30px 30px 0;
}

.rhomba::after {
bottom: 0;
border-top: 0;
}

laid_off_guy · 28.Июнь.2017 12:08:21

Всем привет. Я так понял, что сами блоки фигур позиционируются от относительно спозиционированного блока .chest, а псевдоэлементы позиционируются от абсолютно спозиционированных блоков фигур. Кстати, в курсах есть информация о позиционировании абсолютных элементов от относительных, а информации о позиционировании абсолютных от абсолютных вроде бы нету. Может стоит дописать о такой возможности?

Globomen · 11.Июль.2018 13:33:56

Спасибо!
Выполнить, выполнил задание, но не все понял, как и многие потратил не один час на это задание (пришлось подсмотреть на форуме первый элемент),
Благодаря вашему разбору что-то начало проясняться в голове!

UraFIZ · 22.Июль.2018 14:23:03

Самое сложное в этом задание это замысловатость написаных редакцией сайта css правил. Я делал по-своему, попростому. Оно и яснее читается и дает тот же результат.

nerealist · 08.Сентябрь.2018 12:35:55

Тупо методом подбора, подсмотрев первую фигуру здесь, слишком замороченное задание, мне кажется написать с нуля такое во много раз легче, чем подбирать селекторы к уже написанному коду такого типа…

P.s. рад, что прошел этот курс уже, прям очень тяжко дался из всех не знаю почему…

мой вариант

.stone {
    position: absolute;
}

.stone::before,
.stone::after {
    content: "";
    position: absolute;
    border-style: solid;
}

.rhomba{
    bottom: 70px;
    left: 50px;
}

.penta {
    top: 20px;
    right: 40px;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

.hexa {
    top: 50px;
    left: 40px;
    width: 80px;
    height: 40px;
}

.octa {
    right: 45px;
    bottom: 50px;
    width: 90px;
    height: 35px;
}

.octa{
    background-color: #7fdbff;
}

.hexa {
    background-color: #2ecc40;
}

.octa::before, 
.octa::after {
    width: 30px;
    border-color: #7fdbff transparent;
}

.penta::after, 
.penta::before {
    border-color: #ff4136 transparent;
}

.hexa::after,
.hexa::before {
    border-color: #2ecc40 transparent;
}

.octa::before {
    top: -30px;
    border-width: 0 30px 30px;
}

.penta::before{
    border-width: 0 50px 50px;
}

.hexa::after{
    bottom: -30px;
    border-width: 30px 40px 0;
}

.hexa::before {
    top: -30px;
    border-width: 0 40px 30px;
}

.rhomba::after, 
.rhomba::before {
    border-width: 50px 30px;
    border-color: #ffdc00 transparent;
}

.penta::after {
    top: 50px;
    border-width: 100px 50px 0;
}

.rhomba::before{
    top: 0;
    border-bottom: 0;
}

.octa::after {
    bottom: -30px;
    border-width: 30px 30px 0;
}

.rhomba::after {
    bottom: 0;
    border-top: 0;
}

karybsky · 28.Октябрь.2018 00:38:38

Передаю привет всем, кто методом перебора выполнил задание на 100%, но ничего в итоге не понял, и хочу сказать им: РЕБЯТА, Я С ВАМИ!

Hierumo · 06.Ноябрь.2018 10:20:02

согласен с вами, такое ощущение, что проходил тему не про рамки, а про селекторы (какое там уже по счету?)
я думал дадут задание написать самому фигуры, а тут не так. Видимо нас готовят к разбору чужого оптимизированного кода, чтобы понять что к чему.
По моему скромному мнению, нельзя делать такие проверочные: один пишет код, другой убирает названия селекторов - развлекайтесь my fellow kids. Все же, когда пишешь самостоятельно, понимаешь зависимости, а потом уже оптимизируешь, объединяешь и пр. Тут же, уже оптимизировано, т.е. определенные селекторы не будут работать без их оптимизированного общего правила, которое еще найти надо. Видимо в этом весь прикол задания, чтобы найти элементы с общим правилом наследования.

Gemini · 08.Ноябрь.2018 05:39:44

Точно так!
Самое интересное - на данный момент ни малейших идей, где это может пригодиться. А значит, сильнейший соблазн потратить время на что-то более осмысленное.
Может быть, не хватает более актуального примера - хоть как-то связанного с современным веб-дизайном?
А то очень уж кислый привкус остается.

melli10 · 30.Июнь.2019 15:39:57

А у меня верхние коды в этой теме не проходят, подошёл этот. 
    .stone {
    position: absolute;
}

.stone::before,
.stone::after {
    position: absolute;
    border-style: solid;
    content: '';
}

.rhomba {
    bottom: 70px;
    left: 50px;
}

.penta {
    top: 20px;
    right: 40px;
    overflow: hidden;
    width: 100px;
    height: 100px;
}

.hexa {
    top: 50px;
    left: 40px;
    width: 80px;
    height: 40px;
}

.octa {
    right: 45px;
    bottom: 50px;
    width: 90px;
    height: 35px;
}

.octa {
    background-color: #7fdbff;
}

.hexa {
    background-color: #2ecc40;
}

.octa::before,
.octa::after {
    width: 30px;
    border-color: #7fdbff transparent;
}

.penta::before,
.penta::after {
    border-color: #ff4136 transparent;
}

.hexa::before,
.hexa::after {
    border-color: #2ecc40 transparent;
}

.octa::before {
    top: -30px;
    border-width: 0 30px 30px;
}

.penta::before {
    border-width: 0 50px 50px;
}

.hexa::before {
    bottom: -30px;
    border-width: 30px 40px 0;
}

.hexa::after {
    top: -30px;
    border-width: 0 40px 30px;
}

.rhomba::before,
.rhomba::after {
    border-width: 50px 30px;
    border-color: #ffdc00 transparent;
}

.penta::after {
    top: 50px;
    border-width: 100px 50px 0;
}

.rhomba::before {
    top: 0;
    border-bottom: 0;
}

.octa::after {
    bottom: -30px;
    border-width: 30px 30px 0;
}

.rhomba::after {
    bottom: 0;
    border-top: 0;
}