#lbl legend | Explore Tumblr Posts and Blogs

smilesrobotlover · 7 months

Text

Whumptober day 15- makeshift bandages

Sorry I’m a little late, I slept in fhsksbkssbsk. Anyways this one is kinda silly, idk what I’m doing with whumptober but I’ve had this idea in my head where Legend meets the dads so here’s this silly lil thing dbsksbsksbk.

Warning for a bloody stab wound.

~~~~~~~~~~~~~

Legend stared out at the ocean, listening to the waves as they crashed against the beach he was on. He breathed in the salty breeze, several old memories flooding his mind from the smell and sounds. He had mixed feelings about the ocean. On one hand, it reminded him of the pain and loss he had to endure, but on the other hand, he had the best memories at the beach. Whenever he got overwhelmed he would try to find a beach area to unwind, occasionally humming his song…

He was lucky that he was close enough to a beach in this world. The other heroes were great, but they would always burst into arguments and overwhelm Legend. In order to keep himself from getting riled up, he’d walk away, and so he found a beautiful beach to think about all that’s happened to him. He stared out at the horizon, watching the land across from him. But something was strange about it when he really studied it. He narrowed his eyes and noticed that there was a boat traveling to where he was.

A boat?

If Legend recalled correctly, they were the only ones here. So who was on that boat? And why were they heading towards them? He stood up and watched the boat closely. He didn’t know what that was, but he might as well figure it out before it got too close. Legend took off his clothes and took a deep breath, praying that no one could see him now, and he jumped into the water. He felt the familiar magic twisting his bones around and fusing his legs together into a beautiful pink fish tail, and he pushed against the water towards the boat. When he got close he kept his distance, but stared at the bottom of the boat. He didn’t know what he was expecting, he couldn’t see the people on the boat so he didn’t know if they were a threat. He circled the boat for a little bit, finally popping out of the water to get a good look at the people onboard. He only saw one person, but from what he could tell, they weren’t a monster. Was that the puppeteer? Legend narrowed his eyes, but he couldn’t see the person very clearly. Truthfully he didn’t know what the puppeteer looked like. But he was from either Sheikah, Hylian, or Gerudo from what he heard, so he should be on this boat, right?

The person Legend was watching suddenly looked at him, and Legend quickly dove back into the water, panicking. He wasn’t supposed to be seen.

Legend quickly swam underneath the boat, trying to head back to shore to report on what he saw. Just when he was out in the open, a sharp pain went through his tail, and he let out a scream. Legend sunk to the ocean floor as his tail throbbed, and he looked at it to see a spear straight through his tail. Blood was mixing in with the water, and the pain was so bad that he couldn’t move his tail. He quickly reached for the spear, trying to gather up the courage to pull it out, but the pain was too much. A shadow went over him, and Legend noticed that the boat was on top of him. They’re after him, he thought in horror. He was going to get captured and possibly tortured for information on the other heroes, or he was going to get murdered for being a mermaid or for being a hero or something. He needed to get out now, but he couldn’t move his tail, he was stuck. He turned and saw a net coming towards him, and he gasped as he was scooped off the ocean floor, his tail throbbing as he folded up in the net. The net pulled up quickly, and Legend broke the surface coughing.

“Let me go! Let me go!” He started yelling as the net pulled him closer to the boat. He weakly punched the air, trying to land a hit on his captors.

“Woah woah woah! Hey it’s ok, it’s ok!” He heard a man yell out, and he was cut free from the net and was carried out gently, which surprised Legend. Was he not a captive?

Legend let out a yelp when he slipped out of the man’s hold, and he fell to the ground harshly. He heard the man curse under his breath and he was leaned up against him.

“Nice going Rusl.”

“I didn’t think he’d be so slippery!”

“He’s part fish, what did you expect?”

“I—I don’t know! Leave me alone!”

Legend looked up at the man he was leaned up against, who he assumed was named Rusl. He had dirty blonde hair that reached to the middle of his neck, with some scruffy facial hair on his chin and an interesting mustache around his mouth. He had light blue eyes and had a gentle expression when he looked down at Legend. He frowned apologetically and rubbed Legend’s arm.

“That got you good,” he muttered, looking at Legend’s injured tail, where another man with reddish-blonde hair looked over. “How… how does it look, Leon?”

Leon gave Rusl a look before returning to his tail.

“Well, the spear went right through his tail so, I can’t imagine it’s anything good,” he answered, grabbing the spear which caused Legend to whimper. “Linebeck, look away,” he said, and Legend noticed a tall man with dark brunette hair turn away, looking nauseous. Rusl held onto Legend’s hand as Leon broke the spear in half, pulling it through his tail. Legend hissed at the pain and felt his tail go numb.

“Hey Leon, did you ever consider that doing that would cause splinters?” A very short man who looked a lot like Hyrule stepped up, staring at the broken spear concerned.

“He’ll be fine.”

“Not if he has splinters.”

“He’ll be fine.”

Legend gulped and looked at his bleeding tail, feeling dizzy from the sight as Leon put pressure on the wound. He felt the magic twisting through his legs and he groaned in pain as his tail split back into two legs. Leon yelped at the sight, throwing his red cape over Legend before continuing to deal with his legs.

“Woah,” he heard Rusl mumble at the sight. “You can turn into a… fish?”

Legend let out a pained breath, smiling at the kind man. “A mermaid.”

“I see. I’ve never heard of mermaids before…”

“Yeah, well, I’m not really a mermaid, it’s just an item that I use whenever I get into water.”

Rusl stared at him blankly, and Legend chuckled at his confusion.

“It’s weird I know.”

Rusl smiled as Leon sat up and turned behind him. “Oy, Talon,” he called out, “bring me some bandages!”

“We don’t have any bandages!” He heard the man named Talon yell back. He sounded like he was inside the boat.

