#hype the frost pixie

[neonthewrite]

Wrong Place Wrong Time

I didn't feel up for writing yesterday, so today we start with yesterday's prompt "Banter"! I wanted to use this one to introduce a new character that I haven't been able to use anywhere yet. So, here's Hype the Frost Pixie, making his debut in true pixie fashion by getting in trouble.

~~~

Hype blinked several times, a slow attempt to reorient himself after the chaotic movement he’d just endured, not to mention the several times he’d tumbled against the harsh metal all around him. The presence of iron, thin bars of the stuff arranged in an orderly fashion, tickled his skin like pin feathers. He might not be the most powerful pixie out there, but he was magical enough for it to count.

There was no time to be grumpy about the iron of the cage, or even about the bruises already forming where he’d bumped into it. He had to try to focus on the human that had tossed him in there.

The man had already said a lot to him. His mouth was moving rapidly, and the hand not clinging to the top of the cage gestured wildly. Hype, seated on a metal floor that actively made his skin crawl, had a hard time parsing anything out of the faint, infinitesimal mumbles that he could make out, to say nothing of the rapidly moving mouth. He stared, squinting and trying to concentrate, and got little more than he would if he were to close his eyes and listen. Considering how harshly the guy had grabbed him and tossed him in a cage, he wasn’t sure why he ought to bother trying to understand him.

Judging by what he could see of the man’s attire‒thick cloth shirt, sturdy leather gloves, a bow slung to his back, and a bandanna tied around his neck for an easy-access mask‒he was a scout of some kind. A scout with a small camp near a riverbank who did not take kindly to a lone pixie buzzing nearby.

There was a pause as the man stopped talking and fixed Hype with an expectant look. When Hype continued to stare blankly at him, he scoffed and rolled his eyes. Then, his lips formed a very clear “Well?”

Hype crossed his arms and fixed an unimpressed look on the face looming close. His wings, long and narrow and clear like warped ice, flickered in annoyance at his back. He’d learned to talk back, though he couldn’t hear how clear or how loud his own voice would be when he responded. “Well what? I don’t know what you want to hear.”

It was tempting to throw in some quick handspeak to emphasize his point, but he doubted this human knew any of the common fae signs. The rest, Hype had devised with his family as needed.

Luckily, his sign language was clearly not needed. His response had already taken the wind out of the human’s sails, at least enough that his shoulders sagged and he didn’t lean over the cage quite as much. “Di- you no- -ear me?” he asked, slower now that his frantic interrogation had been derailed.

Reading lips had never been an exact science, though Hype found it a lot easier to fill in the gaps when talking to the big folk than when he was chatting with a fellow pixie. He tilted his head, still managing to appear for all the world like he was unbothered. “I didn’t hear that either,” he said. This time, he did include some handspeak for emphasis, gesturing emphatically to one ear before pointing to his mouth. “But you are talking slower so I caught it this time. Kind of you to let me catch up.”

The human’s frown deepened, and he glanced away from the cage at last. Nearby the river rushed on, and overhead the trees waved in the breeze. Hype assumed they made sounds, though he’d never really asked anyone what they were like. He waited with narrowed eyes for the man to decide what he would do with the startling realization that his rant moments ago had effectively been to no one.

Large shoulders moved up and down in a sigh, meaning Hype’s cage moved up and down too. He considered knocking on the bars to bring the attention back to himself, but he didn’t want to touch them. Instead, he spoke up again, “Well? What do you want, merry man? Usually it’s pixies playing tricks on the big folk. Not the other way around.”

The man scowled at him. He said something, quick and snappy, probably a scathing retort. Hype held up his hands in feigned exasperation, and the guy looked like he’d bitten a lemon before saying, more slowly, “I know those bastar-s good (no, could, Hype corrected in his head as he parsed) use a deaf pixie scou- to snea- their messages aroun-. You’re -oming with me.”

Well, so much for gentle banter and building a rapport. Hype frowned and opened his mouth to protest, but he lost his voice as the man leaned down to drop the cage on the ground, then turned away. He could only watch as the guy started gathering up his meager camp, resolutely refusing to look over at the cage and saying nothing to the frost pixie trapped within it. Hype didn’t see the point in trying to ask who “those bastards” were. Apparently the big folk were at war again, or at least at conflict, and Hype had wandered into it by mistake.

Surrounded as he was by iron, he couldn’t summon so much as a snowflake to his aid. Until he found out more and maybe got a chance to talk to someone with some sense of reason, he would have to bide his time. Pixies weren’t exactly known for patience, but Hype thought he could manage.

If nothing else, he’d get a halfway interesting story out of all this.

[p3answer]

