m1.r0
m1.r0
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
another great shit i just found out . . . iframes
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
(but what a shame I cannot use php in this project, I would just create one echo function)
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
well . . . i just get rid of that use component . . . found out that I don't need to define that <defs> element in every svg and it is much more simpler now . . . (it was more complex before but I gave up)
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
but how . . . in css I can go in class svg:hover use but I can't specify .triangle and .circle further on
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
@b1mind , could you tell me how to copy those svg elements with that <use> element so I can spin only that one which I'm hovering above only? thansks
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
<svg id="svg-video-button-icon" width="400" height="400" viewBox="50 50 406 406" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="circle-gradient" gradientTransform="rotate(60)">
<stop offset="25%" stop-color="var(--start-color)" />
<stop offset="105%" stop-color="var(--end-color)" />
</linearGradient>
<linearGradient id="triangle-gradient">
<stop offset="20%" stop-color="var(--start-color)" />
<stop offset="100%" stop-color="var(--end-color)" />
</linearGradient>
</defs>
<g id="button-svg-group">
<circle id="circle" cx="253" cy="253" r="200"/>
<path id="triangle-shadow" d="M160.215 144.461C160.215 121.367 185.215 106.934 205.215 118.481L392.715 226.734C412.715 238.281 412.715 267.148 392.715 278.695L205.215 386.949C185.215 398.496 160.215 384.062 160.215 360.968L160.215 144.461Z"/>
<path id="triangle" d="M160.215 144.461C160.215 121.367 185.215 106.934 205.215 118.481L392.715 226.734C412.715 238.281 412.715 267.148 392.715 278.695L205.215 386.949C185.215 398.496 160.215 384.062 160.215 360.968L160.215 144.461Z"/>
</g>
</svg>

<svg viewBox="0 0 400 400" width="30%" height="30%" xmlns="http://www.w3.org/2000/svg" class="video-button-icon">
<use href="#svg-video-button-icon"></use>
<text text-anchor="middle" x=200 y=250 class="video-button-letter">A</text>
</svg>
<svg id="svg-video-button-icon" width="400" height="400" viewBox="50 50 406 406" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="circle-gradient" gradientTransform="rotate(60)">
<stop offset="25%" stop-color="var(--start-color)" />
<stop offset="105%" stop-color="var(--end-color)" />
</linearGradient>
<linearGradient id="triangle-gradient">
<stop offset="20%" stop-color="var(--start-color)" />
<stop offset="100%" stop-color="var(--end-color)" />
</linearGradient>
</defs>
<g id="button-svg-group">
<circle id="circle" cx="253" cy="253" r="200"/>
<path id="triangle-shadow" d="M160.215 144.461C160.215 121.367 185.215 106.934 205.215 118.481L392.715 226.734C412.715 238.281 412.715 267.148 392.715 278.695L205.215 386.949C185.215 398.496 160.215 384.062 160.215 360.968L160.215 144.461Z"/>
<path id="triangle" d="M160.215 144.461C160.215 121.367 185.215 106.934 205.215 118.481L392.715 226.734C412.715 238.281 412.715 267.148 392.715 278.695L205.215 386.949C185.215 398.496 160.215 384.062 160.215 360.968L160.215 144.461Z"/>
</g>
</svg>

<svg viewBox="0 0 400 400" width="30%" height="30%" xmlns="http://www.w3.org/2000/svg" class="video-button-icon">
<use href="#svg-video-button-icon"></use>
<text text-anchor="middle" x=200 y=250 class="video-button-letter">A</text>
</svg>
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
right now I have this:
#circle-gradient {
--start-color: #aed695;
--end-color: #2b9d59;
}

#triangle-gradient {
--start-color: #900;
--end-color: #f00;
}

#button-svg-group{
& #circle {
fill: url(#circle-gradient) #aed695;
--stroke-color: #000;

stroke: var(--stroke-color);
stroke-width: 5px;
}

& #triangle {
fill: url(#triangle-gradient) #f00;
--stroke-color: #fff;

stroke: var(--stroke-color);
stroke-width: 8px;
}

& #triangle-shadow {
fill: #000;
opacity: 0.5;
}
}

