Philosophical Pods and Pills HTML + CSS Widgets

▲

Examples

◖ ◗

Purple Pill	Blue Pill	Red Pill
White Pill	Black Pill	Honk Pill

Notes:

• In the present forms of these codes, no actual image file gets generated on a page. If you wish to create these, you'll need the source code.
• To convert these code design divs into image files, one will need a program like Gimp or Photoshop, as well as to reconstruct the codes via a web browser and Notepad.
• If you choose to do this, remove the shadows and reflection codes before taking a screenshot to copy-paste into your image editor. From there, you can remove the background, and then re-create shadows and reflections in the image editor.
• While SVG versions of these images are possible, use of SVG with these gradients isn't recommended.

Description

Have you taken the red pill? Is your neighbor still a blue-pilled sheep? Has he become a stubborn, purple-pilled jackass? Has he gone so far off the deep end as to be practically to the point of eating Tide Pods, while acting like he's demon-possessed? Have his antics driven you to whitepill determination? Has frustration with a world full of idiots driven you to take the black pill? Have you given up on making sense of anything, and taken the honk pill so you can still enjoy life in a world of madness?

Regardless of pill assignment, would you like to paint these pills on your web page, wiki page, or blog, using HTML and CSS? Then this page can help you.

Disclaimer

This widget is a just-for-fun exercise, and has not been endorsed by Proctor & Gamble, nor by anyone involved in 4Chan nor the Matrix film series.

CSS code

To implement Pods or pills on your page, you'll need the following CSS installed either directly into your HTML page, or into the CSS container assigned to you by the site you're using:

<style type="text/css">

/*--Tide Pod and Pills--*/

h1, h2 {border-bottom:1px solid silver;}

p {font-size:12pt; text-indent:30px;}

.outertidepod {border:1px solid silver; display:table; transform:rotate(-40deg); margin:50px; padding:6px; background:rgba(255,255,255,0.85); border-radius:0.3em; box-shadow:inset 0 13px 5px rgba(255,255,255,0.4),inset 0 -13px 5px rgba(255,255,255,0.4); -webkit-box-reflect:below 0 linear-gradient(transparent,rgba(255,255,255,0.45));}

.innertidepod {font-size:36pt; letter-spacing:-30px; padding-right:30px; transform:rotate(55deg);}

