Code Snippets

Windows 7 Sticky Note

A recreation of the sticky notes widget from Windows 7 in all its original six colours.

The font used is Caveat.

htmlcss

<div class="winsticky">
    <div class="ws_top"></div>
    <div class="ws_content">This is a sticky note.</div>
</div>

<div class="winsticky yellow">
    <div class="ws_top"></div>
    <div class="ws_content">This is a sticky note.</div>
</div>

<div class="winsticky green">
    <div class="ws_top"></div>
    <div class="ws_content">This is a sticky note.</div>
</div>

<div class="winsticky blue">
    <div class="ws_top"></div>
    <div class="ws_content">This is a sticky note.</div>
</div>

<div class="winsticky purple">
    <div class="ws_top"></div>
    <div class="ws_content">This is a sticky note.</div>
</div>

<div class="winsticky pink">
    <div class="ws_top"></div>
    <div class="ws_content">This is a sticky note.</div>
</div>

/* Windows 7 Sticky Note - www.kazimariusz.com */

@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');

.winsticky {
    --color-top:#F5F5F5;
    --color-background-start:#FFFFFF;
    --color-background-end:#EBEBEB;
}

.winsticky {
    font-family: "Caveat", cursive;
    font-size:24px;
    min-width: 225px;
    min-height: 206px;
    display: inline-flex;
    flex-direction: column;
    box-shadow: 0px 2px 5px #000;
}

.winsticky .ws_top {
    background-color: var(--color-top);
    height: 35px;
    position: relative;
    line-height:0px;
}

.winsticky .ws_top:before {
    position: absolute;
    left:16px;
    top:12px;
    content: url('data:image/svg+xml,<svg width="10" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="2" x="0" y="4" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="10" x="4" y="0" fill="hsl(0, 0%, 0%)"></rect></svg>');
}

.winsticky .ws_top:after {
    position: absolute;
    inset:0px;
    left:calc(100% - 27px);
    top:11px;
    display:block;
    content:"";
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAMhJREFUKFNtkkENwkAURF/vKMABIkABNYAAEIAAigAEUAFVwJULiCCQcEUBAugsf5rtpv/ys/kzs/Nnt+Jf8+if6FMtYaoAr6NfgTdQEgXeAl1OOIfssSe3QRJQYprtgIsItqRBHQANH8AiB0vEBJNmwClI3iMp22ZOMGAJ3OIgoAjDTiVBnuVX9lzaqfGhtGSwQB2wAQ7ACrg7VvvPwUrJ5fSSNd+gjDWQ532v/MrSUxDP2KX1O1h9lEhBkr3GBKmovhOvPPomP5tVKmelHKPVAAAAAElFTkSuQmCC");
    background-repeat: no-repeat;
}

.winsticky .ws_top:before, .winsticky .ws_top:after {
    opacity:0.5;
}

.winsticky .ws_content {
    background: linear-gradient(var(--color-background-start) 0%, var(--color-background-end) 100%);
    flex-grow: 1;
    position: relative;
    padding:6px 5px;
}

.winsticky .ws_content:after {
    position: absolute;
    right:4px;
    bottom:4px;
    content:url('data:image/svg+xml,<svg width="10" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" x="9" y="0" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="8" y="1" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="9" y="4" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="8" y="5" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="9" y="8" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="8" y="9" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="5" y="4" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="4" y="5" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="5" y="8" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="4" y="9" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="1" y="8" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="0" y="9" fill="hsl(0, 0%, 0%)"></rect></svg>');
    opacity:0.3;
    line-height:0px;
}

/* Colours */

.winsticky.white {
    --color-top:#F5F5F5;
    --color-background-start:#FFFFFF;
    --color-background-end:#EBEBEB;
}

.winsticky.yellow {
    --color-top:#f8f7b6;
    --color-background-start:#fefecc;
    --color-background-end:#fcf9a1;
}

.winsticky.green {
    --color-top:#c5f7c1;
    --color-background-start:#d2ffcc;
    --color-background-end:#ade3aa;
}

.winsticky.blue {
    --color-top:#c9ecf8;
    --color-background-start:#d9f3fb;
    --color-background-end:#afd0e8;
}

.winsticky.purple {
    --color-top:#D4CDF3;
    --color-background-start:#DEDAFE;
    --color-background-end:#C6B8FE;
}

.winsticky.pink {
    --color-top:#EDC0ED;
    --color-background-start:#F4CFF4;
    --color-background-end:#E6A8E6;
}

Vinyl Showcase

This widget is not yet mobile friendly! This widget was made out of a desire to have a nice album showcase on websites that don't allow JavaScript, and uses (relatively new) CSS 3D functions.

Images were pulled from RateYourMusic.

htmlcss