top 5 persona/smt demon designs teehee

THERES LIKE a lot of demon designs i love and find interesting in regards to like sources and folklore they take inspiration from so i have a ton of them but from like the top of my head

1. kaguya hime i was SO hyped first time i played thru p4g and saw her i find her design to be so cool. its like the way it has this spaceship/spaceman-like design and also mixes it with rabbit design elemnts since shes from the moon i just think it looks so nice. love you kaguya hime maam <3

2. UM WELL MESSIAH bc well heh. it looks cool but also has several references to ryoji such as its pose and thanatos' coffins n i find that to be some very nice symbolization to the fact that ryoji and p3 protag were the same being for such a long time and how much ryoji truly means to them

3. pixie!! not the most detailed design or whatever but when i see her i feel such deep joy shes my friend my partner my companion. she is there for me in my time of need

4. necronomicon. like what can i even say. futabas persona AND a fucking UFO. looks so cool everytime i see it im like WAOW

5. WELL. JACK FROST. and i would put him higher but hes the smt mascot so it feels a little cliche but hes so good. i will always remember him from his beautiful quote. buy from my store or ill kill myself

[3416]

omg i swear before this season started, i was so sure that i'd never love a remake evak as much as elu but then this doe eyed koala and his jack frost pixie boyfriend snuck up and stole my whole heart. now they're right up there with the og evak and in some ways, even got to me more. the willems are the difference with that otherwordly chemistry and connection.

omg me too!!!!! i really purposely watched wtfock last of all the remakes bc i thought i’d have the hardest time getting through it, and not only is it my favorite remake as a whole unit, but... sander and robbe are my favorite evak as a couple tbh. even over the og, which don’t get me wrong... will always have this like special ass place in my heart that i can’t even describe, but. elu surpassed them in terms of chemistry to me, so to have someone even pass elu is like.... IDEK WHAT TO DO!!! i was fucked up after skam france s3 and i’m scared for myself now lol. tbf all my rankings could change at the drop of a hat and some days i love other more than even those three so it’s just.. but robbe and sander are rlly jsut...... sitting there at the top and i’m emo abt it. the willems DEFINITELY have got some fuckign CHEMISTRY.. it’s why it makes me hype to see how they are in interviews or just in general together bc like....... i gotta know that dynamic and the flip on screen and how the fuck tbh.....

[happyhavnts]

here are some wanted connections for lix bell, the son of tinkerbell.

puppy love: someone who has a crush on him and he’s oblivious towards it and he just sort of keeps glossing over their feelings unintentionally. | lucky mist & chase gill

mine: someone he’s extremely possessive over. probably his dream boy who he’s crushing hardcore on, whether the feelings are reciprocated or not. just someone who causes him to go red like his mom when she gets jealous or angry. | rozen charming

fairy squad: his friends from pixie hollow. lucky will always be his best friend but he’d love some other ex-fairies to hang out with. especially if some are considered frenemies. | lucky mist, triss frost, etc.

ride or die: someone who puts up with his antics and becomes roommates with him. preferably a girl who is equally materialistic and sassy. i just want them to be best friends and hype each other up constantly. | (open connection)

then get used: someone he uses in flirtation and hookups, they have a mutual agreement to just use one another and pretend each other are someone else. | (open connection)

his siblings: he hasn’t ever been close with his siblings but this would be the perfect time for him to try and make that up to them. | anna bell & (open connection)

[aion-rsa]

Amazon Prime Video New Releases: October 2020

https://ift.tt/eA8V8J

October is here and you know what that means: time for the streaming services to put their spookiest foot forward. Amazon is doing its part for its new releases in October 2020 by rolling out some horror originals and library titles.

This is the month that the much-hyped Blumhouse horror anthology series Welcome to the Blumhouse arrives. “Episodes” of that, Black Box and The Lie launch on Oct. 6 and Evil Eye and Nocturne arrive on Oct. 13. Another horror-adjacent release of note is Truth Seekers, a comedy-horror series from Nick Frost and Simon Pegg.

That’s about it for notable originals. Thankfully October 1 brings the usual burst of fascinating library movie titles. A Knights Tale, Spaceballs, and The Departed all debut on the first of the month. Terminator: Dark Fate arrives on Oct. 9. The superb final season of Mr. Robot will be available on Oct. 6. Start playing Pixies “Where is My Mind?” on a loop to prepare for that.

Here is everything else coming to Amazon Prime this month.

TBA

Sons of the Soil — Amazon Original Series: Season 1

October 1

30 Days Of Night (2007)

A Knight’s Tale (2001)

Battlefield Earth (2000)

Blood Ties (2014)

Drugstore Cowboy (1989)