“Then bring me something that can be used as a bandage for Din’s sake!”

“Ok ok, don’t cuss at me!”

Legend took a deep breath, trying not to pass out from the pain and the blood, and Rusl rubbed his arm again.

“I’m so sorry about this,” he mumbled, and Legend waved it away.

“It’s ok, thank you for taking care of me—“ Legend was interrupted when he saw a man walk up to Leon with bandages. He felt his heart stop when he nearly recognized him, and he sat up, almost hitting Rusl’s chin with his head. “T-Tarin?” He blurted out, and the man looked at him in surprise. He looked behind him and looked back with confusion plastered on his face.

“Are ya talkin’ to me?” He asked, and Legend felt disappointment and embarrassment when he realized that he was definitely not Tarin. His hair was thinning at the top, his facial hair connected all the way to his sideburns, and his blue eyes did not match Tarin’s dark brown eyes. Legend looked down, tears uncontrollably welling up.

“I-I’m so s-sorry—I thought you were someone else,” he stammered.

“Oh, it’s ok kid, no harm done,” Talon said softly, handing a shirt to Leon. While Leon tore the shirt apart and began wrapping his leg, Legend stared at Talon. He had such a kind face, and now that he was looking at him more, he was looking a lot like his uncle. A lump formed in his throat and he looked away.

“So, uh, what’s your name?” Talon asked, breaking the silence.

“I’m Link,” Legend said without thinking. He probably should’ve kept his identity a secret, but these men were all so kind that he didn’t think about it. Leon froze and looked at him intensely.

“You’re Link? Are you traveling with other Links?”

“Um…” Legend stopped himself this time. They were all looking for the group… was it smart to say yes? “I… uh… I don’t know.”

“… you don’t know?”

“Uh… well I…” Legend looked around, panic beginning to bubble up in his chest. Rusl cleared his throat and Legend looked up at him.

“We’re only asking because we’re looking for our respective Links,” he explained. “Y’see, my son is Link, and most of us here also have a son named Link, we were hoping that our Links would all be together.”

Legend narrowed his eyes. Rusl’s son was Link? Which Link was he the father to? He honestly looked nothing like them. Not to mention his ears were rounded, not pointed. Was his son Sky? Sky had very small ears, but so did Warriors, maybe Warriors was his son…

“Hey,” Leon interrupted Legend’s thoughts. “It’s a simple question, are you traveling with Links?”

“Leon he’s overwhelmed, be patient with him,” Talon muttered, and Leon sighed.

“I-I’m sorry, Link,” he muttered, and Legend smiled.

“Hey, it’s ok. Who’s your son?”

Leon sat up straight, a hopeful gleam in his eye. “Um, his name is also Link… and uh… he has long blonde hair, he’s kind of braided it on one side though, and he’s very young…”

Legend hummed. “That sounds like Four.”

Leon nearly jumped up at that, causing Talon to yelp slightly.

“Four? As in the Four sword?”

“Uh, y-yes. We had to give each other nicknames so… he’s known as Four, mostly ‘cause of his eyes but also because of his four sword.”

Leon smiled slightly, then looked down. “He’s alright?”

“Last time I checked, yeah. He’s safe and sound.”

Leon sat back, running a hand through his hair, looking relieved. Legend smiled and sat up away from Rusl.

“Really, all the Links I’m traveling with are fine. I’m sure they’d be happy to see you.”

The men all made different sounds of relief at that, but Legend couldn’t help but notice the Linebeck man watching him strangely. Leon finished tying his bandages and gave his knee a pat.

“We'll take you inside, and maybe we’ll find you some clothes you can put on.”

Legend wrapped the red cape around him tighter in embarrassment. “Um… it’s ok my clothes are all on the beach.”

“Whatever you’re comfortable with,” Leon said, standing up. “Ok Linebeck you’re safe to look.”

“No, no you are not safe to look, Linebeck. There’s blood everywhere,” The short brown haired man stopped the tall man.

“Oh come on, his leg isn’t bleeding,” Leon muttered.

“There’s still blood everywhere!”

Legend chuckled at the men bantering, they reminded him of his own group. Rusl gave a small sigh and pulled Legend closer to him.

“Let me take you inside then,” he said softly. “I am… so sorry about this.”

Legend wrapped his arms around his neck as he was lifted off the ground. “Hey, it’s ok. I’m sure it wasn’t your fault anyways.”

Legend heard the others snort.

“No it was definitely his fault,” Leon said.

“I said that I saw a mermaid,” Linebeck started up, “and Rusl wasted no time to grab a spear and chuck it into the water.”

“He was so fast I didn’t have time to process what was going on!” The short brunette chuckled.

“He has a good aim I must admit.” Legend saw a different man with strikingly blue eyes leaning against a strange bird man. “It’s not easy to throw spears into the water, I’ve definitely tried.”

Rusl looked down ashamed. “Guys, enough.”

Talon picked up on his mood and stood up. “Alright y’all, let Rusl put Link inside. Leave him alone.”

The other men stopped and Rusl quickly turned to enter the inside of the boat. Legend watched him quietly as he was settled down in a bed. Rusl grabbed some blankets and set them down on top of Legend, and before he could leave, Legend grabbed his arm.

“Hey… it’s ok,” he said firmly. Rusl stared at him for a moment but smiled.

“Get some rest. We’ll get you once we reach the beach.”

Legend nodded and watched as Rusl left the bottom deck. He sighed and laid down, happily letting himself get rest.

#idk if any of y’all remember that meme I made where the guys are all making fun of Rusl #while trauma from shooting his son with an arrow in the leg was resurfacing #yeah this is what that meme was applying to dhsksbksnsk #rip rusl #I’ve been writing him to be very impulsive/ decisive #like he just does things mostly on instinct without putting much thought into it #I mean he does put some thought into the stuff #but he’s very quick about it #he doesn’t overthink #which… honestly he might now #lol #whumptober #whumptober day 15 #whumptober 2023 #strangers across eras #link between links #lbl legend #more hint at the puppeteer :3c

