Item: CSS matryoshka
Rating: 3.4
Author: &#x2063;

1 Downloads
108 Views
Tweet
Download Now View Demo

HTML
CSS

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS matryoshka</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="matryoshka">
  <div class="top">
    <div class="scarf"></div>
    <div class="face">
      <div class="eyes">
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <div class="mouth"></div>
    </div>
  </div>
  <div class="bottom">
    <div class="belly"></div>
    <div class="apron"></div>
  </div>
  <div class="matryoshka">
    <div class="top">
      <div class="scarf"></div>
      <div class="face">
        <div class="eyes">
          <div class="left"></div>
          <div class="right"></div>
        </div>
        <div class="mouth"></div>
      </div>
    </div>
    <div class="bottom">
      <div class="belly"></div>
      <div class="apron"></div>
    </div>
    <div class="matryoshka">
      <div class="top">
        <div class="scarf"></div>
        <div class="face">
          <div class="eyes">
            <div class="left"></div>
            <div class="right"></div>
          </div>
          <div class="mouth"></div>
        </div>
      </div>
      <div class="bottom">
        <div class="belly"></div>
        <div class="apron"></div>
      </div>
      <div class="matryoshka">
        <div class="top">
          <div class="scarf"></div>
          <div class="face">
            <div class="eyes">
              <div class="left"></div>
              <div class="right"></div>
            </div>
            <div class="mouth"></div>
          </div>
        </div>
        <div class="bottom">
          <div class="belly"></div>
          <div class="apron"></div>
        </div>
        <div class="matryoshka">
          <div class="top">
            <div class="scarf"></div>
            <div class="face">
              <div class="eyes">
                <div class="left"></div>
                <div class="right"></div>
              </div>
              <div class="mouth"></div>
            </div>
          </div>
          <div class="bottom">
            <div class="belly"></div>
            <div class="apron"></div>
          </div>
          <div class="matryoshka">
            <div class="top">
              <div class="scarf"></div>
              <div class="face">
                <div class="eyes">
                  <div class="left"></div>
                  <div class="right"></div>
                </div>
                <div class="mouth"></div>
              </div>
            </div>
            <div class="bottom">
              <div class="belly"></div>
              <div class="apron"></div>
            </div>
            <div class="matryoshka">
              <div class="top">
                <div class="scarf"></div>
                <div class="face">
                  <div class="eyes">
                    <div class="left"></div>
                    <div class="right"></div>
                  </div>
                  <div class="mouth"></div>
                </div>
              </div>
              <div class="bottom">
                <div class="belly"></div>
                <div class="apron"></div>
              </div>
              <div class="matryoshka">
                <div class="top">
                  <div class="scarf"></div>
                  <div class="face">
                    <div class="eyes">
                      <div class="left"></div>
                      <div class="right"></div>
                    </div>
                    <div class="mouth"></div>
                  </div>
                </div>
                <div class="bottom">
                  <div class="belly"></div>
                  <div class="apron"></div>
                </div>
                <div class="matryoshka">
                  <div class="top">
                    <div class="scarf"></div>
                    <div class="face">
                      <div class="eyes">
                        <div class="left"></div>
                        <div class="right"></div>
                      </div>
                      <div class="mouth"></div>
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="belly"></div>
                    <div class="apron"></div>
                  </div>
                  <div class="matryoshka">
                    <div class="top">
                      <div class="scarf"></div>
                      <div class="face">
                        <div class="eyes">
                          <div class="left"></div>
                          <div class="right"></div>
                        </div>
                        <div class="mouth"></div>
                      </div>
                    </div>
                    <div class="bottom">
                      <div class="belly"></div>
                      <div class="apron"></div>
                    </div>
                    <div class="matryoshka">
                      <div class="top">
                        <div class="scarf"></div>
                        <div class="face">
                          <div class="eyes">
                            <div class="left"></div>
                            <div class="right"></div>
                          </div>
                          <div class="mouth"></div>
                        </div>
                      </div>
                      <div class="bottom">
                        <div class="belly"></div>
                        <div class="apron"></div>
                      </div>
                      <div class="matryoshka">
                        <div class="top">
                          <div class="scarf"></div>
                          <div class="face">
                            <div class="eyes">
                              <div class="left"></div>
                              <div class="right"></div>
                            </div>
                            <div class="mouth"></div>
                          </div>
                        </div>
                        <div class="bottom">
                          <div class="belly"></div>
                          <div class="apron"></div>
                        </div>
                        <div class="matryoshka">
                          <div class="top">
                            <div class="scarf"></div>
                            <div class="face">
                              <div class="eyes">
                                <div class="left"></div>
                                <div class="right"></div>
                              </div>
                              <div class="mouth"></div>
                            </div>
                          </div>
                          <div class="bottom">
                            <div class="belly"></div>
                            <div class="apron"></div>
                          </div>
                          <div class="matryoshka">
                            <div class="top">
                              <div class="scarf"></div>
                              <div class="face">
                                <div class="eyes">
                                  <div class="left"></div>
                                  <div class="right"></div>
                                </div>
                                <div class="mouth"></div>
                              </div>
                            </div>
                            <div class="bottom">
                              <div class="belly"></div>
                              <div class="apron"></div>
                            </div>
                            <div class="matryoshka">
                              <div class="top">
                                <div class="scarf"></div>
                                <div class="face">
                                  <div class="eyes">
                                    <div class="left"></div>
                                    <div class="right"></div>
                                  </div>
                                  <div class="mouth"></div>
                                </div>
                              </div>
                              <div class="bottom">
                                <div class="belly"></div>
                                <div class="apron"></div>
                              </div>
                              <div class="matryoshka">
                                <div class="top">
                                  <div class="scarf"></div>
                                  <div class="face">
                                    <div class="eyes">
                                      <div class="left"></div>
                                      <div class="right"></div>
                                    </div>
                                    <div class="mouth"></div>
                                  </div>
                                </div>
                                <div class="bottom">
                                  <div class="belly"></div>
                                  <div class="apron"></div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/pixelass/css-matryoshka-wBqEvp */