Eight Millimeter (1999)

Funny Girl (1968)

Girl, Interrupted (1999)

Guess Who (2005)

Joe (2014)

John Carpenter’s Vampires (1998)

Killers (2010)

Kindred Spirits (2020)

La Sucursal (2019)

Madea’s Big Happy Family (2011)

Mud (2013)

National Security (2003)

Next Level (2019)

Noose For A Gunman (1960)

Nurse (2014)

Quantum Of Solace (2008)

Raging Bull (1980)

Señorita Justice (2004)

Southside With You (2016)

Spaceballs (1987)

Species (1995)

Thanks For Sharing (2013)

The Big Hit (1998)

The Da Vinci Code (2006)

The Departed (2006)

The Gambler Wore A Gun (1961)

The Grudge 3 (2009)

The Mask Of Zorro (1998)

The Mothman Prophecies (2002)

The Pianist (2003)

The Wedding Planner (2001)

Triumph Of The Spirit (1989)

1992: Berlusconi Rising: Season 1 (Topic)

40 & Single: Season 1 (Urban Movie Channel)

America’s Great Divide: From Obama to Trump: Season 1 (PBS Documentaries)

Cisco Kid: Season (Best Westerns Ever)

Cities of the Underworld: Season 1 (HISTORY Vault)

Cold Case Files Classic: Season 1 (A&E Crime Central)

Get Shorty: Seasons 1-3

Horror Noire: A History of Black Horror (Shudder)

Liar: Season 1 (Sundance Now)

Mrs. Wilson: Season 1 (PBS Masterpiece)

Mystery Road: Season 1 (Acorn TV)

PNS Kids: Spooky Stories!: Season 1 (PBS Kids)

Tales of Tomorrow: Season 1 (Best TV Ever)

The Great British Baking Show: Season 1 (PBS Living)

The Loudest Voice: Season 1 (Showtime)

Thou Shalt Not Kill: Season 1 (PBS Masterpiece)

October 2

Bug Diaries Halloween Special — Amazon Original Special

Savage X Fenty Show. Vol. 2 — Amazon Original Special

October 6

Black Box — Amazon Original Movie (2020)

The Lie — Amazon Original Movie (2020)

The Transporter Refueled (2015)

Mr. Robot: Season 4

October 8

Archive (2020)

October 9

Terminator: Dark Fate (2019)

Chasing the Crown: Dreamers to Streamers — Amazon Original Series

October 10

Jack And Jill (2011)

October 13

Evil Eye — Amazon Original Movie (2020)

Nocturne — Amazon Original Movie (2020)

October 14

A Most Beautiful Thing (2020)

October 15

Halal Love Story (2020)

Playing With Fire (2019)

October 16

Time — Amazon Original Movie (2020)

What the Constitution Means to Me — Amazon Original Special

October 21

Cyrano, My Love (2019)

October 23

Mirzapur — Amazon Original Series: Season 2

October 26

What To Expect When You’re Expecting (2012)

October 27

Battle Los Angeles (2011)

October 29

Soorarai Pottru (2020)

October 30

Truth Seekers — Amazon Original Series: Season 1

October 31

cnx.cmd.push(function() { cnx({ playerId: "106e33c0-3911-473c-b599-b1426db57530", }).render("0270c398a82f44f49c23c16122516796"); });

I’ll See You In My Dreams (2015)

The post Amazon Prime Video New Releases: October 2020 appeared first on Den of Geek.

from Den of Geek https://ift.tt/34f0NUL

[ruffoverthinksthings]

Mal meeting a few Dragonborn kids Hc

Mal is initiallySUPER hyped to learn that there’s an annual meetup for Fae andHalf-Fae children, and that this year’s theme is focusing on the“Forgotten and the Feared,” which includes the likes ofhalf-orcs, half-demons, and yes, even the dragonborn.

She has expectationsand ideas in her head of kids just like her, wearing authentic dragonscale hide jackets (their own, magically created or crafted fromtheir shed scales), skulking about the streets and the conventionhall like they own the place and no one daring to challenge them(except the half-orcs, but they have their own territories, and keepto themselves), lighting up their cigarettes with their flame breath,chilling their beers with frost breath, or summoning their ownpersonal pixies to do menial tasks for them, just because theycan.

And to her greatdisappointment, she finds out that the only true part was the “dragonscale hide jacket” bit.

Legends sing thepraises of the Dragonborn, the heroes and the villains, the leadersand the savants, those that were born of beloved unions or theunholiest of matrimony, because they were, by definition, legends—theexceptional individuals, the rarities, the 1%, those that setthemselves apart from the crowd.

