Списать код списала, прошла на 100%, но ничего не поняла, что куда и почему ставиться, ход выполнения задания для меня остаётся неясен. Кто сможет объяснить подробно что к чему?
`.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;
}`Первый пункт понятен, со второго уже не ясно, к примеру что означает content: ‘’; и почему .stone:before,
.stone:after, а если просто ставишь .stone, то показывает не фигуры, а чёрные квадраты.
Ладно пусть не ясно, но если оставить только
.stone {
position: absolute;
}
.stone:before,
.stone:after{
content: “”;
position: absolute;
border-style: solid;
}, то у нас выходит на белом листе 4 маленьких точки на одном месте
Идём дальше, рассмотрим первую фигуру, значит отбираем всё что относиться к heha/
Блокируем остальной код и смотрим, правильно, всё верно, всё относиться к ней, и остались там ещё три точки на одном месте.
.hexa {
top: 50px;
left: 40px;
width: 80px;
height: 40px;
}
Это координаты месторасположения, с этим тоже всё ясно и понятно, когда это вписываешь в код, одна из точек передвигается, меняет месторасположение.
.hexa {
background-color: #2ecc40;
}
С этим тоже всё ясно, расцветка фигуры. Вставили в код, появился квадратик возле точки. Смотрим дальше. .hexa::before,
.hexa::after{
border-color: #2ecc40 transparent;
}
Это, убираем точку чёрную. Хотя числиться как зелёную почему-то.
Теперь смотрим и составляем треугольники из бордюров. border-width: 0px 40px 30px;
0px 40px 30px; - верхнее поле 0px - правое и левое поля 40px - нижнее поле 30px
width: 30px;- Это его начало по вертикальному расположению.
У нас идёт
.hexa::after {
top: -30px;
border-width: 0px 40px 30px;
}
.hexa::before {
bottom: -30px;
border-width: 30px 40px 0;
}
Вот с этими псевдоклассами не ясно, какой и куда и почему ставить. Поняла что они оба действуют как точка от которой бордер, новая точка, но чем различаются не совсем поняла. И почему при смене их местами один результат, а если два поставить, то точка отсчёта становиться вовсе не по заданным координатам почему-то.
И почему если чёрную точку не убрать, то треугольники вообще не строятся, просто чёрные квадраты?
ну тут надо логику и геометрию подключать.
-
selector { position: absolute; } - так спозиционирован каждый элемент, значит это .stone
есть content: “” - это псевдоэлемент .stone::before и .stone::after
два прямоугольника мы также сразу можем определить hexa и octa, т.к. они имеют явные ширину/высоту, все остальное делается из рамки псевдоэлементов. -
также их легко спозиционировать - там где right - это правые элементы, там где bottom - нижние.
-
цвета подбираем зная, что цвет шифруется в HEX как # RedRed GreenGreen BlueBlue, где буквы принимают значения от 0 до F, а значит элементы с #7fdbff это голубой, т.к. BB тут это ff (соответственно в #2ecc40 крайние это GG - cc, значит это зеленый) (#ff4136 - крайние тут RR - ff, это красный ) (методом исключения #ffdc00 это желтый), к ним уже подбираем псевдоэлементные рамки (border-width). Да, побитно нужно уметь считать и понимать что 7f меньше ff, а значит ff насыщеннее, в своем спектре.
{
bottom: -30px;
border-width: 30px 30px 0;
}
и
{
top: -30px;
border-width: 0 30px 30px;
}
они обратны друг другу, в каком элементе есть симметрия и имеется высота, кратная 3? т.к. bottom -30 и top -30, а еще посередине между ними есть пространство? это .octa::pseudo
- Абсолютно по такой же логике делается .hexa::pseudo
{
top: 50px;
border-width: 100px 50px 0;
}
точка начала сверху, а левую фигуру мы уже получили, значит это .penta::pseudo - осталось узнать верх или низ? мы видим широкую основу 100px, отличающуюся от других сторон - значит это трапеция - это низ - .penta::after
и вот так потихонечку анализируя и исключая оставшиеся элементы можно дойти до сути.
Время затраченное на выполнение этого задания нереально высокое и намного проще подбором решить (как и сделало большинство форумчан)
Также стоит понимать, что например:
border-width: 100px 50px 0; - это неравносторонний треугольник вниз с острым углом в вершине (т.к. верхняя толщина больше боковой) [ но т.к. у фигуры есть overflow: hidden, он усекается до трапеции, это во избежания вопроса - “не вижу тут такого треугольника” ]
border-width: 0 40px 30px; - это неравносторонний треугольник вверх с тупым углом в вершине (т.к. нижняя толщина меньше боковой)
border-width: 0 30px 30px; или border-width: 0 50px 50px; или border-width: 30px 30px 0; это все треугольники с прямым углом в вершине
У меня ::pseudo такого вообще нет
А в этом
{
top: 50px;
border-width: 100px 50px 0;
}
у меня стоит не низ .penta::after, а
.penta::before {
top: 50px;
border-width: 100px 50px 0;
}
и код проходит на 100%, так как же разобраться с этими псевдоклассами, куда и какой нужно ставить?
Время затрачено много, но нужно же разобраться что к чему, иначе потом совсем не пойму.
Подбором то можно, а можно ещё проще, скопировал, вставил и 100%. У меня это задание уже числиться как пройденное. Но мне непросто его нужно пройти, а понять что к чему. И больше всего мне не ясно про псевдоклассы, верхний ставят вниз, нижний вверх, и всё проходит по кодам. Можно ::pseudo, можно ::after, а можно и ::before, тогда в чём между ними разница вообще, писали что ::after нижний вроде, но он может и вверху отлично чувствовать себя и код будет 100%. Вот это я больше всего не поняла.
так именуют вообще псевдоэлементы, в частности используется селектор elem::pseudo-element если нужно обратиться одновременно к обоим, не важно after или before они
так они же абсолютно спозиционированы, они из потока выпадают, это вообще не важно какой из них каким будет, важно к какому элементу
а это вы понимать будете намного позже, явно не сейчас. Для начала разберитесь что такое псевдоэлемент и псевдокласс, в чем их отличие и не путайтесь.
А, спасибо, я это и пытаюсь сделать, жаль что в теории более подробно об этом не рассказали! Про это там не описывалось, что они оба ::pseudo, попробую найти дополнительный материал в интернете, чтобы понять.