Friday, 23 December 2023 23:55
Cool Zombie Outbreak
Cool Zombie Outbreak
STAY INDOORS: ZOMBIE OUTBREAK
STAY INDOORS: ZOMBIE OUTBREAK
<div id="marquee"> <div><span>STAY INDOORS: ZOMBIE OUTBREAK</span></div> <div><span>STAY INDOORS: ZOMBIE OUTBREAK</span></div> </div> <form onsubmit="setText(event)"><label for="textsource">Source text</label> <input id="textsource" title="Text must be 5 to 30 characters in length" pattern=".{5,30}" type="text" value="STAY INDOORS: ZOMBIE OUTBREAK" /> <input type="submit" value="Use" /></form> <script type="text/javascript" xml="space">// <![CDATA[ function setText(event){ event.preventDefault(); leftText.innerText = textsource.value.toUpperCase(); rightText.innerText = textsource.value.toUpperCase(); } var leftText = document.querySelector("#marquee div:first-of-type span"); var rightText = document.querySelector("#marquee div:last-of-type span"); var textsource = document.getElementById("textsource"); setText(); // ]]></script>
#marquee { margin-top: 3rem; perspective: 500px; font-size: 0; font-family: Agency, sans-serif; } #marquee div { display: inline-block; height: 12rem; width: 30rem; position: relative; } #marquee div:first-of-type { background: #e5233e; transform-origin: top right; transform: rotateY(-40deg); color: #fff; } #marquee div:last-of-type { background: #b31e31; transform-origin: top left; transform: rotateY(45deg); color: #f8c9d9; } #marquee div { font-size: 8rem; overflow: hidden; } #marquee div span { position: absolute; width: 400%; line-height: 1.4; } @keyframes leftcrawl { to { transform: translateX(-100rem); } } @keyframes rightcrawl { to { transform: translateX(-130rem); } } #marquee div:first-of-type span { transform: translateX(60rem); animation: leftcrawl 14s linear infinite; text-shadow: 4px 0px 4px rgba(0, 0, 0, 0.3); } #marquee div:last-of-type span { transform: translateX(30rem); animation: rightcrawl 14s linear infinite; } #marquee form { margin-top: 3rem; background: #334; padding: 1rem; text-align: center; color: #fff; } #marquee input[type="text"] { padding: .5rem; font-size: 1.2rem; width: 22rem; } #marquee input[type="text"] { padding: .5rem; } l#marquee label { margin: 1rem; } @media all and (max-width: 993px) { #marquee { perspective: none; } #marquee div:last-of-type { opacity: 0; height: 0; } #marquee div:first-of-type { width: 80%; } }
Friday, 13 May 2023 21:16
Как сделать список ul->li в CSS русскими буквами и с продолжением в новых строках
К примеру мы имеем такой список ul li
<ol> <li>Москва</li> <li>Вильнюс</li> <li>Хьюстон</li> <li>Буратино</li> <li>Гротеск</li> </ol> <ol> <li>Америка</li> <li>Китай</li> <li>Индия</li> <li>Таиланд</li> <li>Украина</li> </ol>
Javascript
// прописываем необходимые буквы в переменную var letters = "абвгдежзиклмнопрстуфхцчшщэюя"; $.each($('ol'), function() { var item = $(this).find('li'); item.each(function(i){ $(this).attr("russ", letters[i] + ")"); }); });
Прописываем стиль
ol { list-style-type: none; } ol > li::before { display: inline-block; content: attr(russ); width: 1.2rem; margin-left: -2rem; }