The majority ofdragonborn really are just like all the other Fae and Half-Fae kids:struggling misfits who can’t train any of their awesome skills andtalents due to the Ban, but still have to suffer the downsides, suchas Flame Dragonborn having to watch their food intake lest thevolatile gases inside their stomachs [sic] react VERY badly.

“You get gas, Imight fucking explode.”

Andwhen you really get down to it, too, many dragon-mortal relationshipsare just that: relationships. They have their ups, they have theirdowns, they have their sickening sweethearts, they have their amiablydivorced couples who split when the passion faded and they found thatneither were willing to abandon their two worlds now that they hadsomeone who was straddling both, but belonging in neither.

Savefor some details like the unique designs of their homes or thelimited options for places to move to, uniquely “growing updragonborn” problems like needing your parents to brush/lick yourscales clean and deal with parasites, and the classes and programsthey needed to enroll in as part of the enforcement of the Ban,they’re just like everyone else.

Andafter Mal hears their stories, gets through her shatteredexpectations, she starts to really bond with these kids: outcasts,misfits, people who never belonged and would never belong, just likeher.

Shedoesn’t have a massive fallout with the dragonborn kids like shedid with the Auradon Kids, but there is a lot of initial hesitationand embarrassment since she bluntly told them they were not nearly ascool as she thought they would be—a frequent line throughout theirlives, and a source of great personal pain and social stigma.

“Hey…could you teach me how to blow those fire rings? You know, if youwant to...” Mal asks.

Theunofficial leader of the group, Spitfire, looks at Mal, then at hercompanions, then back at Mal, her scaley cheeks spreading into asmile.

“First,we’re going to have to have MD check to see if your tinder tonsilsare up to it… and if they’re not, or if you don’t have them inthis form, I’ll show you how to hide a lighter in your sleeve,works just as well,” Spitfire says.

Malslowly smiles, the rest of the brood make a space for her, and MDstarts cramming her rubber gloved claws into her mouth, her eyesglowing with her magical light as she tries to check for theexistence of mature “tinder tonsils.”

It’s an unpleasant experience as MD infamously doesn’t know the difference between a model and a live patient, but Spitfire teaches her how to blow fire rings out of her mouth soon enough.

[413-request-entity-too-large]

Webはここまで進化中！コピペもできるHTML／CSS参考スニペット84個まとめ

  この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。

  スニペット（���: Snippet）とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。

  これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。

  ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。

  コンテンツ目次

1. イメージスライダー系

2. テキストエフェクト系

3. テキストエフェクト系スニペット

4. ページレイアウト系

5. ナビゲーションメニュー系

6. ローディングアニメーション系

7. SVGアニメーション系

8. 便利、面白系スニペット

9. 未来SF系

10. ゲーム系

「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。

Webはここまで進化中！コピペもできるHTML／CSS参考スニペット84個まとめ

  イメージスライダー系スニペット

Showtime Parallax Effect

See the Pen Showtime Parallax Effect by Ali Klein (@AliKlein) on CodePen.

      Variable Fonts Experiment

スライドに合わせてフォントの太さが変化する、Variableフォントを実際に活用したサンプル例として。

See the Pen Variable Fonts Experiment by Supremo (@SupremoHQ) on CodePen.

      Ghibli Slider

スタジオジブリの海外公開作品をスライド形式でまとめており、画像のトランジションにはあのキャラクターも登場です。

See the Pen Ghibli Slider by Adam Kuhn (@cobra_winfrey) on CodePen.

      Animated Portrait w/ GSAP 2.0

下部に配置してあるボタンをクリックすることで、写真立てがインタラクティブに切り���わるスライダーエフェクト。

See the Pen Animated Portrait w/ GSAP 2.0 by Darin (@dsenneff) on CodePen.

      React Slider w/ Hover Effect

React.JSに対応した3Dホバーエフェクト付きのイメージスライダー。

See the Pen React Slider w/ Hover Effect by Ryan Mulligan (@hexagoncircle) on CodePen.

      テキストエフェクト系スニペット

Movin bodymovin

Airbnbから登場したiOS、 Android、React Native対応のアニメーションライブラリ「Lottie」をつかったサンプル例で、最近のアップデートによりAfter Effectsプラグインも公開されました。

See the Pen Movin bodymovin by kittons (@airnan) on CodePen.

      Splitting: Laser Write

See the Pen Splitting: Laser Write by Martin Pitt (@nexii) on CodePen.

      Variable font animation

タイミングに合わせてVariableフォントの太さを変更することで、まるで呼吸をしているようなアニメーションが完成です。

See the Pen Variable font animation by Michelle Barker (@michellebarker) on CodePen.

      Animated Verbs II

