10.08.2018, 00:49
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
✨☠CSS челлендж☠✨
Простой CSS челлендж — напиши CSS, как на скрине!
challenge.jpg
☠️ без SVG, без JS
‼️ по одному <p> на каждый элемент
⚠️ без вложенных элементов внутри <p> (но можно использовать псевдо-элементы)
❣️ можно использовать дополнительные CSS переменные, если нужно
✨ подсказка: шаблон (добавление элементов не разрешено ⛔)
https://codepen.io/Malleys/pen/RBEVpd?editors=1100
Последний раз редактировалось Malleys, 10.08.2018 в 00:53.
|
|
10.08.2018, 12:17
|
 |
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
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, 10.08.2018 в 12:22.
|
|
10.08.2018, 12:19
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,588
|
|
ruslan_mart, так то каждый дурак может - вся фишка в тени. 
Кстати clip-path мне показался не спортивным, тогда уж можно использовать все возможности svg и маски, а это совсем не то.)
Хотя конечно тут вопрос к автору.
__________________
29375, 35
Последний раз редактировалось Aetae, 10.08.2018 в 12:22.
|
|
10.08.2018, 12:29
|
|
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
Aetae, ну про clip-path ничего не говорилось, вот и пришла такая мысль в голову. Как сделать тенью - пока не допёр.
Если фон страницы не меняется, то можно для ::after сделать border-right: 10px solid цвет_фона_страницы
Но это конечно рукожопие.
|
|
10.08.2018, 12:31
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,588
|
|
|
А ещё градиент на сердечко наложить, и с обводочкой, хехе)
С тенью простой вариант - transform skewY и обрезать сверху, но подвох в том, что текст уже тогда туда не запульнёшь.)
__________________
29375, 35
Последний раз редактировалось Aetae, 10.08.2018 в 12:33.
|
|
17.08.2018, 10:03
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,588
|
|
|
Malleys,
1. В ff сердечко не подсвечено и не обведено, в хроме вообще на сердечках какой-то левый градиент.
2. Ни в одном ослике, даже самом последнем, вообще работать не будет.
Еслиб сказали сразу, что делаем под конкретный браузер - всё гораздо проще было бы.
__________________
29375, 35
|
|
19.08.2018, 22:23
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Aetae
|
|
Если бы сказали сразу, что делаем под конкретный браузер
|
Здесь не идёт речь о конкретном браузере(совершенно бессмысленно), а о CSS! Свойства clip-path и mask определены в спецификации, которая имеет статус «Кандидат на рекомендацию». w3.org/TR/css-masking-1
Такая спецификация считается относительно стабильной. Спецификация не может продвинуться дальше с этого этапа без полного набора тестов, отзывов разработчиков и по меньшей мере двух независимых реализации. Согласно caniuse 87% браузеров уже поддерживают её (не конкретный браузер + спецификация, в браузере Microsoft в процессе разработки microsoft-edge/platform/status)
|
Сообщение от Aetae
|
|
В ff сердечко не подсвечено и не обведено, в хроме вообще на сердечках какой-то левый градиент.
|
Это зависит от системного шрифта... на разных платформах может несущественно отличаться. Я проверял в последних версиях Chrome, Firefox, Safari, в стандартном браузере Android и там же в Chrome сердечки качественно отображаются одинаково. Также правильно отображается clip-path и mask...
Вы можете сравнить, как отображаются данные три символа на разных платформах:
emojipedia.org/heavy-black-heart
emojipedia.org/purple-heart
emojipedia.org/green-heart
Отображение сердечек из Unicode, версия 6.0 в разных браузерах.
chrome.jpg
Илл. 1. В Chome
firefox.jpg
Илл. 2. В Firefox
safari.jpg
Илл. 3. В Safari
2018-08-19-22-18-31.jpg
Илл. 4. На довольно старом устройстве с ОС Android KitKat
Последний раз редактировалось Malleys, 19.08.2018 в 22:39.
Причина: А что это вставленные картинки всё меньше и меньше, уже почти не видно... ������
|
|
19.08.2018, 23:29
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,588
|
|
У меня на домашнем так:
http://ajitae.tk/ff.png
http://ajitae.tk/cr.png
А ты, похоже ещё должен был уточнить, что не только под конкретный браузер, но и под Apple, . Не знал что эти пидорские эмодзи ещё и выглядеть могут кардинально по разному. Их же получается даже в тех минимально возможных обстоятельствах, когда они действительно бы пригодились в дизайне, и то использовать нельзя =\
Caniuse же 87% - это на практике фуфло. На самом деле или требуемое поддерживается всеми целевыми браузерами, либо не поддерживается. И чтобы в понятие "все целевые" не входил хотя-бы последний ослик - такого не бывало.
__________________
29375, 35
Последний раз редактировалось Aetae, 19.08.2018 в 23:41.
|
|
20.08.2018, 00:00
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
windows 10
Последняя версия Google Chrome уже установлена
Версия 68.0.3440.106 (Официальная сборка), (64 бит);
картинки сердечек в норме
|
|
|
|