59 notes · View notes

linkedspirit-fanartfunart · 1 year

Text

[Image Description: A flat color drawing of Mina's Linkverse, Link Between Links, Linked Spirit, and Little Links Loz 1 links. Mina's Hyrule is looking towards the rest with a smile. LBL Hyrule looks confused, pointing at himself or Hope. Hope is leaning on LBL Hyrule's shoulder, and ruffling Wood's hair. Wood looks grumpy. End ID]

I wanted to do that thing going around where people drew the different version of one link across the aus, and the Classic Lonks of my favorite aus felt like a good option lol.

@minas-linkverse @linkbetweenlinksau @marenwithanm

#linked spirit #legend of zelda #loz #mina's linkverse #link between links #little links #ls hope #lbl hyrule #linkverse hyrule #little links wood #I'm lowkey assuming the adult ones are the same size but frankly if they're not you can 100% assume one or more are standing on a ladder #love how theres two necklines for loz 1 links. either v neck or turtle neck #please imagine Hope is teasing them all about something

206 notes · View notes

thegenxorcist · 5 months

Text

The Beast of LBL (Land Between the Lakes)

There are whispers of something unnatural lurking the territories of the Land Between the Lakes (LBL), and thus, people began to blame a most frightful creature, spotted every now and then, for terrorizing the land. They call it the Beast of LBL.

Almost all descriptions match up consistently; it stands a little over two full meters (seven feet) tall; the creature itself looking like a wolf standing and walking on its hind legs, sporting clawed hands, huge jaws packed with wicked teeth, dark, shaggy hair, and red glowing eyes that stare wildly at those it sees. Most typically, eyewitnesses smell it before they spot it; a fetid, rotten stench heralding the beast's arrival. With all things considered, the beast is perhaps one of America's werewolf-like creatures (like the Beast of Bray Road and the Rougarou) that are said to roam the dark woodlands and swamps of the undiscovered, known by some as 'dogmen.'

Lesser Known Legends #1: Beast of the Land Between the Lake

#Beast of the Land Between the Lakes

10 notes · View notes

grizzlybigfoot · 1 year

Text

https://www.youtube.com/live/UmzH7wLWBAE?feature=share

#dogman #scary #wolf #dogman #LBL #landbetweenthelakes #kentucky

#Tennessee #woods #howls #growls #reports #investigation #investigations #scary #grizzlyonthehunt #witness #witnesses #coverups #police #fishandwildlife #true #truth #legends #legend #history #chase #wolf #hindlegs #coverup #coverups #opendoor

05-11-23 at 7:00PM EST Time!

Grizzly and Barb Hartman Speaks to Shawn Michael Crisp regarding Dogman!

You must see this show! What information! What details!

0 notes

mythicallore · 5 years

Text

Creature Feature: The Beast of the Land Between the Lakes.

The woods grow silent. This silence spreads up from the roots of the trees, through the air to choke the birds and still the insects. Something gazes out from the shadows. Eyes glow a demonic red, it stands tall on two legs that end in claws. It looks like a horrid mix of man and wolf. A tortured howl tears from its maw, a sound that rings through the forest. The Beast Of The Land Between The Lakes is on the hunt.

The Land Between The Lakes, or LBL for short, is a national park located near Murray Kentucky. While many tourists will come away with stories of the picturesque landscape, the LBL is also known for much darker reasons.

The park is home to what the locals call, “The Vampire Hotel”. An abandoned building where murderer Rod Ferrell and his gang of misled youth came to drink each other’s blood. Ferrell is responsible for one of the worst home invasion murders in Florida history. While playing host to blood drinking rituals would be bad enough, something much worse than Ferrell is rumored to still stalk the park.

The Beast of LBL is said to be over six feet tall, covered in hair with pointed ears. It has the head of a wolf, with long sharp teeth. Although it walks on two legs like a man, it can move silently through the trees.

The origins of the creature, which many who have seen it compare it to classic depictions of werewolves or dogman sightings, varies. One of them centers around a man who settled in the LBL sometime in the 1800s. He claimed to suffer from a nighttime sickness which would cause him to fly into rages that made him dangerous to be around. The man claimed it was passed down through the blood. Stories abound around him and his eventual descendants, all of which lived in the LBL until sometime in the 1900s.

Another possible origin for the creature comes from French traders. They spoke of legends about a loup-garou. A person cursed to change into a beast by a witch or as divine punishment for some crime. The poor soul would then be overcome with animalistic rage and a craving for raw meat. The traders feared the creature, not just because of its violent nature but because the curse could be spread to those that survived an attack.

There have been many sightings of the Beast Of The Land Between The Lakes throughout the years, even up to today. The most shocking of which is said to have happened in 1980. A family had decided to go camping in the LBL. What should have been an idyllic weekend, ended with the family killed and mutilated. The bodies of the parents were found torn apart, their pieces mixed together. Half of their child was found up a tree by park rangers.

To this day ranchers around the LBL who have been working with American Bison, report calves mysteriously going missing. Campers tell stories about howling and guttural screams from somewhere just beyond their campfires. One tourist, after a prolonged feeling of being followed, managed to take the above photo. Was it just a play of light and shadow on his imagination? Or was he almost another victim of the Beast Of The Land Between The Lakes?

#supernatural #paranormal #cryptid

47 notes · View notes

pumpkinskiss · 5 years

Note

for the ask thing: 📒

Spooky Asks!👻😨

📒- What are some Local Legends in your area?

Oof, well I covered one of them in the previous ask. So I might as well go more into detail about it. The Beast of LBL is a creature that resides in the Land Between the Lakes state park. Many people describe it as a dark figure with a thin body that walks on two legs like a man would. It only comes out at night and so far is supposedly responsible for the death of a tourist family. Here is a news article done by a local radio show a couple years ago, if anyone is interested I highly suggest you check it out! https://www.wkdzradio.com/2018/03/07/the-beast-in-lbl/