Variableフォントを利用することで、まるで文字テキストが生きているようなアニメーションが魅力的。

See the Pen Animated Verbs II by Ryan Mulligan (@hexagoncircle) on CodePen.

      Animated Verbs

上記スニペットに続き、文字テキストがジャンプしている様子をCSSで表現しています。

See the Pen Animated Verbs by Ryan Mulligan (@hexagoncircle) on CodePen.

      Procedurally Generated CSS Numbers

お好みの数字を入力しボタンをクリックすると、カラフルでユニークなタイルでその数字を表現します。

See the Pen Procedurally Generated CSS Numbers by Adam Kuhn (@cobra_winfrey) on CodePen.

      CSS Neon Sign

CSSのみを利用してネオンライトのような光を表現できるスニペット。

See the Pen CSS Neon Sign by Ananya Neogi (@ananyaneogi) on CodePen.

      Cassie!

筆記体を手書きしたような表現豊かなアニメーションで再現したテキストエフェクト用スニペット。

See the Pen Cassie! by Cassie Evans (@cassie-codes) on CodePen.

      Matrix digital rain (animated version)

CSSアニメーションを利用して、文字テキストがずらずらと表示される某映画のようなエフェクトを実現しています。

See the Pen Matrix digital rain (animated version) by yuanchuan (@yuanchuan) on CodePen.

      Variable Fonts | Compressa

文字テキストにマウスカーソルを合わせることで、フォントの太さを���時に変更でき、Variableフォントの可能性を感じるスニペット。

See the Pen Variable Fonts | Compressa by Juan Fuentes (@JuanFuentes) on CodePen.

      ボタンエフェクト系スニペット

Order confirm animation

ボタンをクリックすると、トラックが荷物を受け取り、商品の配達に向かうアニメーションが素敵です。

See the Pen Order confirm animation by Aaron Iker (@aaroniker) on CodePen.

      Call to Action Hype Man

ボタンをクリックしようとすると、後ろから落書きのようなキャラクターが登場するアニメーション付き。

See the Pen Call to Action Hype Man by Mariusz Dabrowski (@MarioD) on CodePen.

      https://codepen.io/aaroniker/pen/KjJQER

ボタンをクリックするとダウンロードが開始され、進捗状況をアニメーション付きプログレスバーで確認できるエフェクト。

See the Pen Download button animation by Aaron Iker (@aaroniker) on CodePen.

      Mouse cursor pointing to cta

ボタンをクリックしようとマウスを周辺に移動させると、ポインターカーソルがボタンの方向を指差します。

See the Pen Mouse cursor pointing to cta by Aaron Iker (@aaroniker) on CodePen.

      Paint Drop Hover

マウスクリックしたポジションに応じて、インクが垂れたようなドリップを表示するホバーエフェクト。

See the Pen Paint Drop Hover by Mariusz Dabrowski (@MarioD) on CodePen.

      ページレイアウト系スニペット

CSS Grid: Magazine Layouts

CSS Gridレイアウトを活用することで、まるで雑誌のようなレイアウトを自由自在に作り上げます。フルスクリーンでの表示推奨です。

See the Pen CSS Grid: Magazine Layouts by Olivia Ng (@oliviale) on CodePen.

      CSS Grid: Coupons!

まるで地元スーパーのチラシのようなレイアウトをCSS Gridで実現したレイアウト例。

See the Pen CSS Grid: Coupons! by Olivia Ng (@oliviale) on CodePen.

      Color this sofa! – SVG + Blend Mode trick

ソファの色と背景色をSVGとCSSブレンドモードを使って、リアルタイムにプレビューできる機能。Generate Randomでランダムで色が決まります。

See the Pen Color this sofa! – SVG + Blend Mode trick by Kyle Wetton (@kylewetton) on CodePen.

      Anime.js Ease Visualizer

アニメーションにおけるイージングを分かりやすくまとめ、視覚化したAnime．js用ライブラリ。

See the Pen Anime.js Ease Visualizer by Julian Garnier (@juliangarnier) on CodePen.

      Agency website POC

これまでの制作実績をまとめたポートフォリオ用レイアウトで、マウススクロールとクリックのみで進めることができるコンテンツ遷移にも注目です。

See the Pen Agency website POC by Jamie Coulter (@jcoulterdesign) on CodePen.

      Twotwentytwo.se – smooth scroll with skew effect

マウスをスクロールさせると画像や文字テキストが歪みながらスムーズに表示される仕掛け。

See the Pen Twotwentytwo.se – smooth scroll with skew effect by jesper landberg (@ReGGae) on CodePen.

      How to Build a Filterable Thumbnail Layout with CSS Grid, Flexbox and JavaScript

