Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.08.2018, 00:49
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 301

✨☠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
Сообщений: 2,913

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
Сообщений: 5,166

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
Сообщений: 2,913

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

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

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

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

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

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

Все, кто принял участие, несомненно прокачал скиллы в CSS!

Вот моё решение https://codepen.io/Malleys/pen/RBEVpd?editors=1100

CSS челлендж — напиши CSS, как на скрине!

challenge.gif
https://javascript.ru/forum/attachme...0&d=1534465481

без JS
⚠️ только один <input>
❣️ можно использовать дополнительные HTML атрибуты, если нужно
✨ подсказка: шаблон (добавление элементов не разрешено ⛔⛔⛔)
https://codepen.io/Malleys/pen/rrEbKv

Последний раз редактировалось Malleys, Вчера в 03:37.
Ответить с цитированием
  #7 (permalink)  
Старый Вчера, 10:03
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,166

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

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



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

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