✨☠CSS челлендж☠✨
Вложений: 1
Простой CSS челлендж — напиши CSS, как на скрине!
Вложение 3971 ☠️ без SVG, без JS ‼️ по одному <p> на каждый элемент ⚠️ без вложенных элементов внутри <p> (но можно использовать псевдо-элементы) ❣️ можно использовать дополнительные CSS переменные, если нужно ✨ подсказка: шаблон (добавление элементов не разрешено ⛔) https://codepen.io/Malleys/pen/RBEVpd?editors=1100 |
https://codepen.io/anon/pen/wxRYRG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: #333;
counter-reset: n;
font-family: "Open Sans", sans-serif;
text-align: center;
}
h1 {
color: #FFF;
}
p {
background-image: linear-gradient(to right, #f7f7f7 50%, #ebebed 50%);
border-radius: 24px;
box-sizing: border-box;
clip-path: polygon(0 0, 100% 0, 100% 25px, 90% 25px, 90% 253px, 100% 253px, 100% 100%, 0 100%);
display: inline-block;
height: 620px;
margin: 0 24px;
padding: 260px 10px 10px;
position: relative;
vertical-align: top;
width: 190px;
}
p::after {
content: attr(data-icon);
font-size: 30px;
position: absolute;
bottom: 10px;
right: 10px;
}
p::before {
background-color: var(--item-color);
background-image: linear-gradient(to right, transparent 36px, rgba(0,0,0,0.25) 36px, rgba(0,0,0,0.35) 30%, rgba(0,0,0,0.1));
border-radius: 100% 0 0 100% / 50% 0 0 50%;
box-sizing: border-box;
box-shadow: inset 0 0 10px rgba(0,0,0,1);
color: #FFF;
content: counter(n);
counter-increment: n;
font-size: 90px;
font-weight: bold;
height: 230px;
line-height: 230px;
padding-left: 10%;
position: absolute;
right: 0;
text-align: center;
text-shadow: 2px 3px 1px rgba(0,0,0,0.25);
top: 24px;
width: 130px;
}
</style>
</head>
<body>
<h1>Инфографика</h1>
<p style="--item-color: #cb2c30;" data-icon="❤️">
Торт булочки пончик шоколад торт желе семечки вафли яблочный пирог сладкие булочки маффин чупа-чупс. Ванильное мороженое шоколад пряники.
</p>
<p style="--item-color: #de04cd;" data-icon="������">
Торт печенье лимон мармелад сливки сахарная слива. Какао пудинг сахарная слива клубничный пирог пончик шоколадный яблочный пирог слоёное пироженое мороженое.
</p>
<p style="--item-color: #e2ed53;" data-icon="������">
Шоколадный торт пряники клубничное желе. Яблочный пирог пончик с шоколадной глазурью тарталетки с сыром. Булочка с корицей марципан сахарная слива.
</p>
</body>
</html>
|
ruslan_mart, так то каждый дурак может - вся фишка в тени.:)
Кстати clip-path мне показался не спортивным, тогда уж можно использовать все возможности svg и маски, а это совсем не то.) Хотя конечно тут вопрос к автору. |
Aetae, ну про clip-path ничего не говорилось, вот и пришла такая мысль в голову. Как сделать тенью - пока не допёр. :)
Если фон страницы не меняется, то можно для ::after сделать border-right: 10px solid цвет_фона_страницы Но это конечно рукожопие. |
А ещё градиент на сердечко наложить, и с обводочкой, хехе)
С тенью простой вариант - transform skewY и обрезать сверху, но подвох в том, что текст уже тогда туда не запульнёшь.) |
Вложений: 1
Все, кто принял участие, несомненно прокачал скиллы в CSS!
Вот моё решение https://codepen.io/Malleys/pen/RBEVpd?editors=1100 CSS челлендж — напиши CSS, как тут https://javascript.ru/forum/attachme...0&d=1534465481 ☠️ без JS ⚠️ только один <input> ❣️ можно использовать дополнительные HTML атрибуты, если нужно ✨ подсказка: шаблон (добавление элементов не разрешено ⛔⛔⛔) https://codepen.io/Malleys/pen/rrEbKv |
Malleys,
1. В ff сердечко не подсвечено и не обведено, в хроме вообще на сердечках какой-то левый градиент. 2. Ни в одном ослике, даже самом последнем, вообще работать не будет. Еслиб сказали сразу, что делаем под конкретный браузер - всё гораздо проще было бы. |
Вложений: 4
Цитата:
Такая спецификация считается относительно стабильной. Спецификация не может продвинуться дальше с этого этапа без полного набора тестов, отзывов разработчиков и по меньшей мере двух независимых реализации. Согласно caniuse 87% браузеров уже поддерживают её (не конкретный браузер + спецификация, в браузере Microsoft в процессе разработки microsoft-edge/platform/status) Цитата:
Вы можете сравнить, как отображаются данные три символа на разных платформах: emojipedia.org/heavy-black-heart emojipedia.org/purple-heart emojipedia.org/green-heart Отображение сердечек из Unicode, версия 6.0 в разных браузерах. Вложение 3981 Илл. 1. В Chome Вложение 3982 Илл. 2. В Firefox Вложение 3983 Илл. 3. В Safari Вложение 3984 Илл. 4. На довольно старом устройстве с ОС Android KitKat |
У меня на домашнем так:
http://ajitae.tk/ff.png http://ajitae.tk/cr.png А ты, похоже ещё должен был уточнить, что не только под конкретный браузер, но и под Apple, :). Не знал что эти Caniuse же 87% - это на практике фуфло. На самом деле или требуемое поддерживается всеми целевыми браузерами, либо не поддерживается. И чтобы в понятие "все целевые" не входил хотя-бы последний ослик - такого не бывало. |
windows 10
Последняя версия Google Chrome уже установлена Версия 68.0.3440.106 (Официальная сборка), (64 бит); картинки сердечек в норме |
| Часовой пояс GMT +3, время: 02:41. |