I am trying to to highlight a word in HTML5 using a SVG masking technique.
This is the CSS code I am using to achieve the animation on the SVG path:
#keyframes dash {
from {
stroke-dashoffset: 530;
}
to {
stroke-dashoffset: 0;
}
}
.shape path {
stroke-dasharray: 530;
stroke-dashoffset: 0;
fill: white;
opacity: 0;
}
.shape.active path {
opacity: 1;
animation: dash .5s ease-in forwards;
}
Overall, it works well. However, it shows a white fill background while the animation is played:
How can I make this transparent so it can work on any background colour?
Here is a link to the code where you can see the animation in action: https://codepen.io/willhalling/pen/QWpXpQa
EDITED: I've updated codepen link to include #enxaneta solution
Related
I have the following problem: when toggling custom full-screen mode from the Web application, the surrounding background is black and I want to change it (as the actual background).
Details come below.
1) Javascript code to toggle fullscreen and focus an inner element
function toggleFullScreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
$(function () {
$("#fullscreenButton").click(function () {
var actualBody = document.getElementById("#FullScreenElementId");
if (actualBody) {
toggleFullScreen(actualBody);
}
});
$(document).on("webkitfullscreenchange mozfullscreenchange fullscreenChange MSFullscreenChange", function (/*data*/) {
var actualBodyJq = $("##FullScreenElementId");
if (actualBodyJq) {
actualBodyJq.toggleClass("fullscreen-style");
}
$("body").toggleClass("fullscreen-body-style");
});
});
2) Css styles
.fullscreen-style {
overflow-y: scroll;
background-color: rgb(255, 255, 255) !important;
}
.fullscreen-body-style {
background-color: rgb(255, 255, 255) !important;
}
Switching to full-screen mode for the div works, but applying the style for the body seems to be ignored. For the shown image, I can see this computed style for background:
Question: is it possible to control how the browser (Chrome, Internet Explorer 11+) displays the "missing area"?
I have found a way to trick the browser (Internet Explorer) not to display the black area anymore. I have changed div style to use the whole viewport with the following style:
.fullscreen-style {
overflow-y: scroll;
background-color: rgb(255, 255, 255) !important;
/* this is remove black area in IE */
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
}
I am trying to have one image come into view behind another one. Is it possible to use z-index/opacity to accomplish this? Below is the code I'm referring to. I'm using the background-position property to move things in-out of view.
#-webkit-keyframes bannerAnimation {
0% {
background-position-x:
-240px,
-160px,
-240px,
0;
}
50% {
background-position-x:
-240px,
-45px,
-140px,
0;
}
100% {
background-position-x:
117px,
-65px,
117px,
0;
}
0%, 48% {
background-position-y:
-4000px,
0px,
480px,
0px;
}
50%, 100% {
background-position-y:
14px,
0px,
43px,
0px;
}
0% {
opacity:
0,
1,
0,
1;
}
50% {
opacity:
0,
1,
0,
1;
}
100% {
opacity:
1,
1,
1,
1;
}
}
#banner a#main .content {
background-image:
url('../images/95x27_headline_2x.png'),
url('../images/155x50_stephen_2x.png'),
url('../images/41x4_copy_2x.png'),
url('../images/320x50_bg_2x.png');
background-size:
95px 27px,
155px 50px,
41px 4px,
320px 50px;
background-position-y:
50px,
0px,
50px,
0px;
-webkit-animation: bannerAnimation 6s ease forwards;
to achieve what you are trying to do I would suggest using seperate divs for seperate images.
Then instead of animating background-position, try animating the z-index itself.
#keyframes move {
from { z-index: 0; transform: scale(1); }
to { z-index: 4; transform: scale(2.5); }
}
Check out this example on codepen.io to get you started in the right direction :)
I tried to animate the width of a SVG like this and it did not work
Normally I can have multiple lines, but can I make them thicker/thinner?
.swidth {
animation: hideshow 5s ease infinite;
}
#keyframes hideshow {
from { stroke-width="2"; }
to { stroke-width="6;"; }
}
It's CSS syntax inside #keyframes so something like:
#keyframes hideshow {
from { stroke-width: 2; }
to { stroke-width: 6; }
}
I want to create text area with black borders.
TextArea dataPane = new TextArea();
dataPane.setStyle("-fx-border-color: black; -fx-border-width: 1; -fx-border-radius: 16;");
But I get this result:
Can you tell me how I can remove this blue shadow?
The blue border is not a shadow but a default focus color in caspian style of JavaFX for controls. You can see its definition in caspian.css as -fx-focus-color with default value #0093ff.
Now we can override this color palette per control. So you do
dataPane.setStyle("-fx-border-color: black; -fx-border-width: 1; "
+ "-fx-border-radius: 16; -fx-focus-color: transparent");
If you want to completely remove all the borders, shadows, highlights:
.text-area {
-fx-background-insets: 0;
-fx-background-color: transparent, white, transparent, white;
}
.text-area .content {
-fx-background-color: transparent, white, transparent, white;
}
.text-area:focused .content {
-fx-background-color: transparent, white, transparent, white;
}
.text-area:focused {
-fx-highlight-fill: #7ecfff;
}
.text-area .content {
-fx-padding: 10px;
-fx-text-fill: gray;
-fx-highlight-fill: #7ecfff;
}
I have two probably easy CSS questions here:
http://web288.merkur.ibone.ch/klingler/
How can I get the © Klingler Fahrzeugtechnik AG 2013 in the footer vertically aligned to the bottom? I tried align-bottom and vertical align of the p tag but without luck...
The second thing is, I feal the distance between the lines of the main text is a bit narrow. I wanted to have a bigger line height. I tried changing the line-height property of the p tag to 2.5em instead of 1.5em but this did not change anything? Why is this?
p {
font-size:1em;
line-height:1.5em;
margin: 1.5em 0 0 0;
}
Do this:
footer {
position: relative;
}
.ym-g25 {
position: absolute;
bottom: 0;
}
Do this:
.ym-g25 {
width: 25%;
vertical-align: bottom;
display: table-cell;
line-height: 1;
float: none;
}