Tres Bon Style Pour Css

* {
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
*:before,
*:after {
content: '';
position:absolute;
}
:root{
--bg:rgb(240, 240, 193,1);
--container-height:36.25em;
--ground:rgb(145, 201, 112,1);
--stem:rgb(153, 120, 85,1);
--g:rgb(127, 163, 81,1);
--gd:rgb(90, 124, 48,1);
--gdd:rgb(68, 94, 33,1);
/* font-size:40px; */
}
html {
width: 100%;
height: 100%;
}
body{
background: var(--bg);
height: 100%;
width: 100%;
}
.reference{
width:48.75em;
height:var(--container-height);
opacity:0.7;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
img{
width:100%;
height:auto;
}
/* ************************ */
.container{
width:48.75em;
height:var(--container-height);
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
display:flex;
}
.plant{
width: 25%;
height: 50%;
position:relative;
}
/* ******** ground ******** */

.plant::after{
height:3em;
width:100%;
background:var(--ground);
top:calc(var(--container-height) - 3.3em);
}
.pot{
position:absolute;
height:3em;
width:6em;
top:calc(var(--container-height) - 3em - 3.3em);
left:4.2em;
}
/* ******** plant 1 ******** */
.pot__1{
background: rgb(226,124,202);
background:radial-gradient(circle, rgba(226,124,202,0) 0%, rgba(226,124,202,0)
65%, rgba(226,124,202,1) 66%)
,linear-gradient(180deg, rgba(226,124,202,1) 25%, rgba(226,124,202,0) 26%)
,linear-gradient(90deg, rgba(226,124,202,1) 50%, rgba(191,90,168,1) 51%)
;
height:6em;
border-radius:50%;
top:calc(var(--container-height) - 3.3em - 6em);
clip-path: inset(21.9% 0 0 0);

z-index:100;
}
/* circles at the pot */
.pot__1::before{
height:1.4em;
width:1.4em;
background:#ffffff;
border-radius:50%;
top:1.7em;
left:0.3em;
}
.pot__1::after{
height:0.7em;
width:0.7em;
background:#F6D3EC;
border-radius:50%;
top:3.4em;
left:1.58em;
}
.leaf{
width: 2.2em;
height: 6.9em;
position: absolute;
border-radius: 50%;
background: linear-gradient(90deg, rgba(50,93,71,1) 50%, rgba(64,136,96,1) 50%,
rgba(64,136,96,1) 55%, rgba(50,93,71,1) 55%);
z-index:0;
}
.leaf--right{
top: calc(var(--container-height) - 3.3em - 6em - 5.2em);
left: 8em;
transform: rotate(23deg);
}
.leaf--left{
top: calc(var(--container-height) - 3.3em - 6em - 4em);
left: 4.2em;
transform: rotate(-36deg) scale(0.6);
}
.pedicel{
width: 0.1em;
height: 7em;
position: absolute;
background:#325d47;
border-radius:50% 50% 50% 50% / 3% 3% 3% 3% ;
z-index:-1;
}
.pedicel--right{
top: calc(var(--container-height) - 3.3em - 6em - 4em - 4.2em);
left: 7.7em;
transform: rotate(5deg);
}
.pedicel--left{
left: 6em;
transform: rotate(-12deg) scale(0.8);
}
.pedicel--horz__1{
width: 0.1em;
height: 2em;
top: calc(var(--container-height) - 3.3em - 6em - 4em - 8em);
left: 7.4em;
transform: rotate(-30deg)
}
.pedicel--horz__2{
width: 0.1em;
height: 2em;
top: calc(var(--container-height) - 3.3em - 6em - 4em - 5em);
left: 4.8em;
}
.pedicel--horz__3{
width: 0.1em;
height: 0.7em;
left: 4.6em;
}
.pedicel--ver__1{
width: 0.1em;
height: 0.7em;
left: 7.6em;
transform: rotate(50deg)
}
.pedicel--ver__2{
width: 0.1em;
height: 1.6em;
left: 5em;
transform: rotate(30deg)
}
.pedicel--horz__1::after
,.pedicel--horz__2::after
,.pedicel--horz__3::after
,.pedicel--ver__1::after
,.pedicel--ver__2::after
{
height:0.5em;
width:0.5em;
background:#F0D0F1;
border:0.1em solid #F2B1F3 ;
border-radius:50%;
z-index:1;
}
.pedicel--horz__1::after{
top:-0.4em;
left:-0.2em;
}
top:-0.1em;
left:-0.2em;
}
top:-0.47em;
left:-0.2em;
}
.pedicel--ver__1::after{
top:-0.47em;
left:-.2em;
}
.pedicel--ver__2::after{
top:-0.45em;
left:-.2em;
}
.pedicel--horz__1::before
,.pedicel--horz__2::before
{
width:.6em;
height:1em;
background:#F2B1F3 ;
border-radius: 50% ;
clip-path: polygon(12% 50%, 4% 24%, 0 0, 100% 0, 98% 19%, 93% 36%, 76% 70%, 66%
88%, 54% 96%, 44% 97%, 31% 89%, 22% 71%);
top:1.8em;
left:-0.4em;
transform:rotate(30deg);
}
.pedicel--horz__2::before{
top:1.6em;
}
.flower{
width:0.7em;
height:0.7em;
background:#E06BC1;
border-radius:50%;
position:absolute;
}
.flower--right{
left:7.7em;
}
.flower::before
,.flower::after {
width:1.4em;
height:1.4em;
background:#F2B1F3;
border-radius:50%;
top:-0.4em;
left:-1em;
z-index:-1;
}
.flower::after{
left: 0.2em;
}
.petal{
width:0.5em;
height:0.8em;
background:#F2B1F3;
position:absolute;
border-radius: 50% 50% 50% 50% / 20% 20% 20% 20%;
z-index:-1;
}
.petal__1{
top:0.6em;
left:0.4em;
transform:rotate(-15deg);
}
.petal__2{
top:0.6em;
left:-0.18em;
}
.flower--left{
left:5.3em;
}
/* ******** plant 2 ******** */