.tidepodorange {color:#e9630a;}

.tidepodblue {color:indigo;}

.pill {width:96px; height:32px; box-shadow:inset 0 10px 5px rgba(255,255,255,0.45),0 2px 3px rgba(0,0,0,0.5); border-radius:0.8em; -webkit-box-reflect:below -2px linear-gradient(transparent 20%,white);}

.purplepill {background:linear-gradient(midnightblue,#402060,rebeccapurple);}

.bluepill {background:linear-gradient(midnightblue,navy,blue);}

.redpill {background:linear-gradient(darkred,crimson,red);}

.blackpill {background:linear-gradient(black,#555,#777); }

.honkpill {background:linear-gradient(90deg,red,darkorange,orange,yellow,lime,forestgreen,blue,indigo,purple,rebeccapurple); box-shadow:inset 0 10px 5px rgba(255,255,255,0.65),0 2px 3px rgba(0,0,0,0.5); border-radius:0.8em; -webkit-box-reflect:below -2px linear-gradient(transparent 20%,white);}

a:link {color:blue; text-decoration:none;}

a:visited {color:blue;}

</style>

Implementation

To implement, you'll need to install and modify the code below.

HTML

<!--Begin Tide Pod widget-->
<div class="outertidepod">
<div style="display:table-row;">
<div style="display:table-cell;">

<div class="innertidepod">
<span class="tidepodorange">◖</span>
<span class="tidepodblue">◗</span>
</div>

</div>
</div>
</div>
<!--End Tide Pod widget-->

<!--Begin Purple Pill widget-->
<div class="purplepill pill"></div>
<!--End Purple Pill widget-->

<!--Begin Blue Pill widget-->
<div class="bluepill pill"></div>
<!--End Blue Pill widget-->

<!--Begin Red Pill widget-->
<div class="redpill pill</div>
<!--End Red Pill widget-->

<!--Begin White Pill widget-->
<div class="whitepill pill" style="background:linear-gradient(beige,ghostwhite,#eeeeff,white);"></div>
<!--End White Pill widget-->

<!--Begin Black Pill widget-->
<div class="blackpill pill"></div>
<!--Begin Black Pill widget-->

<!--Begin Honk Pill widget-->
<div class="pill honkpill"></div>
<!--Begin Honk Pill widget-->

MediaWiki

==Tide Pod==

<div align="center" style="border:1px solid silver; display:table; transform:rotate(-40deg); margin:50px; padding:6px; background:rgba(255,255,255,0.85); border-radius:0.3em; box-shadow:inset 0 13px 5px rgba(255,255,255,0.4),inset 0 -13px 5px rgba(255,255,255,0.4),0 0 4px rgba(0,0,0,0.25); -webkit-box-reflect:below 0 linear-gradient(transparent,rgba(255,255,255,0.45));">
<div style="display:table-row;">
<div style="display:table-cell;"><div style="font-size:36pt!important; letter-spacing:-30px; padding-right:30px; transform:rotate(55deg);"><p style="margin:0;"><span style="color:#e9630a;">◖</span><span style="color:indigo;">◗</span></p></div>
</div>
</div>
</div>

==Purple Pill==

<div style="width:96px; height:32px; background:linear-gradient(midnightblue,#402060,rebeccapurple); box-shadow:inset 0 10px 5px rgba(255,255,255,0.45),0 2px 3px rgba(0,0,0,0.5); border-radius:0.8em; -webkit-box-reflect:below -2px linear-gradient(transparent 20%,white);"></div>

==Blue Pill==

<div style="width:96px; height:32px; background:linear-gradient(midnightblue,navy,blue); box-shadow:inset 0 10px 5px rgba(255,255,255,0.45),0 2px 3px rgba(0,0,0,0.5); border-radius:0.8em; -webkit-box-reflect:below -2px linear-gradient(transparent 20%,white);"></div>

==Red Pill==

<div style="width:96px; height:32px; background:linear-gradient(darkred,crimson,red); box-shadow:inset 0 10px 5px rgba(255,255,255,0.45),0 2px 3px rgba(0,0,0,0.5); border-radius:0.8em; -webkit-box-reflect:below -2px linear-gradient(transparent 20%,white);"></div>

==White Pill==

<div style="width:96px; height:32px; background:linear-gradient(beige,ghostwhite,#eeeeff,white); box-shadow:inset 0 10px 5px rgba(255,255,255,0.45),0 2px 3px rgba(0,0,0,0.5); border-radius:0.8em; -webkit-box-reflect:below -2px linear-gradient(transparent 20%,white);"></div>

==Black Pill==

<div style="width:96px; height:32px; background:linear-gradient(black,#555,#777); box-shadow:inset 0 10px 5px rgba(255,255,255,0.45),0 2px 3px rgba(0,0,0,0.5); border-radius:0.8em; -webkit-box-reflect:below -2px linear-gradient(transparent 20%,white);"></div>

==Honk Pill==

<div style="width:96px; height:32px; background:linear-gradient(90deg,red,darkorange,orange,yellow,lime,forestgreen,blue,indigo,purple,rebeccapurple); box-shadow:inset 0 10px 5px rgba(255,255,255,0.65),0 2px 3px rgba(0,0,0,0.5); border-radius:0.8em; -webkit-box-reflect:below -2px linear-gradient(transparent 20%,white);"></div>

MediaWiki templates

If the above codes are used to make template pages, those templates can then be called onto an article page at any time based on the assigned template name. Some examples are as follows:

{{TidePod}}

{{PurplePill}}

{{BluePill}}

{{RedPill}}

{{WhitePill}}

{{BlackPill}}

{{HonkPill}}

When designing MediaWiki wikis, some other key points are good to remember:

• Special stylized information can be designated elementally locally.
• Element classes can have their codes entered into a style tag locally; but formal class defnitions cannot be made locally in MediaWiki. Intead, to save time with the MediaWiki codes above or make them behave more like straight HTML, install the class style data into Common.css, for semiglobal definition.
• Using the above codes to define templates will save a lot of time if the pills must be depicted multiple times, especially on multiple article pages.