Work Text:
Introduction:
- I'm writing like this cause this is the only way I get my words out right now
resizeis not accessible I don't think?- YOU must know about css AND html, you must know you must you must
- PLEASE READ THE COMMENTS!!! in the code.
resizedoesn't work on Firefox mobile, safari ios- the writing is going to get a little strange from here, be ready for anything
HAVE YOU EVER HEARD OF CSS?? HOPE YOU do cause. I don't. you do?? well um ever heard of the css property resize!! you don't?? WELL I'M HERE TO TEACH YOU!! don't run away pleas
What resize Is:
resize IS A css property that resizes ANYTHING AND yes I mean ANYTHING if you pair overflow: auto with it!! here, let's see it in action RIGHT NOW, try to drag the thingie in the bottom corner:
Very cool right?? right?? anyway did you notice that it resizes both ways, horizontal AND vertical?? did you know it doesn't have to be both?? HERE I'LL SHOW YOU:
AND YOU can limit the resizing!
Isn't that amazing?? have you ever wondered how I made this mobile compatible?? no?? um aanyaway:
#workskin .demo .resize::-webkit-scrollbar { width: 2em; height: 2em; }
THIS makes the resizer go BIG!!! and make sure you set overflow to scroll. if you don't, it won't work. don't you DARE forget. also pray that the readers AREN'T scrolling the resizer!!!
#workskin .demo .resize::-webkit-resizer { background: linear-gradient(to bottom right, #f29cbb 55%, #c46a89 55%); }
THIS MAKES the resizer PRETTY :3333!! it doesn't work in Firefox. pick whatever background you want I don't (^_^) care.
oh and another thing, YOU CAN DETECT the resizing!! somewhat.
if you looked in DEVTOOLS, you'll NOTICE when resizing the container that there's a style attribute! which means you can select it using attribute selectors!! like this: [style*='width: 20px'], [style*='height: 20px'], and [style*='width: 20px; height: 20px']. golfed edition which you'll need anyway: [style*='h: 20p'], [style*='t: 20p'], and [style*='h: 20p'][style*='t: 20p']. sadly, it can't do ranges, sigh. anyway here's how I did the counters:
#workskin .demo .resize.detect[style*='h: 16p'] :first-child::before, #workskin .demo .resize.detect[style*='t: 16p'] :first-child::after {content: '16px'; } #workskin .demo .resize.detect[style*='h: 17p'] :first-child::before, #workskin .demo .resize.detect[style*='t: 17p'] :first-child::after {content: '17px'; } #workskin .demo .resize.detect[style*='h: 18p'] :first-child::before, #workskin .demo .resize.detect[style*='t: 18p'] :first-child::after {content: '18px'; } [...]
not gonna list ALL OF THE CSS but you get the point.. I hope? er alright let's get to the good stuff!!!
The Good Stuff:
Draggable:
drag the + icon thingy
Put a fallback text here.
plchlders re great actualy and anyone who disses them shoukd get a lorem upsum and lorem ipsum is great spellccheckers are great actually woh were gettung kff topic anyway lorem ipsum ye? its great and its long snd its wonderful very wwonderful beware of the lady who speams in lorem ipsum
lorem ipsuk is bad actually its terrible abd anyone who loves them shoujd get a ipsum lorem and ipsum lorem is great why does angone use it whell its does nto exists amd it is a figment of YOUR imagnayion who said anyyhing about ipsum lorem bewsre of thr lady wpo speaks ij ijn something
Click Here For HTML code!!
<div class="drag"> <div class="hide notice"><p>Put a fallback text here.</p> <div class="resizer hidden toc-heading"></div><div class="mover"></div> <div class="content details hidden toc-heading"><!-- you can put whatever you want here --> </div>
Click Here For CSS code!!
#workskin .drag-metadata1 { content: 'Workskin // resize/Draggable by Mewsmodeus (Mewzebub)'; } #workskin .drag-metadata2 { content: 'Work // ao3.org/works/77807061, squidgeworld.org/works/81833'; } #workskin .drag { position: absolute; display: table; z-index: 10; } #workskin .drag .hidden { display: block; } #workskin .drag .hide { display: none; } #workskin .img-slider p { margin: 0; } #workskin .drag .resizer { resize: both; overflow: scroll; opacity: 0; width: 50px; /* the sizes are the starting position */ height: 50px; position: relative; z-index: 2; cursor: grab; } #workskin .drag .mover, #workskin .drag .resizer::-webkit-scrollbar { width: 1.8em; height: 1.8em; } #workskin .drag .resizer::-webkit-scrollbar-thumb, #workskin .drag .resizer::-webkit-scrollbar-track, #workskin .drag .resizer::-webkit-scrollbar-button:vertical:decrement, #workskin .drag .resizer::-webkit-scrollbar-button:vertical:increment, #workskin .drag .resizer::-webkit-scrollbar-button:horizontal:decrement, #workskin .drag .resizer::-webkit-scrollbar-button:horizontal:increment { background: none; } #workskin .drag .mover { position: absolute; right: 0; bottom: 0; z-index: 1; background: url(https://raw.githack.com/shinymewi/mewsets/main/icons/blue/move.png) /* ← change this */ 100% 100% no-repeat; background-size: 100% 100%; } #workskin .drag .content { position: absolute; } #workskin .drag .details /* you can rename this to whatever you want, don't FORGET to change the html too */ { right: 2em; /* change this depending on your needs */ bottom: -0; /* this too! */ z-index: 2; }
put .drag at the veeeeeery top! or it can't overlay anything before it. also you can't touch anything below .resize. coolio
Image Revealer or Slider or Comparison or Changer:
A image of the image before and after it changed.
Click Riiiight Over Here For HTML code!!
<div class="img-slider"> <div class="hide notice"><p><img src="A-image-of-the-image-before-and-after-it-changed.png" alt="A image of the image before and after it changed." /></p> <div class="changer hidden toc-heading"><div class="mover"></div><div class="slider"></div><img src="changedpng.png" /></div> <img class="hidden toc-heading" src="originalpng.png" alt="original png" /> </div>
Click RIGHT Here For CSS!!
#workskin .img-slider-metadata1 { content: 'Workskin // resize/Image Slider by Mewsmodeus (Mewzebub)'; } #workskin .img-slider-metadata2 { content: 'Work // ao3.org/works/77807061, squidgeworld.org/works/81833'; } #workskin .img-slider { display: table; overflow: hidden; position: relative; } #workskin .img-slider .hidden { display: inherit; } #workskin .img-slider .hide { display: none; } #workskin .img-slider img { user-select: none; } #workskin .img-slider .changer, #workskin .img-slider .changer img { position: absolute; top: 0; left: 0; height: 100%; } #workskin .img-slider .changer { overflow: hidden; z-index: 3; } #workskin .img-slider .changer img { max-width: none; /* so it doesn't shrink */ } #workskin .img-slider .changer .slider { height: 100%; /* max-width: 100%; *//* put this to prevent the slider going out of bounds */ opacity: 0; resize: horizontal; overflow: scroll; scrollbar-color: transparent transparent; z-index: 5; position: relative; } #workskin .img-slider .changer .mover { position: absolute; right: -.8em; /* I want this to get OUT OF THIS OVERFLOW container but it didn't work..*/ top: 50%; bottom: 50%; width: 1.8em; height: 1.8em; z-index: 4; background: url(https://raw.githack.com/shinymewi/mewsets/main/icons/blue/move.png) /* ← change this */ 100% 100% no-repeat; background-size: 100% 100%; } #workskin .img-slider .changer .slider::-webkit-scrollbar { width: 1em; height: 100vh; /* it's the best I can do */ } #workskin .img-slider .changer .slider::-webkit-scrollbar-thumb, #workskin .img-slider .changer .slider::-webkit-scrollbar-track, #workskin .img-slider .changer .slider::-webkit-scrollbar-button:vertical:decrement, #workskin .img-slider .changer .slider::-webkit-scrollbar-button:vertical:increment, #workskin .img-slider .changer .slider::-webkit-scrollbar-button:horizontal:decrement, #workskin .img-slider .changer .slider::-webkit-scrollbar-button:horizontal:increment { background: none; }
I haven't figured out how to MAKE THE .mover move OUT of its overflow CONTAINER!! is there even a way?? hep
window:
Put a fallback text here.
such as the placeholder placed here that placeholdered all over th placs im writing this without a spellchecker and trying to wrtite placeholders. so. placeholders interesting thing isnt it, how does it exist why does it exist aquestions you can ust lookn uo the answer to and answers that are placeholder that are never in production im typijg buut the re is no thought bbehind these because spellcheckers are the one holdngmy sanity back do ou know ihow i mmuch apreszcits placeholder s yeah theyre so sweome why does anytoje hate lorem ipsum and its variateion itz. just doeing its job bro leave it alone oh my oh we sre getting ooff topic anywayo so lorem ipsum and ipsum lorem which one exists well its the ladder alright its the ruler and rulers are grwat wait were getting off topic again uopppmmm ipsum lorem does not exists actually what are you talkijg about no body has ever saidthat llike atcually AND lorem ipsum actaully exists sloo dont know what youre talking about and sometimes its just great to lorem ipsum and lorem ipsum is terrific wow learned a new word todsy so daring. arent i well iuhhh ipsum wait ko it LOTEM ipsum WAIT its loremnIPS UM wait no itsLOREM IPSUMM ait its LOOREM ipsim wait its LOREM ipsum now i got it yay wait im GETTING off topic off tlpic so placehholders are ayya annd you should uuse them all the time actually like actuslly whay is an actually wait ik iits not actually lets go bsck to plaveholderz and. itsnt great that it exists and yay what is up wjth placeeholders yo theure great and wonderful and noone should not use them pjt them inn your bloodsteeam wait jo dont do thay athats not good atcaully buuuuut if younwanmanged to d that it would be great to tell me anyway letsg goet beaxk to placeholders so uhm why ar e you rreading this iits a placeholder duh and since you sree reading this you are obligated to give me 1+ hour long videos tthat nake me lock IN yeaahhhhhhhh so give me it now please and to gibe an idea something like videk game horror retropsectives witlh humor if possible or. jusrtt funny video essays org something like that yes okay thsnk you verg much dear reader cause im alzo a reader aand writers ard awekme and placeholders too ad wait a minute is. this even a olaceholder if its intetinally made int productikn or whatever hhhhb what is a placdhokderr actullg ummmm its a notplaceholder now okay keepnthsat in mind thsnk ou very much
here lies the HTML
<div class="window"> <div class="hide notice"><p>Put a fallback text here.</p></div> <div class="resizer hidden toc-heading"></div> <div class="title-bar hidden toc-heading"> <p>hello hi hidjjdjjkkk</p> <ul><li><details class="close"><summary>X</summary></details></a></li></ul></div> <div class="content hidden toc-heading"><p>Hello I am content. A placeholder content, never meant for production, just a placeholder. Woops! Looks like this made it into production!</p></div></div>
here lies my heart
#workskin .window-metadata1 { content: 'Workskin // resize/Window by Mewsmodeus (Mewzebub)'; } #workskin .window-metadata2 { content: 'Work // ao3.org/works/77807061, squidgeworld.org/works/81833'; } #workskin .window { position: absolute; display: table; z-index: 10; } #workskin .window .hidden { display: block; } #workskin .window .hide { display: none; } #workskin .window .resizer { resize: both; overflow: scroll; width: 50vw; height: 50px; opacity: 0; position: relative; right: 45px; /* to move the resizer so it does not cover the x */ z-index: 2; } #workskin .window .title-bar, #workskin .window .resizer::-webkit-scrollbar { height: 30px; } #workskin .window .title-bar, #workskin .window .content { width: 190px; } #workskin .window .resizer::-webkit-scrollbar { width: 145px; } #workskin .window .resizer::-webkit-scrollbar-thumb, #workskin .window .resizer::-webkit-scrollbar-track, #workskin .window .resizer::-webkit-scrollbar-button:vertical:decrement, #workskin .window .resizer::-webkit-scrollbar-button:vertical:increment, #workskin .window .resizer::-webkit-scrollbar-button:horizontal:decrement, #workskin .window .resizer::-webkit-scrollbar-button:horizontal:increment { background: none; } #workskin .window .title-bar { position: absolute; right: 0; bottom: 0; color: #000; background: #f29cbb; outline: .2em solid #f29cbb !important; z-index: 1; } #workskin .window .title-bar p { position: absolute; left: 0; width: 75%; height: 100%; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #workskin .window .title-bar ul { text-align: center; position: absolute; right: 0; z-index: 3; width: 25%; } #workskin .window .title-bar details summary { color: #000; list-style-type: none; } #workskin .window .title-bar :is(p, ul, details, summary) { margin: 0; } #workskin .window .title-bar :is(p, ul, ul li, details, summary) { padding: 0; } #workskin .window .title-bar :is(p, ul, ul :is(li, li details, li summary)) { height: 100%; } #workskin .window .title-bar ul :is(li, li details, li summary) { display: inline-block; } #workskin .window .title-bar ul li { margin: 0 .1em; } #workskin .window:has(.title-bar .close[open]) { display: none; } #workskin .window .content { position: absolute; right: 0; overflow: auto; z-index: 2; bottom: -100px; height: 100px; color: #fff; outline: .2em solid #f29cbb !important; background: #c46a89; }
okay I give up why is. this the hardest thing I've done it's supposed to be simple but nooooo there's no such thing as simple because what what what why what SOMEONE OR FUTURE ME FIX THIS!!! im done bro I'm sooo done vertical centering WHY WONT YOU HELP ME IN MY DARKEST TIME??? this is such an easy solution with flexboxes but nooo I have to be browser compatible because I HAVE to be compatible across archives amd MY BRAIN WONT LET ME!!! also I'm planning on making more buttons buuuut I'm crashing out (exaggerated, I look like this :| the entire time) so not today
End
Soooooooo what will you do with this information?? make cool things? make new things? make things?? make?? ?? I sure hope you do!!! really hope!! And please if you did TELL ME.