.pot__2{
width: 10em;
top: calc(var(--container-height) - 3.3em - 7em );
left: 3.5em;
border-left: 3em solid rgba(255,255,255,0);
border-right: 3em solid rgba(255,255,255,0);
border-top: 7em solid rgba(204,204,204,1);
border-image-slice: 1;
border-image-source:linear-gradient(90deg, rgba(244,244,244,1) 49%,
rgba(204,204,204,1) 50%);
clip-path: polygon(30% 100%, 70% 100%, 88% 0, 12% 0);
}
.pot__2:before{
width: 7.7em;
height: 5em;
background: #5E4127;
border-radius: 10% 10% 45% 80% / 57% 45% 49% 72% ;
top: -10em;
left: -2em;
}
.pot__2:after{
width: 8em;
height: 0.5em;
background: #848484;
top: -7em;
left: -2em;
clip-path: polygon(7% 100%, 95% 100%, 100% 0, 0 0);
}
.stem{
position:absolute;
background: var(--stem);
}
.stem--main{
width: 1em;
height: 3.4em;
top:calc(var(--container-height) - 3.3em - 9.2em );
left:8em;
}
.stem--main::before{
width:0.8em;
height:0.8em;
border-radius:50%;
top:3.2em;
left:-0.1em;
}
.stem--main::after{
width:0.5em;
height:0.5em;
border-radius:50%;
top:3.3em;
left:0.6em;
}
.stem--right{
width: 0.65em;
height: 3.4em;
left:10.15em;
border-radius:3% 0% 100% 48% / 0% 0% 55% 0%;
}
.stem--right::after{
border-left: 1.1em solid transparent;
border-right: 1.24em solid transparent;
border-top: 1.7em solid var(--g);
border-bottom: 0;
top:-0.8em;
left:-.6em;
}
.stem--right::before{
border-top: 1.5em solid var(--gd);
border-bottom: 0;
top:-0.75em;
left:-2.15em;
z-index:50;
}
.stem--left{
width: 0.7em;
height: 3.4em;
left:6.1em;
border-radius:3% 0% 50% 100%/ 0% 0% 0% 30% ;
}
.stem--left::after{
border-left: 1em solid transparent;
border-top: 1.3em solid var(--g);
border-bottom: 0;
top:-0.3em;
left:-0.6em;
z-index:50;
}
.stem--horz__1{
width:2em;
height:1.2em;
left:8.3em;
}
.stem--horz__1::before{
width:1.8em;
height:3em;
background:tranparent;
border-radius:50%;
top:-2.9em;
left:0.4em;
border: 0.09em solid #7A5C40;
border-bottom-width:0.095em;
border-top:0;
border-right:0;
clip-path: ellipse(46% 61% at 36% 100%);
}
.stem--horz__1::after{
width: 0;
height: 0;
border-bottom: 0.4em solid var(--stem);
top:-0.38em;
left:1.58em;
}
.stem--horz__2{
width:1.7em;
height:0.8em;
left:6.7em;
}
.stem--horz__2::before{
width:1.8em;
height:3em;
background:tranparent;
border-radius:50%;
top:-2.9em;
left:-0.3em;
border: 0.09em solid #7A5C40;
border-bottom-width:0.095em;
border-top:0;
border-left:0;
clip-path: ellipse(46% 60% at 66% 100%);
}
.stem--horz__2::after{
width: 0;
height: 0;
top:-0.26em;
left:0.003em;
}
.stem--middle{
width: 0;
height: 0;
border-left: 0.5em solid var(--bg);
border-right: 0.5em solid var(--bg);
left:7.95em;
}
.stem--middle::before{
top: 2.29em;
left: 0.332em;
}
.stem--middle::after{
top: 2.32em;
left: -1.1em;
}
.pointy--leaf{
position:absolute;
border-radius:50% 50% 0% 0% / 100% 100% 0% 0% ;
clip-path: polygon(45% 0, 55% 0, 100% 100%, 0% 100%);
}
.pointy--leaf__1{
width:1.5em;
height:7.7em;
background:var(--g);
left:12.2em;
transform: skewX(-31deg) ;
z-index:3;
}
.pointy--leaf__2{
width:1em;
height:5.55em;
top:calc(var(--container-height) - 3.3em - 17.9em);
left:13.7em;
z-index:3;
}
.pointy--leaf__3{
width:0.7em;
height:10em;
left:7.6em;
transform: skewX(25deg) ;
z-index:3;
}
.pointy--leaf__10{
width:1.3em;
height:9em;
background:var(--gd);
left:11.8em;
z-index:1;
}
.pointy--leaf__100{
width:1.3em;
height:9em;
background:var(--gdd);
left:11em;
z-index:0;
}
.pointy--leaf__4{
width:1.2em;
height:10.3em;
left:8.2em;
z-index:3;
}
.pointy--leaf__5{
width:1.6em;
height:4em;
left:2.4em;
z-index:3;
}
.pointy--leaf__40{
width:1em;
height:8em;
left:4.5em;
z-index:1;
}
.pointy--leaf__400{
width:0.9em;
height:7em;
left:3.5em;
z-index:0;
}
.pointy--leaf__6{
width:1em;
height:9.5em;
left:6.1em;
z-index:3;
}
.pointy--leaf__7{
width:1em;
height:9.8em;
left:9.8em;
z-index:2;
}
.pointy--leaf__600{
width:0.5em;
height:10em;
left:8.35em;
z-index:0;
}
.tail--right{
width:1em;
height:1.5em;
position:absolute;
left:10em;
border-radius:50% 50% 0% 0% / 100% 100% 0% 0% ;
clip-path: polygon(45% 0, 55% 0, 85% 85%, 75% 100%, 25% 100%, 15% 85%);
}
.tail--middle{
width:1.05em;
height:1.9em;
position:absolute;
left:7.9em;
border-radius:50% 50% 0% 0% / 100% 100% 0% 0% ;
}
.tail--left{
width:1em;
height:1.5em;
position:absolute;
left:5.98em;
border-radius:50% 50% 0% 0% / 100% 100% 0% 0% ;
}
/* ******** plant 3 ******** */