Another I remember hearing a lot as a child, and again I mentioned in a precious ask, is the Kelly Goblins Case. This took place in a town close to mine almost 60+ years ago. Basically a group of individuals proclaimed they had been kidnapped by aliens and probed, however no proof of such events could be found. Here is the link to the article, I tried for both legends to keep the news and information local. Sometimes non-natives don’t have the full story, or they leave things out. https://www.wkms.org/post/visitors-afar-descend-upon-kelly-green-men-festival-eclipse-anniversary#stream/0

#ask #answered #{home}#the-fifth--of-november

3 notes · View notes

adelaide-swiftheart-sso · 5 years

Note

Halloween asks - Black cat, cauldron, enchanted, pumpkin, skeleton, raven, and fangs. | Anyone or all three of you. ;)

Cause I like doing all three I’ll do that😂😂

Favorite Urban Legend-

Myself-Beast of LBL

Rose- Loch Ness Monster

Swift-Chupacabra

Strangest dream/nightmare-

Myself-I don’t recall my dreams generally, so I don’t remember.

Rose- I headcanon that pandorian dreams are fucking wild anyways, so idek

Swift- you know that scene we get where Lisa saves us from Darko and them? That, but not ending well at all.

What fictional character scares you most-

Myself- Chucky and Annabelle. Dolls in general.

Rose-Hannibal Lecter

Swift- Slenderman

Do you believe in ghosts-

I do, and so do Rose and Swift.

What is your greatest fear-

Myself- not living up to who my parents think I can be.

Rose- Death

Swift- losing Ghost

Favorite fairytale-

Myself- Beauty and the Beast (the original version)

Rose- The Sealskin

Swift-Bluebeard

Favorite poem-

Myself- The Man from Snowy River

Rose- Do Not Go Gently Into The Night

Swift- Basically all John Muir

#not sso #rose riverlee #swift

1 note · View note

linkbetweenlinksau · 6 months

Text

Some references and written descriptions of the lbl boys. I’ll update the rest later, but for now, take Sky, Minish, Time, Legend, Hyrule, and Twilight.

Please for the love of all things that are holy read the tags and don’t tag this as LU

Next one

#with updated designs #I will NOT touch them anymore I will NOT #they are PERMANENT NOW #sorta #obviously they could change lol #anyways I’m hoping that people can understand their personalities just a tad more #btw anything I said in the past about lbl might be retconned #I explored the story a lot and stuff is still unsure #and the lover box means someone they are actually DATING/ married to #pining doesn’t count #so it’s a very small group of Links who do have lovers #ok Everyone looks so long but shhh this is a ref it’s not supposed to look perfect #I swear shoes are my worst enemie #legend of zelda au #zelda au #legend of zelda #lbl Sky #lbl Minish #lbl time #lbl legend #lbl Hyrule #lbl twilight #link between links #watch smiles attempt at the Hylian languages #I HATE them #also some people may not agree with some choices on here like the bad with teamwork or whatever #but this is about how I wrote the characters #and if you don’t agree with some aspects of the design #move on with your life

309 notes · View notes

suzanneshannon · 4 years

Text

Multi-Thumb Sliders: Particular Two-Thumb Case

This is a concept I first came across a few years back when Lea Verou wrote an article on it. Multi-range sliders have sadly been removed from the spec since, but something else that has happened in the meanwhile is that CSS got better — and so have I, so I recently decided to make my own 2019 version.

In this two-part article, we'll go through the how, step-by-step, first building an example with two thumbs, then identify the issues with it. We'll solve those issues, first for the two-thumb case then, in part two, come up with a better solution for the multi-thumb case.

The sliders we'll be coding.

Note how the thumbs can pass each other and we can have any possible order, with the fills in between the thumbs adapting accordingly. Surprisingly, the entire thing is going to require extremely little JavaScript.

Article Series:

Multi-Thumb Sliders: Particular Two-Thumb Case (This Post)

Multi-Thumb Sliders: General Case (Coming Tomorrow!)

Basic structure

We need two range inputs inside a wrapper. They both have the same minimum and maximum value (this is very important because nothing is going to work properly otherwise), which we set as custom properties on the wrapper (--min and --max). We also set their values as custom properties (--a and --b).

- let min = -50, max = 50 - let a = -30, b = 20; .wrap(style=`--a: ${a}; --b: ${b}; --min: ${min}; --max: ${max}`) input#a(type='range' min=min value=a max=max) input#b(type='range' min=min value=b max=max)

This generates the following markup:

Accessibility considerations

We have two range inputs and they should probably each have a <label>, but we want our multi-thumb slider to have a single label. How do we solve this issue? We can make the wrapper a <fieldset>, use its <legend> to describe the entire multi-thumb slider, and have a <label> that's only visible to screen readers for each of our range inputs. (Thanks to Zoltan for this great suggestion.)

But what if we want to have a flex or grid layout on our wrapper? That's something we probably want, as the only other option is absolute positioning and that comes with its own set of issues. Then we run into a Chromium issue where <fieldset> cannot be a flex or grid container.

To go around this, we use the following ARIA equivalent (which I picked up from this post by Steve Faulkner):

- let min = -50, max = 50 - let a = -30, b = 20; .wrap(role='group' aria-labelledby='multi-lbl' style=`--a: ${a}; --b: ${b}; --min: ${min}; --max: ${max}`) #multi-lbl Multi thumb slider: label.sr-only(for='a') Value A: input#a(type='range' min=min value=a max=max) label.sr-only(for='b') Value B: input#b(type='range' min=min value=b max=max)

The generated markup is now:

<div class='wrap' role='group' aria-labelledby='multi-lbl' style='--a: -30; --b: 20; --min: -50; --max: 50'> <div id='multi-lbl'>Multi thumb slider:</div> <label class='sr-only' for='a'>Value A:</label> <input id='a' type='range' min='-50' value='-30' max='50'/> <label class='sr-only' for='b'>Value B:</label> <input id='b' type='range' min='-50' value='20' max='50'/> </div>

If we set an aria-label or an aria-labelledby attribute on an element, we also need to give it a role.

Basic styling

We make the wrapper a middle-aligned grid with two rows and one column. The bottom grid cell gets the dimensions we want for the slider, while the top one gets the same width as the slider, but can adjust its height according to the group label's content.

$w: 20em; $h: 1em; .wrap { display: grid; grid-template-rows: max-content $h; margin: 1em auto; width: $w; }

To visually hide the <label> elements, we absolutely position them and clip them to nothing:

.wrap { // same as before overflow: hidden; // in case <label> elements overflow position: relative; } .sr-only { position: absolute; clip-path: inset(50%); }

Some people might shriek about clip-path support, like how using it cuts out pre-Chromium Edge and Internet Explorer, but it doesn't matter in this particular case! We're getting to the why behind that in a short bit.

We place the sliders, one on top of the other, in the bottom grid cell:

input[type='range'] { grid-column: 1; grid-row: 2; }

See the Pen by thebabydino (@thebabydino) on CodePen.

We can already notice a problem however: not only does the top slider track show up above the thumb of the bottom one, but the top slider makes it impossible for us to even click and interact with the bottom one using a mouse or touch.

In order to fix this, we remove any track backgrounds and borders and highlight the track area by setting a background on the wrapper instead. We also set pointer-events: none on the actual <input> elements and then revert to auto on their thumbs.

@mixin track() { background: none; /* get rid of Firefox track background */ height: 100%; width: 100%; } @mixin thumb() { background: currentcolor; border: none; /* get rid of Firefox thumb border */ border-radius: 0; /* get rid of Firefox corner rounding */ pointer-events: auto; /* catch clicks */ width: $h; height: $h; } .wrap { /* same as before */ background: /* emulate track with wrapper background */ linear-gradient(0deg, #ccc $h, transparent 0); } input[type='range'] { &::-webkit-slider-runnable-track, &::-webkit-slider-thumb, & { -webkit-appearance: none; } /* same as before */ background: none; /* get rid of white Chrome background */ color: #000; font: inherit; /* fix too small font-size in both Chrome & Firefox */ margin: 0; pointer-events: none; /* let clicks pass through */ &::-webkit-slider-runnable-track { @include track; } &::-moz-range-track { @include track; } &::-webkit-slider-thumb { @include thumb; } &::-moz-range-thumb { @include thumb; } }

Note that we've set a few more styles on the input itself as well as on the track and thumb in order to make the look consistent across the browsers that support letting clicks pass through the actual input elements and their tracks, while allowing them on the thumbs. This excludes pre-Chromium Edge and IE, which is why we haven't included the -ms- prefix — there's no point styling something that wouldn't be functional in these browsers anyway. This is also why we can use clip-path to hide the <label> elements.

If you'd like to know more about default browser styles in order to understand what's necessary to override here, you can check out this article where I take an in-depth look at range inputs (and where I also detail the reasoning behind using mixins here).

See the Pen by thebabydino (@thebabydino) on CodePen.

Alright, we now have something that looks functional. But in order to really make it functional, we need to move on to the JavaScript!

Functionality

The JavaScript is pretty straightforward. We need to update the custom properties we've set on the wrapper. (For an actual use case, they'd be set higher up in the DOM so that they're also inherited by the elements whose styles that depend on them.)

addEventListener('input', e => { let _t = e.target; _t.parentNode.style.setProperty(`--${_t.id}`, +_t.value) }, false);

See the Pen by thebabydino (@thebabydino) on CodePen.

However, unless we bring up DevTools to see that the values of those two custom properties really change in the style attribute of the wrapper .wrap, it's not really obvious that this does anything. So let's do something about that!

Showing values

Something we can do to make it obvious that dragging the thumbs actually changes something is to display the current values. In order to do this, we use an output element for each input:

- let min = -50, max = 50 - let a = -30, b = 20; .wrap(role='group' aria-labelledby='multi-lbl' style=`--a: ${a}; --b: ${b}; --min: ${min}; --max: ${max}`) #multi-lbl Multi thumb slider: label.sr-only(for='a') Value A: input#a(type='range' min=min value=a max=max) output(for='a' style='--c: var(--a)') label.sr-only(for='b') Value B: input#b(type='range' min=min value=b max=max) output(for='b' style='--c: var(--b)')

The resulting HTML looks as follows:

<div class='wrap' role='group' aria-labelledby='multi-lbl' style='--a: -30; --b: 20; --min: -50; --max: 50'> <div id='multi-lbl'>Multi thumb slider:</div> <label class='sr-only' for='a'>Value A:</label> <input id='a' type='range' min='-50' value='-30' max='50'/> <output for='a' style='--c: var(--a)'></output> <label class='sr-only' for='b'>Value B:</label> <input id='b' type='range' min='-50' value='20' max='50'/> <output for='b' style='--c: var(--b)'></output> </div>

We display the values in an ::after pseudo-element using a little counter trick:

output { &::after { counter-reset: c var(--c); content: counter(c); } }

See the Pen by thebabydino (@thebabydino) on CodePen.

It's now obvious these values change as we drag the sliders, but the result is ugly and it has messed up the wrapper background alignment, so let's add a few tweaks! We could absolutely position the <output> elements, but for now, we simply squeeze them in a row between the group label and the sliders:

.wrap { // same as before grid-template: repeat(2, max-content) #{$h}/ 1fr 1fr; } [id='multi-lbl'] { grid-column: 1/ span 2 } input[type='range'] { // same as before grid-column: 1/ span 2; grid-row: 3; } output { grid-row: 2; &:last-child { text-align: right; } &::after { content: '--' attr(for) ': ' counter(c) ';' counter-reset: c var(--c); } }

Much better!

See the Pen by thebabydino (@thebabydino) on CodePen.

Setting separate :focus styles even gives us something that doesn't look half bad, plus allows us to see which value we're currently modifying.

input[type='range'] { /* same as before */ z-index: 1; &:focus { z-index: 2; outline: dotted 1px currentcolor; &, & + output { color: darkorange } } }

See the Pen by thebabydino (@thebabydino) on CodePen.

All we need now is to create the fill between the thumbs.

The tricky part

We can recreate the fill with an ::after pseudo-element on the wrapper, which we place on the bottom grid row where we've also placed the range inputs. This pseudo-element comes, as the name suggests, after the inputs, but it will still show up underneath them because we've set positive z-index values on them. Note that setting the z-index works on the inputs (without explicitly setting their position to something different from static) because they're grid children.

The width of this pseudo-element should be proportional to the difference between the higher input value and the lower input value. The big problem here is that they pass each other and we have no way of knowing which has the higher value.

First approach

My first idea on how to solve this was by using width and min-width together. In order to better understand how this works, consider that we have two percentage values, --a and --b, and we want to make an element's width be the absolute value of the difference between them.

Either one of the two values can be the bigger one, so we pick an example where --b is bigger and an example where --a is bigger:

We set width to the second value (--b) minus the first (--a) and min-width to the first value (--a) minus the second one (--b).

div { background: #f90; height: 4em; min-width: calc(var(--a) - var(--b)); width: calc(var(--b) - var(--a)); }

If the second value (--b) is bigger, then the width is positive (which makes it valid) and the min-width negative (which makes it invalid). That means the computed value is the one set via the width property. This is the case in the first example, where --b is 70% and --a is 50%. That means the width computes to 70% - 50% = 20%, while the min-width computes to 50% - 70% = -20%.

If the first value is bigger, then the width is negative (which makes it invalid) and the min-width is positive (which makes it valid), meaning the computed value is that set via the min-width property. This is the case in the second example, where --a is 80% and --b is 30%, meaning the width computes to 30% - 80% = -50%, while the min-width computes to 80% - 30% = 50%.

See the Pen by thebabydino (@thebabydino) on CodePen.

Applying this solution for our two thumb slider, we have:

.wrap { /* same as before */ --dif: calc(var(--max) - var(--min)); &::after { content: ''; background: #95a; grid-column: 1/ span 2; grid-row: 3; min-width: calc((var(--a) - var(--b))/var(--dif)*100%); width: calc((var(--b) - var(--a))/var(--dif)*100%); } }

In order to represent the width and min-width values as percentages, we need to divide the difference between our two values by the difference (--dif) between the maximum and the minimum of the range inputs and then multiply the result we get by 100%.

See the Pen by thebabydino (@thebabydino) on CodePen.

So far, so good... so what?

The ::after always has the right computed width, but we also need to offset it from the track minimum by the smaller value and we can't use the same trick for its margin-left property.

My first instinct here was to use left, but actual offsets don't work on their own. We'd have to also explicitly set position: relative on our ::after pseudo-element in order to make it work. I felt kind of meh about doing that, so I opted for margin-left instead.

The question is what approach can we take for this second property. The one we've used for the width doesn't work because there is no such thing as min-margin-left.

A min() function is now in the CSS spec, but at the time when I coded these multi-thumb sliders, it was only implemented by Safari (it has since landed in Chrome as well). Safari-only support was not going to cut it for me since I don't own any Apple device or know anyone in real life who does... so I couldn't play with this function! And not being able to come up with a solution I could actually test meant having to change the approach.

Second approach

This involves using both of our wrapper's (.wrap) pseudo-elements: one pseudo-element's margin-left and width being set as if the second value is bigger, and the other's set as if the first value is bigger.

With this technique, if the second value is bigger, the width we're setting on ::before is positive and the one we're setting on ::after is negative (which means it's invalid and the default of 0 is applied, hiding this pseudo-element). Meanwhile, if the first value is bigger, then the width we're setting on ::before is negative (so it's this pseudo-element that has a computed width of 0 and is not being shown in this situation) and the one we're setting on ::after is positive.

Similarly, we use the first value (--a) to set the margin-left property on the ::before since we assume the second value --b is bigger for this pseudo-element. That means --a is the value of the left end and --b the value of the right end.

For ::after, we use the second value (--b) to set the margin-left property, since we assume the first value --a is bigger this pseudo-element. That means --b is the value of the left end and --a the value of the right end.

Let's see how we put it into code for the same two examples we previously had, where one has --b bigger and another where --a is bigger:

div { &::before, &::after { content: ''; height: 5em; } &::before { margin-left: var(--a); width: calc(var(--b) - var(--a)); } &::after { margin-left: var(--b); width: calc(var(--a) - var(--b)); } }

See the Pen by thebabydino (@thebabydino) on CodePen.

Applying this technique for our two thumb slider, we have:

.wrap { /* same as before */ --dif: calc(var(--max) - var(--min)); &::before, &::after { grid-column: 1/ span 2; grid-row: 3; height: 100%; background: #95a; content: '' } &::before { margin-left: calc((var(--a) - var(--min))/var(--dif)*100%); width: calc((var(--b) - var(--a))/var(--dif)*100%) } &::after { margin-left: calc((var(--b) - var(--min))/var(--dif)*100%); width: calc((var(--a) - var(--b))/var(--dif)*100%) } }

See the Pen by thebabydino (@thebabydino) on CodePen.

We now have a nice functional slider with two thumbs. But this solution is far from perfect.

Issues

The first issue is that we didn't get those margin-left and width values quite right. It's just not noticeable in this demo due to the thumb styling (such as its shape, dimensions relative to the track, and being full opaque).

But let's say our thumb is round and maybe even smaller than the track height:

See the Pen by thebabydino (@thebabydino) on CodePen.

We can now see what the problem is: the endlines of the fill don't coincide with the vertical midlines of the thumbs.

This is because of the way moving the thumb end-to-end works. In Chrome, the thumb's border-box moves within the limits of the track's content-box, while in Firefox, it moves within the limits of the slider's content-box. This can be seen in the recordings below, where the padding is transparent, while the content-box and the border are semi-transparent. We've used orange for the actual slider, red for the track and purple for the thumb.

Recording of the thumb motion in Chrome from one end of the slider to the other.

Note that the track's width in Chrome is always determined by that of the parent slider - any width value we may set on the track itself gets ignored. This is not the case in Firefox, where the track can also be wider or narrower than its parent <input>. As we can see below, this makes it even more clear that the thumb's range of motion depends solely on the slider width in this browser.

Recording of the thumb motion in Firefox from one end of the slider to the other. The three cases are displayed from top to bottom. The border-box of the track perfectly fits the content-box of the slider horizontally. It's longer and it's shorter).

In our particular case (and, to be fair, in a lot of other cases), we can get away with not having any margin, border or padding on the track. That would mean its content-box coincides to that of the actual range input so there are no inconsistencies between browsers.

But what we need to keep in mind is that the vertical midlines of the thumbs (which we need to coincide with the fill endpoints) move between half a thumb width (or a thumb radius if we have a circular thumb) away from the start of the track and half a thumb width away from the end of the track. That's an interval equal to the track width minus the thumb width (or the thumb diameter in the case of a circular thumb).

This can be seen in the interactive demo below where the thumb can be dragged to better see the interval its vertical midline (which we need to coincide with the fill's endline) moves within.

See the Pen by thebabydino (@thebabydino) on CodePen.

The demo is best viewed in Chrome and Firefox.

The fill width and margin-left values are not relative to 100% (or the track width), but to the track width minus the thumb width (which is also the diameter in the particular case of a circular thumb). Also, the margin-left values don't start from 0, but from half a thumb width (which is a thumb radius in our particular case).

$d: .5*$h; // thumb diameter $r: .5*$d; // thumb radius $uw: $w - $d; // useful width .wrap { /* same as before */ --dif: calc(var(--max) - var(--min)); &::before { margin-left: calc(#{$r} + (var(--a) - var(--min))/var(--dif)*#{$uw}); width: calc((var(--b) - var(--a))/var(--dif)*#{$uw}); } &::after { margin-left: calc(#{$r} + (var(--b) - var(--min))/var(--dif)*#{$uw}); width: calc((var(--a) - var(--b))/var(--dif)*#{$uw}); } }

Now the fill starts and ends exactly where it should, along the midlines of the two thumbs:

See the Pen by thebabydino (@thebabydino) on CodePen.

This one issue has been taken care of, but we still have a way bigger one. Let's say we want to have more thumbs, say four:

An example with four thumbs.

We now have four thumbs that can all pass each other and they can be in any order that we have no way of knowing. Moreover, we only have two pseudo-elements, so we cannot apply the same techniques. Can we still find a CSS-only solution?

Well, the answer is yes! But it means scrapping this solution and going for something different and way more clever — in part two of this article!

Article Series:

Multi-Thumb Sliders: Particular Two-Thumb Case (This Post)

Multi-Thumb Sliders: General Case (Coming Tomorrow!)

The post Multi-Thumb Sliders: Particular Two-Thumb Case appeared first on CSS-Tricks.

Multi-Thumb Sliders: Particular Two-Thumb Case published first on https://deskbysnafu.tumblr.com/

0 notes

smilesrobotlover · 7 months

Text

Whumptober- Day 1, Swooning.

Basically Minish gets a lil concussion teehee. It’s short and sweet but I didn’t know what else to do. Hope you enjoy!

~~~~~~~~~~~~~~

Minish groaned as he sat up, looking around at the battlefield before him. It seemed to be over, but Minish didn’t recall its ending. He looked around, ignoring the intense pressure in his head, seeing if he could spot his allies. He saw most of them huddled up together, but he couldn’t see what they were doing. He blinked a few times, confused at his blurry vision.

“Hey buddy,” he heard a voice next to him, and he turned to see Legend smiling at him. “Are you alright?”

Minish stared at him for a moment, not comprehending his question for a moment. Legend stared for a moment, tilting his head at his silence.

“Minish, are you ok?”

Minish rubbed his eyes and looked down. “Mm,” was all he was able to muster up in response.

Legend stared at him with a concerned frown on his face, before grabbing a rag and dabbing his head. Minish flinched and hissed in pain, and Legend pulled back.

“Sorry buddy, your head is bleeding.”

Minish blinked again, rubbing his head, feeling the familiar warm liquid oozing out of his head.

“Let me take care of that.”

Legend gently began taking care of his head wound again, wrapping it in bandages while Minish tried to remember what happened. Was he hit in the head? Well, obviously but was it a monster? Did he fall? Minish winced at his throbbing head as Legend finished up.

“Minish.”

He looked back at Legend who was looking more stern.

“Are you ok?”

Minish groaned, suddenly feeling nauseous. “I don’t feel very good,” he mumbled. It hurt to think about how he felt truthfully. Legend patted him on the shoulder and gave him a little nudge.

“You might have a concussion. Come on, we gotta take care of you,” Legend grabbed his arm and gently pulled him off his feet. Minish complied, but as soon as he was on his feet, his stomach lurched and he bent over, emptying his stomach.

“Woah ok, just let it all out,” he barely heard Legend over his vomiting. Minish groaned when he was finished and leaned heavily against the pink-haired hero, and he was gently lifted into his arms. “You’re lucky you’re so small.”

Minish grumbled and smacked the side of Legend’s face.

“I’ll kill you for that.”

“Sure you will. Just wait until after you’ve recovered to kill me?”

Minish smiled and tucked his head into Legend’s neck.

“Fine, promise not to tell anyone about this?”

“What, about carrying you somewhere safer? I guess I could keep a secret.”

“If you don’t, I’ll break your kneecaps,” he mumbled, closing his eyes as exhaustion began to overcome him. The last thing he heard was Legend chuckling.

“I’ll keep that in mind, smithy.”

#link between links #smiles writes #whumptober 2023 #whumptober day 1 #I’m playing around with Minish’s personality and I think I’m enjoying it a bit more than the other one!#lbl Minish #lbl legend #whumptober

55 notes · View notes

merjeobycharlie-blog · 6 years

Text

The Rabbi, the Priest, the Children and the Burning School

New Post has been published on https://merjeo.com/the-rabbi-the-priest-the-children-and-the-burning-school/

The Rabbi, the Priest, the Children and the Burning School

This school building is about to burn down. There are children trapped inside, Their only chances of survival are a Rabbi and a Catholic Priest.

Wanna laugh every time you open your email’s

Get Merjeo’s Funny Stories delivered right to you, and LYAO

#af-form-1344073078 .af-body .af-textWrapwidth:98%;display:block;float:none; #af-form-1344073078 .af-body acolor:#094C80;text-decoration:underline;font-style:normal;font-weight:normal; #af-form-1344073078 .af-body input.text, #af-form-1344073078 .af-body textareabackground-color:#FFFFFF;border-color:#919191;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif; #af-form-1344073078 .af-body input.text:focus, #af-form-1344073078 .af-body textarea:focusbackground-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid; #af-form-1344073078 .af-body label.previewLabeldisplay:block;float:none;text-align:left;width:auto;color:#5A431A;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif; #af-form-1344073078 .af-bodypadding-bottom:146px;padding-top:15px;background-repeat:no-repeat;background-position:bottom center;background-image:url("https://forms.aweber.com/images/forms/beach/beach/beach.png");color:#5A421A;font-size:11px;font-family:Verdana, sans-serif; #af-form-1344073078 .af-quirksMode .bodyTextpadding-top:2px;padding-bottom:2px; #af-form-1344073078 .af-quirksModepadding-right:15px;padding-left:15px; #af-form-1344073078 .af-standards .af-elementpadding-right:15px;padding-left:15px; #af-form-1344073078 .bodyText pmargin:1em 0; #af-form-1344073078 .buttonContainer input.submitbackground-image:url("https://forms.aweber.com/images/auto/gradient/button/07c.png");background-position:top left;background-repeat:repeat-x;background-color:#0057ac;border:1px solid #0057ac;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif; #af-form-1344073078 .buttonContainer input.submitwidth:auto; #af-form-1344073078 .buttonContainertext-align:right; #af-form-1344073078 body,#af-form-1344073078 dl,#af-form-1344073078 dt,#af-form-1344073078 dd,#af-form-1344073078 h1,#af-form-1344073078 h2,#af-form-1344073078 h3,#af-form-1344073078 h4,#af-form-1344073078 h5,#af-form-1344073078 h6,#af-form-1344073078 pre,#af-form-1344073078 code,#af-form-1344073078 fieldset,#af-form-1344073078 legend,#af-form-1344073078 blockquote,#af-form-1344073078 th,#af-form-1344073078 tdfloat:none;color:inherit;position:static;margin:0;padding:0; #af-form-1344073078 button,#af-form-1344073078 input,#af-form-1344073078 submit,#af-form-1344073078 textarea,#af-form-1344073078 select,#af-form-1344073078 label,#af-form-1344073078 optgroup,#af-form-1344073078 optionfloat:none;position:static;margin:0; #af-form-1344073078 divmargin:0; #af-form-1344073078 fieldsetborder:0; #af-form-1344073078 form,#af-form-1344073078 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1344073078 imgfloat:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0; #af-form-1344073078 input,#af-form-1344073078 button,#af-form-1344073078 textarea,#af-form-1344073078 selectfont-size:100%; #af-form-1344073078 pcolor:inherit; #af-form-1344073078 select,#af-form-1344073078 label,#af-form-1344073078 optgroup,#af-form-1344073078 optionpadding:0; #af-form-1344073078 tableborder-collapse:collapse;border-spacing:0; #af-form-1344073078 ul,#af-form-1344073078 ollist-style-image:none;list-style-position:outside;list-style-type:disc;padding-left:40px; #af-form-1344073078,#af-form-1344073078 .quirksModewidth:100%;max-width:247px; #af-form-1344073078.af-quirksModeoverflow-x:hidden; #af-form-1344073078background-color:#F0F0F0;border-color:#CFCFCF;border-width:1px;border-style:solid; #af-form-1344073078display:block; #af-form-1344073078overflow:hidden; .af-body .af-textWraptext-align:left; .af-body input.imageborder:none!important; .af-body input.submit,.af-body input.image,.af-form .af-element input.buttonfloat:none!important; .af-body input.textwidth:100%;float:none;padding:2px!important; .af-body.af-standards input.submitpadding:4px 12px; .af-clearclear:both; .af-element labeltext-align:left;display:block;float:left; .af-elementpadding-bottom:5px;padding-top:5px; .af-form-wrappertext-indent:0; .af-formtext-align:left;margin:auto; .af-quirksMode .af-elementpadding-left:0!important;padding-right:0!important; .lbl-right .af-element labeltext-align:right; body

Your First Name:

Your Email:

Your email will not be shared with anyone

// Special handling for facebook iOS since it cannot open new windows (function() if (navigator.userAgent.indexOf('FBIOS') !== -1 )();

0 notes