Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   ✨☠CSS челлендж☠✨ (https://javascript.ru/forum/xhtml-html-css/74820-%E2%9C%A8%E2%98%A0css-chellendzh%E2%98%A0%E2%9C%A8.html)

Malleys 10.08.2018 00:49

✨☠CSS челлендж☠✨
 
Вложений: 1
Простой CSS челлендж — напиши CSS, как на скрине!

Вложение 3971

☠️ без SVG, без JS
‼️ по одному <p> на каждый элемент
⚠️ без вложенных элементов внутри <p> (но можно использовать псевдо-элементы)
❣️ можно использовать дополнительные CSS переменные, если нужно
✨ подсказка: шаблон (добавление элементов не разрешено ⛔)
https://codepen.io/Malleys/pen/RBEVpd?editors=1100

ruslan_mart 10.08.2018 12:17

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>

Aetae 10.08.2018 12:19

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

ruslan_mart 10.08.2018 12:29

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

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

Но это конечно рукожопие.

Aetae 10.08.2018 12:31

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

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

Malleys 17.08.2018 03:30

Вложений: 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

Aetae 17.08.2018 10:03

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

Еслиб сказали сразу, что делаем под конкретный браузер - всё гораздо проще было бы.

Malleys 19.08.2018 22:23

Вложений: 4
Цитата:

Сообщение от 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 в разных браузерах.
Вложение 3981
Илл. 1. В Chome

Вложение 3982
Илл. 2. В Firefox

Вложение 3983
Илл. 3. В Safari

Вложение 3984
Илл. 4. На довольно старом устройстве с ОС Android KitKat

Aetae 19.08.2018 23:29

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

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

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

рони 20.08.2018 00:00

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

Malleys 12.09.2018 01:54

Цитата:

Сообщение от Aetae
ещё должен был уточнить, что не только под конкретный браузер, но и под Apple

Такое уточнение было бы бессмысленно, поскольку HTML и CSS являются кроссплатформенными.

Цитата:

Сообщение от Aetae
Не знал, что [...] эмодзи ещё и выглядеть могут кардинально по разному.

Это «кардинальное» отличие относится не только к тому конкретному набору значков, но вообще ко всему набору символов Unicode! Ведь внешний вид любого символа Unicode полностью зависит от того, как он прорисован в файле шрифта.

Рассмотрите следующий пример...
<style>
	html {
		font: 200% Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif;
	}
</style>
<p>Этот пример выглядит по разному на разных устройствах, и вы даже можете не отличить O от 0, и l от I.</p>
Этот пример выглядит по разному на разных устройствах, и вы даже можете не отличить O от 0, и l от I. Однако никто не скажет, что такое использовать нельзя. Например, Wikipedia использует
font-family: sans-serif;
что приводит к результату, зависящему от установленных на вашем устройстве шрифтов. (Вы видите именно то, что у вас есть).

Но если вам нужно, чтобы шрифт выглядел однаково на всех платформах, то можно использовать конкретный шрифт, что приведёт к одинаковому отображению на всех устройствах.
<style>
	@import url('https://fonts.googleapis.com/css?family=Poiret+One');
	html { font: 200% Poiret One; }
</style>
<p>Этот пример выглядит одинаково на разных устройствах.</p>


Цитата:

Сообщение от Aetae
Их же получается даже в тех минимально возможных обстоятельствах, когда они действительно бы пригодились в дизайне, и то использовать нельзя

На самом деле они используются довольно широко. За последние 5 лет тенденция использования шрифтов, в которых основная часть используемых символов не представляет письменные знаки каких-либо языков, увеличилась.

Предположим вы делаете приложение/сайт и вам потребовались значки для обозначения языка, почты, Twitter'а и Facebook'а. Вы выбрали эти:

U+1F30D EARTH GLOBE EUROPE-AFRICA (🌍 ) для обозначения языка
U+2709 ENVELOPE (✉) для обозначения почты
U+1F426 BIRD (🐦 ) для обозначения Twitter'а
U+0066 LATIN SMALL LETTER F (f) для обозначения Facebook'а

Как вы и догадываетесь, если для их отображения использовать разные шрифты, то получится неоднозначный результат. Если земной шар, конверт и прописная f ещё отображаются в рамках приличия, то любая птичка никак не символизирует Twitter. Хотя даже такое отображение является дизайном!
<style>
	html {
		font: 300% Apple Color Emoji, Segoe UI Emoji, Notocoloremoji, Segoe UI Symbol, Android Emoji, emojisymbols, Emojione Mozilla;
	}
</style>
<p>&#127757; ✉ &#128038; f </p>


В этом случае использование конкретного шрифта приводит к одинаковому отображению на всех платформах.
codepen.io/anon/pen/qMVpQG

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

Но если вам важна форма, то нужен конкретный шрифт. Только в таком случае значёк птицы и f будут восприняты как соответствующие логотипы.

Цитата:

Сообщение от Aetae
когда они действительно бы пригодились в дизайне, и то использовать нельзя

Я думаю, что вы всё-таки использовали триграмму неба и знак умножения! (☰ и ×)

Цитата:

Сообщение от Aetae
эти пидорские эмодзи

По сути это различные знаки, значки, представляющие такие предметы, как лица, погода, транспорт и здания, еда и напитки, растения и животные, и даже иконки, которые представляют какие-либо эмоции, чувства или действия. Любой отдельно взятый символ Unicode может быть знаком/значком, если отдельно взятый, он несёт какой-либо смысл. Например, вопросительный/восклицательный знак (‼⁉), дорожные знаки(⛔⛗⛛), знаки зодиака(♍♐♒), денежные знаки(€₽$) и т. д. В общем они из стандартного набора символов Unicode, целью которого является систематизация и стандартизация всех символов всех письменностей и систем обозначении мира.

Шрифты монохромны, однако почему тогда некоторые символы разноцветные? Такие шрифты как «Apple Color Emoji», «Segoe UI Emoji», «Android Emoji» были созданы компаниями Apple, Microsoft и Google соответственно. Все они разработали и использовали свои собственные проприетарные форматы цветных шрифтов, чтобы отображать «эмодзи» в их операционных системах.pixelambacht.nl/2014/multicolor-fonts

На сегодняшний день, существует 4 основных формата цветных шрифтов: SBIX от Apple, COLR от Microsoft, CBDT от Google и SVG от W3C, каждый из которых имеет свои собственные особенности.

Сейчас, когда OpenType-SVG стандартизирован, можно ожидать, что в ближайшие месяцы (или годы?) этот формат уже можно будет использовать (Microsoft Edge и Firefox уже поддерживают, также поддерживается в PS начиная с версии 2017 и в AI начиная с версии 2018).

Суть в том, что не только определённый набор символов Unicode, но и весь набор может быть цветным! Пример цветных шрифтов colorfonts.wtf

Лигатуры, которые используются уже на протяжении веков, позволяют изображать одним письменным знаком две и более букв...
<style>
    @import url('https://fonts.googleapis.com/css?family=Material+Icons');
    html { font: 200% Material Icons; }
</style>
<p>language email menu place</p>


Цитата:

Сообщение от Aetae
Caniuse же 87% — это на практике фуфло

Это как раз та причина, почему так долго не было ответа. Друзья, близкие и знакомые — 117 человек, у которых я прямым или косвенным способом узнал ответ на следующий вопрос: «Как зайти в интернет?»(непринуждённо, всё как бы между прочим... Или вариация на тему того, что мне нужно объяснить одному человеку, у которого появился вдруг телефон/планшет/лэптоп/десктоп как зайти ему в интернет, короче; но не всем, поскольку так и так знаю что и на чём запускается).

Получилось, что 67.52% используют браузер Chrome (притом 37.61% из 117 тех же людей ещё дополнительно использовали этот браузер на мобильном устройстве (телефон Android или iPhone или планшет iPad, Android или Windows 10), и 1.71% на AndroidTV). Самой популярной (51.98% из 202 устройств) ОС (на телефоне, телевизоре или планшете) оказалась Android. 19.66% используют Safari, но только 2.56% используют его на Mac (остальные 17.09% на iPhone или iPad). 6.84% используют FireFox, притом 0.85% используют его на Linux(Ubuntu), 11.11% — различные Android браузеры и 0.85% — Opera Mini. Хотя пользователи Windows (39.60% из 202 устройств) и упоминали Edge, но только в контексте того, чтобы при помощи него скачать Chrome, FireFox и даже Opera (упомянули 1.71% опрошенных, однако сами не используют). 5.13% используют на своём Android устройстве и Chrome и встроенный браузер. 5.98% и Chrome и FireFox. 7.69% опрошенных используют и Chrome и Safari.

Получилось, что Caniuse 87% — это на практике немного заниженная реальность. Я не знаю, с чем вы связываете понятие «все целевые», однако это мини-исследование, которое я провёл, показывает, что популярными браузерами являются — Chrome, Safari, Firefox, а популярными ОС — Android, Windows, iOS.

Цитата:

Сообщение от Aetae
На самом деле или требуемое поддерживается всеми целевыми браузерами, либо не поддерживается.

Главное чтобы требуемое было стандартизировано, это вам даёт гарантию, что требуемое будет работать и в будущем, даже если оно где-то сейчас не работает!

j0hnik 12.09.2018 02:16

Malleys,
во ты заморочился.

рони 12.09.2018 09:21

Malleys,
:thanks:

Malleys 17.01.2019 15:29

CSS головоломка! Градиентная рамка пунктиром.

Ограничения:
• 1 div, без псевдо-элементов
• настоящая прозрачность повсюду, без подложки
• как максимум 7 CSS объявлении для div (просвечиваемый фон от body не считается)
• без картинок (разрешаются CSS градиенты), без SVG, без JS



Получается при помощи только 5 объявлении, но...
1. Chrome оказался особенным (1 дополнительное объявление) ☹️
2. и имеет баг (ещё 1 объявление чтобы исправить)


Часовой пояс GMT +3, время: 03:15.