サムネイル画像で振り分けソートできる機能のついた、CSS GridとFlexboxを組み合わせたレイアウトサンプル例。

See the Pen How to Build a Filterable Thumbnail Layout with CSS Grid, Flexbox and JavaScript by Envato Tuts+ (@tutsplus) on CodePen.

      To-do list

残っているタスクをクリックすると、チェックマークがアニメーション付きで点灯するToDoリスト用レイアウト。

See the Pen To-do list by Sabine Robart (@_Sabine) on CodePen.

      CSS Gradient Counter List

リスト表示の番号を美しいグラデーションを使って、少しずつ色を変化させるCSS小技テクニック。

See the Pen CSS Gradient Counter List by Mattia Astorino (@equinusocio) on CodePen.

      Assorted cards & images (CSS Grid + BEM)

CSS Gridを利用することで、これまでは難しかったレイアウトをより手軽に、そして自由に作成できるようになりました。

See the Pen Assorted cards & images (CSS Grid + BEM) by Stephen Lee (@abcretrograde) on CodePen.

      Bubble Toggle

トグルをクリックすると、泡がぱちんと弾けながら切り替わります。

See the Pen Bubble Toggle by Chris Gannon (@chrisgannon) on CodePen.

      Pro Illustration (click the toggle!)

トグルを使うことでブラインドの開閉を行うことができるアニメーションイラストレーション。

See the Pen Pro Illustration (click the toggle!) by Klare (@klare) on CodePen.

      Pure CSS Bulb Switch

CSSのみでスタイリングした淡い光が印象的だったトグルスイッチ。

See the Pen Pure CSS Bulb Switch by Grzegorz Witczak (@Wujek_Greg) on CodePen.

      CSS – Frosted Glass

背景にぼかしガラスを重ねたようなエフェクトをCSSのみで実現したテクニック。

See the Pen CSS – Frosted Glass by Kyle Wetton (@kylewetton) on CodePen.

      CSS Particles

画面全体を縦横無尽に飛び回るカラフルなシェイプをCSSアニメーションで描いたデモサンプル。

See the Pen CSS Particles by rx0079 (@re0079) on CodePen.

      Clip Clop Clippity Clop [CSS Only]

走る馬をクリックすると、どのようにCSSでスタイリングしたのかスローモーションで確認できます。

See the Pen Clip Clop Clippity Clop [CSS Only] by Steve Gardner (@ste-vg) on CodePen.

      Dither / Dissolve CSS Gradients

さまざまなシェイプをCSSスタイリングで描き、そこにザラザラとしたグランジ感も一緒に追加していきます。

See the Pen Dither / Dissolve CSS Gradients by David J. Aldred (@DavidJAldred) on CodePen.

      Zdog and Goo

レインボーカラーのサークル円が立体的に回転しながら、形を変化させていくユニークなスニペット。

See the Pen Zdog and Goo by Chris Gannon (@chrisgannon) on CodePen.

      Pure CSS Only Portrait – Isla

CSSのみでスタイリングされたとは思えないほどリアルな少女の表情を描いたポートレイトイラスト。

See the Pen Pure CSS Only Portrait – Isla by Ben Evans (@ivorjetski) on CodePen.

      CSS-only chronometer

CSSのみでデザインされたストップウォッチで、再生と停止ボタンを見事に稼働するテクニック。

See the Pen CSS-only chronometer by Tamer Aydn (@tameraydin) on CodePen.

      Pixi Sprite Bubbles

マウスをドラッグしたところから、ぷくぷくと泡が飛び出てくるエフェクト。

See the Pen Pixi Sprite Bubbles by Juan Fuentes (@JuanFuentes) on CodePen.

      Simple CSS Waves | Mobile & Full width

ゆらゆらと波のように揺れながら変化する様子をCSSで表現したテクニックで、モバイル端末でもうまく表示することができます。

See the Pen Simple CSS Waves | Mobile & Full width by kachibito (@kachibito) on CodePen.

      Back to top with progress indicator

コンテンツがどれくらい残っているのか確認できる、トップへ戻るボタンのつくり方。

See the Pen Back to top with progress indicator by Ivan Grozdic (@ig_design) on CodePen.

      Cursor with progress indicator

上記サンプル同様に、コンテンツがどのくらい残っているかを確認できますが、こちらではマウスカーソル自体を使っています。

See the Pen Cursor with progress indicator by Ivan Grozdic (@ig_design) on CodePen.

      Google-like Thanos disintegration

表示されているカード型コンテンツをクリックすると、灰のようになって散るアニメーション。