@charset "UTF-8";
html {
  font-size: 1em;
  z-index: -2;
  visibility: hidden;
}

body {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  margin: 0;
  font-size: 4vmin;
}

.matryoshka {
  font-size: 1em;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10em -5em;
  height: 20em;
  width: 10em;
  display: flex;
  flex-flow: row wrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: -webkit-transform 1s 1s linear;
  transition: transform 1s 1s linear;
  transition: transform 1s 1s linear, -webkit-transform 1s 1s linear;
  visibility: visible;
}
.matryoshka .top, .matryoshka .bottom {
  position: relative;
  box-shadow: 0 0 0 2px #000;
  flex: 0 0 100%;
  transition: -webkit-transform 1s linear;
  transition: transform 1s linear;
  transition: transform 1s linear, -webkit-transform 1s linear;
}
.matryoshka:hover > .top {
  -webkit-transform: translatey(-150%);
          transform: translatey(-150%);
}
.matryoshka:hover > .bottom {
  -webkit-transform: translatey(150%);
          transform: translatey(150%);
}
.matryoshka .matryoshka {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.matryoshka .top {
  border-radius: 100% 100% 0 0;
  background: #FFF59D;
  z-index: 2;
}
.matryoshka .top:before {
  content: '';
  position: absolute;
  width: 12em;
  height: 7em;
  bottom: 0;
  left: 50%;
  margin-left: -6em;
  background: inherit;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  box-shadow: 0 0 0 2px #000;
}
.matryoshka .top:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background: inherit;
  border-radius: inherit;
}
.matryoshka .face {
  position: absolute;
  top: 1em;
  left: 50%;
  width: 90%;
  height: 7em;
  margin-left: -45%;
  background: #FFFDE7;
  z-index: 2;
  border-radius: 100%;
  overflow: hidden;
  box-shadow: inherit;
}
.matryoshka .face:before {
  content: '';
  height: 2em;
  width: 70%;
  background: #000;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 0 100% 100%;
}
.matryoshka .face:after {
  content: '';
  height: 2em;
  width: 30%;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 0 100% 100%;
}
.matryoshka .eyes {
  position: absolute;
  top: 2em;
  left: 50%;
  width: 1em;
  margin-left: -0.5em;
}
.matryoshka .eyes:before {
  content: '';
  box-shadow: -1px -3px 0 #000, 3px   0  0 #000, 3px -3px 0 #000;
  border-radius: 130% 0 70%;
  height: 1.5em;
  width: 1.5em;
  position: absolute;
  top: 0.5em;
  right: -2em;
  -webkit-transform: scaley(0.7) rotate(45deg);
          transform: scaley(0.7) rotate(45deg);
}
.matryoshka .eyes:after {
  content: '';
  box-shadow: -3px -1px 0 #000, 0    3px 0 #000, -3px  3px 0 #000;
  border-radius: 130% 0 70%;
  height: 1.5em;
  width: 1.5em;
  position: absolute;
  top: 0.5em;
  left: -2em;
  -webkit-transform: scaley(0.7) rotate(45deg);
          transform: scaley(0.7) rotate(45deg);
}
.matryoshka .eyes .left {
  position: absolute;
  top: 0.8em;
  left: -1.7em;
  background: #000;
  height: 1em;
  width: 1em;
  border-radius: 100%;
}
.matryoshka .eyes .left:before {
  content: '';
  position: absolute;
  top: -0.6em;
  right: 0.9em;
  height: 0.7em;
  width: 1em;
  box-shadow: -4px 2px 0 0 #FFFDE7, -7px 3px 0 0 #000, -10px 4px 0 0 #FFFDE7, -13px 5px 0 0 #000, -16px 6px 0 0 #FFFDE7, -19px 7px 0 0 #000;
  border-radius: 0 0 0 100%;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
}
.matryoshka .eyes .right {
  position: absolute;
  top: 0.8em;
  right: -1.7em;
  background: #000;
  height: 1em;
  width: 1em;
  border-radius: 100%;
}
.matryoshka .eyes .right:before {
  content: '';
  position: absolute;
  top: -0.6em;
  left: 0.9em;
  height: 0.7em;
  width: 1em;
  box-shadow: 4px 2px 0 0 #FFFDE7, 7px 3px 0 0 #000, 10px 4px 0 0 #FFFDE7, 13px 5px 0 0 #000, 16px 6px 0 0 #FFFDE7, 19px 7px 0 0 #000;
  border-radius: 0 0 100%;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}
