How to embed text in glass in blogger post with css

Back>

With CSS, we can have beautify font. One of the effect is to have the text write on a mirror.

Example

<div id="container">
<p>
<span aria-hidden="true"></span>一 插入排序  public class Insertion {<br />public static void sort(int[] a)
 { int N = a.length; <br />for(int i = 1; i &lt; N; i++) { for (int j = i; j &gt; 0 &amp;&amp; a[j] &lt; a[j - 1]; j --) {exch(a, j, j-1);}}}private void exch(int[] a, int i, int j) {int t=a[i]; a[i]=a[j]; a[j]=t;}}<br />二  選択ソート<br />public class selection{public static void sort(int[] a) {<br /> int N = a.length; for(int i = 0; i &lt; N; i++) {int min = i; for(int j = i + 1; j &lt; N; j++) { if(a[j] &lt; a[min]){min=j;}exch(a, i, min);}}private void exch(int[] a, int i, int j) {int t=a[i]; a[i]=a[j]; a[j]=t;}}</p></div>
<style>
@charset "UTF-8";
#container {
  width: 700px;
  height: 100%;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh3OO_Z5WzbMJoTpsKRJI8TyP-F6wcwIKq6WF5py9onvvpMXB9Q-WPEcdsowqEPR64aM_ySuTcfRyo7PxSTs7Y2_lXKc8hkFQQjC7DLT0kwoMdLMBm42nCIu7wmEXyiEt0wZnTj3WxwpPs/s1600/Screen+Shot+2019-04-30+at+9.40.42+AM.png) 50%/cover border-box padding-box #d7d7d7;
  z-index: -1;
}
#container * {
  margin: 0;
}

#container body {
  display: grid;
  place-content: center;
  min-height: 100vh;
}

#container p {
  overflow: hidden;
  position: relative;
  padding: calc(1em + 2em);
  width: 26.75em;
  height: 26.75em;
  border-radius: 50%;
  box-shadow: 2px 2px 17px rgba(0, 0, 0, 0.5);
  font: 600 1em/1.375 segoe script, comic sans ms, cursive;
  text-shadow: 1px 1px #fff;
}
#container p:before, #container p:after {
  position: absolute;
  z-index: -1;
  /* put it *behind* parent */
  /* zero all offsets */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: solid 2em rgba(0, 0, 0, 0.03);
  border-radius: inherit;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh3OO_Z5WzbMJoTpsKRJI8TyP-F6wcwIKq6WF5py9onvvpMXB9Q-WPEcdsowqEPR64aM_ySuTcfRyo7PxSTs7Y2_lXKc8hkFQQjC7DLT0kwoMdLMBm42nCIu7wmEXyiEt0wZnTj3WxwpPs/s1600/Screen+Shot+2019-04-30+at+9.40.42+AM.png);
  content: "";
}
#container p:before {
  border-color: transparent;
  background-clip: border-box;
  /* -webkit-prefixed version
   * still needed for
   * some mobile browsers 💔😭 */
  -webkit-filter: blur(7px);
  filter: blur(7px);
}
#container p:after {
  background-blend-mode: overlay;
}
#container p [aria-hidden] {
  display: contents;
}
#container p [aria-hidden]:before, #container p [aria-hidden]:after {
  float: right;
  width: 50%;
  height: 100%;
  --bite:
   radial-gradient(farthest-side
     at var(--pos-x, 0),
     transparent 100%, red 0);
  -webkit-shape-outside: var(--bite);
  shape-outside: var(--bite);
  content: "";
}
#container p [aria-hidden]:before {
  float: left;
  --pos-x: 100% ;
}
</style>