I'm trying to run this small gif inside an SVG animation on my localhost, I've compiled the scss into css, but still, nothing is visible.
Here's the code:
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet/css" type="text/css" href="style.css">
</head>
<body>
<!-- Define our SVG clip path -->
<svg width='0' height='0'>
<defs>
<clipPath id="cp" clipPathUnits="objectBoundingBox">
<path d="M0.500, 0.945 L0.994, 0.090 L0.006, 0.090 L0.500, 0.945 L0.500, 0.650 L0.262, 0.238 L0.738, 0.237 L0.500, 0.650z"></path>
</clipPath>
</defs>
</svg>
<!-- The actual elements we're using -->
<div class="triangle first"></div>
<div class="triangle second"></div>
</body>
</html>
css:
html {
min-height: 100%;
background: #B8BEB4;
background: radial-gradient(#B8BEB4, #71685F);
background-size: cover; }
.triangle {
clip-path: url(#cp);
width: 50vw;
height: 50vw;
max-height: 75vh;
max-width: 75vh;
background-size: cover;
background-blend-mode: screen;
position: absolute;
top: 50%;
left: 50%; }
.first {
background-color: #C5075C;
background-image: url("https://media.giphy.com/media/pE6GG0V2JCKUo/giphy.gif");
transform: translateX(-65%) translateY(-50%); }
.second {
background-color: #03B897;
background-image: url("https://media1.giphy.com/media/fLg3MEWdgH5Ti/200.gif");
transform: translateX(-35%) translateY(-50%);
opacity: 0.8; }
See the Pen Reverse clip path with blend modes by Zach Saucier (#Zeaklous) on CodePen.
As the comments suggest, this works fine if the CSS is placed directly inside the HTML.
Turns out this is a simple typo. Please change:
<link rel="stylesheet/css" type="text/css" href="style.css">
To:
<link rel="stylesheet" type="text/css" href="style.css">
Related
I've made a nice film grain animation that im putting over a webpage to make a nice 4:3 old movie type look, however, I cant work out how to confine the animation to the div. I'm using Bootstrap if it effects it. Basically, I only want the grain to be inside the div so that it creates a black bar look outside. Many thanks! Code as follows:
#titleName {
font-family: 'Abril Fatface', cursive;
font-size: 4vw;
text-align: center;
white-space: nowrap;
background-color: rgb(68, 68, 68);
color: rgb(255, 255, 255);
margin-top: 0px;
}
#titleName:after {
animation: grain 2s steps(3) infinite;
background-image: url("http://creativeloads.com/foto/seamless-film-grain-294.jpg");
content: "";
height: 300%;
left: -50%;
opacity: 0.1;
position: fixed;
top: -100%;
width: 300%;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0)
}
10% {
transform: translate(-5%, -10%)
}
20% {
transform: translate(-15%, 5%)
}
30% {
transform: translate(7%, -25%)
}
40% {
transform: translate(-5%, 25%)
}
50% {
transform: translate(-15%, 10%)
}
60% {
transform: translate(15%, 0%)
}
70% {
transform: translate(0%, 15%)
}
80% {
transform: translate(-15%, 5%)
}
90% {
transform: translate(-10%, 10%)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="scss/custom.scss">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
<title>Home</title>
</head>
<body style="background-color:rgb(0, 0, 0);">
<script src="https://unpkg.com/#popperjs/core#2.4.0/dist/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<header>
<!-- Nav Bar -->
</header>
<main>
<!--- Content -->
<div id="titleName" class="container">
TITLE
<div class="noise"></div>
</div>
</main>
<footer>
<!--- Footer -->
</footer>
</body>
</html>
From what I gathered regarding your code it seems like you have no set width or height to your container, if you want to limit your child element you can set its parent width and let your grain be width: 100%;
Another solution is to create an svg rectangle and use it as a clip-path to your div.
{I’ll add the code once I’m on my laptop}
Recently I am facing some problem with my code in sprite animation in firefox.
My sprite image file is containing high quality graphics so the size of the image is more than 3MB. The same image with same code is working fine in Chrome.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body {
background-color: grey
}
.myDiv {
width: 650px;
height: 650px;
background: url(imagepath) top center;
animation: animatename 4s steps(120) infinite;
}
#keyframes animatename {
100% {
background-position: 0px -78000px;
}
}
</style>
<body>
<div class="myDiv"></div>
</body>
</html>
I have a single webpage with an animated SVG that goes upward along a path. However when wrapping the markup within my HTML, it appears distorted and pushes towards the margin. I couldn't tell whether the positioning is incorrect or the whether the animation is wrong. Here's my code:
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="grid-container">
<!-- create SVG using location points -->
<svg width="50%" height="50%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path fill="transparent" stroke="#000000" stroke-width="15" d="m -1.300355,36.773850 l -1.299004,36.777841 -1.298982,36.776811 -1.297459,36.776747 -1.296193,36.776726 -1.296097,36.779236 -1.296151,36.777637 -1.296215,36.776693 -1.294252,36.776586 -1.294048,36.776790 -1.293973,36.779118 -1.292622,36.779075 -1.291844,36.779049 -1.291879,36.778389 z" class="path" id="sendy"></path>
</svg>
<object class="sendy" type="image/svg+xml" data="https://images.sendyit.com/web_platform/vendor_type/top/2.svg">
</object>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
and CSS
.sendy{
height: 50%;
width: 50%;
}
/*animations*/
.sendy {
animation: MoveUpDown 1s linear infinite;
position: absolute;
left: 0;
bottom: 0;
}
#keyframes MoveUpDown {
0%, 100% {
bottom: 0;
}
100% {
bottom: 100px;
}
}
Here's a link of what happens: https://jsfiddle.net/kimaiga/pjk7t1qb/
Any idea of what I'm missing?
You need to change your animation to this:
#keyframes MoveUpDown {
to { transform: translateY(-100px); }
}
then change the size in the SVG tag
DEMO https://jsfiddle.net/12o8uqL4/
I'm trying to implement this example of 3d geometric transform with css:
3D Geometric Transform
But my animation is not working like that example and this is what I have:
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<body>
<style>
#im1 { transform: translateZ(25px); }
#im2 { transform: translateZ(-25px); transform: translateY(-50px); }
#obj1 {
animation: theRotate 2s linear infinite;
perspective: 1000px;
transform-style: preserve-3d;}
#keyframes theRotate
{
from {transform: rotateY(0deg) }
to {transform: rotateY(360deg) }
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-1 col-md-1" id="obj1">
<img src="wicon2.png" id="im1" style="width:50px">
<img src="wicon.png" id="im2" style="width:50px">
</div>
</div>
</div>
</body>
</html>
According to this, with perspective:1000 the animation should work fine, but it doesn't.
If there is another simple way to do this, maybe with JS, will be fine too.
I appreciate your time, thanks.
I took a look at the initial link/example you posted and copied the relevant CSS code from there and adapted it to your existing code. The following edit of your posted code should work in the intended way (shown in the linked example).
please note: If you run the snippet below, it will rotate empty images, because the image link is still the same from your post (wicon1.png)
<html>
<head>
<meta charset ="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<body>
<style>
.scene3d
{
perspective: 1000px;
width: 600px;
height: 340px;
margin-left: auto;
margin-right: auto;
}
.object3d
{
position: absolute;
width: inherit;
height: inherit;
/*top: 20px;*/
transform-style: preserve-3d;
}
.face3d
{
position: absolute;
left: 165px;
top: 15px;
}
#im1 { transform: translateZ(150px); }
#im2 { transform: translateZ(-150px); }
.scene3d.begin { perspective: 100000px; }
.scene3d.end { perspective: 1000px; }
#obj1 { animation: theRotate 4s linear infinite; }
#keyframes theRotate
{
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}
</style>
<div class="container">
<div class="row scene3d">
<div class="col-sm-1 col-md-1 object3d" id="obj1">
<img src="wicon1.png" id="im1" class="face3d" style="width:50px">
<img src="wicon2.png" id="im2" class="face3d" style="width:50px">
</div>
</div>
</div>
</body>
</html>
I've rotated a div, which looks fine and functions properly in Chrome & Firefox. However in IE (v9.0.8112.16421), the style & click event only appear to be applied to the area of the div which intersects with the position of the div before it was rotated.
Notice in my sample code, when you mouse over, the cursor is only displayed near the top of the div. Also notice nothing happens when you click the bottom of the div, but the event is fired when you click near the top.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style>
#myExpander
{
position:absolute;
padding: 5px;
top: 100px;
cursor: pointer;
border: 1px solid black;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#myExpander").click(function () {
alert("Clicked");
});
});
</script>
</head>
<body>
<div id="myExpander">
click me
</div>
</body>
</html>
Can anybody shed some light on what I'm missing?
Edit (solution): Here's the final solution as per Posicoln answer below. Please notice the -X-transform-origin styles have changed as this solution displayed differently in Chrome & FF.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style>
#myExpanderOuter
{
position:absolute;
padding: 5px;
top: 100px;
height: 80px;
width: 31px;
margin: 0 0 0 0;
padding: 0 0 0 0;
cursor: pointer;
border: 1px solid black;
}
#myExpanderInner
{
height: 30px;
width: 79px;
text-align: center;
}
.rotated270degrees
{
-webkit-transform-origin: 40 40;
-moz-transform-origin: 40 40;
-ms-transform-origin: 0 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#myExpanderOuter").click(function () {
alert("Clicked");
});
});
</script>
</head>
<body>
<div id="myExpanderOuter">
<div id="myExpanderInner" class="rotated270degrees">
Click me
</div>
</div>
</body>
</html>
One solution could be to put the rotated div inside a normal div with the rotated dimensions and rotate that.
so
<div id="myExpander">
click me
</div>
would turn to
<div id="myExpanderContainer">
<div id="myExpander">
click me
</div>
</div>
and you could add to your CSS
#myExpanderContainer
{
width: ...px; //~12px depends on browser settings, a value which could be inherited
height: ...px; //depends on length of link,
cursor: pointer;
}
with your script as
$(document).ready(function () {
$("#myExpanderContainer").click(function () {
alert("Clicked");
});
});
However this would need javascript to set dimensions for different length texts, if the links are changing, or if they are static it would be fine.
This probably isn't the most elegant solution, but it would work