иногда просто жаль что некоторые дизайны совсем нигде и будут удалены, так что пусть хоть картинки висят
🎧 Подкаст «НЕТЕРОЛЕВЫЕ»
Рассказываем и обсуждаем Форумные Ролевые Игры (ФРПГ).
Telegram Обсудить
ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Коворкинг: обмен вдохновением и опытом » Эксперименты Will O The Wisp
иногда просто жаль что некоторые дизайны совсем нигде и будут удалены, так что пусть хоть картинки висят
скрипт для звездочек в теме
[html] <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap'); .star { transform-style: preserve-3d; width: 1px; height: 1px; position: absolute; color: red; } .star:before { position: absolute; content: '\2726'; color: inherit; inset: 0; //box-shadow: 0 0 1em .5em #a3c2; //filter: drop-shadow(0 0 .5em white); text-shadow: 0 0 .8em #fff5; } </style> <script> //look at fixes in the Pen https://codepen.io/ghaste/pen/OJqLbvg //for adding mouse trail to a page that scrolls beyond the viewport, as would be the case with most websites - lol let x1=0, y1=0; window.client const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0), dist_to_draw = 50, delay = 1000, fsize = [ '1.1rem', '1.4rem', '.8rem', '1.7rem' ], colors = [ '#E23636', '#F9F3EE', '#E1F8DC', '#B8AFE6', '#AEE1CD', '#5EB0E5' ], rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min, selRand = (o) => o[rand(0, o.length -1)], distanceTo = (x1, y1, x2, y2) => Math.sqrt((Math.pow(x2-x1,2))+(Math.pow(y2-y1,2))), shouldDraw = (x, y) => (distanceTo(x1, y1, x, y) >= dist_to_draw), addStr = (x, y) => { const str = document.createElement("div"); str.innerHTML = '✦'; str.className = 'star'; str.style.top = `${y + rand(-20,20)}px`; str.style.left = `${x}px`; str.style.color = selRand(colors); str.style.fontSize = selRand(fsize); document.body.appendChild(str); //console.log(rand(0, 3)); const fs = 10 + 5 * parseFloat(getComputedStyle(str).fontSize); //console.log(vh, y, fs); //console.log((y+fs)>vh?vh-y:fs); str.animate({ translate: `0 ${(y+fs)>vh?vh-y:fs}px`, opacity: 0, transform: `rotateX(${rand(1, 500)}deg) rotateY(${rand(1, 500)}deg)` }, { duration: delay, fill: 'forwards', }); //could add a animation terminate listener, but why add the additional load setTimeout(() => { str.remove(); }, delay); } addEventListener("mousemove", (e) => { const {clientX, clientY} = e; if(shouldDraw(clientX, clientY)){ addStr(clientX, clientY); x1 = clientX; y1 = clientY; } }); </script> <h1>Sed ut perspiciatis</h1> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. [/html]
галерея
[html] <style> .gallery { position: relative; width: 760px; height: 305px; &:hover :not(div[data-pos='0'],img) { cursor: pointer; } & .item { position: absolute; width: 175px; height: 150px; overflow: hidden; transition: transform 0.9s, width 0.9s, height 0.9s; & img { width: 100%; height: 100%; } } & div[data-pos='0'] { width: 400px; height: inherit; z-index: 10; } } div[data-pos='0'] { transform: translate(0,0); } div[data-pos='1'] { transform: translate(405px,0); } div[data-pos='2'] { transform: translate(585px,0); } div[data-pos='3'] { transform: translate(405px,155px); } div[data-pos='4'] { transform: translate(585px,155px); } @media (width < 800px) { .gallery { width: 405px; height: 660px; & .item { width: 200px; height: 150px; } & div[data-pos='0'] { width: inherit; height: 350px; z-index: 10; } } div[data-pos='0'] { transform: translate(0,0); } div[data-pos='1'] { transform: translate(0,355px); } div[data-pos='2'] { transform: translate(0,510px); } div[data-pos='3'] { transform: translate(205px,355px); } div[data-pos='4'] { transform: translate(205px,510px); } } </style> <script> function init(e) { if (!e.target.closest('.item')) return; let hero = document.querySelector('div[data-pos="0"]'); let target = e.target.parentElement; [target.dataset.pos,hero.dataset.pos] = [hero.dataset.pos,target.dataset.pos]; } window.addEventListener('click',init,false); </script> <main class='gallery'> <div class='item' data-pos='0'><img src='https://source.unsplash.com/qvEI30ydO_w'></div> <div class='item' data-pos='1'><img src='https://source.unsplash.com/9KDuSi7dJv4'></div> <div class='item' data-pos='2'><img src='https://source.unsplash.com/d5PYB17O9jE'></div> <div class='item' data-pos='3'><img src='https://source.unsplash.com/Um9AkOiIDcU'></div> <div class='item' data-pos='4'><img src='https://source.unsplash.com/YTk8tO3PGdA'></div> </main> [/html]
сложный табличный блок
стили
<style> .characterscroll ::-webkit-scrollbar {width: 3px; background: transparent; border: none;} .characterscroll ::-webkit-scrollbar-thumb {background-color: #1a1a1a; border: none; } .a1 { border-top: 10px solid #FC4747; width: 100%; } .a2 { background-color: #F9F9F9; padding: 5px; font-family: times; font-size: 18px; letter-spacing: 2px; border-bottom: 1px dotted #BABABA; line-height: 9px; text-align: center; } .a3 { font-size: 10px; line-height: 11px; overflow: auto; height: 234px; text-align: justify; color: #6B6B6B; padding-right: 5px; } .a4 { background-color: #F9F9F9; padding: 5px; border-top: 10px solid #FC4747; margin-top: 10px; } .a5 { font-family: times; font-size: 18px; letter-spacing: 2px; border-bottom: 1px dotted #BABABA; line-height: 9px; text-align: center; } .a6 { background-color: #F9F9F9; padding: 5px; border-top: 10px solid #202020; } .a7 { font-size: 8px; letter-spacing: 2px; line-height: 9px; text-align: justify; color: #ACACAC; } .a8 { border: 1px dotted #9A9A9A; padding: 5px; margin-top: 15px; } .a8 img{ width: 120px; height: 120px; } .a9 { border: 5px solid #DFDFDF; height: 80px; width: 80px; } .a10 { font-size: 8px; letter-spacing: 2px; line-height: 9px; text-align: right; color: #FC4747; margin-top: 6px; } .a11 { font-size: 8px; letter-spacing: 2px; line-height: 9px; text-align: justify; color: #ACACAC; margin-top: 15px; border-top: 1px dotted #BFBFBF; padding-top: 5px; } .a12 { font-family: helvetica; font-size: 30px; letter-spacing: -2px; text-align: right; margin-top:0px; line-height: 24px; } .a13 { color: #FC4747; font-weight: 700; font-style: italic; } .a14 { border-top: 10px solid #FC4747; height: 280px; } .a15 { background-color: #F9F9F9; padding: 5px; font-family: times; font-size: 18px; letter-spacing: 2px; border-bottom: 1px dotted #BABABA; line-height: 9px; text-align: center; } .a16 { font-size: 10px; line-height: 11px; overflow: auto; height: 230px; text-align: justify; color: #6B6B6B; padding-right: 5px; } .a17 { background-color: #F9F9F9; padding: 5px; border-top: 10px solid #FC4747; margin-top: 10px; height: 270px; } .a18 { font-family: times; font-size: 18px; letter-spacing: 2px; border-bottom: 1px dotted #BABABA; line-height: 9px; text-align: center; } .a19 { font-size: 10px; line-height: 11px; overflow: auto; height: 230px; text-align: justify; color: #6B6B6B; padding-right: 5px; } .ac { font-family: arial; font-size: 8px; letter-spacing: 3px; } </style>
блоки
[table layout=fixed width=100%] [tr] [td] [block="a1"] [block="a2"]FRIENDS[/block] [block="characterscroll"] [block="a3"] Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus, ei enim offendit usu. Sea mazim verear apeirian in, ea munere ignota repudiandae per, ad sea minim partiendo. Eum autem mollis ex, errem bonorum sapientem no eam, ad vim audire repudiandae. Te eos causae volutpat, sit decore quaeque ne. Prima argumentum vis eu, regione noluisse suavitate ius ut. Ex elitr alterum convenire sea, eam ad officiis principes. No tota interesset pro, vero errem necessitatibus id sit, audire definitiones et quo. Mei sonet consulatu ei, in cum augue elitr atomorum. Pri an alia alterum antiopam. In nam iusto torquatos, alia nullam iriure mel at, prodesset democritum deseruisse ne ius. Et nam dicat verterem, pro ut justo verear. Ad unum deseruisse eum, eu sed labore vivendo lobortis. An oratio qualisque definitionem vel, cu has mollis singulis, ei mel principes repudiare. [/block] [/block] [block="a4"] [block="a5"] LOVERS[/block] [block="characterscroll"] [block="a3"] Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus, ei enim offendit usu. Sea mazim verear apeirian in, ea munere ignota repudiandae per, ad sea minim partiendo. Eum autem mollis ex, errem bonorum sapientem no eam, ad vim audire repudiandae. Te eos causae volutpat, sit decore quaeque ne. Prima argumentum vis eu, regione noluisse suavitate ius ut. Ex elitr alterum convenire sea, eam ad officiis principes. No tota interesset pro, vero errem necessitatibus id sit, audire definitiones et quo. Mei sonet consulatu ei, in cum augue elitr atomorum. Pri an alia alterum antiopam. In nam iusto torquatos, alia nullam iriure mel at, prodesset democritum deseruisse ne ius. Et nam dicat verterem, pro ut justo verear. Ad unum deseruisse eum, eu sed labore vivendo lobortis. An oratio qualisque definitionem vel, cu has mollis singulis, ei mel principes repudiare. [/block] [/block] [/block] [/td] [td width=20%] [block="a6"] [block="a7"] ─ [b]Baby [/b]I'm gonna leave you [b]d r o w n i n g[/b] until you reach for my hand. Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus. [/block] [align=center][block="a8"][img]https://i.pinimg.com/736x/c2/50/c4/c250c4d5ce298e9603f5d7c5bd03d2a4.jpg[/img][/block][/align] [block="a10"] ─ NICKN[i]A[/i]ME [/block] [block="a11"]TRAIT EXTRA OR ESSENTIAL INFORMATION [/block] [block="a12"] [block="a13"]FIRST- MIDDLE[/block] LAST[/block][/block] [/td] [td] [block="a14"] [block=a15]ENEMIES[/block] [block="characterscroll"] [block=a16] Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus, ei enim offendit usu. Sea mazim verear apeirian in, ea munere ignota repudiandae per, ad sea minim partiendo. Eum autem mollis ex, errem bonorum sapientem no eam, ad vim audire repudiandae. Te eos causae volutpat, sit decore quaeque ne. Prima argumentum vis eu, regione noluisse suavitate ius ut. Ex elitr alterum convenire sea, eam ad officiis principes. No tota interesset pro, vero errem necessitatibus id sit, audire definitiones et quo. Mei sonet consulatu ei, in cum augue elitr atomorum. Pri an alia alterum antiopam. In nam iusto torquatos, alia nullam iriure mel at, prodesset democritum deseruisse ne ius. Et nam dicat verterem, pro ut justo verear. Ad unum deseruisse eum, eu sed labore vivendo lobortis. An oratio qualisque definitionem vel, cu has mollis singulis, ei mel principes repudiare. [/block] [/block] [/block] [block="a17"] [block="characterscroll"] [block="a18"]OTHERS[/block] [block="a19"] Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus, ei enim offendit usu. Sea mazim verear apeirian in, ea munere ignota repudiandae per, ad sea minim partiendo. Eum autem mollis ex, errem bonorum sapientem no eam, ad vim audire repudiandae. Te eos causae volutpat, sit decore quaeque ne. Prima argumentum vis eu, regione noluisse suavitate ius ut. Ex elitr alterum convenire sea, eam ad officiis principes. No tota interesset pro, vero errem necessitatibus id sit, audire definitiones et quo. Mei sonet consulatu ei, in cum augue elitr atomorum. Pri an alia alterum antiopam. In nam iusto torquatos, alia nullam iriure mel at, prodesset democritum deseruisse ne ius. Et nam dicat verterem, pro ut justo verear. Ad unum deseruisse eum, eu sed labore vivendo lobortis. An oratio qualisque definitionem vel, cu has mollis singulis, ei mel principes repudiare. [/block] [/block] [/block] [/block] [/td] [/tr] [/table]
Отредактировано Will O The Wisp (01.03.24 15:11)
Will O The Wisp
С возвращением! Рада что ты вернулся с новыми крутыми кодами!
Отвечаю на вопросы вот здесь | Мой блог
"Никогда не сомневайтесь в себе и любите каждую свою работу, даже если она кажется вам грязью на окне. Через это окно люди смотрят на мир, тогда как разводы замечаете только вы." © Николай Ободников. "Лиллехейм. Волчий ветер
Automation Baby
спасибо (: я тоже рад что у меня появилось время, пусть и немного
Так вот
Если кто начал разбираться в шаблонах блоками
Если у вас есть скрипт
<!--Скрытие профиля в теме тегом--> <style type="text/css">.hideprofile .post-author,.hideprofile .pl-email,.hideprofile .pl-website{display:none!important} .hideprofile .post-body,.hideprofile .post-links,.hideprofile .post-links ul,.post.hideprofile h3>span{margin-left:0!important}</style> <script> FORUM.set('editor.addition.tags.hideprofile',{name:'Скрыть минипрофиль',onclick:function(){insert('[hideprofile]');}}); $().pun_mainReady(function(){$('.post:contains("[hideprofile]")').addClass('hideprofile').html(function(){return $(this).html().replace(/\[hideprofile\]/gim,'')})}); </script>
и вы решили в сообщении скрыть профиль, вставить блоки и скрыть сообщение, то ничего не выйдет
скрипт скрывает профиль через тэг hideprofile; сообщение скрывается через тэг [hide/hide] и они друг с другом конфликтуют
можно в скрипте присвоить другое имя скрытию профиля, можно не использовать их вместе
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"> <style> #conytainer5 * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #222; --clr: #fff; } #conytainer5{ font-family: "Font Awesome 5 Free"; display: flex; justify-content: center; align-items: center; min-height: 100px; background: var(--bg); } ul { position: relative; display: flex; gap: 50px; } ul li { position: relative; list-style: none; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.5s; } ul li::before { content: ''; position: absolute; inset: 30px; box-shadow: 0 0 0 10px var(--clr), 0 0 0 20px var(--bg), 0 0 0 22px var(--clr); transition: 0.5s; } ul li:hover::before { inset: 15px; } ul li::after { content: ''; position: absolute; inset: 0; background: var(--bg); transform: rotate(45deg); transition: 0.5s; } ul li:hover::after { inset: 0px; transform: rotate(0deg); } ul li a { position: relative; text-decoration: none; z-index: 10; display: flex; justify-content: center; align-items: center; } ul li a i { font-size: 2em; transition: 0.5s; color: var(--clr); opacity: 1; } ul li:hover a i { color: var(--clr); transform: translateY(-40%); } ul li a span { position: absolute; font-family: sans-serif; color: var(--clr); opacity: 0; transition: 0.5s; transform: scale(0) translateY(200%); } ul li:hover a span { opacity: 1; transform: scale(1) translateY(100%); } ul li:hover a i, ul li a span { filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr)); } </style> <script> </script> <div id="conytainer5"> <ul> <li style="--clr:#2483ff;"> <a href="#"> <i class="fa fa-home"></i> <span>Home</span> </a> </li> <li style="--clr:#fff200;"> <a href="#"> <i class="fa fa-user"></i> <span>Profile</span> </a> </li> <li style="--clr:#ff253f;"> <a href="#"> <i class="fa fa-heart"></i> <span>Likes</span> </a> </li> <li style="--clr:#25d366;"> <a href="#"> <i class="fa fa-gear"></i> <span>Settings</span> </a> </li> <li style="--clr:#f32ec8;"> <a href="#"> <i class="fa fa-search"></i> <span>Search</span> </a> </li> </ul> </div>
Will O The Wisp
Спасибо что поделился! Добавила нам красивую штку!
Отвечаю на вопросы вот здесь | Мой блог
"Никогда не сомневайтесь в себе и любите каждую свою работу, даже если она кажется вам грязью на окне. Через это окно люди смотрят на мир, тогда как разводы замечаете только вы." © Николай Ободников. "Лиллехейм. Волчий ветер
Automation Baby
мне он показался интересным как пример реализации, там забавно черные квадраты повернуты поверх цветного
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Коворкинг: обмен вдохновением и опытом » Эксперименты Will O The Wisp