Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.08.2018, 00:49
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 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.
Ответить с цитированием
  #2 (permalink)  
Старый 10.08.2018, 12:17
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 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.
Ответить с цитированием
  #3 (permalink)  
Старый 10.08.2018, 12:19
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

ruslan_mart, так то каждый дурак может - вся фишка в тени.
Кстати clip-path мне показался не спортивным, тогда уж можно использовать все возможности svg и маски, а это совсем не то.)
Хотя конечно тут вопрос к автору.
__________________
29375, 35

Последний раз редактировалось Aetae, 10.08.2018 в 12:22.
Ответить с цитированием
  #4 (permalink)  
Старый 10.08.2018, 12:29
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Aetae, ну про clip-path ничего не говорилось, вот и пришла такая мысль в голову. Как сделать тенью - пока не допёр.

Если фон страницы не меняется, то можно для ::after сделать border-right: 10px solid цвет_фона_страницы

Но это конечно рукожопие.
Ответить с цитированием
  #5 (permalink)  
Старый 10.08.2018, 12:31
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

А ещё градиент на сердечко наложить, и с обводочкой, хехе)

С тенью простой вариант - transform skewY и обрезать сверху, но подвох в том, что текст уже тогда туда не запульнёшь.)
__________________
29375, 35

Последний раз редактировалось Aetae, 10.08.2018 в 12:33.
Ответить с цитированием
  #6 (permalink)  
Старый 17.08.2018, 03:30
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Все, кто принял участие, несомненно прокачал скиллы в 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
Изображения:
Тип файла: gif challenge.gif (358.6 Кб, 13 просмотров)

Последний раз редактировалось Malleys, 18.08.2018 в 16:48.
Ответить с цитированием
  #7 (permalink)  
Старый 17.08.2018, 10:03
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Malleys,
1. В ff сердечко не подсвечено и не обведено, в хроме вообще на сердечках какой-то левый градиент.
2. Ни в одном ослике, даже самом последнем, вообще работать не будет.

Еслиб сказали сразу, что делаем под конкретный браузер - всё гораздо проще было бы.
__________________
29375, 35
Ответить с цитированием
  #8 (permalink)  
Старый 19.08.2018, 22:23
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 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. Причина: А что это вставленные картинки всё меньше и меньше, уже почти не видно... ������
Ответить с цитированием
  #9 (permalink)  
Старый 19.08.2018, 23:29
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

У меня на домашнем так:
http://ajitae.tk/ff.png
http://ajitae.tk/cr.png

А ты, похоже ещё должен был уточнить, что не только под конкретный браузер, но и под Apple, . Не знал что эти пидорские эмодзи ещё и выглядеть могут кардинально по разному. Их же получается даже в тех минимально возможных обстоятельствах, когда они действительно бы пригодились в дизайне, и то использовать нельзя =\

Caniuse же 87% - это на практике фуфло. На самом деле или требуемое поддерживается всеми целевыми браузерами, либо не поддерживается. И чтобы в понятие "все целевые" не входил хотя-бы последний ослик - такого не бывало.
__________________
29375, 35

Последний раз редактировалось Aetae, 19.08.2018 в 23:41.
Ответить с цитированием
  #10 (permalink)  
Старый 20.08.2018, 00:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

windows 10
Последняя версия Google Chrome уже установлена
Версия 68.0.3440.106 (Официальная сборка), (64 бит);
картинки сердечек в норме
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск