It is possible to draw a rect with a border, which appears left, right and top.
What I want is a tabbar with a border around everything (content and buttons), but the borderline between button and content should disappear.
I think, the easiest way would be to draw a border around a rect without the bottomline.
Try using the CSS "outline" command.
Something like this :
#tabContainer {
border: 1px solid #DDD;
outline: black solid thick;
}
Related
.focusOutline:focus-visible { outline: 3px solid green; outline-offset:5px; z-index:99; }
I have added an outline and animation to the amp-accordion. During the animation/transition the outline outside of the accordion disappears.
https://codepen.io/wilson-ruan/pen/yLjwyNO
Can the outline not disappear?
I've created a pile of images on which you click through. By clicking the top image it moves the z-index back by the amount of images. These images need to have a shared description. If I put position:absolute on them (to stack them). The description also gets stacked. Is there a way to keep them it under the images?
.image-pile {
position: relative;
}
.images img {
position: absolute;
width:300px;
}
https://jsfiddle.net/td59pr1h/
The .image-pile had no height because the content was positioned absolute. Fixed it by calculating the height in javascript.
var imgheight = $( ".images img" ).innerHeight()
$('.images').css('height', imgheight)
I have an inline SVG which is being animated, however when you zoom in or out in the browser the object which is being rotated no longer rotates at its centre point.
It works fine in Chrome.
http://codepen.io/chrismorrison/pen/rmLXWw
#rays {
animation: spin 6s linear infinite;
-webkit-transform-origin: center center;
transform-origin: center center;
}
#keyframes spin {
from {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform-origin: center center;
transform-origin: center center;
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: center center;
transform-origin: center center;
}
}
I know this is late, but I found the same issue. If you use transform-box: fill-box;, the object will rotate on its axis properly in Safari.
I had a similar issue which I was able to resolve by adjusting the SVG's viewport attribute so that i could set
transform-origin: 0 0;
for the element I need to transform.
I've created a pen here showing the difference between the two: https://codepen.io/mbrrw/pen/NWxMamm
For a 20x20 circle, I changed the viewBox from 0,0,20,20 to -10, -10, 20, 20.
Hopefully this helps!
I know this is a very old question, but I've spent the last hour trying to come up with a solution and I wanted to share my solution in case it ever happens to anyone else!
Just like the OP, zooming in or out in Safari would screw up my transform-origins and they would be based on what the original size of the SVG pre-zoom. In my example, I was trying to rotate with a transform-origin of 100% 0%.
My fix (using Javascript): transform-origin: svgElem.currentScale * 100 + '% 0%';
Now, instead of having my rotate be off-axis, it's always in the right position.
Hopefully that helps someone!
Chrome's implementation of transform-origin is different from other browsers. Try using absolute coordinates.
-webkit-transform-origin: 201px 191px;
transform-origin: 201px 191px;
I'm not sure if this will fix your Safari problem, but it is good practice anyway. Especially if you want it to work in Firefox also.
I fixed it using rem unit to set transform-origin.
.logo-spinner path {
animation: my-spinning-animation 1.8s infinite ease;
transform-origin: 3rem 3rem;
}
Now, animation always remains centred while zooming-in/out on Safari.
(Except for the smallest zoom level which I think is acceptable)
Can we change the background color used for the bars which display on top and below a video, when a video doesn't fit the screen?
By default it is a dark gray, which is very distracting.
I tried this to see if it can be changed at all. But it didn't change:
.background {
background: center no-repeat url(my_background_url)
background-color: rgb(255, 255, 255);
...
}
Adding this to your custom stylesheet will do the trick:
#player video {
background-color: black;
}
However, I think Google should not set a background-color on the video element (currently #111 I think)
For my isotope container, whenever I insert a new item into the container... it initially appears in the top-left of the container (so in the position of the first item) and then it animates by moving down into place where it should go based on sorts.
Here is an example of what I would like to happen though: http://jsfiddle.net/aaairc/H4ZMV/5/. As you see in that example, the new item zooms in starting from the position that it is going to take within the container.
I haven't been able to replicate the issue I'm seeing locally on jsfiddle yet, but I thought someone might have an initial suggestion or point me to what in my jsfiddle example is actually enabling the insert to have the nice zoom in functionality. Is that just default? Something related to the CSS?
Also, not sure if this is relevant, but the container items of my isotope instance or all jpgs.
It had to do with how you specify the CSS. When I changed my CSS over to this it worked how I expected would like.
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
This feature has been built into Isotope v1.4. See Metafizzy blog: Isotope v1.4 - refined inserting animation