How to convert shadow shadows from left to right
How can I make it so that the box-shadow transforms from left to right without adding a transform effect to the text itself.
This text will resize based on the content, so you'll need to adjust the shadow accordingly.
Currently my code looks like this.
body {
background-color: #FFFFFF;
margin: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
a, a:visited, a:hover {
/*display: block; this makes the whole line justified*/
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
/*box-shadow: inset 0 -1.3vw 0 0 #00f9ff; OLD SCRIPT*/
}
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
animation: stretchRight;
-webkit-animation: stretchRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
}
@keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="test1"><a href="http://i.imgur.com/dqkgUe8.jpg">hello darkness my old</a></div>
</div>
</div>
</body>
</html>
source to share
If you want to use animation
as well the same box-shadow
. Create a pseudo element with the same width,height,box-shadow
as the div #test1
. Also first scale it to 0
and then animate it.
Using animation
instead transition
will allow you to fire the animation on page load, not on a type event hover
focus
etc. What exactly do I think you want
see snippet below
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
position: relative;
}
#test1:before {
content: "";
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transform: scaleX(0);
transform-origin: left;
animation-name: stretchRight;
animation-delay: 0.5s;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
z-index:-1;
}
a {
text-decoration: none;
}
@keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<div class="container">
<div id="test1">
<a href="http://i.imgur.com/dqkgUe8.jpg">hello darkness my old</a>
</div>
</div>
source to share
What you want to do is use a pseudo-element that you can animate. I have added animation to the hover state for better testing
body {
background-color: #FFFFFF;
margin: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
a, a:visited, a:hover {
position: relative;
/*display: block; this makes the whole line justified*/
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
}
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
}
#test1 a:after {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
content: "";
background: #00f9ff;
transition: width .2s ease-in-out;
}
#test1 a:hover:after {
width: 100%;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="test1"><a href="http://i.imgur.com/dqkgUe8.jpg">hello darkness my old</a></div>
</div>
</div>
</body>
</html>
source to share