<div id="vinyl-gallery">
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/systemofadown_systemofadown.jpg"
    />
  </div>
  <div class="title">System of a Down - System of a Down</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/soundgarden_louderthanlove.jpg"
    />
  </div>
  <div class="title">Soundgarden - Louder Than Love</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/soundgarden_badmotorfinger.jpg"
    />
  </div>
  <div class="title">Soundgarden - Badmotorfinger</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/sepultura_roots.jpg"
    />
  </div>
  <div class="title">Sepultura - Roots</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/scorpions_tokyotapes.jpg"
    />
  </div>
  <div class="title">Scorpions - Tokyo Tapes</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/scorpions_animalmagnetism.jpg"
    />
  </div>
  <div class="title">Scorpions - Animal Magnetism</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/redsnapper_princeblimey.jpg"
    />
  </div>
  <div class="title">Red Snapper - Prince Blimey</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/pearljam_ten.jpg"
    />
  </div>
  <div class="title">Pearl Jam - Ten</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/obliteration_nekropsalms.jpg"
    />
  </div>
  <div class="title">Obliteration - Nekropsalms</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/nirvana_nevermind.jpg"
    />
  </div>
  <div class="title">Nirvana - Nevermind</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/judaspriest_painkiller.jpg"
    />
  </div>
  <div class="title">Judas Priest - Painkiller</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/deftones_whitepony.jpg"
    />
  </div>
  <div class="title">Deftones - White Pony</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/deftones_gore.jpg"
    />
  </div>
  <div class="title">Deftones - Gore</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/deftones_aroundthefur.jpg"
    />
  </div>
  <div class="title">Deftones - Around the Fur</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/deftones_adrenaline.jpg"
    />
  </div>
  <div class="title">Deftones - Adrenaline</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/death_human.jpg"
    />
  </div>
  <div class="title">Death - Human</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/blacksabbath_paranoid.jpg"
    />
  </div>
  <div class="title">Black Sabbath - Paranoid</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/aliceinchains_mtvunplugged.jpg"
    />
  </div>
  <div class="title">Alice in Chains - MTV Unplugged</div>
  <div class="vinyl">
    <img
      src="https://static.kazimariusz.com/asset/albumcover/aliceinchains_dirt.jpg"
    />
  </div>
  <div class="title">Alice in Chains - Dirt</div>
  </div>
</div>

/* Vinyl Showcase - www.kazimariusz.com */

  #vinyl-gallery * {
    all: unset;
  }
  
  #vinyl-gallery {
    all: initial;
    width: 100%;
    height: 230px;
    margin: 30px 0;
    display: flex;
    flex-direction: row;
    position: relative;
    margin-left: -6px;
  }
  
  #vinyl-gallery .vinyl {
    perspective: 500px !important;
    width: 18px;
    transition: width 0.5s;
  }
  
  #vinyl-gallery .vinyl:hover {
    width: 148px;
  }
  
  #vinyl-gallery img {
    transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s;
    width: 180px;
    height: 180px;
    transform: rotateX(0deg) rotateY(25deg);
    transform-style: preserve-3d;
    border-radius: 4px;
    border: 2px solid rgba(0, 0, 0, 0.1);
  }
  
  #vinyl-gallery .vinyl:hover img {
    transform: rotateX(0deg) rotateY(10deg);
    width: 188px;
    height: 188px;
    margin-top: -2px;
  }
  
  #vinyl-gallery .title {
    display: block;
    visibility: hidden;
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    padding-left: 6px;
  }
  
  #vinyl-gallery .vinyl:nth-child(n):hover + .title {
    visibility: visible;
  }

Frutiger Aero Orb

Based on yazanoo16's Frutiger Aero Orb tutorial.
$frutiger background$ Background from TextureTown.

htmlcss

<div class="frutiger_orb">
	<div></div>
</div>
<div class="frutiger_orb frutiger_shadow">
	<div></div>
</div>

/* Frutiger Orb - www.kazimariusz.com */

html:root {
	--frutiger-orb-color: rgb(246, 22, 119);
	--frutiger-orb-background-image: url("https://static.kazimariusz.com/snippets/frutiger.jpg");
	--frutiger-orb-size: 200px;
}

.frutiger_orb {
	height: var(--frutiger-orb-size);
	width: var(--frutiger-orb-size);
	border-radius: 100%;
	position: relative;
	overflow: hidden;
	box-shadow: 0px 0px calc(var(--frutiger-orb-size) / 20)
			var(--frutiger-orb-color);
}

.frutiger_shadow {
	box-shadow: 0px 0px calc(var(--frutiger-orb-size) / 20) var(--frutiger-orb-color),
	0px calc(var(--frutiger-orb-size) / 4) calc(var(--frutiger-orb-size) / 9) calc(-1*var(--frutiger-orb-size) / 4) var(--frutiger-orb-color),
	0px calc(var(--frutiger-orb-size) / 3) calc(var(--frutiger-orb-size) / 4) calc(-1*var(--frutiger-orb-size) / 10) rgba(0, 0, 0, 0.8);
}

.frutiger_orb::before,
.frutiger_orb::after {
	content: "";
	display: block;
	border-radius: 100%;
	position: absolute;
	z-index: 1;
}

.frutiger_orb::before {
	width: 68%;
	height: 54%;
	left: 16%;
	top: 1%;
	background-color: rgba(255, 255, 255, 0);
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, white 100%);
}

.frutiger_orb::after {
	width: 94%;
	left: 3%;
	bottom: -5%;
	height: 94%;
	opacity: 0.8;
	background-image: radial-gradient(white 10%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0) 60%);
	mix-blend-mode: overlay;
}

.frutiger_orb div {
	width: 100%;
	height: 100%;
	position: absolute;
	box-shadow: inset 0 0 calc(var(--frutiger-orb-size) / 5)
		calc(var(--frutiger-orb-size) / 20) var(--frutiger-orb-color);
	background: var(--frutiger-orb-background-image);
	background-size: cover;
	background-position: center;
}

.frutiger_orb div::after {
	width: 100%;
	height: 100%;
	content: "";
	display: block;
	background-color: var(--frutiger-orb-color);
	opacity: 0.6;
}

These snippets are free to use and edit - though credit is appreciated, it's not required. If you are the owner of a resource used in a snippet and want it gone, send me a message.

Tip: When using an image used on this page, host it for yourself or on a reliable website to prevent code breaking!