See the Pen Google-like Thanos disintegration by Johan Fagerbeg (@birjolaxew) on CodePen.

      ナビゲーションメニュー系スニペット

Untitled

表示されたアイコンをクリックすると、詳細が文字テキスト付きで表示されるナビゲーションメニューで、モバイルアプリなどで便利な使い方かもしれません。

See the Pen jONPjoV by Steve Gardner (@ste-vg) on CodePen.

      Transparent Navbar & Hero

Bootstrapフレームワークでナビメニューとヒーローイメージを重ねた透明なデザインが特長で、レスポンシブにも対応しています。

See the Pen Transparent Navbar & Hero by Allen Pavic (@alvic) on CodePen.

      Responsive Bootstrap mega menu

こちらもBootstrapフレームワークのナビメニューを拡張し、メガメニューでさまざまなコンテンツをまとめて表示できるスニペット。

See the Pen Responsive Bootstrap mega menu by Martin Stanek (@skywalkapps) on CodePen.

      Wobbly underline

各アイコンをクリックすると、下線ラインがグラグラしながらアニメーション変化するシンプルなナビメニュー。

See the Pen Wobbly underline by Mikael Ainalem (@ainalem) on CodePen.

      Fork This Nav

シンプルで明快なナビメニューにCSSスタイリングを加えることで、ユニークなアニメーションが印象的なハンバーガーメニューの展開を表現しています。

See the Pen Fork This Nav by Ryan Mulligan (@hexagoncircle) on CodePen.

      ローディングアニメーション系スニペット

Loading

フォントの間を飛び回る点が見ていて飽きないローディング画面。

See the Pen Loading by Katherine Kato (@kathykato) on CodePen.

      Cassette Tape Loader

カセットテープがくるくると回転するオールドスクールなローディングアニメーション。

See the Pen Cassette Tape Loader by Chris Gannon (@chrisgannon) on CodePen.

      Loader turbulence

ゆらゆらと揺れながら文字テキストが表示されるなどタービュランス、乱気流を表現しています。

See the Pen Loader turbulence by Damien Montastier (@damienmontastier) on CodePen.

      CurveBall

赤と青それぞれの半円がコロコロ転がることで、サークル円を作り出すローディングアニメーション。

See the Pen CurveBall by Chris Gannon (@chrisgannon) on CodePen.

      Rotating Rounded Triangles Animation (SCSS)

丸みのある三角形が規則的に動くことで、目の錯覚を利用して立体的に見えるローディング画面。

See the Pen Rotating Rounded Triangles Animation (SCSS) by Mark Miscavage (@markmiscavage) on CodePen.

      CSS Loading Animations

シンプルな図形を組み合わせて完成したローディングアニメーション6種類をまとめたライブラリ。

See the Pen CSS Loading Animations by Alex (@AlexWarnes) on CodePen.

      custom css wave loader

CSSをつかって水面の波紋を表現したローディングアニメーション。

See the Pen custom css wave loader by CSS Points (@csspoints) on CodePen.

      SVGアニメーション系スニペット

3-Layer Cloud Composite

3つのSVGレイヤーを重ねることで、立体的でよりリアルな雲模様を表現できるCSSスタイリング。

See the Pen 3-Layer Cloud Composite by BEAU.HAUS (@beauhaus) on CodePen.

      便利、面白系スニペット系スニペット

Sunbeams

背景の画像に合わせて、光が差し込む様子をアニメーション付きで表現しています。

See the Pen Sunbeams by Ko.Yelie (@ko-yelie) on CodePen.

      Sketchpad

カンバス上を鉛筆をつかって自由にお絵かきできるスケッチパッドで、鉛筆の色を変更したり、描いたスケッチをPNGで保存することもできます。

See the Pen Sketchpad by Brad Arnett (@bradarnett) on CodePen.

      Neon Clock (Using React Hooks)

現在時刻をネオンサインで表示しながら、正確な時間を文字テキストでも伝えます。

See the Pen Neon Clock (Using React Hooks) by Ganesh Prasad (@gnsp) on CodePen.

      Image glitch effect

CSSのみを利用することで、画面全体にグリッチエフェクトを再現できるテクニック。

See the Pen Image glitch effect by Alain (@AlainBarrios) on CodePen.

      Vue-controlled Wall-E

マウスカーソルに合わせて動くコミカルなDisneyの某キャラクターを再現したスニペット。クリックすると音が出る仕掛けも。

See the Pen Vue-controlled Wall-E by Sarah Drasner (@sdras) on CodePen.

      Strandbeest walk

マウスの動きに合わせて進行方向や速度が変化していきます。

See the Pen Strandbeest walk by Nick Watton (@2Mogs) on CodePen.

      CSSCities