svg > text.video-button-letter {
font-family: Helvetica, sans-serif;
font-size: 150px;
fill: #fff;
}

/*POPUP VIDEO BUTTON HOVER ANIMATION*/
#triangle,
#triangle-shadow {
transform-origin: 62% 62%;
transition: all 1s ease;
}
#triangle-shadow {
transform: translateX(9px) translateY(14px);
}

svg:hover #triangle{
transform: rotateZ(360deg);
}

svg:hover #triangle-shadow {
transform: translateX(9px) translateY(14px) rotateZ(360deg);
}

svg text{
transition: all 1s ease;
transform-origin: 50% 50%;
transform: rotateZ(0deg);
}

svg:hover text{
transform: rotateZ(360deg);
}
#circle-gradient {
--start-color: #aed695;
--end-color: #2b9d59;
}

#triangle-gradient {
--start-color: #900;
--end-color: #f00;
}

#button-svg-group{
& #circle {
fill: url(#circle-gradient) #aed695;
--stroke-color: #000;

stroke: var(--stroke-color);
stroke-width: 5px;
}

& #triangle {
fill: url(#triangle-gradient) #f00;
--stroke-color: #fff;

stroke: var(--stroke-color);
stroke-width: 8px;
}

& #triangle-shadow {
fill: #000;
opacity: 0.5;
}
}

svg > text.video-button-letter {
font-family: Helvetica, sans-serif;
font-size: 150px;
fill: #fff;
}

/*POPUP VIDEO BUTTON HOVER ANIMATION*/
#triangle,
#triangle-shadow {
transform-origin: 62% 62%;
transition: all 1s ease;
}
#triangle-shadow {
transform: translateX(9px) translateY(14px);
}

svg:hover #triangle{
transform: rotateZ(360deg);
}

svg:hover #triangle-shadow {
transform: translateX(9px) translateY(14px) rotateZ(360deg);
}

svg text{
transition: all 1s ease;
transform-origin: 50% 50%;
transform: rotateZ(0deg);
}

svg:hover text{
transform: rotateZ(360deg);
}
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
nevermind, screw that . . .
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
and the letter, which willl be always different inside of that triangle should rotate as well
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<link rel="stylesheet" href="style - Copy.css">

<svg id="svg-video-button-icon" width="400" height="400" viewBox="50 50 406 406" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="circle-gradient" gradientTransform="rotate(60)">
<stop offset="25%" stop-color="var(--start-color)" />
<stop offset="105%" stop-color="var(--end-color)" />
</linearGradient>
<linearGradient id="triangle-gradient">
<stop offset="0%" stop-color="var(--start-color)" />
<stop offset="80%" stop-color="var(--end-color)" />
</linearGradient>
</defs>
<g id="button-svg-group">
<circle id="circle" cx="253" cy="253" r="200"/>
<path id="triangle" d="M160.215 144.461C160.215 121.367 185.215 106.934 205.215 118.481L392.715 226.734C412.715 238.281 412.715 267.148 392.715 278.695L205.215 386.949C185.215 398.496 160.215 384.062 160.215 360.968L160.215 144.461Z"/>
</g>
</svg>

<svg viewBox="0 0 400 400" width="30%" height="30%" xmlns="http://www.w3.org/2000/svg" class="video-button-icon">
<use href="#svg-video-button-icon"></use>
<text text-anchor="middle" x=200 y=250 class="video-button-letter">A</text>
</svg>


</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<link rel="stylesheet" href="style - Copy.css">

<svg id="svg-video-button-icon" width="400" height="400" viewBox="50 50 406 406" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="circle-gradient" gradientTransform="rotate(60)">
<stop offset="25%" stop-color="var(--start-color)" />
<stop offset="105%" stop-color="var(--end-color)" />
</linearGradient>
<linearGradient id="triangle-gradient">
<stop offset="0%" stop-color="var(--start-color)" />
<stop offset="80%" stop-color="var(--end-color)" />
</linearGradient>
</defs>
<g id="button-svg-group">
<circle id="circle" cx="253" cy="253" r="200"/>
<path id="triangle" d="M160.215 144.461C160.215 121.367 185.215 106.934 205.215 118.481L392.715 226.734C412.715 238.281 412.715 267.148 392.715 278.695L205.215 386.949C185.215 398.496 160.215 384.062 160.215 360.968L160.215 144.461Z"/>
</g>
</svg>

