Jekyll2019-01-05T20:53:41+00:00https://recurss.github.io/atom.xmlRecurssa collection of recursive css specimensMatt BiernerSimple Weave2019-01-05T00:00:00+00:002019-01-05T00:00:00+00:00https://recurss.github.io/2019/01/05/weavebody {
overflow: hidden;
}
div {
outline: 8px solid white;
border: 8px inset #333;
background: #777;
width: 32px;
height: 32px;
padding: 16px;
}Matt Biernerbody { overflow: hidden; }Expando Box (mouse over)2019-01-04T00:00:00+00:002019-01-04T00:00:00+00:00https://recurss.github.io/2019/01/04/expando-boxbody {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
div {
border: 4px solid red;
margin: 4px;
transition: border 0.25s, margin 0.25s;
}
div:hover {
border-left-width: 0;
border-right-width: 0;
margin: 0
}Matt Biernerbody { display: flex; justify-content: center; align-items: center; overflow: hidden; }Horizon2019-01-03T00:00:00+00:002019-01-03T00:00:00+00:00https://recurss.github.io/2019/01/03/horizonbody {
overflow: hidden;
background: rgb(30, 30, 30);
display: flex;
justify-content: center;
}
div {
height: 100%;
border: 3px solid transparent;
background: rgba(200, 200, 200, 0.015);
transform: scale(1, 0.95);
}Matt Biernerbody { overflow: hidden; background: rgb(30, 30, 30); display: flex; justify-content: center; }Black hole2018-12-17T00:00:00+00:002018-12-17T00:00:00+00:00https://recurss.github.io/2018/12/17/black-holebody {
overflow: hidden;
background: black;
}
body > div {
position: absolute;
top: 50%;
}
div {
width: calc(100% + 40px);
margin-top: -3px;
border-top: 2px solid rgba(255, 255, 255, 0.1);
transform: rotate(23deg);
}Matt Biernerbody { overflow: hidden; background: black; }Snowflake2018-12-17T00:00:00+00:002018-12-17T00:00:00+00:00https://recurss.github.io/2018/12/17/snowflakebody {
overflow: hidden;
background: rgb(15, 15, 15);
display: flex;
justify-content: center;
align-items: center;
}
div {
height: 98%;
margin-left: -22px;
border: 10px solid rgba(200, 255, 255, 0.05);
transform: rotate(60deg);
}Matt Biernerbody { overflow: hidden; background: rgb(15, 15, 15); display: flex; justify-content: center; align-items: center; }We control the horizontal and the vertical2018-12-16T00:00:00+00:002018-12-16T00:00:00+00:00https://recurss.github.io/2018/12/16/we-control-the-horizontal-and-the-verticalbody {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background: black;
}
body > div {
width: 4px;
height: 2px;
}
div {
width: calc(100% + 16px);
height: calc(100% + 12px);
border: 4px solid black;
margin-top: -10px;
margin-left: -12px;
background: white;
animation: 6s loop linear infinite;
}
@keyframes loop {
0% { transform: rotateX(90deg); }
20% { transform: rotateX(0); }
40% { transform: rotateX(0); }
60% { transform: rotateX(90deg); }
100% { transform: rotateX(90deg); }
}Matt Biernerbody { display: flex; justify-content: center; align-items: center; overflow: hidden; background: black; }RGB 22018-04-27T00:00:00+00:002018-04-27T00:00:00+00:00https://recurss.github.io/2018/04/27/rgb-2body {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
body > div {
width: 0px;
height: 0px;
}
div {
width: calc(100% + 20px);
height: calc(100% + 20px);
}
div, div::before, div::after {
content: '';
display: block;
position: absolute;
border-radius: 100%;
}
div {
background: linear-gradient(to top, #f00f, #f000);
transform-style: preserve-3d;
transform: translateZ(-1px) rotate(180deg) translate(-10px, -10px);
transform-origin: 50% 86%;
}
div::before, div::after {
width: 100%;
height: 100%;
top: 50%;
}
div::before {
background: linear-gradient(125deg, #0f0f, #0f00);
left: 33.33333%;
}
div::after {
background: linear-gradient(225deg, #00ff, #00f0);
left: -33.33333%;
}Matt Biernerbody { display: flex; justify-content: center; align-items: center; overflow: hidden; }Flex2018-04-26T00:00:00+00:002018-04-26T00:00:00+00:00https://recurss.github.io/2018/04/26/flexbody {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
body > div {
width: 4px;
height: 4px;
}
div {
width: calc(100% + 16px);
height: calc(100% + 16px);
border: 4px solid black;
margin-top: -12px;
margin-left: -12px;
animation: 6s spin ease-in-out infinite;
}
@keyframes spin {
0% { transform: rotate(0); }
33% { transform: rotate(1deg); }
66% { transform: rotate(-1deg); }
100% { transform: rotate(0) }
}Matt Biernerbody { display: flex; justify-content: center; align-items: center; overflow: hidden; }RGB2018-04-26T00:00:00+00:002018-04-26T00:00:00+00:00https://recurss.github.io/2018/04/26/rgbbody {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
body > div {
width: 10px;
height: 10px;
}
div {
width: calc(100% + 10px);
height: calc(100% + 10px);
}
div, div::before, div::after {
content: '';
display: block;
position: absolute;
border-radius: 100%;
}
div {
background: linear-gradient(to top, #f00f, #f000);
transform-style: preserve-3d;
transform: translateZ(-1px) rotate(10deg) translate(-5px, -5px);
transform-origin: 50% 86%;
}
div::before, div::after {
width: 100%;
height: 100%;
top: 50%;
}
div::before {
background: linear-gradient(125deg, #0f0f, #0f00);
left: 33.33333%;
}
div::after {
background: linear-gradient(225deg, #00ff, #00f0);
left: -33.33333%;
}Matt Biernerbody { display: flex; justify-content: center; align-items: center; overflow: hidden; }Octagram2018-04-25T00:00:00+00:002018-04-25T00:00:00+00:00https://recurss.github.io/2018/04/25/octagrambody {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
div {
transform: rotate(45deg);
border: 4px solid white;
background: black;
}Matt Biernerbody { display: flex; justify-content: center; align-items: center; overflow: hidden; }