Как сделать строчку которая есть в skillshare?

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
0
21
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Skillshare использует один очень длинный файл svg для создания этой строки. Все остальное накладывается поверх линий, чтобы создать этот эффект. Вы можете найти его в инспекторе из loh-content/loh-path/svg.

Здесь вы можете увидеть, как линия проходит по всей странице:

<!-- Important: This is directly from skillshare.com, so this is just an example to see how the line works, do not steal other creators work -->
<svg width="2560" height="5709" viewBox="0 0 2560 5709" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M535.771 5.99991L535.771 1.99991L535.771 5.99991ZM1390.77 1627L1390.77 1631L1390.77 1627ZM1056.04 2081.64L1053.52 2078.53L1056.04 2081.64ZM1288.27 2946.5L1287.71 2950.46L1288.27 2946.5ZM1222.27 4823.5L1222.72 4819.52L1222.27 4823.5ZM871.271 4580L867.358 4579.17L871.271 4580ZM1976.27 5703L1976.27 5707L1976.27 5703ZM1283.77 1400.5L1287.53 1399.15L1283.77 1400.5ZM1390.77 1623C1262.14 1623 1152.97 1610.24 1076.09 1575.91C1037.71 1558.77 1007.55 1536.34 986.985 1507.6C966.442 1478.9 955.271 1443.64 955.271 1400.5L947.271 1400.5C947.271 1445.11 958.85 1482.04 980.479 1512.26C1002.08 1542.44 1033.52 1565.66 1072.83 1583.21C1151.32 1618.26 1261.9 1631 1390.77 1631L1390.77 1623ZM535.771 9.99991C686.612 9.99985 898.913 46.0499 1104.33 134.742C1309.74 223.43 1507.94 364.614 1631.09 574.663L1637.99 570.616C1513.73 358.666 1313.94 216.529 1107.5 127.397C901.076 38.2698 687.694 1.99985 535.771 1.99991L535.771 9.99991ZM1631.09 574.663C1754.24 784.72 1783.19 1047.27 1736.53 1257.2C1689.8 1467.41 1567.89 1623 1390.77 1623L1390.77 1631C1573.65 1631 1697.33 1470.41 1744.34 1258.94C1791.4 1047.19 1762.24 782.558 1637.99 570.616L1631.09 574.663ZM1775.28 4158.71C1768.98 4245.32 1713.71 4299.62 1632.18 4336.23C1550.5 4372.91 1443.22 4391.44 1334.54 4406.6C1226.14 4421.72 1116.27 4433.51 1030.41 4456.85C944.858 4480.11 880.89 4515.41 867.358 4579.17L875.184 4580.83C887.652 4522.09 946.958 4487.83 1032.5 4464.57C1117.73 4441.4 1226.78 4429.71 1335.65 4414.52C1444.24 4399.37 1552.6 4380.74 1635.46 4343.53C1718.48 4306.25 1776.66 4249.93 1783.26 4159.29L1775.28 4158.71ZM867.358 4579.17C852.894 4647.32 891.635 4703.94 958.227 4745.95C1024.84 4787.97 1120.22 4816.07 1221.82 4827.47L1222.72 4819.52C1121.83 4808.2 1027.74 4780.34 962.496 4739.18C897.232 4698.01 861.723 4644.25 875.184 4580.83L867.358 4579.17ZM1221.82 4827.47C1345.78 4841.39 1430.52 4858.52 1483.29 4880.15C1509.67 4890.96 1527.71 4902.75 1538.7 4915.52C1549.56 4928.14 1553.66 4941.82 1551.98 4957C1550.29 4972.37 1542.64 4989.56 1529.37 5008.83C1516.13 5028.07 1497.49 5049.09 1474.2 5072.11C1427.62 5118.16 1362.9 5171.74 1286.73 5234.4L1291.81 5240.58C1367.89 5177.99 1432.93 5124.16 1479.83 5077.8C1503.28 5054.62 1522.32 5033.19 1535.96 5013.37C1549.58 4993.58 1558.04 4975.11 1559.93 4957.88C1561.86 4940.44 1557.04 4924.56 1544.76 4910.3C1532.61 4896.18 1513.27 4883.79 1486.33 4872.75C1432.46 4850.67 1346.76 4833.45 1222.72 4819.52L1221.82 4827.47ZM955.271 1400.5C955.271 1357.72 971.384 1325.19 996.388 1303.12C1021.46 1281 1055.74 1269.18 1092.31 1268.46C1165.45 1267.02 1246.92 1309.97 1280.01 1401.86L1287.53 1399.15C1253.19 1303.75 1168.41 1258.96 1092.15 1260.46C1054.03 1261.21 1017.83 1273.54 991.095 1297.13C964.292 1320.78 947.271 1355.53 947.271 1400.5L955.271 1400.5ZM1280.01 1401.86C1311.13 1488.28 1337.41 1590.25 1314.64 1704.06C1291.88 1817.8 1220 1943.99 1053.52 2078.53L1058.55 2084.75C1226.08 1949.36 1299.27 1821.65 1322.48 1705.63C1345.68 1589.68 1318.83 1486.05 1287.53 1399.15L1280.01 1401.86ZM1286.73 5234.4C1210.21 5297.35 1175.46 5358.84 1177.53 5416.05C1179.61 5473.33 1218.52 5524.7 1285.43 5567.55C1419.21 5653.24 1668.03 5707 1976.27 5707L1976.27 5699C1668.52 5699 1421.58 5645.26 1289.74 5560.82C1223.84 5518.61 1187.47 5469.26 1185.53 5415.76C1183.59 5362.21 1216.08 5302.88 1291.81 5240.58L1286.73 5234.4ZM1053.52 2078.53C905.305 2198.31 816.588 2308.6 774.368 2407.89C732.088 2507.33 736.475 2595.68 774.35 2671.02C812.148 2746.2 883.066 2807.97 973.063 2854.95C1063.09 2901.95 1172.49 2934.29 1287.71 2950.46L1288.83 2942.54C1174.31 2926.46 1065.82 2894.35 976.765 2847.86C887.674 2801.35 818.293 2740.61 781.498 2667.42C744.779 2594.39 740.278 2508.51 781.73 2411.02C823.243 2313.4 910.881 2204.09 1058.55 2084.75L1053.52 2078.53ZM1342.51 3448.44C1283.81 3472.78 1246.37 3496.79 1226.28 3521.16C1216.18 3533.42 1210.39 3545.86 1208.58 3558.52C1206.78 3571.18 1209.01 3583.77 1214.47 3596.24C1225.32 3621 1249.05 3645.69 1280.28 3670.75C1311.61 3695.89 1350.96 3721.78 1393.6 3748.81C1479.05 3802.99 1577.79 3861.84 1653.65 3929.29C1729.56 3996.77 1781.59 4072 1775.28 4158.71L1783.26 4159.29C1789.85 4068.75 1735.4 3991.26 1658.96 3923.31C1582.48 3855.31 1483 3796.01 1397.89 3742.05C1355.25 3715.02 1316.23 3689.34 1285.29 3664.52C1254.26 3639.61 1231.83 3615.94 1221.8 3593.03C1216.83 3581.66 1214.95 3570.58 1216.5 3559.65C1218.06 3548.7 1223.1 3537.6 1232.45 3526.25C1251.26 3503.43 1287.21 3480.03 1345.57 3455.83L1342.51 3448.44ZM1287.71 2950.46C1428.88 2970.28 1531.79 2999.58 1599.52 3035.23C1667.32 3070.92 1698.94 3112.42 1699.79 3156.36C1700.65 3200.59 1670.46 3249.23 1609.83 3299.31C1549.36 3349.26 1459.37 3399.99 1342.51 3448.44L1345.57 3455.83C1462.82 3407.22 1553.61 3356.13 1614.93 3305.48C1676.09 3254.95 1708.72 3204.2 1707.79 3156.2C1706.85 3107.93 1672.07 3064.38 1603.24 3028.15C1534.34 2991.88 1430.39 2962.41 1288.83 2942.54L1287.71 2950.46ZM535.771 1.99991C416.807 1.99996 142.392 23.7138 -2.38593 56.5995L-0.61408 64.4008C143.408 31.6865 417.194 9.99996 535.771 9.99991L535.771 1.99991ZM1976.27 5707C2123.6 5707 2263.21 5694.36 2369.23 5680.72C2475.12 5667.09 2547.81 5652.44 2561.18 5648.32L2558.82 5640.68C2546.19 5644.56 2474.13 5659.16 2368.21 5672.78C2262.43 5686.39 2123.17 5699 1976.27 5699L1976.27 5707Z" fill="#00FF84"></path>
</svg>

Итак, чтобы ответить расплывчато на ваш вопрос, вам нужно изучить следующее:

  • Как создавать образы svg
  • Базовый CSS для наложения изображений (z-индекс)

Спасибо, а как они его создали?

Arya Anish 09.04.2022 15:51

Простые изображения SVG можно напрямую записать в ваш html-файл, но сложные SVG, такие как те, что есть на Skillshare, скорее всего, создаются с помощью векторного графического редактора, такого как Adobe Illustrator, экспортируются непосредственно в виде файла SVG и копируются в html-файл. . Таким образом, чтобы сделать сложные SVG, вы должны заглянуть в некоторые редакторы векторной графики и сделать несколько изогнутых линий и экспортировать результат в формат SVG. В Интернете также есть множество инструментов для создания форм SVG, не уверен, что они есть для такого рода линий, но для волн и капель вы можете найти их даже в Интернете.

erecodes 09.04.2022 17:33

Другие вопросы по теме