大都市の街並みをCSSのみでスタイリング、デザインしたユニークな作品。ポップアップで飛び出るエフェクトにも注目です。

See the Pen CSSCities by Adam Kuhn (@cobra_winfrey) on CodePen.

      100 years of Bauhaus

ドイツのバウハウス誕生100周年を祝うCSSデザイン。

See the Pen 100 years of Bauhaus by Juan Ignacio (@juanignaciorios) on CodePen.

      未来SF系スニペット

[wip] motion blur transition

まるでアーケードゲームの世界をそのまま表現したような、鮮やかな80年代ネオンエフェクトを実現しています。

See the Pen [wip] motion blur transition by Robin Delaporte (@robin-dela) on CodePen.

      Three.js Mobile VR Sonic

VR体験ができるスニペットで、クリックでジャンプするなど本格的なつくり。

See the Pen Three.js Mobile VR Sonic by Baron (@b29) on CodePen.

      Strange Tubes #2

光沢感のあるチューブが七色に色を変化させながら、グニャグニャと形を変えるユニークなThreeJSコレクション。

See the Pen Strange Tubes #2 by Kevin Levron (@soju22) on CodePen.

      AI Assistant Blob

人工知能を活用することで、立体的でもこもことしたシェイプをデザインできます。

See the Pen AI Assistant Blob by Aaron Iker (@aaroniker) on CodePen.

      Untitled

きらびやかに無数の桜の花びらが舞う様子を描いた高画質なアニメーション。

See the Pen tqdmv by Anand Davaasuren (@at80) on CodePen.

      WebGL Wonderland #7

WebGLアニメーション技術を使うことで、驚くほど立体的なアニメーションを表現できます。

See the Pen WebGL Wonderland #7 by Colin van Eenige (@cvaneenige) on CodePen.

      The Plastic Ocean

プラスチックが漂う海の中を泳ぐクラゲのような生き物を、マウスカーソルで操作できます。

See the Pen The Plastic Ocean by Onload (@onload) on CodePen.

      3D Software Vertex Ocean

超高速で光り輝く粒子の間を通り抜ける、疾走感のたまらないアニメーションが魅力です。

See the Pen 3D Software Vertex Ocean by Radik (@H2xDev) on CodePen.

      The Starry Night

ゴッホの名作を立体的な粒子状に表現した作品で、WebGL技術を用いることで圧倒的なグラフィックを描きます。

See the Pen The Starry Night by Darryl Huffman (@darrylhuffman) on CodePen.

      Energy

ビリビリと飛び回るエネルギーがマウスカーソルに合わせて動き出します。

See the Pen Energy by Thibaud Goiffon (@Gthibaud) on CodePen.

      Exploding Points

点と点で結ばれた線が、七色の美しい色合いに染まりながら広がっていくアニメーションで、数値も自由に調整できます。

See the Pen Exploding Points by Devamardeep Hayatpur (@devamar) on CodePen.

      ゲーム系スニペット

The Cube

ランダムなルービックキューブを色ごとにきちんと揃えていきましょう。ダブルクリックでゲーム開始です。

See the Pen The Cube by Boris Šehovac (@bsehovac) on CodePen.

      30 – 50 hogs

歩行者に注意しながら、突進してくる豚のみを撃ち抜くシューティングゲーム。最後のオチも素敵。

See the Pen 30 – 50 hogs by Cassie Evans (@cassie-codes) on CodePen.

      Space Shooter game

矢印キーで左右に移動しながら、Spaceバーで弾を打つシューティングゲーム。

See the Pen Space Shooter game by Andrew Rubin (@andyranged) on CodePen.

      Tower Blocks

表示されているブロックとぴったり重なるようにし、ブロックをどれだけ積み上げることができるかを競います。

See the Pen Tower Blocks by Steve Gardner (@ste-vg) on CodePen.

      Color Collision

上下から迫ってくる赤と青のボールの色に合わせて、中心にある玉の色をクリックでマッチさせる、シンプルだけど中毒性のあるゲーム。

See the Pen Color Collision by Dev Loop (@dev_loop) on CodePen.

      Connecting dots

表示されている点を順番通りに線で結び、浮かび上がってくるものを当てるゲーム。

See the Pen Connecting dots by Meiko Hori (@meiq) on CodePen.

      Pure CSS Concentration game

CSSのみでデザイン、作成された神経衰弱ゲーム。

See the Pen Pure CSS Concentration game by Kevin Newcombe (@kevinnewcombe) on CodePen.

                  Webはここまで進化中！コピペもできるHTML／CSS参考スニペット84個まとめはPhotoshopVIPで公開された投稿です。