How to make the div border blink, by changing the border color to black and white can be done, but I later decided to keep the background color pink, so white border would be seen, which should not be, by dynamically adding the border and removing it, it disturbs the position of its neighboring elements, Is there anything like making the border black and transparent, alternatively, to make it blink???
First off, animated web-page elements, especially those that alternate between colors are huge design no-no - it distracts the user, might trigger epilepsy (if used excessively), slows down page rendering performance (and drains device batteries unnecessarily), and other undesirable side-effects.
But anyway...
You can have an invisible border by setting the border-color to transparent before changing it to black or white or whatever. That way the border is there when the box flow is computed, it just isn't visible. This is a CSS2+ feature.
An alternative is to use image-borders and set the border image to an animated GIF. This does require CSS3 support for image borders.
Related
I have multiple divs, each of the same class. The class is semi transparent (by setting opacity: 0.2;).
The layout is pretty complex, and occasionally those divs will overlap.
The problem is that wherever they are overlapping the opacity adds up, so the overlapped area is darker. The more elements overlap, the darker it gets. See this image for an explanation:
(red and blue borders were added for clarity, they are not present in the real thing)
I'm looking for a way to prevent this, so that the color in the overlapping region does not further darken. Is there a way to do that? Some fancy "mix mode" of sorts?
Ideally, it could all be done in CSS.
Here is an example in JSfiddle: https://jsfiddle.net/begkw16d/
Would appreciate any help. Thank you very much...
I'm trying to animate a radial wipe (not a pie/circling effect) in which a bg color is sort of erased by a transparent round element scaling from 0 to 100% of viewport, revealing a bg image. Perhaps the two images will clarify.
Thanks in advance for any suggestions,
Whiskey T.
Just in case someone finds this question and wants to know how we pulled it off:
My hat's off to the designer who suggested using an svg element with the baby blue background color, and a donut hole cut out of the center. I discovered the need therefore to add a mask element to cover the hole, which, via css transitions, is crossfaded with the darker blue circle and timed carefully so that the hole is never exposed and thus the background image is not exposed. Finally the donut svg is transitioned via scale to several times the default size (100%, 100%) so that it expands outward, exposing the bg image.
I have a div containing pictures that will be updated frequently on WordPress. I would like to avoid having to edit the border of each image. This is kind of a dome-shaped border around a group of 8 photos that I created by using the clipping mask on Photoshop.
Is there a CSS trick I can use to make the border.png file overlay the div with the pictures and become transparent and block out the areas that it covers on the picture div?
Using border: none will remove the border, but also will remove the artificial "padding" from the width of that border. If you want the spacing to stay the same, you can do border-color: transparent. Note, however, that IE6 and earlier do not support border-color's transparent property.
I'm having a bit of an issue with some CSS.
In the main content section I am using a background image, within that image is a transparent element which shows the background below it. This is fine and does what I want.
The issue is that I want to also specify a background colour so that if the content is longer than the image then the background continues. However, if I add a colour to the background, I lose the transparent part of the background image.
Is there a way to use both a transparent background and a solid colour on the same div but have the colour position be lower than the transparent part?
Here is the background with the transparent element showing the background underneath:
And I'm trying to avoid this, the sidebar is longer than the main content so the background ends early:
I solved this just by making the background image stupidly long instead.
Not a great option as I would prefer to keep image assets minimal, but it will do.
When I use CSS rounded corners, they look like this, and it's great:
http://www.incompetence-central.co.uk/roundedcorners-nobg.png
But if I specify a background color for an element inside them (in this case a simple <p> tag), the background color overlays the rounded corners, like so:
http://www.incompetence-central.co.uk/roundedcorners-bgcolor.png
How can I keep my pretty rounded corners without the background color drawing over them? I tried specifying the same rounded corners for the element inside, but if I do that the background color doesn't completely fill the space:
http://www.incompetence-central.co.uk/roundedcorners-hack.png
Don't specify the background color in an inside element, but just that particular element (with the border).
A little math may help too, taking border width into account. If your border radius is 5px, and border width is 1px, then the inner element should use border-radius 4px (5px - 1px border). Experiment and see.
Why don't you set the background colour of the outside element to the same as it's border? That way you won't have the little white space on the corners like you see in your image.
You'll never get it completely perfect, but it is possible to get it as close to perfect so that users just browsing won't see a difference.