LuCIA
LuCIA
Style
The HTML structure for a default LuCIA:
<div class="lucia" >
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
</div>
The following affects each of the elements of the above HTML structure:
Container and other basics
.lucia{
box-sizing:border-box;
padding:0 !important;
margin:0 20px 20px 0 !important;
height:100px;
width:100px;
border-radius:3px;
box-shadow: 0px 0px 10px var(--faceColor);
background-position:center center;
position:absolute;
background-color:var(--faceColor03) !important;
transition:all .5s;
}
.lucia:before, .lucia:after{
content:"";
width:calc(50% - (258px * .5));
max-width:100px;
height:100%;
opacity:.1;
}
.lucia:before{ left:0;}
.lucia:after{right:0;}
.lucia:before, .lucia:after,
.lucia *, .lucia * *,
.lucia *:before, .lucia * *:before,
.lucia *:after, .lucia * *:after{
box-shadow: 0px 0px 2px rgba(0,0,0,.2);
background-size: 5px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' fill='rgba(0,0,0,.6)'><defs></defs><title>pixel</title><g id='Layer_2' data-name='Layer 2'><g id='hint'><rect x='0' y='0' width='7' height='7' /></g></g></svg>");
box-sizing:border-box;
padding:0 !important;
margin:0 !important;
position:absolute;
color: rgba(0,0,0,0) !important;
transition:all .5s;
}
Internal elements (eyebrows, eyelids, eyes, pupils, mouth)
/*(1) eye-border*/
.lucia p:nth-of-type(1),
.lucia p:nth-of-type(1) span{
width:30px !important;
height:25px;
border-radius:4px;
}
.lucia p:nth-of-type(1){
top:calc(50% - 27.5px);
left:calc(50% - 17.5px);
transform:translateX(-50%);
}
.lucia p:nth-of-type(1) span{ left:calc(100% + 5px); }
/*(2) eye-fill*/
.lucia p:nth-of-type(2),
.lucia p:nth-of-type(2) span{
width:20px !important;
height:15px;
background-color:var(--faceColor);
background-image: none;
}
.lucia p:nth-of-type(2){
top:calc(50% - 22.5px);
left:calc(50% - 17.5px);
transform:translateX(-50%);
}
.lucia p:nth-of-type(2) span{ left:calc(100% + 15px); }
/*(3) eye-brow*/
.lucia p:nth-of-type(3),
.lucia p:nth-of-type(3) span{
width:20px !important;
height:5px;
}
.lucia p:nth-of-type(3){
top:calc(50% - 40px);
left:calc(50% - 27.5px);
}
.lucia p:nth-of-type(3) span{ left:calc(100% + 15px); }
/*(4) eye-lid*/
.lucia p:nth-of-type(4),
.lucia p:nth-of-type(4) span{
width:30px !important;
height:5px;
}
.lucia p:nth-of-type(4){
top:calc(50% - 22.5px);
left:calc(50% - 52.5px);
transform:translate(50%, -50%);
opacity:.8;
}
.lucia p:nth-of-type(4) span{ left:45px; }
/*(5) eye-pupil*/
.lucia p:nth-of-type(5),
.lucia p:nth-of-type(5) span{
width:5px !important;
height:5px;
}
.lucia p:nth-of-type(5){
top:calc(50% - 15px);
left:calc(50% - 15px);
transform:translate(-50%, -50%);
}
.lucia p:nth-of-type(5) span{ left:30px; }
/*(6) mouth*/
.lucia p:nth-of-type(6),
.lucia p:nth-of-type(6) span{
left:50%;
transform:translate(-50%, -50%);
}
.lucia p:nth-of-type(6){
width:40px !important;
height:5px;
top:calc(50% + 10px);
}
.lucia p:nth-of-type(6) span{
width:10px !important;
height:5px;
bottom:-12px;
}
Style
The emotions classes can be added to the default LuCIA. For example:
<div class="lucia happy" >
/*--HAPPY----------*/
/*(1) eye-border*/
.lucia.happy p:nth-of-type(1){
top:calc(50% - 32px);
}
/*(2) eye-fill*/
.lucia.happy p:nth-of-type(2){
top:calc(50% - 27.5px);
}
/*(3) eye-brow*/
.lucia.happy p:nth-of-type(3){
top:calc(50% - 42.5px);
}
/*(4) eye-lid*/
.lucia.happy p:nth-of-type(4){
top:calc(50% - 30px);
}
/*(5) eye-pupil*/
.lucia.happy p:nth-of-type(5){
top:calc(50% - 20px);
}
/*(6) mouth*/
.lucia.happy p:nth-of-type(6){
width:60px !important;
top:calc(50% + 5px);
}
.lucia.happy p:nth-of-type(6):before,
.lucia.happy p:nth-of-type(6):after{
content:"";
width:5px !important;
height:5px;
top:-5px;
}
.lucia.happy p:nth-of-type(6):before{
left:-5px;}
.lucia.happy p:nth-of-type(6):after{
left:100%;
}
/*--JOY------------*/
/*(1) eye-border*/
.lucia.joy p:nth-of-type(1){
top:calc(50% - 32px);
}
/*(2) eye-fill*/
.lucia.joy p:nth-of-type(2){
top:calc(50% - 27.5px);
}
/*(3) eye-brow*/
.lucia.joy p:nth-of-type(3){
top:calc(50% - 42.5px);
}
/*(4) eye-lid*/
.lucia.joy p:nth-of-type(4),
.lucia.joy p:nth-of-type(4) span{
width:5px !important;
}
.lucia.joy p:nth-of-type(4){
top:calc(50% - 24.5px);
left:calc(50% - 40px);
}
.lucia.joy p:nth-of-type(4) span{
left:70px;
}
/*(5) eye-pupil*/
.lucia.joy p:nth-of-type(5){
top:calc(50% - 24px);
left:calc(50% - 12.5px);
}
.lucia.joy p:nth-of-type(5) span{
left:35px;
}
/*(6) mouth*/
.lucia.joy p:nth-of-type(6){
width:55px !important;
height:20px;
top:calc(50% + 10px);
}
.lucia.joy p:nth-of-type(6) span:before{
content:"";
width:45px !important;
height:5px;
background-color:var(--faceColor);
background-image: none;
bottom:20px;
transform:translateX(calc(-50% + 5px));
}
.lucia.joy p:nth-of-type(6):before,
.lucia.joy p:nth-of-type(6):after{
content:"";
width:5px !important;
height:20px;
top:-4.34px;
}
.lucia.joy p:nth-of-type(6):before{
left:-5px;
}
.lucia.joy p:nth-of-type(6):after{
left:100%;
}
/*--MEH----------*/
/*(3) eye-brow*/
.lucia.meh p:nth-of-type(3),
.lucia.meh p:nth-of-type(3) span{
width:25px !important;
}
.lucia.meh p:nth-of-type(3){
top:calc(50% - 40px);
left:calc(50% - 27px);
}
.lucia.meh p:nth-of-type(3) span{
top:calc(50% + 0px);
left:calc(100% + 5px);
}
/*(4) eye-lid*/
.lucia.meh p:nth-of-type(4){
top:calc(50% - 20px);
}
/*(5) eye-pupil*/
.lucia.meh p:nth-of-type(5){
/*top:calc(50% - 20px);*/
}
/*(6) mouth*/
.lucia.meh p:nth-of-type(6){
width:30px !important;
top:calc(50% + 10px);/**/
}
.lucia.meh p:nth-of-type(6):before{
content:"";
width:5px !important;
height:5px;
top:5px;
}
.lucia.meh p:nth-of-type(6):before{
left:-5px;
}
/*--THINK--------*/
/*(5) eye-pupil*/
.lucia.think p:nth-of-type(5){
top:calc(50% - 10px);
left:calc(50% - 10px);
}
.lucia.think p:nth-of-type(5) span{
left:35px;
}
/*(6) mouth*/
.lucia.think p:nth-of-type(6){
width:30px !important;
}
/*--SMIRK----------*/
/*(3) eye-brow*/
.lucia.smirk p:nth-of-type(3),
.lucia.smirk p:nth-of-type(3) span{
width:25px !important;
}
.lucia.smirk p:nth-of-type(3){
top:calc(50% - 40px);
left:calc(50% - 27px);
}
.lucia.smirk p:nth-of-type(3) span{
top:calc(50% + 0px);
left:calc(100% + 5px);
}
/*(4) eye-lid*/
.lucia.smirk p:nth-of-type(4){
top:calc(50% - 20px);
}
/*(5) eye-pupil*/
.lucia.smirk p:nth-of-type(5){
/*top:calc(50% - 20px);*/
}
/*(6) mouth*/
.lucia.smirk p:nth-of-type(6){
width:50px !important;
top:calc(50% + 10px);/**/
}
.lucia.smirk p:nth-of-type(6):before{
content:"";
width:5px !important;
height:5px;
top:-2.5px;
}
.lucia.smirk p:nth-of-type(6):before{ left:-5px;}
Style
The blink class can be added to the default LuCIA as well as with emotions
Blink classes for all LuCIA emotions
.lucia.blink p:nth-of-type(2){
animation-name: luciaBlinkEyeFill ;
}
.lucia.blink p:nth-of-type(2) span{
animation-name: luciaBlinkEyeFillSpan;
}
.lucia.blink p:nth-of-type(4){
animation-name: luciaBlinkEyeLid;
}
.lucia.blink p:nth-of-type(5){
animation-name: luciaBlinkPupil;
}
.lucia.happy.blink p:nth-of-type(2),
.lucia.happy.blink p:nth-of-type(2) span,
.lucia.happy.blink p:nth-of-type(4),
.lucia.happy.blink p:nth-of-type(5),
.lucia.joy.blink p:nth-of-type(2),
.lucia.joy.blink p:nth-of-type(2) span,
.lucia.joy.blink p:nth-of-type(4),
.lucia.joy.blink p:nth-of-type(5){
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.lucia.happy.blink p:nth-of-type(2),
.lucia.joy.blink p:nth-of-type(2){
animation-name: luciaBlinkEyeFill2 ;
}
.lucia.happy.blink p:nth-of-type(2) span,
.lucia.joy.blink p:nth-of-type(2) span{
animation-name: luciaBlinkEyeFillSpan2;
}
.lucia.happy.blink p:nth-of-type(4){
animation-name: luciaBlinkEyeLid2;
}
.lucia.happy.blink p:nth-of-type(5){
animation-name: luciaBlinkPupil2;
}
.lucia.joy.blink p:nth-of-type(4){
animation-name: luciaBlinkEyeLid3;
}
.lucia.joy.blink p:nth-of-type(5){
animation-name: luciaBlinkPupil3;
}
Blink animation keyframes
/*Blinking*/
@keyframes luciaBlinkEyeFill{
2.5%{ height: 0px; top: calc(50% - 8.5px) ; }
5%{ height: 15px; top: calc(50% - 22.5px); }
}
@keyframes luciaBlinkEyeFillSpan{
2.5%{ height: 0px; }
5%{ height: 15px; }
}
@keyframes luciaBlinkEyeLid{
2.55%{ top: calc(50% - 5px) ; }
5%{ top: calc(50% - 22.5px); }
}
@keyframes luciaBlinkPupil{
2.5%{ top: calc(50% - 5px); }
5%{ top:calc(50% - 15px); }
}
/*Blinking*/
@keyframes luciaBlinkEyeFill2{
2.5%{ height: 0px; top: calc(50% - 12.5px); }
5%{ height: 15px; top: calc(50% - 27.5px); }
}
@keyframes luciaBlinkEyeFillSpan2{
2.5%{ height: 0px; }
5%{ height: 15px; }
}
@keyframes luciaBlinkEyeLid2{
2.5%{ top: calc(50% - 9px); }
5%{ top: calc(50% - 30px); }
}
@keyframes luciaBlinkPupil2{
2.5%{ top: calc(50% - 15px); }
5%{ top:calc(50% - 20px); }
}
/*Blinking*/
@keyframes luciaBlinkEyeLid3{
2.5%{ top: calc(50% - 14px); }
5%{ top: calc(50% - 24px); }
}
@keyframes luciaBlinkPupil3{
2.5%{ top: calc(50% - 15px); }
5%{ top:calc(50% - 24px); }
}
Style
The HTML structure for a star:
<div class="star">
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
</div>
The following affects each of the elements of the above HTML structure:
Star Positions
.star{
top: calc(50% - 50px);
left:50%;
transform: translate(-50%, -50%);
}
.star.star01{
transform: translate(-150%, -50%);
}
.star.star03{
transform: translate(50%, -50%);
}
Blank Star
.star.blank *{
opacity:.40;
}
.star.blank p:nth-of-type(4) span,
.star.blank p:nth-of-type(5) span{
opacity:0;
}
.star.blank *:before, .star.blank *:after{
opacity:.6;
}
.star p:nth-of-type(9) span, .star.blank p:nth-of-type(10):before{
opacity:1;
}
Default Star
.star{
box-sizing:border-box;
padding:0 !important;
margin:0 20px 20px 0 !important;
height:65px !important;
width:65px !important;
background-position:center center;
position:absolute;
top:20px;
left:20px;
background-color:var(--faceColor);
transition: all 1s;
}
.star *, .star * *,
.star *:before, .star * *:before,
.star *:after, .star * *:after{
/*box-shadow: 0px 0px 2px rgba(0,0,0,.2);*/
background-size: 5px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' fill='rgba(0,0,0,.6)'><defs></defs><title>pixel</title><g id='Layer_2' data-name='Layer 2'><g id='hint'><rect x='0' y='0' width='7' height='7' /></g></g></svg>");
box-sizing:border-box;
padding:0 !important;
margin:0 !important;
position:absolute;
transform:translateX(-50%);
color: rgba(0,0,0,0) !important;
width:0;
}
.star *:before,.star *:after{
content:"";
height:5px;
background-color:var(--faceColor);
background-image: none;
transform:translateX(50%);
right:50%;
}
.star p:nth-of-type(1){
top:calc(50% - 27.5px);
left:50%;
width:5px !important;
height:5px;
}
.star p:nth-of-type(2){
top:calc(50% - 22.5px);
left:50%;
width:15px !important;
height:5px;
}
.star p:nth-of-type(2):before{ width:5px !important; }
.star p:nth-of-type(3){
top:calc(50% - 17.5px);
left:50%;
width:25px !important;
height:5px;
}
.star p:nth-of-type(3):before{ width:15px !important; }
.star p:nth-of-type(4){
top:calc(50% - 12.5px);
left:50%;
width:45px !important;
height:5px;
}
.star p:nth-of-type(4):before{ width:25px !important; }
.star p:nth-of-type(4) span{
left:calc(50% + 5px);
width:5px !important;
height:5px;
opacity:.4;
visibility: initial !important
}
Default Star continued
.star p:nth-of-type(5){
top:calc(50% - 7.5px);
left:50%;
width:55px !important;
height:5px;
}
.star p:nth-of-type(5):before{ width:45px !important;}
.star p:nth-of-type(5) span{
left:calc(50% + 10px);
width:5px !important;
height:5px;
opacity:.4;
visibility: initial !important
}
.star p:nth-of-type(6){
top:calc(50% - 2.5px);
left:50%;
width:45px !important;
height:5px;
}
.star p:nth-of-type(6):before{ width:35px !important;}
.star p:nth-of-type(7){
top:calc(50% + 2.5px);
left:50%;
width:35px !important;
height:5px;
}
.star p:nth-of-type(7):before{ width:25px !important;}
.star p:nth-of-type(8){
top:calc(50% + 7.5px);
left:50%;
width:35px !important;
height:5px;
}
.star p:nth-of-type(8):before{
width:10px !important;
left:0px;
}
.star p:nth-of-type(8):after{
width:10px !important;
right:10px;
}
.star p:nth-of-type(9){
top:calc(50% + 12.5px);
left:50%;
width:35px !important;
height:5px;
}
.star p:nth-of-type(9) span{
background-color:var(--faceColor);
background-image: none;
left:50%;
width:5px !important;
height:5px;
visibility: initial !important;
}
.star p:nth-of-type(9):before{
width:5px !important;
left:2px;
}
.star p:nth-of-type(9):after{
width:5px !important;
right:8px;
}
.star p:nth-of-type(10){
top:calc(50% + 17.5px);
left:50%;
width:25px !important;
height:5px;
}
.star p:nth-of-type(10):before{
width:15px !important;
}
Style - Color Rotation HTML
The LuCIA element can rotate colors. For example:
<div class="lucia colorful" >
The same goes for the star element:
<div class="star colorful" >
Style - Star Bounce HTML
The star element can bounce too! For example:
<div class="star star-bounce colorful" >
Style - LuCIA and Star Color Rotation AND Star Bounce CSS
.star.star-bounce.colorful{
animation: starBounce 2s linear infinite, bgcolors 5s infinite;
}
.star.colorful *:before,
.star.colorful *:after,
.star.colorful p:nth-of-type(9) span{
animation: bgcolors 5s infinite;
}
.star-bounce.colorful *:before,
.star-bounce.colorful *:after,
.star-bounce.colorful p:nth-of-type(9) span{
animation: starBounce 0s linear infinite, bgcolors 5s infinite;
}
.lucia.colorful,
.lucia.colorful p:nth-of-type(2),
.lucia.colorful p:nth-of-type(2) span,
.lucia.colorful p:nth-of-type(6) span:before{
animation: bgcolors 5s infinite, glowcolors 5s infinite;
}