<svg viewBox="0 0 400 400" width="30%" height="30%" xmlns="http://www.w3.org/2000/svg" class="video-button-icon">
<use href="#svg-video-button-icon"></use>
<text text-anchor="middle" x=200 y=250 class="video-button-letter">A</text>
</svg>


</body>
</html>
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
I'm trying to do this: (attachment) ease is applied in between every key frame rather than the whole animation, I would also like the shadow and gradient not to spin . . . do you know how to solve that?
/*POPUP VIDEO BUTTON STYLE*/
#circle-gradient {
--start-color: #aed695;
--end-color: #2b9d59;
}

#triangle-gradient {
--start-color: #900;
--end-color: #f00;

}

#button-svg-group{
& #circle {
fill: url(#circle-gradient) #aed695;
--stroke-color: #000;

stroke: var(--stroke-color);
stroke-width: 5px;
}

& #triangle{
fill: url(#triangle-gradient) #f00;
--stroke-color: #fff;

stroke: var(--stroke-color);
stroke-width: 8px;

-webkit-filter: drop-shadow( 9px 14px 7px rgba(0, 0, 0, .7));
filter: drop-shadow( 9px 14px 7px rgba(0, 0, 0, .7));
}
}

svg > text.video-button-letter {
font-family: Helvetica, sans-serif;
font-size: 150px;
fill: #fff;
}

/*POPUP VIDEO BUTTON ANIMATION*/
@keyframes rotate-button {
from {
transform: rotateZ(0turn);
transform-origin: 250px 250px;
}

15% {
transform: rotateZ(0.15turn) scale(0.8);
}

50% {
transform: rotateZ(0.5turn) scale(1.2);
}

85% {
transform: rotateZ(0.85turn) scale(0.8);
}

to {
transform: rotateZ(1turn) scale(1.0);
transform-origin: 250px 250px;
}
}

svg:hover #triangle {
animation: rotate-button 1.0s ease-in-out normal;
transform-origin: 250px 250px;
}
/*POPUP VIDEO BUTTON STYLE*/
#circle-gradient {
--start-color: #aed695;
--end-color: #2b9d59;
}

#triangle-gradient {
--start-color: #900;
--end-color: #f00;

}

#button-svg-group{
& #circle {
fill: url(#circle-gradient) #aed695;
--stroke-color: #000;

stroke: var(--stroke-color);
stroke-width: 5px;
}

& #triangle{
fill: url(#triangle-gradient) #f00;
--stroke-color: #fff;

stroke: var(--stroke-color);
stroke-width: 8px;

-webkit-filter: drop-shadow( 9px 14px 7px rgba(0, 0, 0, .7));
filter: drop-shadow( 9px 14px 7px rgba(0, 0, 0, .7));
}
}

svg > text.video-button-letter {
font-family: Helvetica, sans-serif;
font-size: 150px;
fill: #fff;
}

/*POPUP VIDEO BUTTON ANIMATION*/
@keyframes rotate-button {
from {
transform: rotateZ(0turn);
transform-origin: 250px 250px;
}

15% {
transform: rotateZ(0.15turn) scale(0.8);
}

50% {
transform: rotateZ(0.5turn) scale(1.2);
}

85% {
transform: rotateZ(0.85turn) scale(0.8);
}

to {
transform: rotateZ(1turn) scale(1.0);
transform-origin: 250px 250px;
}
}

svg:hover #triangle {
animation: rotate-button 1.0s ease-in-out normal;
transform-origin: 250px 250px;
}
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
may I ask you for your help in css animations and svg again?
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
thanks
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
thanks a lot . . . I couldn't find it when I was looking for it
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
*id of that first complex svg that I will define somewhere at the begining
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/19/2023 in #front-end
can I make a reusable html code like a function?
ow can I just create svg element where I will just make one <use> element with that first svg's id?
34 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/14/2023 in #front-end
side task labels
thx
42 replies
KPCKevin Powell - Community
Created by m1.r0 on 7/14/2023 in #front-end
side task labels
ow, so just a grid inside of an another grid
42 replies