✨☠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 бит); картинки сердечек в норме |
Цитата:
Цитата:
Рассмотрите следующий пример... <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> Цитата:
Предположим вы делаете приложение/сайт и вам потребовались значки для обозначения языка, почты, 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>🌍 ✉ 🐦 f </p> В этом случае использование конкретного шрифта приводит к одинаковому отображению на всех платформах. codepen.io/anon/pen/qMVpQG Вы можете использовать некоторые значки с любым шрифтом, когда важен смысл. Например, в данном случае, значки земного шара и конверта могут использоваться с любым шрифтом. Но если вам важна форма, то нужен конкретный шрифт. Только в таком случае значёк птицы и f будут восприняты как соответствующие логотипы. Цитата:
Цитата:
Шрифты монохромны, однако почему тогда некоторые символы разноцветные? Такие шрифты как «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> Цитата:
Получилось, что 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. Цитата:
|
Malleys,
во ты заморочился. |
Malleys,
:thanks: |
CSS головоломка! Градиентная рамка пунктиром.
Ограничения: • 1 div, без псевдо-элементов • настоящая прозрачность повсюду, без подложки • как максимум 7 CSS объявлении для div (просвечиваемый фон от body не считается) • без картинок (разрешаются CSS градиенты), без SVG, без JS Получается при помощи только 5 объявлении, но... 1. Chrome оказался особенным (1 дополнительное объявление) ☹️ 2. и имеет баг (ещё 1 объявление чтобы исправить) |
Часовой пояс GMT +3, время: 03:15. |