.pot__3{
position:absolute;
height:6.5em;
width:5.2em;
background: radial-gradient(0.7em 0.7em at 2em 2.5em, rgba(255,255,255,1) 48%,
rgba(255,255,255,0) 51%)
,radial-gradient(1.4em 1.4em at 1em 3.5em, rgba(255,255,255,1) 49%,
rgba(255,255,255,0) 51%)
,radial-gradient(120% 70% at left, rgba(227,153,183,0.5) 55%, rgba(178,113,139,0)
56%)
,linear-gradient(0deg, rgba(178,113,139,1) 30%, rgba(202,138,163,1) 31%);
border-radius:50%;
left:3.9em;
clip-path: inset(24% 0 0 0);
z-index:5;
}
.half--leaf{
position:absolute;
height:6.5em;
width:5.2em;
border-radius:50%;
clip-path: inset(0 61% 0 0);
}
.half--leaf__right{
background-color:#68B290;
background:radial-gradient(50% 50% at center, #68B290 50%, transparent 50%) 4.1em
0.92em /0.5em 0.5em
,radial-gradient(50% 50% at center, #ffff 50%, transparent 50%) 4em 1em /0.5em
0.5em ,#68B290 ;
left:3.5em;
z-index:4;
}
.half--leaf__left{
background-color:#5AA384;
background:radial-gradient(50% 50% at center, #5AA384 50%, transparent 50%) 3.1em
0.5em /0.5em 0.5em
0.5em ,#5AA384 ;
transform:rotate(232deg) ;
left:4em;
}
.pointy--leaf__right
,.pointy--leaf__middle
,.pointy--leaf__left
{
width:2.4em;
height:6em;
background:#407759;
left:3.7em;
transform:rotate(-30deg) ;
}
.pointy--leaf__middle{
background:#325C47;
left:5.1em;
}
.pointy--leaf__right{
left:6.6em;
}
.uniq--leaf{
width:1.5em;
height:7.7em;
background-color:#4C886C;
background:radial-gradient(50% 50% at center, #4C886C 50%, transparent 50%) 4em
0.92em /0.5em 0.5em
0.5em ,#4C886C ;
position:relative;
clip-path: polygon(9% 0, 23% 36%, 50% 46%, 100% 48%, 100% 100%, 0 100%, 0 0);
left:5.5em;
z-index:0;
}
.leaf--curve{
width:2.5em;
height:5em;
position:absolute;
left:5.55em;
border-radius:35% 0 50% 50%;
clip-path: inset(20% 47% 0 0);
box-shadow: inset 0.2em -0.3em 0 0 #4C886C;
}
.pointer{
width:0.2em;
height:1em;
background:#4C886C;
border-radius:50%;
position:absolute;
left:5.5em;
}
/* ******** plant 4 ******** */
.pot__4{
position:absolute;
height:3.4em;
width:8em;
background: linear-gradient(90deg, rgba(97,98,204,0.4) 54%, rgba(83,82,175,0)
55%)
,linear-gradient(0deg, rgba(83,82,175,1) 60%, rgba(66,65,140,1) 61%);
left:1.1em;
clip-path: polygon(16% 0%, 84% 0%, 100% 100%, 0% 100%);
z-index:3;
}
.hl__1{
background:#325D47;
left:0.4em;
}
.hl__2{
background:#325D47;
left:4.5em;
}
.leaf--little__1{
position:absolute;
height:3em;
width:2.7em;
border-radius:30% 70% 61% 39% / 30% 61% 39% 70% ;
box-shadow: -0.5em 0.5em 0 0 #407759;
left:5.5em;
z-index:2;
}
.leaf--little__2{
position:absolute;
height:3em;
width:2.7em;
border-radius:30% 70% 61% 39% / 30% 61% 39% 70% ;
box-shadow: -0.5em 0.5em 0 0 #5AA385;
left:2em;
transform:scaleY(-1) rotate(220deg);
}
.Petal--main__1{
height:3em;
width:2em;
background: #B7417D;
box-shadow: inset 0 -0.05em 0 0.15em rgba(219,101,160,1);
left:4.8em;
z-index:50;
}
.Petal--main__2{
height:3em;
width:2em;
background:rgb(211,73,135,1);
left:3.6em;
z-index:50;
}
.Petal-r{
position:absolute;
height:2.9em;
width:2em;
border-radius:50% 50% 0% 0% / 100% 100% 0% 0%;
background: #B7417D;
background: linear-gradient(90deg, rgba(219,101,160,1) 67%, rgba(185,67,127,1)
20%);
clip-path: inset(0 0 0 60%);
}
.p__1{
top:calc(var(--container-height) - 3em - 9em);
left:4.8em;
}
.p__2{
left:4.8em;
}
.p__3{
left:4.7em;
transform:rotate(40deg) scale(0.9);
}
.p__4{
left:4.6em;
}
.p__5{
left:4.6em;
}
.p__6{
left:4.5em;
}
.p__7{
left:4.4em;
}
.p__8{
left:4.4em;
}
.p__80{
left:4.3em;
}
.Petal-l{
position:absolute;
height:3.5em;
width:1.7em;
border-radius:50% 50% 0% 0% / 100% 100% 0% 0%;
background: #D34987;
background: linear-gradient(90deg, rgba(219,101,160,1) 67%, rgb(211,73,135,1)
20%);
transform:rotate(130deg) scale(1,-1);
clip-path: inset(0 0 0 60%);
}
.p__9{
left:3.6em;
}
.p__10{
left:3.5em;
}
.p__11{
left:3.6em;
transform:rotate(130deg) scale(1.1,-0.9);
}
.p__12{
left:3.8em;
}
.p__13{
left:3.9em;
}
.p__14{
left:3.9em;
}
.p__15{
left:3.98em;
}
.p__16{
left:4.07em;
}
.p__160{
left:4.1em;
}
.p__end{
left:4.05em;
transform:rotate(0deg) scale(0.5,0.7);
z-index:-1;
}

Tres Bon Style Pour Css

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tres Bon Style Pour Css

Transféré par

Droits d'auteur :

Formats disponibles

* {

/* ground */

clip-path: inset(21.9% 0 0 0);

/* plant 2 */

/* plant 3 */

Vous aimerez peut-être aussi