иногда просто жаль что некоторые дизайны совсем нигде и будут удалены, так что пусть хоть картинки висят
Эксперименты Will O The Wisp
Сообщений 181 страница 187 из 187
Поделиться18101.03.24 11:41
Поделиться18201.03.24 12:29
скрипт для звездочек в теме
[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]
Поделиться18301.03.24 12:47
галерея
[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]
Поделиться18401.03.24 15:10
сложный табличный блок
стили
<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)
Поделиться18504.03.24 01:58
Will O The Wisp
С возвращением! Рада что ты вернулся с новыми крутыми кодами!
Поделиться18604.03.24 18:51
Automation Baby
спасибо (: я тоже рад что у меня появилось время, пусть и немного
Поделиться18705.03.24 12:21
Так вот
Если кто начал разбираться в шаблонах блоками
Если у вас есть скрипт
<!--Скрытие профиля в теме тегом--> <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] и они друг с другом конфликтуют
можно в скрипте присвоить другое имя скрытию профиля, можно не использовать их вместе