icon de intereses 🍰
<style>
/* --- CORE: ANIMACIÓN --- */
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(8px); }
100% { transform: translateY(0px); }
}
/* --- BLOQUE: INTERÉS (FIX RIGIDEZ) --- */
.profile .table-section td:first-child {
position: relative;
z-index: 1;
display: flex !important;
width: 90px !important;
height: 90px !important;
min-width: 90px !important;
max-width: 90px !important;
min-height: 90px !important;
max-height: 90px !important;
aspect-ratio: 1 / 1 !important;
align-items: center;
justify-content: center;
background: transparent !important;
border: none !important;
padding: 0 !important;
overflow: visible !important;
animation: floating 3s ease-in-out infinite;
}
/* --- MOTOR: DESFASE --- */
.profile .table-section tr:nth-of-type(even) td:first-child { animation-delay: 0.5s; }
.profile .table-section tr:nth-of-type(3n) td:first-child { animation-delay: 1s; }
/* --- CAPA 0: TEXTURA INTERNA --- */
.profile .table-section td:first-child::before {
content: "";
position: absolute;
top: 8%; left: 8%;
width: 84%; height: 84%;
z-index: -1;
background-size: cover !important;
background-position: center !important;
border-radius: 0px !important;
}
/* --- CAPA 1: OVERLAY GIF --- */
.profile .table-section td:first-child::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 1;
background-image: url('https://i.postimg.cc/tTcZMWCj/12d8878e589096b34380d47044900e73.gif');
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
}
/* --- DATA: ASSETS --- */
.profile .table-section tr:nth-of-type(1) td:first-child::before { background-image: url('https://i.postimg.cc/Rq5m3VGW/04686f652e0909c8c356881d213ced8d.jpg'); }
.profile .table-section tr:nth-of-type(2) td:first-child::before { background-image: url('https://i.postimg.cc/jC0TWdvw/0d481f9853ee026da58e7f77f0cfbb5f.jpg'); }
.profile .table-section tr:nth-of-type(3) td:first-child::before { background-image: url('https://i.postimg.cc/F15vfsGc/1ad4494ca75cc3b76112489f92e98393-webp.webp'); }
.profile .table-section tr:nth-of-type(4) td:first-child::before { background-image: url('https://i.postimg.cc/YjK74q84/a8089b8ca72f76aba23d6d22000e909c.jpg'); }
.profile .table-section tr:nth-of-type(5) td:first-child::before { background-image: url('https://i.postimg.cc/6TJK75z3/e74ac975daaab41b3b32e8c5a9c1a56f.jpg'); }
.profile .table-section tr:nth-of-type(6) td:first-child::before { background-image: url('https://i.postimg.cc/WtLVDbSG/ee1e18e582f935bcc04f4a077f250f6d.jpg'); }
/* --- UI: TEXTO Y FIX --- */
.profile .table-section td:first-child b {
position: relative;
z-index: 5 !important;
font-size: 10px;
display: block;
}
.profile .table-section td:last-child {
display: table-cell !important;
vertical-align: middle !important;
width: 100% !important;
}
</style>
Fondo de las casillas de texto 🥛
<style>
/* --- ESTRUCTURA: CASILLAS DE INTERESES --- */
.profile .table-section td {
position: relative;
z-index: 1;
background-color: transparent !important;
border: 1px solid rgba(139, 109, 70, 0.3) !important;
padding: 10px !important;
}
/* --- FONDO --- */
.profile .table-section td::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: -2;
background-size: cover !important;
background-position: center !important;
opacity: 0.8;
}
/* --- ASSETS: BACKGROUND_MAP --- */
.profile .table-section tr:nth-of-type(1) td::before { background-image: url('https://i.postimg.cc/1tR6Vy4R/2fe4fa6886eb6d880e9f6db4299f841e.jpg'); }
.profile .table-section tr:nth-of-type(2) td::before { background-image: url('https://i.postimg.cc/G23YTb9b/57571eede495baf083f272f841f49d0a.jpg'); }
.profile .table-section tr:nth-of-type(3) td::before { background-image: url('https://i.postimg.cc/fLWXSMkD/7dda91d63bf94e807d7c38475e85187f.jpg'); }
.profile .table-section tr:nth-of-type(4) td::before { background-image: url('https://i.postimg.cc/Tw2m5ThY/8b20bd389b5d5168ea0fa0b48e4a929b-webp.webp'); }
.profile .table-section tr:nth-of-type(5) td::before { background-image: url('https://i.postimg.cc/G23YTb9t/945e078000a0d27b87ca02a9a852f32a-webp.webp'); }
.profile .table-section tr:nth-of-type(6) td::before { background-image: url('https://i.postimg.cc/SsQ8Ymjj/a9eeff7b2cc7d2557762142bc0b41092-webp.webp'); }
</style>
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
Jenna ⋆˚꩜。
SUBSCRIBED TO UR BLOGS! so talented am gonna use this