I have this piece of code, and I wanted the SVG objects to expand upon hover. I looked up a solution to make the SVG object expand from the center of the shape, but it's unresponsive. My other attempt was to simply transform it using a:hover and using CSS transformations, but as you might expect, it scales, but also moves away from the canvas.
a {
display: block;
width: 1500px;
height: 850px;
transition: all .2s;
font-size: 0;
position: absolute;
background: black;
}
a:hover {
background: gray;
/*Attempt to scale using CSS, but there was a failure
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);*/
}
svg {
display: block;
height: 0;
}
div#navPanel {
margin-top: 50px;
margin-left: 10vw;
}
<head>
<svg>
<defs>
<clipPath id="c1">
<path
d="
M 10, 0
L 200, 80
L 300, 60
Z
"/>
</clipPath>
</defs>
<use xlink:href="#c1" transform="translate(-50,-50) scale (1.5)"/>
</svg>
</head>
<body>
<div id="navPanel">
Click me...
</div>
</body>
The issue is in width and height of the <a> tag
Here is working fiddle : https://jsfiddle.net/0we13sx9/2/
CSS
a {
display: block;
width: 300px;
height: 100px;
transition: all .2s;
font-size: 0;
position: relative;
background: black;
}
a:hover {
background: gray;
/* Attempt to scale using CSS, but there was a failure */
transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
}
svg {
display: block;
height: 0;
}
div#navPanel {
margin-top: 50px;
margin-left: 10vw;
}
You've made it hard for yourself by using clip paths. Your problem is that the clip Paths have absolute coordinates. When you scale the <a> element up, you can't tell anything has happened because the clip path has stayed the same size.
You need to scale the clip path up. Which you can only do with Javascript. See below.
var item = document.getElementById("item1");
item.addEventListener("mouseover", function(evt) {
document.querySelector("#c1 path").setAttribute("transform",
"translate(155,40) scale(1.5) translate(-155,-40)");
});
item.addEventListener("mouseout", function(evt) {
document.querySelector("#c1 path").removeAttribute("transform");
});
a {
display: block;
width: 1500px;
height: 850px;
transition: all .2s;
font-size: 0;
position: absolute;
background: black;
}
a:hover {
background: gray;
}
svg {
display: block;
height: 0;
}
div#navPanel {
margin-top: 50px;
margin-left: 10vw;
}
<head>
<svg>
<defs>
<clipPath id="c1">
<path
d="
M 10, 0
L 200, 80
L 300, 60
Z
" />
</clipPath>
</defs>
</svg>
</head>
<body>
<div id="navPanel">
<a id="item1" href="#1" class="clipPath1" style="clip-path: url(#c1)">Click me...</a>
</div>
</body>
The enlarged clip path is itself being clipped by the edge of the <a> element. You could fix that by moving the clip path away from the edge. Ie increase the coordinate values in the clip path.
Related
I've found a weird issue where the rect inside the svg stays the same width as the svg on page load. Resizing the window (causing the svg to resize) doesn't update the width of the rect. Inspecting the element and toggling off/on the height or width then causes the width to update. This issue does not occur in Safari but does occur in Chrome and Firefox.
Is there a more correct way of doing the HTML and CSS to get the effect I need? I essentially want a dashed stroke around the box. I can't use dashed border as the dashes are not wide enough.
.box {
background: black;
min-height: 300px;
padding: 65px;
border-radius: 20px;
position: relative;
max-width: 700px;
margin: auto;
}
svg {
width: calc(100% - 46px);
height: calc(100% - 46px);
fill: none;
stroke: white;
stroke-dasharray: 8px;
position: absolute;
top: 23px;
left: 23px;
pointer-events: none;
}
svg rect {
width: calc(100% - 2px);
height: calc(100% - 2px);
}
<div class="box">
<svg xmlns='http://www.w3.org/2000/svg'>
<rect x='1' y='1' rx='5' />
</svg>
</div>
You can apply border-radius and padding properties to the svg and make the inner <rect> responsive using relative units.
body {
}
*{
box-sizing:border-box
}
.resize {
resize: both;
overflow: auto;
padding: 1em;
border: 1px solid red;
width: 100%;
}
.box{
width: 100%;
height:100%;
}
svg {
display: block;
width: 100%;
height:100%;
padding: 23px;
background: #000;
border-radius: 20px;
overflow:visible;
}
rect {
stroke: white;
stroke-dasharray: 8px;
stroke-width:1px;
}
<div class="resize">
<div class="box">
<svg xmlns='http://www.w3.org/2000/svg'>
<rect x='0' y='0' rx='5' width="100%" height="100%" />
</svg>
</div>
</div>
<p>Resize me</p>
overflow:visible will prevent any stroke clipping.
It is also important to set a box-sizing: border-box property - otherwise padding will introduce overflows.
This way we don't need any calc() width/height values, that can cause issues when applied to svg elements (... in some browsers).
I'm trying to make the text "sample text sample text" move back and forth on a curved path. As you can see in the snippet I have been able to get in to move back and forth in a straight line but I don't know how to curve it and make it follow along that curved path. Also if someone could help me speed up the "ease" when the text gets to the ends of the path that would be nice.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#500&display=swap" rel="stylesheet">
<title>Document</title>
<style>
*{
margin: 0rem;
padding: 0rem;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background: #1B2A41;
}
.container {
margin: auto;
width: 20rem;
background-color: transparent;
}
.path {
position: absolute;
overflow: hidden;
top: 15rem;
left: 15rem;
width: 165rem;
height: 40rem;
background-color: none;
margin: auto;
transform: rotate(20deg);
}
.shape {
position: absolute;
left: 0;
background-color: none;
height: 12rem;
display: block;
top: 40%;
text-align: center;
font-size: 5rem;
font-family: 'Quicksand', sans-serif;
color: #c4def5;
text-shadow: 0 0 20px #4e91ac;
x-transition: all 1s ;
animation: ani 10s infinite;
}
.shape:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
padding: 0 20px;
z-index: -1;
color: #8db9e0;
filter: blur(15px);
}
#keyframes ani {
0% {
left: 0rem;
}
50% {
left: 50rem;
}
100% {
left: 0rem;
}
}
</style>
<script>
console.log('hello world')
//#8db9e0
</script>
</head>
<body>
<div class="container">
<div class="path">
<span id="elem" class="shape trail"><h1 data-text='[sample text sample text]'>sample text sample text</h1></span>
</div>
</div>
</body>
</html>
I have not been able to find a way of animating text along a path using CSS only.
Using SVG it is possible to write text along a path and then animate it by changing the startOffset attribute. startOffset says how far along the path the text should start. For example, this article https://css-tricks.com/moving-text-on-a-curved-path/ changes the attribute using Javascript.
Seeking a non-JS solution, it does not seem possible to animate such text using CSS but we can use SVG's own animate functionality. This snippet takes the path used in the CSS-tricks article but adds animate tags which move the text along the path in one direction, then reverse the movement and each repeats on the other finishing. CSS is used to rotate the containing div.
body {
width: 100%;
height: 100%;
}
div {
transform: rotate(20deg);
font-family: Arial, Helvetica, sans-serif;
position: fixed;
top:40%;
width: 100%;
overflow: hidden;
}
svg {
font-size:50px;
}
<div>
<svg width="100%" height="200px" viewBox="0 0 1098.72 89.55">
<path id="curve" fill="transparent" d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8-61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19"></path>
<text width="100%" style="transform:translate3d(0,0,0);">
<textPath id="text-path" style="transform:translate3d(0,0,0);" alignment-baseline="top" xlink:href="#curve">
sample text sample text
<animate id="anim1" attributeName="startOffset"
from="0" to="600"
begin="0s;anim2.end" dur="5s"
repeatCount="1"
/>
<animate id="anim2" attributeName="startOffset"
from="600" to ="0"
begin="anim1.end" dur="5s"
repeatCount="1"
/>
</textPath>
</text>
</svg>
</div>
I created a three path SVG file
I want to use each part (left, middle, right) and clip each of the dive to get this
from this
CSS
.bgmove {
position: relative;
width: 1100px;
height: 70px;
}
.left {
clip-path: url(#clipLeft);
background-color: red;
width: 403px
}
.middle {
clip-path: url(#clipMiddle);
background-color: black;
width: 284px;
left: 373px;
}
.right {
clip-path: url(#clipRight);
background-color: green;
width: 473px;
left: 627px;
}
.left,
.middle,
.right {
height: 70px;
position: absolute;
}
HTML Code
<html>
<head>
</head>
<body>
<div class="bgmove">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<svg height="70" width="1100">
<defs>
<clipPath id="clipLeft">
<path d="M40.4575,70,0,0H362.543L403,70Z" />
</clipPath>
<clipPath id="clipMiddle">
<path d="M1100,70,1059.55,0H627l40.4506,70Z" />
</clipPath>
<clipPath id="clipRight">
<path d="M657,70,616.38,0H373l40.62,70Z" />
</clipPath>
</defs>
</svg>
</body>
</html>
you can see the result here
https://jsfiddle.net/Zivo/y4srujqe/
as you can see I only the left part is clipped while the the middle and the right are hidden for some reason though I used exactly the same seetings
What am I doing wrong
The divs are not inside the svg. If the shapes are going to be used as a clip-path, their origin is at the div itself. That means that clipMiddle and clipRight are way to the right of where you want them to be. To illustrate that, you can see the paths if you change every clip to #clipLeft:
.left {
clip-path: url(#clipLeft);
background-color: red;
width: 403px
}
.middle {
clip-path: url(#clipLeft);
background-color: black;
width: 284px;
left: 373px;
}
.right {
clip-path: url(#clipLeft);
background-color: green;
width: 473px;
left: 687px;
}
See the result at https://jsfiddle.net/vnkgd3r5/. The middle path is not well clipped because it is shorter than the other two.
How can I draw this using css ? I tried using border css and rotate the DIV, but didn't find out exact answer for this.
You need to use clippath
here is the example link
Codepen
html:
<div class="tag-blue" style="-webkit-clip-path: url(#clip1);clip-path: url(#clip1);">gadgets 3</div>
<svg width="0" height="0">
<defs>
<clipPath id="clip1" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 1 0, .82 1, 0 1">
</polygon>
</clipPath>
</defs>
</svg>
css:
.tag-blue{
background-color: red;
height: 300px;
width: 300px;
}
change path according to your need
You could use pseudo elements, :before : after for this, and transform property:
transform-origin: right bottom;
transform: skewY(-3deg);
transform-origin - set position of transform animation.
and transform itself set which type and value of animation you want to have
Here is code for your example: https://jsfiddle.net/2zbqgzcq/
And here you could read more about transform
div {
height: 120px;
width: 200px;
background: blue;
position: relative;
}
div:after {
content: "";
position: absolute;
background: blue;
height: 90%;
width: 100%;
transform: skewY(-15deg);
bottom: -25%;
}
<div></div>
You can achieve this by using transform property in css, try this
<!DOCTYPE html>
<html>
<head>
<style>
.header{
background-color: #000;
position: relative;
height: 150px;
width: 100%;
}
.header:after{
content: '';
transform-origin: right bottom;
transform: skewY(-4deg);
width: 100%;
height: 100%;
position: absolute;
background: inherit;
bottom: 0;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
How to transform block in CSS? Pseudo-elements is need or not? I try to create block look like block on the picture below. I can't create such block as on the picture below.
This is my code:
.transform_items {
width: 40%;
height: 80px;
position: relative;
margin: 0 auto;
perspective: 600px;
margin-top: 150px;
left: 50px;
}
.block,
.block::before{
display: block;
position: absolute;
margin: 0 auto;
}
.block {
border: 5px solid transparent;
width: 350px;
height: 60px;
}
.block::before {
content: '';
border: 5px solid #52B352;
transform: rotateY(30deg);
top: -5px;
right: -5px;
bottom: -5px;
left: -35px;
}
.block a {
font-size: 24px;
}
<div class="transform_items">
<div class="block"><a>Block</a></div>
</div>
The expected result:
If you can use SVG (1), it could be like this
codePen
svg #block {
stroke: orange;
fill: none;
stroke-width: 5
}
svg text {
font-size: 25px
}
<svg version="1.1" x="0px" y="0px" width="274px" height="84px" viewBox="0 0 274 84">
<polygon id="block" points="33,13 245,24 245,60 29,64 " />
<text x="100" y="50">BLOCK</text>
</svg>
You can also save the svg code as a .svg file,without the text element, and use it as background-image for the div that contains your text
Read this to learn how to use svg in different ways: https://css-tricks.com/using-svg/
(1) Browser support for SVG is a little better than browser support for transform, caniuse: SVG