#there may be a 'timelapse part two'????? if i decide to get in her head again | Explore Tumblr Posts and Blogs

rownanisntwriting · 6 months

Text

CHAPTER TEN BABEEEE in this chapter we go back in time (hence the title). Timelapse takes place a little after Rosemarie and Simon go missing—the team lead at Good Intentions feels compelled to file a police report and visit Rosemarie’s empty home. (I noticed there's a little mistake in the text... just ignore it shh hush hush) I also wanted to say that I adore the comments you guys put in the tags of the reblogs. I know I'm shit at the tag games, but if anyone has any asks pertaining to this wip I'll do my best to answer! Working on this project has made me both stressed and happy lol I'm glad to be able to share my writing with even just a few people.

text and tags below the cut!

By now the power and water have been turned off. The food in the kitchen is beginning to mold; Sadie notices in particular a chicken pot pie that is a little too green inside. She shuts the stale refrigerator. It’s obvious that one of the last things Rosemarie did was lie in bed. The chairs at her gateleg table are pushed in, crochet placemats she used only when she had company still left on the table, her coke bottle of dried peonies at the center. The blankets were folded over the edge of the raisin-black velvet couch. She doesn’t touch the remote, turns on the TV to see what channel Rosemarie was last watching. She stares at Rosemarie’s unmade bed, tries to put the pieces together. She wondered what would make Rosemarie get up out of bed, it looked like she hadn’t done the dishes, hadn’t ordered takeout. Her room didn’t smell like Rosemarie did. Warmth, something homey. Amber and magnolias, chocolate and orchids. This wasn’t the first time she had been in Rosemarie’s home. She was here when Rosemarie was showing her the portrait Simon had drawn of her. She said that she had to see it in person so she could see every lovely line on the smooth Bristol board paper in a wooden ornate gold picture frame, the shape of it an oval, Simon’s familiar signature tucked beneath Rosemarie’s graphite chin. She looks in the bathroom, next. Rosemarie owned very little skincare and less makeup. She looks at herself in her mirror. There aren’t sticky notes on her bathroom mirror 0r a lipstick stain from her kiss. Everything is like a still life, the sort of still life you saw in your college art class, simple and with a single light source, the shadows and dust telling of time. She wonders what could have happened to her favorite coworker, the sweet-cheeked employee who was bronze incarnate and showed her face like the moon phases. The dark side of her was Sadie’s favorite. Sadie leaves without answers to Rosemarie’s disappearance. Her fingers tighten around the doorknob. She catches a glance of her wedding ring before she leaves the building.

tags to my forrest fae as usual! @coffeeandcalligraphy and @thewardenofwinter. let me know if you would like to be added to or removed from the BFC tag list!

#blackforrestcake #this chapter might be my fav #its my first time writing with Sadie #Sadie and Rosemarie are pretty close #work besties #but they dont hang much #they also have similar senses of humor (dark humor)#Sadie doesnt believe anything being told to her #there may be a 'timelapse part two'????? if i decide to get in her head again #i may do so only when neccesary #basically her chapter connects the dots and we have to go five whole weeks back #but there is a jump in time nonetheless so its not too long #sadies head is fun tho #shes also a lesbian!#writeblr #amwriting #writing blog

7 notes · View notes

skythealmighty · 4 years

Text

A girl in a spider costume zooms through the sky on webs strung from her hand, whooping. A narration cuts in of a sassy teenage girl.

“All right, let’s get this part over with. I’m not the first, and I’m certainly not the last. Cut to backstory!” she said, then snapped. The scene changed.

The girl, outside her costume, is eating a bagel. She has blond-brown hair in a messy bob, blue-green eyes, and pale skin. She’s wearing simple clothes. “My name is Skye King. In my universe, I’m one of two spider-people, though I’m the only Spider-Girl. Spider-Man is in New York. My business is in Seattle. One day, during summer break, I was bitten by a radioactive spider after my 15th birthday. You get the jist, right? Then I had spider powers, yadda yadda yadda. We’ve all heard it before. Well, the thing is, not really. That spider was from another universe (at least I'm 99% sure).” While she said all that, in the cutscene, a spider bit her on the hand and she threw it outside. “I could tell something was wrong, so I decided to cancel my hangout with my friend the next day, telling her I was sick. I couldn’t have been more wrong, but it was a good call. I absolutely trashed my room that day.” It showed Skye in her room, sticking to the bedcovers and the ceiling and her books. “Needless to say, my parents were kinda, okay super mad. Oh well, small price for a little superpower! I discovered during the next few days that I could create portals with my webs, and the first one led to the universe with the graffiti Spider-Man, Miles Morales.” Another scene showed her fistbumping with Miles, masks down on their spider costumes as they sat on top of a building. “There, I officially got my suit from Aunt May with some help. I wanted a little piece of everyone I met, so I asked Miles to decorate my costume a bit. He got the left arm, and I gotta say, it looked pretty sweet! Over the next week, I visited other universes and added to my suit a little at a time. You name them from Miles’s movie, I’ve probably visited them. Peni Parker (got a robotics upgrade from her), Noir (the guns were cool, but he also got a bit of space on my mask), Gwen (I stole her hoodie idea and went to gymnastics), Peter B. (not much, his suit’s the same as the original), and even Peter Porker (got a cartoon hammer, I love Looney Tunes)! They were all really cool, but my story isn’t about meeting them. Way too cliche, and probably done before, too. This little mini story takes place in the universe where that spider came from. So why don’t we finally get started, now that you know who I am?” The scene returned to Spider-Girl swinging from the Seattle Space Needle. She winked at the camera, and the screen turned black.

Skye yawned, sitting up in bed as her alarm went off. “Hey Google, alarm off,” she said tiredly, getting out of bed and getting dressed off-camera. She ate her breakfast, said hi to her family, packed up her backpack (not forgetting her Spider Suit), and jogged out the door to her bus stop. She napped on the bus until it arrived at school, where she was woken up by her Spidey senses. She got off the bus. “Hello again, Edison High,” she sighed, walking into the cafeteria and sitting down at a table full of older students. The narration starts. “This is my average, everyday high school, Edison High. These are my art club friends, Olivia, Jack, Darth, and.. well, they’re important to me, but maybe not to you. My other friends are Sofia, Haylie, Mitchell, AJ, and Micheal. At my high school, nobody apart from Sofia, AJ, and Haylie know I’m Spider-Girl, even though she’s the main topic of gossip. School’s boring, so I’ma skip it.”

The scene of a high school day is fast forwarded until the very end, where she goes to the bathroom. “I’ve long since made a secret exit, and most girls don’t check the bathroom mirror, so I get dressed in my onesie there. It’s really not that hard, and I have a drone get my backpack home. That does mean I have to do my homework in class, but I’m pretty smart, so I can do it most of the time.” Skye, in her Spider-Girl suit, exits the stall and opens the mirror like a door, walking inside. She drops her backpack into a carrier drone, then opens a secret door from the inside and webs to the top of the school. “All in all, a pretty normal day. No crime at the moment, so I decided to visit another universe again. I mean, why not?” She spun her web in a circle, creating a portal, which she swung into. “I wanted a little something to add to my outfit. But that day? Fate didn’t like me one bit.” She looked around at the other portals, which had markings on them, the logos of the different Spider-Men she’d met. One of the portals was unmarked, and that was the one she swung into. As soon as she did, she attempted to make another web, but failed. “Aw, what? Talk about bad timing..” the Skye in the scene said, before yelling and slamming into the ground. “I think I’ll stop the narration now, so you can focus on the story.”

The screen was black, but then Skye opened her eyes. In front of her was a rainbow Spider-Man, upside down in front of her. She yelped and scrambled backwards in surprise, bonking her head. “Ow..” she muttered, rubbing her head. She flicked her wrist, trying to spin her web. Nothing happened. “Damnit!” she cursed.

“You okay?” the rainbow Spider-Man asked, letting go of his web (which was unsurprisingly rainbow as well) and landing on the ground. “You hit your head pretty hard.”

Skye grinned under the mask. “I’ve had worse. I mean, when you’re Spider-Girl, you gotta be able to take a few hits, right?” She got up, standing in front of the walking rainbow and looking him up and down. “I like the sugar glider wings,” she complimented. “I bet those come in handy a lot, huh?”

He smiled too (though only shown with the eyes of his mask). “Yeah, they do. So, how’d you get here anyway? Super collider?”

She shook her head. “Nah, got here on my own. Part of my powers include going to other universes, weirdly enough. My webs aren’t working, though,” she flicked her hand for emphasis, “so I’m stuck here for the moment. I don’t think that’ll last for more than a couple days, so no need to worry.”

He sighed in relief. “Good, I’m already taking care of four Spider-Children, so I don’t need more.. why are you looking at me like that?” he asked, after seeing her starstruck expression.

“There’s more!?” she said, sort of high-pitched. She covered her mouth. “Oops. Um, basically, when I run into another Spider-Person, I want a way of remembering, so I add to my outfit.. I was looking to upgrade mine for a while, so this is perfect!”

He laughed. “Alright, I’ll take you to them. Be warned though, they’re all pretty extra in their own way.” The scene cut to him swinging her up to an apartment, setting her down.

“Thanks for that,” she said, embarrassed. “If I had my webs, I wouldn’t need you to do that, though..”

“Nah, it’s fine!” He took off his mask, grinning. “I don’t mind. I’m Thomas.” He held out his hand.

“Skye,” she said, taking it after pulling her own mask off. “Now if you don’t mind, you got some thread and needles?” He pointed her to a room. “Sweet!” she said, running in. “I’ll be back!”

After a few minutes, she came out with the same sugar glider extensions he had, but they were the bi flag instead of the gay flag. “Ta-daa!”

“Nice,” he nodded in approval. “There’s some spare clothes in the closet if you don’t mind sweats and t-shirts.”

She grinned. “That’s what I usually wear anyway!”

The screen showed a Spongebob ‘one hour later’ cutscene, then showed Thomas and Skye watching a movie. She was wearing a blue t-shirt and purple sweats. There was a knock on the door. “Come in, guys,” Thomas said, not taking his eyes off the movie. Skye, however, looked towards the door to see four different Spider-Men come through. One wore a royal outfit with flowers, hair uncovered, one wore a pink outfit with hearts and a baseball cap, one wore an outfit similar to Gwen’s with a V, and the last one wore a blue outfit that had a tie design on it and four robotic spider legs on his back. Her eyes widened.

“Okay, now I definitely need to update my outfit again!” She grinned, dashing into the room she’d been in before where her suit was. The others looked at her.

“Uh… who was that?” the one in the royal outfit asked, looking perplexed.

“You’ll see,” Thomas answered.

After a half hour, while everyone was on the couch with masks down, she came out with the suit on and mask up. The hoodie was up, and on top of it, there was a gray V like the Gwen lookalike’s mask. One of the legs had pink hearts and red flowers, and the other had the same design as the tie design but only up to below the knee. She was grinning, until she realized something. “Oh, right, I never introduced myself. I’m Skye, Spider-Girl!” she said, pulling her mask down and bowing.

“Virgil,” said the Gwen lookalike.

“Roman!” introduced the royal one.

“Hi, I’m Patton!” grinned the pink one.

“Salutations, my name is Logan,” said the one in the tie.

“Nice to meet all of you!” said Skye, grinning and sitting down with the rest.

A timelapse showed the day going by, nothing super interesting. The timelapse stopped at the next day during lunch, because that’s where the action is. Besides, this is supposed to be a short story, so I won’t bore you too much.

Everyone was having pizza. “Mm, they do not make pizza like this in Seattle, let me tell you,” Skye said after finishing her first slice. “I almost wish they did, but then I’d never cook for myself!”

Suddenly, everyone froze, Spidey senses going off. “Oh no, why in the middle of lunch?” Roman groaned, setting down his slice and going into one of the stalls in the corner. Everyone but Skye followed him, her going into the suit touch up room. One by one, they all emerged in their Spider suits. Thomas and his gang swung out, while Skye took a deep breath and glided after them using the addition she’d just added yesterday, since she still couldn’t use her webs. They arrived in Times Square to see the Scorpion causing trouble with the Tinkerer, again.

“Peter always has to deal with these guys, why don’t they ever quit?” Skye asked, perched next to the others on top of a building.

“Evil never rests?” Logan offered.

“Nah, these guys are just really annoying,” Thomas sighed.

They all jumped down, standing in front of either the Tinkerer or the Scorpion. Virgil, Logan, and Skye were in front of the Tinkerer, while Thomas, Patton, and Roman were in front of the Scorpion. “Time to kick some ass!” Skye said, crawling up a building and launching herself at the Tinkerer. Soon after, Virgil and Logan swung at him in turn, Logan knocking the Tinkerer out of his own vehicle and taking control, which he then used to stun the Tinkerer while Virgil tied him up. Thomas swung and glided onto the Scorpion’s face, blinding him. Patton and Roman tied the Scorpion up, then Thomas kicked the Scorpion over and over in the face, temporarily stunning him. As if it was second nature for her, Skye swung using her webs and tied the Scorpion up some more, knowing her webs were stronger than the others’ by nature. As she landed on the ground, she looked at her hands and smiled. “Looks like I can go home now,” she grinned to the others. “Sorry for overstaying my welcome.”

“Nah, you’re fun to hang around with. Come back anytime,” Thomas said, waving goodbye. She nodded and made a portal, swinging through as it closed behind her. She hung in place in the middle of all the universes, making five webs above the top of the portal she just came in from. The middle one was a rainbow spider, and the other four were a gray V, a red rose, a pink heart, and a blue tie. She grinned and swung through the portal labeled ‘home’, swinging above the city. She was lucky it was Saturday, so she didn’t miss any school. But how would she explain it to her parents? She shook her head to clear her thoughts as she spotted a robbery. Good never sleeps, she thought, webbing one of the criminals with a sigh. The scene faded to black.

“Hey, don't get mad, I told you it’d be short. Cut!”

@ask-spiderverse-virgil

49 notes · View notes

suzanneshannon · 4 years

Text

Advice for Complex CSS Illustrations

If you were to ask me what question I hear most about front-end development, I’d say it’s“How do I get better at CSS?” And that question usually comes up to some CSS illustration I made, which is something I love to do over on CodePen.

To many, CSS is this mythical beast that can’t be tamed. This tweet from Chris made me chuckle because, although ironic, there’s a lot of truth to it. That said, what if I told you that you were only a few properties and techniques away from creating anything you wanted? The truth is that you are indeed that close.

I’ve been wanting to compose an article like this for some time, but it’s a hard topic to cover because there are so many possibilities and so many techniques that there’s often more than one way to accomplish the same thing. The same is true with CSS illustrations. There’s no right or wrong way to do it. We’re all using the same canvas. There are simply so many different tools to get those pixels on the page.

While there is no “one size fits all” approach to CSS illustration, what I can offer is a set of techniques that might help you on your journey.

CodePen Embed Fallback

Time and practice

CSS illustration takes lots of time and practice. The more accurate you want to be and the more complicated the illustration, the longer it’s going to take. The time-consuming part isn’t usually deciding on which properties to use and how, but the tinkering of getting things to look right. Be prepared to get very familiar with the styles inspector in your browser dev tools! I also recommend trying out VisBug if you haven’t.

Two fantastic CSS artists are Ben Evans and Diana Smith. Both have recently talked about time consumption when referring to CSS illustration.

Diana’st PureCSS Gaze took her two long weekends to complete. She talks about some of her techniques here and here. “If you have the time, patience and drive, it is certainly possible,” she says.

I posted a meme-like picture about a cup and Ben’s response summed things up perfectly:

I was tempted to create this in CSS when I first saw the tweet but then thought my reply would take about a month.

It takes time!

CSS Illustration pic.twitter.com/vqpQLKTte5

— Jhey 🛠 (@jh3yy) May 10, 2020

Tracing is perfectly acceptable

We often have an idea of what it is that we want to illustrate. This article isn’t about design, after all.; it’s about taking an image and rendering it with the DOM and CSS. I’m pretty sure this technique has been around since the dawn of time. But, it’s one I’ve been sharing the last few months.

Find or create an image of what it is you want to illustrate.

Pull it into your HTML with an <img> tag.

Position it in a way that it will sit underneath your illustration.

Reduce the image opacity so that it’s still visible but not too overpowering.

Trace it with the DOM.

To my surprise, this technique isn’t common knowledge. But it’s invaluable for creating accurate CSS illustrations.

See this trick in action here:

Here’s a timelapse of creating that CSS @eggheadio 😎 Tweaked the shadows with clip-path after 🛠️ 💻 https://t.co/XhDRspwwFg via @CodePen #webdev #coding #CSS #animation #webdesign #design #creative #100DaysOfCode #HTML #Timelapse https://t.co/ZQ1hyzcoSA pic.twitter.com/iPf7ksYCGX

— Jhey 🛠 (@jh3yy) May 1, 2020

And try it out here:

CodePen Embed Fallback

Pay attention to responsiveness

If there are two takeaway techniques to take from this article, let it be the “Tracing” one above and this next one.

There are some fantastic examples of CSS illustration out there. But the one unfortunate thing about some of them is that they aren’t styled — or even viewable — on small screens. We live in an age where first impressions with tech are important. Consider the example of a keyboard illustrated with CSS. Someone comes across your work, opens it up on their smartphone, and they’re greeted with only half the illustration or a small section of it. They probably missed the coolest parts of the demo!

Here’s my trick: leverage viewport units for your illustrations and create your own scaled unit.

For sizing and positioning, you either have the option of using a scaled unit or percentage. This is particularly useful when you need to use a box shadow because the property accepts viewport units but not percentages.

Consider the CSS egghead.io logo I created above. I found the image I wanted to use and popped it in the DOM with an img tag.

img { height: 50vmin; left: 50%; opacity: 0.25; position: fixed; top: 50%; transform: translate(-50%, -50%); }

The height, 50vmin, is the desired size of the CSS illustration. The reduced opacity allows us to “trace” the illustration clearly as we progress.

Then, we create our scaled unit.

/** * image dimensions are 742 x 769 * width is 742 * height is 769 * my desired size is 50vmin */ :root { --size: 50; --unit: calc((var(--size) / 769) * 1vmin); }

With the image dimensions in place, we can create a uniform unit that’s going to scale with our image. We know the height is the largest unit, so we use that as a base to create a fractional unit.

We get something like this:

--unit: 0.06501950585vmin;

That looks awkward but, trust me, it’s fine. We can use this to size our illustration’s container using calc().

.egg { height: calc(769 * var(--unit)); position: relative; width: calc(742 * var(--unit)); z-index: 2; }

If we use either percentages or our new --unit custom property to style elements within the container of our CSS illustration, we will get responsive CSS illustrations… and all it took was a few lines of math using CSS variables!

Resize this demo and you’ll see that everything stay in proportion always using 50vmin as the sizing constraint.

CodePen Embed Fallback

Measure twice, cut once

Another tip is to measure things. Heck, you van even grab a tape measure if you’re working with a physical object!

CodePen Embed Fallback

This may look a little funky but I measured this scene. It’s the TV combo unit I have in my lounge. Those measurements equate to centimeters. I used those to get a responsive unit based on the actual height of the TV. We can give that number — and all others — a name that makes it easy to remember what it’s for, thanks to custom properties.

:root { --light-switch: 15; --light-switch-border: 10; --light-switch-top: 15; --light-switch-bottom: 25; --tv-bezel: 15; --tv-unit-bezel: 4; --desired-height: 25vmin; --one-cm: calc(var(--desired-height) / var(--tv-height)); --tv-width: 158.1; --tv-height: 89.4; --unit-height: 42; --unit-width: 180; --unit-top: 78.7; --tv-bottom: 114.3; --scaled-tv-width: calc(var(--tv-width) * var(--one-cm)); --scaled-tv-height: calc(var(--tv-height) * var(--one-cm)); --scaled-unit-width: calc(var(--unit-width) * var(--one-cm)); --scaled-unit-height: calc(var(--unit-height) * var(--one-cm)); }

As soon as we calculate a variable, we can use it everywhere. I know my TV is 158.1cm wide and 89.4cm tall. I checked the manual. But in my CSS illustration, it will always scale to 25vmin.

Use absolute positioning on all the things

This one will save you a few keystrokes. More often than not, you’ll be looking to absolutely position elements. Save yourself and put this rule somewhere.

/* Your class name may vary */ .css-illustration *, .css-illustration *:after, .css-illustration *:before, .css-illustration:after, .css-illustration:before { box-sizing: border-box; position: absolute; }

Your keyboard will thank you!

Positioning is a tricky concept in CSS. You can read up on it in the CSS Almanac for more information on how to use it.

Or, have a play with this little positioning playground:

CodePen Embed Fallback

Stick to an approach

This is by far the hardest thing to do. How do you approach a CSS illustration? Where do you even start? Should you start with the outermost part and work your way in? That doesn’t work so well.

Odds are that you’ll try some approaches and find a better way to go about it. You’ll certainly do a little back-and-forth but, the more you practice, the better you’ll get at spotting patterns and developing an approach that works best for you.

I tend to relate my approach to how you’d go about creating a vector image where illustrations are made up of layers. Split it up and sketch it on paper if you need to. But, start from the bottom and work your way up. This tends to mean larger shapes first, and finer details later. You can always tinker with the stacking index when you need to move elements around.

Maintain a solid structure for your styles

That leads us to the structure. Try to avoid a flat DOM structure for your illustration. Keeping things atomic makes it easier to move parts of your illustration. It will also makes it much easier to show and hide parts of the illustration or even animate them later. Consider the CSS Snorlax demo. The arms, feet, head, etc. are separate elements. That made animating the arm a lot easier than if I had tried to keep things together since I could simply apply the animation to the .snorlax__arm-left class.

CodePen Embed Fallback

Here’s a timelapse shot of me creating the demo:

Attempted to put together a timelapse of the CSS Snorlax we built last night 😅 Amusing watching it back! 💻 https://t.co/vbVYmFUN5V via @CodePen#webdev #coding #HTML #CSS #webdesign #100DaysOfCode #creative #design #animation pic.twitter.com/0mJtLPRQfP

— Jhey 🛠 (@jh3yy) April 28, 2020

Handling awkward shapes

There’s a pretty good article right here on CSS-Tricks for creating shapes with CSS. But what about more “awkward” shapes, like a long curve or even an outer curve? In these scenarios, we need to think outside the box. Properties such as overflow, border-radius, and clip-path are big helpers.

Consider this CSS Jigglypuff demo. Toggle the checkbox.

CodePen Embed Fallback

That’s the key for creating curved shapes! We have an element much larger than the body with a border-radius applied. We then apply overflow: hidden to the body to cut that part off.

How might we create an outer curve? This one’s a little tricky. But a trick I like to use is a transparent element with a thick border. Then apply a border-radius and clip the excess, if required.

CodePen Embed Fallback

If you hit the toggle, it reveals the element we are using to go across that corner. Another trick might be to overlay a circle that matches the background color. This is fine until we need to change the background color. It’s OK if you have a variable or something in place for that color. But, it could make things a little harder to maintain.

clip-path is your friend

You might have noticed a couple of interesting CSS properties in that last demo, including clip-path. You’ll most likely need clip-path if you want to create complex CSS shapes. It’s especially handy for cutting off bits of elements when hiding parent box overflow doesn’t do.

Here’s a little demo I built some time ago that showcases different clip-path possibilities.

CodePen Embed Fallback

There’s also this demo that takes ideas from the “Shapes of CSS” article and re-created with clip-path.

CodePen Embed Fallback

border-radius is your other friend

You’re going to need border-radius to create curves. One uncommon trick is to use a “double” syntax. This allows you to create a horizontal and vertical radius for each corner.

Play with this demo to really appreciate the power of border-radius. I advocate using percentages across the board in order keep things responsive.

CodePen Embed Fallback

Shading techniques

You’ve got all the shapes, everything is nicely laid out, and all the right colors are in place… but something still looks off. Odds are that it’s a lack of shading.

Shading adds depth and create a realistic feel. Consider this ecreation of a Gal Shir illustration. Gal is fantastic at using shades and gradients to make beautiful illustrations. I thought it would be fun to do a recreate it and include a switch that toggles the shading to see just what a difference it makes.

CodePen Embed Fallback

Shading effects are often created with a box-shadow and background-image combination.

The key thing with these properties is that we can stack them in a comma-separated list. For example, the cauldron in the demo has a list of gradients that are being used across the body.

.cauldron { background: radial-gradient(25% 25% at 25% 55%, var(--rim-color), transparent), radial-gradient(100% 100% at -2% 50%, transparent, transparent 92%, var(--cauldron-color)), radial-gradient(100% 100% at -5% 50%, transparent, transparent 80%, var(--darkness)), linear-gradient(310deg, var(--inner-rim-color) 25%, transparent), var(--cauldron-color); }

Note that radial-gradient() and a linear-gradient() are being used here and not always with perfectly round numeric values. Again, those numbers are just fine. In fact, you’ll spend a lot of time tweaking and tinkering with things in the style inspector.

It’s generally the same working with box-shadow. However, with that, we can also use the inset value to create tricky borders and additional depth.

.cauldron__opening { box-shadow: 0 0px calc(var(--size) * 0.05px) calc(var(--size) * 0.005px) var(--rim-color) inset, 0 calc(var(--size) * 0.025px) 0 calc(var(--size) * 0.025px) var(--inner-rim-color) inset, 0 10px 20px 0px var(--darkness), 0 10px 20px -10px var(--inner-rim-color); }

There are certainly times where it will make more sense to go with filter: drop-shadow() instead to get the effect you want.

Lynn Fisher’s a.singlediv.com is a brilliant example of these properties in action. Have a poke around on that site and inspect some of the illustrations for great ways to use box-shadow and background-image in illustrations.

box-shadow is so powerful that you could create your entire illustration with it. I once joked about creating a CSS illustration of a dollar.

In CSS right? 😅#webdev #CSS #animation #webdesign #coding #100DaysOfCode #HTML https://t.co/VmyeySsK83

— Jhey 🛠 (@jh3yy) April 22, 2020

I used a generator to create the illustration with a single div. But Alvaro Montoro took it a little further and wrote a generator that does it with box-shadow instead.

Preprocessors are super helpful

While they aren’t required, using preprocessors can help keep your code neat and tidy. For example, Pug makes writing HTML faster, especially when it comes to using loops for dealing with a bunch of repeating elements. From there, we can scope CSS custom properties in a way that we only need to define styles once, then overwrite them where needed.

CodePen Embed Fallback

Here’s another example that demonstrates a DRY structure. The flowers are constructed with the same markup, but each has its own index class that is used to apply scoped CSS properties.

CodePen Embed Fallback

The first flower has these properties:

.flower--1 { --hue: 190; --x: 0; --y: 0; --size: 125; --r: 0; }

It’s the first one, so all the others are based off it. Notice how the second flower is off to the right and up slightly. All that takes is assigning different values to the same custom properties:

.flower--2 { --hue: 320; --x: 140; --y: -75; --size: 75; --r: 40; }

Animated responsive CSS Leif features in the latest CodePen Spark! ✨ For those who don’t know Animal Crossing, Leif is a green-thumbed Sloth who visits your island 🌻 Here’s a timelapse! 📹 💻 https://t.co/tkHX4nWXp7 via @CodePen pic.twitter.com/naJIrsSlYM

— Jhey 🛠 (@jh3yy) May 19, 2020

That’s it!

Go forth, use these tips, come up with your own, share them, and share your CSS masterpieces! And hey, if you have your own advice, please share that too! This is definitely the sort of thing that is learned through lots of trial and error — what works for me may look different from what works for you and we can learn from those different approaches

The post Advice for Complex CSS Illustrations appeared first on CSS-Tricks.

Advice for Complex CSS Illustrations published first on https://deskbysnafu.tumblr.com/

0 notes

recruitmentdubai · 4 years

Text

Advice for Complex CSS Illustrations

While there is no “one size fits all” approach to CSS illustration, what I can offer is a set of techniques that might help you on your journey.

CodePen Embed Fallback

Time and practice

Two fantastic CSS artists are Ben Evans and Diana Smith. Both have recently talked about time consumption when referring to CSS illustration.

I posted a meme-like picture about a cup and Ben’s response summed things up perfectly:

I was tempted to create this in CSS when I first saw the tweet but then thought my reply would take about a month.

It takes time!

CSS Illustration pic.twitter.com/vqpQLKTte5

— Jhey 🛠 (@jh3yy) May 10, 2020

Tracing is perfectly acceptable

Find or create an image of what it is you want to illustrate.

Pull it into your HTML with an <img> tag.

Position it in a way that it will sit underneath your illustration.

Reduce the image opacity so that it’s still visible but not too overpowering.

Trace it with the DOM.

To my surprise, this technique isn’t common knowledge. But it’s invaluable for creating accurate CSS illustrations.

See this trick in action here:

Here’s a timelapse of creating that CSS @eggheadio

Tweaked the shadows with clip-path after

https://t.co/XhDRspwwFg via @CodePen #webdev #coding #CSS #animation #webdesign #design #creative #100DaysOfCode #HTML #Timelapse https://t.co/ZQ1hyzcoSA pic.twitter.com/iPf7ksYCGX

— Jhey

(@jh3yy) May 1, 2020

And try it out here:

CodePen Embed Fallback

Pay attention to responsiveness

If there are two takeaway techniques to take from this article, let it be the “Tracing” one above and this next one.

Here’s my trick: leverage viewport units for your illustrations and create your own scaled unit.

Consider the CSS egghead.io logo I created above. I found the image I wanted to use and popped it in the DOM with an img tag.

img { height: 50vmin; left: 50%; opacity: 0.25; position: fixed; top: 50%; transform: translate(-50%, -50%); }

The height, 50vmin, is the desired size of the CSS illustration. The reduced opacity allows us to “trace” the illustration clearly as we progress.

Then, we create our scaled unit.

/** * image dimensions are 742 x 769 * width is 742 * height is 769 * my desired size is 50vmin */ :root { --size: 50; --unit: calc((var(--size) / 769) * 1vmin); }

With the image dimensions in place, we can create a uniform unit that’s going to scale with our image. We know the height is the largest unit, so we use that as a base to create a fractional unit.

We get something like this:

--unit: 0.06501950585vmin;

That looks awkward but, trust me, it’s fine. We can use this to size our illustration’s container using calc().

.egg { height: calc(769 * var(--unit)); position: relative; width: calc(742 * var(--unit)); z-index: 2; }

Resize this demo and you’ll see that everything stay in proportion always using 50vmin as the sizing constraint.

CodePen Embed Fallback

Measure twice, cut once

Another tip is to measure things. Heck, you van even grab a tape measure if you’re working with a physical object!

CodePen Embed Fallback

As soon as we calculate a variable, we can use it everywhere. I know my TV is 158.1cm wide and 89.4cm tall. I checked the manual. But in my CSS illustration, it will always scale to 25vmin.

Use absolute positioning on all the things

This one will save you a few keystrokes. More often than not, you’ll be looking to absolutely position elements. Save yourself and put this rule somewhere.

Your keyboard will thank you!

Positioning is a tricky concept in CSS. You can read up on it in the CSS Almanac for more information on how to use it.

Or, have a play with this little positioning playground:

CodePen Embed Fallback

Stick to an approach

This is by far the hardest thing to do. How do you approach a CSS illustration? Where do you even start? Should you start with the outermost part and work your way in? That doesn’t work so well.

Maintain a solid structure for your styles

CodePen Embed Fallback

Here’s a timelapse shot of me creating the demo:

Attempted to put together a timelapse of the CSS Snorlax we built last night

Amusing watching it back!

https://t.co/vbVYmFUN5V via @CodePen#webdev #coding #HTML #CSS #webdesign #100DaysOfCode #creative #design #animation pic.twitter.com/0mJtLPRQfP

— Jhey

(@jh3yy) April 28, 2020

Handling awkward shapes

Consider this CSS Jigglypuff demo. Toggle the checkbox.

CodePen Embed Fallback

That’s the key for creating curved shapes! We have an element much larger than the body with a border-radius applied. We then apply overflow: hidden to the body to cut that part off.

How might we create an outer curve? This one’s a little tricky. But a trick I like to use is a transparent element with a thick border. Then apply a border-radius and clip the excess, if required.

CodePen Embed Fallback

clip-path is your friend

Here’s a little demo I built some time ago that showcases different clip-path possibilities.

CodePen Embed Fallback

There’s also this demo that takes ideas from the “Shapes of CSS” article and re-created with clip-path.

CodePen Embed Fallback

border-radius is your other friend

You’re going to need border-radius to create curves. One uncommon trick is to use a “double” syntax. This allows you to create a horizontal and vertical radius for each corner.

Play with this demo to really appreciate the power of border-radius. I advocate using percentages across the board in order keep things responsive.

CodePen Embed Fallback

Shading techniques

You’ve got all the shapes, everything is nicely laid out, and all the right colors are in place… but something still looks off. Odds are that it’s a lack of shading.

CodePen Embed Fallback

Shading effects are often created with a box-shadow and background-image combination.

The key thing with these properties is that we can stack them in a comma-separated list. For example, the cauldron in the demo has a list of gradients that are being used across the body.

It’s generally the same working with box-shadow. However, with that, we can also use the inset value to create tricky borders and additional depth.

There are certainly times where it will make more sense to go with filter: drop-shadow() instead to get the effect you want.

box-shadow is so powerful that you could create your entire illustration with it. I once joked about creating a CSS illustration of a dollar.

In CSS right?

#webdev #CSS #animation #webdesign #coding #100DaysOfCode #HTML https://t.co/VmyeySsK83

— Jhey

(@jh3yy) April 22, 2020

I used a generator to create the illustration with a single div. But Alvaro Montoro took it a little further and wrote a generator that does it with box-shadow instead.

Preprocessors are super helpful

CodePen Embed Fallback

Here’s another example that demonstrates a DRY structure. The flowers are constructed with the same markup, but each has its own index class that is used to apply scoped CSS properties.

CodePen Embed Fallback

The first flower has these properties:

.flower--1 { --hue: 190; --x: 0; --y: 0; --size: 125; --r: 0; }

It’s the first one, so all the others are based off it. Notice how the second flower is off to the right and up slightly. All that takes is assigning different values to the same custom properties:

.flower--2 { --hue: 320; --x: 140; --y: -75; --size: 75; --r: 40; }

Animated responsive CSS Leif features in the latest CodePen Spark!

For those who don’t know Animal Crossing, Leif is a green-thumbed Sloth who visits your island

Here’s a timelapse!

https://t.co/tkHX4nWXp7 via @CodePen pic.twitter.com/naJIrsSlYM

— Jhey

(@jh3yy) May 19, 2020

That’s it!

The post Advice for Complex CSS Illustrations appeared first on CSS-Tricks.

source https://css-tricks.com/advice-for-complex-css-illustrations/

from WordPress https://ift.tt/3fyrAzv via IFTTT

#web developer #web development #website developer

0 notes

arplis · 4 years

Text

Arplis - News: How to Keep it Simple with Your Camper Van Conversion

If you have dreams of traveling and camping in a photoshoot-worthy campervan, youre not alone. Lots of people are inspired by the beautiful campervan conversions they see on social media. But do you really need your camper to look like something out of a catalogue? Or do you simply want to live and camp comfortably while traveling?

The reality of converting a van into a campervan is that everything you add has the potential to create more work and more issues when youre on the roadnot to mention the upfront time and money youll need to install every fancy feature you find on Pinterest.

When I bought my GMC Vandura and started living in it part-time, simplicity was my focus. I wanted to seriously downsize my life, so I didnt want to fill my van with too many extras.

The Key to a Successful Campervan Conversion? Keep it Simple.

The van life movement is rooted in minimalism. The VW van-dwellers of the 60s didnt have Pinterest to source ideas from. They lived and camped in their camper vans as a way to escape the confines of too many possessions. And the recent resurgence of van-love, now replete with a hashtag (#vanlife), grew in tandem with the tiny house obsession, along with the idea that less is more. People wanted to reinvent the American Dream, without expensive mortgages and working their lives away to pay the bills. They wanted to get outside more. Mobile living (including tiny homes, vans, RVs etc.) offered a simpler version of comfort, along with mobility, freedom, and low-cost living.

Kelly S. is keeping it simple with her 2002 Chevrolet Express camper van conversion.

But as this alternative lifestyle has turned into mainstream clickbait, the minimalism is sometimes overshadowed by expensive Sprinter van build-outs and elaborate rigs.

Now, dont get me wrong. I love a gorgeously curated interior. I bet you do, too. But the reality is I dont have the budget or the time for all the bells and whistles. And when Im sleeping at campgrounds, I really dont need them. If youre looking to turn your van into a camper van, you might not be interested in the fancy build-outs either.

Whether youre parking at campgrounds or boondocking, you dont have to spend tens of thousands of dollars in converting a van into a camper van.

Lets break down the things you do need in your simple camper van conversion

View this post on Instagram

Camp fire in the woods

. . . . #campfire #campfirecooking #camplife #camping #campinghacks #adventure_culture #adventureland #adventurers #outdoorliving #gooutdoors #vanlifecamping #vanlifeexplorers #vanlifeproject #welovecamping #Mountkidd #rvparklife #summeradventure #coupleswhocamp #campgoals #campvibes #weliveinavan #modernnomad #modernmillennial #lifeofadventure #twogirlsonevan #exploretheoutdoors #explorers #lesbianswhocamp #gaysinthewoods

A post shared by

Two Girls One Van

(@two_girls_one_van) on May 30, 2018 at 3:29pm PDT

5 Things to Focus on for a Simpler Campervan Conversion

I spoke to some fellow vanlifers some of them live in their vans full-time, others camp in their vans on weekends to round out my own advice on what you need for a simple van conversion.

M own camper van conversion is a 1986 GMC Vandura. Its old and creaky and slightly unreliable, but (most of the time) I love it, and its perfect for camping.

A Bed

The bed is the foundational difference between a van and a campervan. (Related: once you have a bed in your van, its officially an RV, according to AAA, and youll need their RV coverage if you ever want a tow. I discovered that on the side of the highway in Seattle.)

Ive seen vans with the backseats removed and a mattress thrown in. Ive even seen a hammock strung up inside of a van, which can be easily removed to maximize living space when youre not sleeping.

My van came with a bed that folds into itself to create a bench seat. Its similar to this one, built by @gnomad_home:

View this post on Instagram

Everyone has been asking us how our couch to bed situation works in our #van! So we decided to make this little #timelapse video for you all to see! Thanks for all the questions and compliments so far, and feel free to keep 'em coming!!

A post shared by Jayme

John

Nymeria

Delilah (@gnomad_home) on Mar 5, 2017 at 12:43pm PST

But I keep mine out like a bed all the time, and find the bed works fine for sitting and occasionally working on my laptop. If I did a camper van conversion myself, I wouldnt bother with the fold-up feature.

The vanlifers behind Two Wandering Soles built a super simple platform bed in the back of their Chevy, and they offer detailed instructions on how to make your own.

View this post on Instagram

The sleeping area! A custom cut (bigger than) king sized mattress! It fills the back of the Doka and creates a HUGE bed!

>>>

@Vanlifeing_com >>> #ThisisVanlifeing Captured by@vwdoka

A post shared by Vanlife Calendar 2020

(@camper.lifestyle) on Jun 21, 2018 at 12:11pm PDT

When it comes to bedding, Im a big fan of an excessive number of pillows. And Im kind of in love with my Pendleton wool blanket. But now that the weather is warming up, its much too hot. I love the concept of the Rumpl blanket its made out of sleeping bag material which stays nice and cool, but also keeps you warm. Plus, my dogs hair wont stick to it, like it does with the wool blanket. I dont have one yet, but its on my list for summertime van camping.

Power + Light

Theres something special about being in the van at night. I drove miles up into the coastal mountains of Oregon to reach Horse Creek Campground on my first van camping trip. The dark tunnel of dirt road was eery, as I drove further and further away from civilization. But then I reached the nearly empty campground, turned on my collection of Christmas lights, strung around the vans ceiling, turned off the headlights, and felt right at home.

The thing is, if you want to do anything in your van at night, youre going to need light. Ive amassed more and more Christmas lights, which I plug in to The Lycan Powerbox from Renogy. If I want to read, I also turn on a little lantern I have hanging over the bed.

My lights, computer, and fan can all run at once from The Lycan Powerbox. So I have power for camping or working in a Starbucks parking lot (as Im doing, here).

I have a foldable lantern in the storage compartment over the drivers seat in my camper van conversion, so I can see to find my clothes. And a few smaller lights scattered around the van, so theres always one in arms reach when I climb in and need to see before I accidentally step in my dogs water bowl.

The UCO Gear Sitka Lantern is another appealing option. The extendable arm can give you light from above, which is especially handy when cooking or reading.

Im also a big fan of battery operated twinkle lights. Theyre not great for reading, but they give my van a cozy vibe for nighttime relaxation.

My dog, Jackson, likes the twinkle light vibe. He does not like it when I shine my headlamp in his face to take a photo.

Because you can never have enough options when it comes to your ability to see in the dark, I also keep a headlamp on hand. Ledlenser Headlampsare so much brighter than most headlamps Ive tried. Stick one behind your gallon of water for a makeshift lantern when its not on your head.

Fellow van camper Kelly S. also keeps it simple when it comes to lights:I didnt want to mess around with wiring a van, storing an extra battery, figuring out how to charge an extra battery, etc, so I have hooks on the ceiling for battery powered LED lanterns. This way, theyre portable too, and you can use them outside of the van!

Econoline-dweller Rachel loves her LED lights for keeping things simple, too: For lights I have an LED strip that plugs into USB and I just use those little backup phone batteries and switch them out and charge them through my lighter while Im driving.

Shelly S. is hooked on LUMINAID. I get the Cairn subscription box, which is how I received the initial run of this awesome little lantern and have been stuck to it ever since.

Water

View this post on Instagram

We recently upgraded our water tanks. We bought 3 taller tanks that fit in the same space as our 2 old tanks. We now have ~ 15 gallons of water which can last 1-2 weeks depending where we are and what we're doing. Great decision. #garageviews

A post shared by Megan Cable (@meganmcable) on Jun 7, 2018 at 2:49pm PDT

Rule number #1 with any type of camping: Bring more water than you think youll need. This isnt hard when youre van camping theres plenty of room! But you have a bunch of options when it comes to water storage.

Kelly S. shares how she sourced her best van ideas from traditional tent camping, including water.

For water I have a 7-gallon aquatainer. If you need drinking water? Theres a spout right there! Coupled with a tub on the floor underneath the split, you have a sink to wash your hands, too! Having it bungee corded in place for transport works great, and then if you want to spread out somewhere you stop, you can take it out!

Related Reading:

This Family is Building a Modern Camper Out of Free Materials Found on Craigslist

When it comes to water storage, you really cant beat the classic big blue jug. The Reliance Aqua-Tainer 7 Gallon holds plenty of water for a summer weekend of water drinking, dish washing, and the occasional foot rinse after a barefoot stroll around the campground. Just make sure you have a way to secure it to the floor when youre bouncing down dirt roads.

As for showers, if your van is strictly for camping, then you can usually rely on campground bathrooms for bathing or simply embrace the dirt while youre out there.

If you want to get a little crafty, you can add a makeshift outdoor shower to the roof of your van with ABS piping and a hose.

View this post on Instagram

One afternoon last spring, we wandered into a Home Depot and stared up at the black ABS piping in the plumbing section. Keith figured there had to be some way to make a shower outta that stuff. Wed mount it to our @yakimaracks roof rack, the sun would warm it up, and gravity would send it down. And thats exactly what it does. Simple. Just like everything else we have goin on in this home of ours. We dont have a fridge, we have a cooler. We dont have LED lighting, we have an old string of Christmas lights. We dont have air conditioning, we have wet rags and a tiny tower fan we got for 9 bucks. We dont have a toilet, we havethe groundand Starbucks.. What Im saying is, you can install plumbing in your van if you want toyou can spend months on end googling every tutorial on earth if you want toyou can pay big money to build out the most well-equipped vehicle around if you want to We simply hope to serve as a reminder that you dont necessarily *have* to.

A post shared by Brianna Madia (@briannamadia) on Apr 3, 2018 at 7:50am PDT

Since I sometimes spend several weeks in my van, I wanted to have a place to wash my face and brush my teeth. I relied on disposable face wipes and gym bathrooms for the first few months. But then my friends at Wood Intimations built a gorgeous sink that is super simple and looks great and its been a game changer.

The pump faucet draws water from a 4 gallon jug beneath the sink, and gray water drains down into a hole in the van floor, so I dont have to empty anything.

It also provides some much needed counter space, and a little shelf for storing those tiny things that always get lost in the van, like the remote to my twinkle lights and my chapstick!

Organization

View this post on Instagram

TO ALL WEEKEND WARRIORS

. . #doit #doitagain #comfortzone . . #ontheroad #optoutside #wanderlust #nature #vwcalifornia #vankit #freedom #solitude #stayandwander #wilderness #rygg #vegan #croatia #roadtrip #issiontour #vanpuppy #explore #adventure #vaninterior #handmade #bagdesign #travel

A post shared by VANTALE (@van.tale) on Jun 8, 2018 at 8:31am PDT

Organization is so important for your sanity when living or camping in a camper van conversion. Even if youre a minimalist guru who wears one outfit and lives off protein bars, youre going to manage to collect more stuff than you think.

And if your lighting isnt great, its going to be even more difficult to find that stuff.

Staying organized will make you feel like you have a handle on the whole #vanlife thing. Organization can be as simple as a few plastic bins that can slide under your bed. Just make sure you know exactly what youre storing in each of them. (Clear storage containers are ideal so you can see whats in there when you inevitably forget.)

Shelly S. camps in her 4Runner. Its not a van, but the same concepts apply, she tells me. Organization is important for her, too. Mountainsmith has some nice storage cubes soft sided and stuffable. That being said, you can do about the same with those free cloth shopping totes, stored in either a cardboard box or a plastic bin.

View this post on Instagram

#HELP All right Vanlifers or Van designers or Anyone reallyI need your help! I have this space. All this space. Crazy right when you live in a van, usually it's the complete opposite. So.what the heck do I do with it!? I'd prefer not to put any more storage or I'll just fill it with crap (most of this stuff in the back is not mine). I don't need a pull-out kitchen or a place to store bikes, adventure gear. So other than turning it into a bedroom and renting it I'm at a miss.. Any suggestions???

A post shared by Sian Knox (@exmouth_vanlife) on Dec 22, 2017 at 9:07pm PST

Leah W. recommends as few belongings as possible for staying organized. My biggest recommendation is really paring things down to what you NEED. I had one set of basic utensils, one pot, plate, and bowl, a one burner stove, etc. A small toiletry bag, one duffel bag of summer clothing, one duffel bag of winter clothing. She agrees with Shelly about using bags for organization. While most people are fans of creating boxes for organization, we found that sturdy-ish bags worked best.

I went to the Container Store and bought a couple of soft containers with attached lids. Because the structure of the containers is fabric, theyre easy to stick into places where they barely fit, like the storage area above the driver and passenger seats of my GMC Vandura.

Hooks have also been a sanity saver for me in my sometimes not so organized camper van conversion. I keep a jacket and a couple of shirts that I dont want to be all wrinkly, hanging on a hook by the door. I always know where they are, and I can reach extra layers if I get cold at night. I also have a hook for my headlamp, because that is something that always gets lost.

When it comes to food storage, youll need to think about uninvited house visitors.

Store your food in closed containers or bins, advises Leah W. We started our trip with our food in an open crate, and quickly had mouse friends also enjoying our snacks.

Truck Bed Tents

Off Road Campers

The post How to Keep it Simple with Your Camper Van Conversion appeared first on The Dyrt Magazine.

(function(){if(window.instgrm)window.instgrm.Embeds.process()})() Arplis - News source https://arplis.com/blogs/news/how-to-keep-it-simple-with-your-camper-van-conversion

0 notes

brophyblam · 7 years

Text

We the People Writing Contest 3rd Place Winner: “America, Through the Glass” by Nathan Miller ’17

When I was younger––oh, youth. Be honest. You don't run on Dunkin, honey. You need kids. Energy (not coffee, its synonym). Exploration! BAZINGA!––when I was younger, my mom and dad used to drive us to the aquarium every year. We'd get lost in that underwater, paradoxical world, snaking through mazes with transparent walls––not that we ever wanted to escape, really––and passing Japanese ponds full of koi, shallow reefs teeming with darting little squirts and starfish we could touch.

All of that was neat, but what gave me the biggest rush of all was the pool I could jump into. "Come feed the LIVE STINGRAY! Only $5 per person!" the sign said.

"No way in HELL," I said in my head.

Naturally, my mom was thinking the exact same thing:

"Come on, sweetheart, give it a try! You'll love it!"

Believing her for some imaginary reason, my brother and I climbed into the tank, wading through waist- (almost chest-)high salt water, clutching a few slimy sardines less afraid than we were, waiting for the rays to come. I stuck out my hand, gazing at it as if it were some alien limb.

Then, a dark grey saucer with a long, pointed antenna hovered toward me. Slowing down, it descended over my hand and, to retrieve the cargo, flipped itself up with a splash to reveal a lipless, almost-smiley mouth. The creature lingered, so I rubbed its slick body for good luck. All the while, mom and dad had been laughing, my brother tending to his own ray. Then, as suddenly as it came, the saucer floated back to the pool––off to spook and enchant, hopefully, another kid like me.

You, America, remind me of that aquarium. We've known each other for twenty years, babe–– fine, more like a decade and a half––so I know there's more to you than has met my eye. But tell me if this fits you:

You're full of surprises!

Back before I knew who Huck Finn was, my parents had been telling me about you all the time! They read books and sang songs to me about purple mountains and yellow plains and sharp, uncharted greens; about redcoats and General Washington and the minty Statue of Liberty; about pioneers and the wild, wilder west, and heroes like Jackson and Roosevelt.

All that stuff entertained me, sure. And, much the same, my parents could tell me all about hammerhead sharks and tuna, moral eels, sea urchins, jellyfish, stingrays.

But to see it with my own eyes––to see you in person––is a different story. And not just your landmarks or tourist destinations. Jobs galore––well, they sure aren't as pretty as they look on colored cardboard, but they're everywhere.

If I dreamed, and planned, I could open up a music shop. Sell used furniture and dj booths...too cheap, might as well become a dj myself! Eat ice cream right out of my stand when it gets too hot.

(It's always too hot)

I could open a law office. Work part-time for a construction team to build that office. Get a degree in studying people's feelings, the mind, the psyche. Design technology, new instruments and tools that such a psychologist could use. There's opportunity everywhere––and now, having grown up, I appreciate that more than ever.

And to watch you grow, America! More than your past, you're a fable being written every day; a timelapse being filmed as we speak.

You're a complex organism.

Sometimes, it's easy to feel powerless in this American system. I know there are hundreds, thousands of people bigger than me––not just in size or stamina, but in the scope with which their hands and minds can rend and contort our ecosystem.

You've got giants, America, and a food chain. You have your Great Whites, your barracudas, your bass, your starfish, your plankton, your seaweed. The dream is to climb that chain and metamorphosize into that shark; the challenge is, once up there, to control your appetite.

I, still over 220 years your junior, am beginning to perceive that chain for what it really is: a literal stairway to heaven for those below, a deadly weapon for those above (should they decide to vigorously yank and twist that chain, trying to keep their place at the top and shake intruders down), and a proving ground, tough but not impossible, for those in-between.

Recently, honey, and I cannot deny, that chain's been looking more like a cord lately. It's wearing thin, tense, stringy...

You're in danger.

Not that you ever weren't, America, but that a particularly pissed-off strain of violence is ravaging you. Personally, I've never seen you this weak. And it's not physical violence, no; no, it's more like an actual fever, all hot and sensitive and irritated. It's probably not terminal; but if that bug keeps growing, I'm afraid––lots are afraid––you'll collapse or choke, like a flailing tiger shark in the drained tank after somebody cracked the glass open with a hammer and

You might, as the vernacular simply goes, be fucked.

Now I don't mean to alarm you or escalate, but in that case, honey, we'd all be. It's a toxic jetstream that flows both ways. News sources lie to the people, disregarding truth; the people, naturally enraged, learn to love to hate the media. And hate the government. And hate the president. That's only part of it. It's cyclic, America, and it scares me.

You're my home.

In addition to, or in spite of, all that––you're my home. Not just mine, but the home of every Chris and Jim and Miguel and Barbara and Sanijn and Jessie and Robert and Julian and Alana, all the Chens and Garcias and Nguyens and Smiths and Wus and Kumars, and all the other stereotypes and clichès that, face it, Miller, just weren't going to work (fit?).

I know it was risky, honey, but they're frankly more than tropes: you are home to a full motley of people, period. This cannot be overstated! Diversity of cultures––that's your lifeblood, America, just like you're the lifeblood for all the people who come here.

Nor should you forget democracy. We all get, or at least share, some voice in you.

And youth––gumption, charisma, spark––that's your lifeblood, too! The young mind drives this country's interests, while the old mind keeps the two in check––a statement both true and false at the same time.

Nevertheless you are our bastion, a source of security and nourishment, my own "first frontier." Without you, I wouldn't be here; I've got to love you, America. We've got to protect you.

And that's why I hate to see you this way. No sea turtle appreciates a contaminated tank. No child likes to see his parents get sick, or tear at each other arguing. Just the same, it bites to see you torn in two, America. That's why we talked about you these past two weeks––because we, the "We, the People," want to help you help us help our posterity somehow.

Yes, it's confusing.

No, there are few straight-forward answers.

Yes, if there's a light at the end of this tunnel, then I sure as hell don't care for it sometimes.

Yes, admittedly, I might have enjoyed myself more if I spent one of those days at the aquarium.

But I do this because of what you mean to me, America––because of what you mean to us. You have a refugee heart, sliced and muffled but unbroken. Your streets may be spotted, coated with blood, but they will not lose their color, their shine, so easily. We will learn, America, together.

1 note · View note

yourplasticlittlespastic · 4 years

Text

ᴏᴜʀ ᴡᴇʙ ᴏꜰ ʟᴏᴠᴇ – Peter Parker fanfic (6/of many)

𝐌𝐀𝐒𝐓𝐄𝐑𝐋𝐈𝐒𝐓 SERIES

It's Tuesday now, nothing from my dad, my mom is busy running the company, Steve is hiding I think, and even fricking Peter Parker is weird, so secretive...

"and then I threw him lego pieces all over the floor and he stepped on them" Harley proudly nods

"Are you sure you're not a villain?" I reach my locker and see Peter walking through the crowded hallway so I quickly jog to him and touch his back

"Peter!"

"Hey Tannie" he toothily smiles at me "what's up?"

"Just wanted to know if you received my message...?"

"Uh, umm I lost my phone, I was jumping, I mean I was walking pretty fast and I dropped it..." he scratches his head "what was about?"

"mmm.... nothing, just to tell you that Robotics Lab is not the same without you..." I huff

"Hey!" Harley approaches me and Peter "Hi I'm Harley" he nods to Peter

"Hi, I'm Peter! I should go now... see you at English bye" He makes a hasty exit and I spin to my locker

"He seems... anxious..." Harley says to the air and I nod, he even noticed it

Blah, blah, blah, classes. Not to sound pretentious, because I'm not but the syllabus is a little tedious for me and it's only the third week. I waited for Harvey to finish something in his blueprints and then we decide to change the setting and head to the park. Happy was growling all the way saying he wanted to watch Downtown Abbey but I bought him a pretzel. Not a bad day, to be honest, sunny weather, clear sky. We sat on a bench to do our respective homework and then decided to rent a drone and play with it.

Minutes into the game, I turn my back to some workers who are building a little playground for kids. Harley runs to catch the drone and I laugh at how he tries to jump for it. I slowly spin and the craking sound makes me fully turn. I squint my eyes and the yellow crane begins to shake from its base. I look up at the cabin, a worker is shouting and just like that, the crane is breaking apart, workers and people around start running away.

Apart from the metallic crane collapsing, people are panicking. I catch Harley's voice shouting at me but I can't spot him in the crowd. I begin to walk backwards and the spin to run as fast as I can. From the corner of my eye, I see how the top of the crane is begining to fall exactly where I'm running. Faster, Tannie... whoa, whoa... wha... I look down and see how my feet are not touching the ground. I quickly look up and see Spider-Man carrying me away. I gasp at the swinging motion. Wind hitting my face.

"Don't worry! you're definitely safe here!!" with a deep voice he assures me "you're shaking...!"

"Yeah... I was almost crushed by that thing..." I tight my grip around him and lick my lips "don't let me go, please..."

"No way..." then he shoots another string of web and he rocks us to a building

"Here... it's safe" he gently puts me in a roof just beside the park, the cloud of dust making its way to the sky

"Thank you Spider-Man" I smile brushing my clothes and hair

"Yep no problem" he brings his hands to his hips and I quickly scan the suit

"You did all of that?" I point at his onesie

"I tried...I'm not the best at fashion so..." I snort trying to look deeper in his weird glasses

"Well... I don't know how you do what you do, very curious for sure but you're helping people and I believe that you had a choice... to do nothing or to do something and what you chose... says a lot about you" I kindly smile at him who stares at the floor "Now.... can you bring me down there? please"

"Yes of course!!" he approaches me and I hug him, he webs himself and leaves me on the floor, people watching the scene in amusement

I then walk to where Happy is, Harley is at the phone, both pacing back and forth

"Hey!!" I throw my hands in the air, Happy runs to me, checking my arms expecting a cut, Harley lets a sigh of relief

"Any pain?" Happy asks "you feel bad? a concussion?"

"I'm fine... Spider-Man got me just before that thing fall and crushed me, seriously..."

Happy then rubs his face and order us to get to the car. Harley mentioning me that he got out stuff. Once we reach Harvey's house I step out with him.

"I'm so happy you're alive" He gives me a quick hug "I lost you at the crowd..."

"Well, I'm ok... I still have some adrenaline, heart's beating too fast but I'm fine" I let out a sigh

"See you tomorrow then..." he again hugs me but before breaking the hug he steps in and kisses me in the corner of my mouth letting me in shock, he opens his door without turning to see me and I quickly go to the car, Happy is focused on his pretzel... what just happened?

Happy drops me at my new home and leaves when I enter. I hear someone talking in the kitchen so I quietly go upstairs

"I wish to understand it. The more I do, the less it controls me. One day . . . who knows? I may even control it...." Vision says and then looks at me "Hello Tannie"

"Hey Vision, Wanda" I wave at her "cooking again?"

"It seems is the only thing to do here" she huffs "but I don't know what's in this but it is not paprika. I'm gonna go to the store. I'll be back in 20 minutes, want something T?" I shake my head she walks away but Vision quickly blocks her way

"Alternatively, we could order a pizza? what do you say, Tannie" he says gazing at Wanda's eyes

"sounds cool" I shrug

"Vision, are you not letting me leave?" Wanda quietly speaks to him, I look to the side unsure to go away or stay

"It is a question of safety,"

Bad move, Vision.

"I can protect myself" she blurts to Vision challenging him with her eyes

he holds her arm "Not yours. Mr. Stark would like to avoid the possibility of another public incident. Until the Accords are on a . . . more secured foundation"

I give one step backwards trying to discreetly leave the scene

"And what do you want?" they are inches away reminding me of what happened earlier

"For people to see you . . . as I do" he finally says and she touches her head in frustration and storms off to her room

What an awkward situation... I look at vision who seems disappointed, he tries to follow her but just like he stopped her, I stop him.

"Trust me on this one... give her some time" I whisper to him

"Yes, you're right, maybe in an hour right?" he innocently asks me

"Yeah probably but use the door, not walls" I advise him

He goes away and I see that the thing they were cooking was still on, I ended up eating that even though that pizza suggestion was good. My phone starts ringing and I see it's my dad, I quickly answer.

"Dad!!! Oh my god, you never texted me back! are you ok?!" no answer just noises "dad??"

"Hey, you wanna see something cool?" I hear my dad talking his voice sounds far away so he's not talking to me, he probably speed-dialed me by accident "I pulled something from Dad's archives. Felt timely"

What is he talking about? I plug my earphones to listen better.

"FDR signed the Lend-Lease bill with these in 1941. Provided support to the Allies when they needed it most" my dad explains

"Some would say it brought our country closer to war" Steve's voice pops through the line and I sigh in relief he's alive and with my dad

"See? If not for these, you wouldn't be here. I'm trying to . . . what do you call it? That's an olive branch. Is that what you call it?"

why an olive branch?

"Is Pepper here? I didn't see her..."

"We're kinda . . . well, not kinda..." my dad pauses and I pay more attention to this part

"Pregnant?"

What?

"No. Definitely not." Good! I think "We're taking a break. It's nobody's fault"

WHAT??!! that's why these days I haven't seen them together? what?

"I'm so sorry, Tony. I didn't know. What about Tannie?"

"She's fine, I know how family relationships can destroy someone, won't tell her"

Seriously dad?

"A few years ago, I almost lost her and my own child, so I trashed all my suits. Then, we had to mop up HYDRA . . . and then Ultron. My fault. And then, and then, and then, I never stopped. Because the truth is I don't wanna stop. I don't wanna lose my girls. I thought maybe the Accords could split the difference"

I hear some interference so I stand up and walk next to the windows

"In her defense, I'm a handful. Yet, Dad was a pain in the ass, but he and Mom always made it work" he finally adds

"You know, I'm glad Howard got married. I only knew him when he was young and single. I would've loved to tell him that he would have a granddaughter...-" Steve says, for a minute I get confused but the remembered the timelapse

"Oh, really? You two knew each other? He never mentioned that. Maybe only a thousand times. God, I hated you"

"I don't mean to make things difficult."

What things Steve?

"I know because you're a very polite person"

"If I see a situation pointed south . . . I can't ignore it. Sometimes I wish I could"

"No, you don't" my dad quickly adds

"No, I don't. Sometimes..."

-Sometimes I wanna punch you in your perfect teeth. But I don't wanna see you gone. We need you, Cap. So far, nothing's happened that can't be undone, if you sign. We can make the last 24 hours legit. Barnes gets transferred to an American psych-center . . . instead of a Wakandan prison"

Who's Barnes? the "old frozen buddy" my dad talked about?

"I'm not saying it's impossible, but there would have to be safeguards" Steve sighs

"Sure. Once we put out the PR fire, those documents can be amended. I'd file a motion to have you and Wanda reinstated"

"Wanda? What about Wanda?" when Steves mentions her name I turn quickly to see if she's near but no

"She's fine. She's confined to the compound, currently. Vision's keeping her company"

Not the best idea dad...

"Oh God, Tony! Every time. Every time I think you see things the right way" Steve raises his voice making me jump a little

"What? It's a 100 acres with a lap pool. It's got a screening room. There are worse ways to protect people"

There's a lap pool? Happy never showed me that

"Protection? Is that how you see this? This is protection? It's internment, Tony"

"She's not a US citizen," my dad says

"Oh, come on, Tony" angry Steve is new

"And they don't grant visas to weapons of mass destruction"

Oh, dad, you didn't

"She's a kid!" Steves shouts again

"GIVE ME A BREAK! I'm doing what has to be done . . . to stave off something worse" I flinch at his shouts, this is new for me

"You keep telling yourself that... Hate to break up the set" I hear a door opening

What I do know, I should probably hang up, I mean I listen to that but... ok I'm overthinking. I hang up and start analyzing the situation but I don't have a lot to work with.

"Friday?" I call and move to the living room

"Hello T" a voice comes in the middle of the chessboard "as you can see Mr. Stark also moved me here"

"Great! because I need you... search for files of a man named Barnes, please"

"Just a second... I have a match at the files Mrs. Romanoff freed from SHIELD, would you want to see them?"

"yes!"

Friday then displays a whole bunch of holograms with too much information, videos, and pictures.

"looks that I have a lot of homework..."

I spent the end of the day reading everything I could about Barnes, his recent activity and his imprisonment exactly at the Terrorist Centre my dad is in. I reach to the point of exhaustion, my mind can't take anything more and it looks is already night. Don't overthink just sleep. I just hope everyone is ok.

-----------

I wake up and try to find the gym, much to my laziness I try to walk at the treadmill, I quickly grab a granola bar and juice and prepare myself for another day of school while my dad is fighting with Steve. A knock at my door appears.

"Come in!!" I finally put a sweater on and see it's my mom and all I want to tell her is that I know about her and dad but maybe it's not the best option "oh, Mom!"

"Baby come here!" she hugs me "Oh I'm so happy that you're here! how was the moving?" she gently touches my hair

"Quite simple actually, but now I need to unpack every box here" I point at the boxes "I haven't seen you in a while mom"

"I... I know baby. I regret that trust me but I have an important thing to tell you... you know that there's a working wing here?"

I nod "yeah Happy showed me"

"well... now, most of the things I do as the CEO now I'll do them here! we'll be closer" She shrieks and I sigh

"That's all I want mom... for all to be closer," I say feeling a pressure in my chest

"I should go now, Happy is already in front, have a good day T, love you" she leaves me and a red light starts flashing in one of my walls

"T, I just got new information about James Barnes seconds ago, the database has been updated" Friday appears

"Show me" I say

A news channel projected in the hologram shows the facility where my dad was, I start feeling nervous.

"Friday, translate, please"

"James Barnes, the suspect in the UN Vienna bombing escaped custody today. Also missing Avenger Captain Steve Rogers and Sam Wilson"

Oh no, they split ways...

A/N: Hope you liked it! Also available in Wattpad! https://my.w.tt/sw2CZNdCv1

0 notes

triggerhippiemel · 5 years

Text

Anyone who knows my boyfriend and I in person, will tell you we love to camp. We camp any chance we get and explore the outdoors, literally have butt loads of videos, photos, mini documentaries of me bitching to Alex about how tired I am on hiking trails (hehe love you babe). Being connected to nature is huge for me, living in so many places has made me more aware of how precious this planet is. Atlanta has become my new fave city to escape from haha (get it?) Just an hour or two either heading North West or North East, the view of the mountains is amazing you completely forget where you are. We’ve gone to at least five to six different trails in north georgia (there’s so many!) Some we’ve stayed overnight and others have been day trips.

youtube

Here is a few time lapses I have of our driving trails we’ve got to check out with the good ol’e Jeep. My boyfriend is on the hunt for the highest peaks in Georgia, which fortunate for us we’ve been to a few already. In May of 2018, we visited Brasstown Bald (the highest peak in Georgia) sometime after camping in a town called Suches, GA. We were handed a physical map by one of the park rangers who told us about some wicked spots to camp in. Fast forward to Winter, we decided to go check this trail out and stumbled across a trail called Tray Mountain. Tray mountain is considered to be the seventh highest peak in the state of GA, it’s part of the Appalachian Trail. Tray Mountain is best for 4×4’s to get deep into the actual trails.

The view was beautiful I mean this is a shitty shot but if y’all ever in ATL make time to check this place out if not, fear not! I have local trails written down to post later about, you don’t have to drive too far to find a good outdoor trail.

youtube

This is another timelapse filmed at Bear Creek Trail, slightly outside a town called Elijay. Trail is more on foot and for mountain bikers. Walking/riding alongside a very wide creek filled with multiple waterfalls, best part it’s pet friendly! The trail was about 9 miles long depending which trail you pick. We weren’t able to do that since we arrived in the afternoon and had very limited time of sunlight, we completed about 3 miles of it and headed back so total of 6 miles (for sure my knees were feeling it!) A spot I will make it back this spring to complete!

Elijay

Bear Creek Trail

Trail

Creek

Waterfall creeks

More of the creek.

It was really cold in the mountains.

Cold AF

Trail

Running stream

For those looking for something simple, primitive camping spot as mentioned earlier we head towards Suches, Georgia. There’s multiple campgrounds to choose from to stay deep inside the Chattahoochee National Forest, some privately owned and some connected with the national forest. Lots of hidden trails to find there just follow the signs ;).

**Friendly reminder to those who love do travel to places like this, pick up after yourselves. What you bring into nature, pack it out of fucking nature. Bring reusable water containers, try to limit your waste to avoid throwing it out into the wild. It’s not cool seeing how many plastic containers, wrappers, and non biodegradable items in general are all around these places because people aren’t aware or simply don’t care. Whatever the reasons are, please protect your mother!!! (don’t be fucking rude towards her &/or her animals.) 🙂

Don’t forget to subscribe to my blog! Byyeee

Hiking Advanetures s.1 Anyone who knows my boyfriend and I in person, will tell you we love to camp. We camp any chance we get and explore the outdoors, literally have butt loads of videos, photos, mini documentaries of me bitching to Alex about how tired I am on hiking trails (hehe love you babe).

#Blogging #Camping #Hiking #Hiking Trails #Jeep Life #life #Lifestyle Blog #Nature

0 notes