.matryoshka .scarf {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: #B71C1C;
  z-index: 1;
  border-radius: 100%;
  box-shadow: inherit;
}
.matryoshka .scarf:before {
  content: '';
  position: absolute;
  z-index: 4;
  bottom: 0;
  right: 50%;
  height: 2em;
  width: 2em;
  border-radius: 100% 0;
  background: inherit;
  box-shadow: inherit;
}
.matryoshka .scarf:after {
  content: '';
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: 50%;
  height: 2em;
  width: 2em;
  border-radius: 0 100%;
  background: inherit;
  box-shadow: inherit;
}
.matryoshka .mouth {
  position: absolute;
  bottom: 1em;
  left: 50%;
  margin-left: -0.45em;
  height: 0.9em;
  width: 0.9em;
  background: #C62828;
  border-radius: 100%;
  box-shadow: -0.3em -0.2em 0 -0.1em #C62828, 0.3em -0.2em 0 -0.1em #C62828;
}
.matryoshka .mouth:before {
  content: '';
  height: 5px;
  width: 200%;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.1em -100%;
  background: inherit;
}
.matryoshka .bottom {
  background: #FFF59D;
  z-index: 1;
}
.matryoshka .bottom:before {
  content: '';
  position: absolute;
  width: 12em;
  height: 3em;
  bottom: 0;
  left: 50%;
  margin-left: -6em;
  background: inherit;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  box-shadow: 0 0 0 2px #000;
}
.matryoshka .bottom:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background: inherit;
  border-radius: inherit;
}
.matryoshka .belly {
  position: absolute;
  width: 12em;
  height: 10em;
  top: 0;
  left: 50%;
  margin-left: -6em;
  background: inherit;
  border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 50% 100%;
  box-shadow: 0 0 0 2px #000;
}
.matryoshka .apron {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  margin-left: -45%;
  font-size: 2em;
  width: 90%;
  height: 100%;
  text-align: center;
  background: #B71C1C;
  border-radius: 30% 30% 0 0;
  box-shadow: inherit;
  overflow: hidden;
  color: #fff;
}
.matryoshka .apron:before {
  content: "❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁";
}

Comments

More from ⁣

CSS matryoshka

In this example below you will see how to do a CSS matryoshka with some HTML / CSS and Javascript

The title says it all

Comments

More from ⁣

pure CSS DNA

Live editing text on a canvas

3d eye | pure CSS

element queries concept

You Might Also Like

TIC TAC TOE

Challenge 117 - Testimonial Page

[flex] 08-2

Vocab Cat

A Pen by Chris Hartmann

ReactJS Playground

Par ou Impar

Text Editor (with 3 synced panes… markdown, html, visual)

CSS matryoshka

In this example below you will see how to do a CSS matryoshka with some HTML / CSS and JavascriptThe title says it all

Comments

More from ⁣

pure CSS DNA

Live editing text on a canvas

3d eye | pure CSS

element queries concept

You Might Also Like

TIC TAC TOE

Challenge 117 - Testimonial Page

[flex] 08-2

Vocab Cat

A Pen by Chris Hartmann

ReactJS Playground

Par ou Impar

Text Editor (with 3 synced panes… markdown, html, visual)

In this example below you will see how to do a CSS matryoshka with some HTML / CSS and Javascript

The title says it all