Specific CSS rules for overlapping shapes/divs - javascript

I'm trying to recreate a screenshot app to better understand HTML, CSS and Electron and so far I've made a keybind that toggles the overlay of a 0.25 opacity transparent box that fills the screen. And a transparent red outlined box that can be dragged to select an area for the screenshot
As the red box is transparent and is on top of the 0.25 opacity box that fills the screen, the red box has the same opacity as the rest of the screen. I want the area inside the red box to "clear the opacity" so that it is viewed as 0.0 opacity, basically a "bright area" in the red box that looks the same as the screen would without the opacity. Like this
I tried setting the rgba to (0,0,0,0) but that didn't change anything as I expected and I cannot find any documentation for CSS about overlapping elements.
Do you have any idea on how I can implement this?

The first thing that comes to mind for me is a huge box shadow on a transparent element. I don't know how performant this is, but it works.
.screenshot {
position: fixed;
top: 50px;
left: 50px;
width: 300px;
height: 100px;
border: 1px solid red;
/* large box shadow */
box-shadow: 0 0 0 max(100vw, 100vh) #0005;
}
<div class='screenshot'></div>

Related

Strange CSS transition behavior on adding class

Class Event 1 is what I am trying to achieve by just placing class directly and not adding hover properties, though it's working for Hover Elements.
Please check this pen and you can find the problem by following the below instructions:
Type anything in the "Name"
Click Tab
You should reach the 1st State(Orange border on left and bottom and some transition effect), in which it pulls itself from the right corner, I don't understand why it's doing that. It working completely perfect in the Hover Example which is referenced above as well.
Understanding of my CSS
.draw {
transition: color 0.25s;
It gives an imaginary border of 2px transparent, which we will highlight later
&::before,
&::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
This is where you start the transition of ::before from top-left corner
/* This covers the top & right borders (expands right, then down) */
&::before {
top: 0;
left:0;
}
This will change the color of the text.
&.dj {
color: rgb(255,123,0);
}
Here I want to expand it till 66% width.
/* Class styles */
&.dj::before,
&.dj::after {
width: 66%;
height: 100%;
}
Is it mandatory to add/recommended ::after?
&.dj::before {
border-bottom-color: rgb(255,123,0);
border-left-color: rgb(255,123,0); // Make borders visible
transition:
height 0s ease-out, // Width expands first
width 0.25s ease-out; // And then height
}
}
I can see a couple of differences between your hover demo and your tab implementation.
The first is that in the hover demo a left border is applied to .draw:before and a bottom border to .draw:after. In your tab implementation both borders are applied to .draw:after, and since .draw:after is aligned to the bottom of the button this messes up the vertical animation, which you actually want to start from the top and animate in a downward direction. This is fixed by giving .draw:after top:0 instead of bottom:0.
The second problem is that you are applying the .draw and .dj classes simultaneously. As a consequence the border width and height is applied immediately. What you need to do is toggle between the width height start and end values. I suggest applying the .draw class directly to the button in your markup, and instead of toggling both classes, only toggle the .dj class when the user tabs.
Here is a forked pen with these changes applied: https://codepen.io/jnicol/pen/EbNavz
There are various other enhancements that could be made, but those changes should fix the immediate problem you have described.

Leaflet.js : Add custom text to layers control using CSS?

I am building an interactive map using Leaflet.js. The out-of-the-box layers panel that comes with Leaflet is difficult to hack. My users have large resolution monitors and they easily miss this little collapsed layers icon. So, what I want to do is add the text "View Overlays" to the right of the icon. Apparently, the icon is also larger than what is shown in the map. It looks like CSS is shrinking it down a little, but I am not sure how to revert the icon size back to its default larger size.
Here's my attempt to get started, but it's not very good (plnkr here)
.leaflet-control-layers-toggle {
width: 200px;
}
.leaflet-control-layers-toggle:after {
content: 'View Overlays';
padding-left: 2em;
}
Questions:
1.) How do I increase size of that sandwich icon?
2.) How do I correctly add the text "View Overlays" and keep the element from going into an epileptic seizure?
1.) How do I increase size of that sandwich icon?
The sandwich icon is a background image. This background image is made out of multiple images, see the full image here. It is resized and placed to fit with Leaflet's CSS definition here:
.leaflet-container.dark .map-tooltip .close, .leaflet-control-attribution::after, .leaflet-control-layers-toggle, .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-popup-close-button, .map-tooltip .close, .mapbox-icon {
opacity: 0.75;
background-image: url("images/icons-000000#2x.png");
background-repeat: no-repeat;
background-size: 26px 260px;
}
You have to change several CSS definitions to get it working right, it would probably be easier to cut the image with an image editor and make it the right size...
Changing background size and position:
.leaflet-control-layers-toggle {
background-size: 56px 560px;
}
.leaflet-control-layers-toggle {
background-position: 0px -235px;
}
You might also want to resize the a height and line-height and left margin, since it doesn't care about the background size and would either cut off the background or the text run into the icon.
.leaflet-container a {
width: auto;
height: 3em;
}
.leaflet-container a:after {
margin-left: 30px;
line-height: 3em;
}
2.) How do I correctly add the text "View Overlays" and keep the element from going into an epileptic seizure?
Problem is that your active and inactive box have different size, make them the same width and it should work:
.leaflet-control-layers {
width: 200px;
}
See code here: http://plnkr.co/edit/2Vkci7MtfGcm9tvCUblx?p=preview

Masking a web page

Example:
The area with the red border is where you can fully see through the mask. Everything else is grayscaled and partially hidden with opacity or transparent white background.
One thing I tried is to make a class for each selectable area with a grayscale filter and lower opacity. Then I apply this class on all areas but the selected one. But this doesn't work well this nested zones because some of the areas become less opaque than others.
Any advice on how could I implement this?
Codepen
Works as expected only on #footer, because it doesn't have parent or children areas that are selectable
You could apply an highlighted class to the chosen element like so
.highlighted {
border: 1px red solid;
outline: 999em solid rgba(255,255,255, .75);
}
A wide outline will cover all other elements.
Example : http://codepen.io/anon/pen/emOXRJ
Add an z-index higher then the overlay to the element you want too focus on.
I don't think there will be a straightforward way to do this. One idea would be to have four block elements around the edges of the element in question that have a semi-transparent fill colour, however you will have to measure and position these in JavaScript, and you'll have to take scrolling into account also. Before attempting this, I would look for a library that already offers this.
You can use a full sized div with a transparent grey background and a z-index higher than the rest of your site:
#cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(200, 200, 200, 0.8);
z-index: 1;
}
and then on the zone you want to be fully visible you set an even higher z-index:
#other_content{
z-index: 2;
position: absolute;
top: 50px;
left: 100px;
border: red medium solid;
}
like in this fiddle

Chrome hiding background image with autofills

Hi guys Im working on basic signup and signin forms.In my input fields I consist of background image and white color.In chrome autofill was replacing my background image and color with pale yellow color.For this I have searched and found out few lines of code....
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
This was making my backgroundcolor to display...but Unable to show the backgroundimage in input field.Can I get few bits of code to show the background image when autofill in chrome.
input#email {
background: url("~mail.png") no-repeat scroll 16px 11px #FFFFFF;
background-size: 20px 20px;
z-index: 999;
}
IMHO, you can do this in 2 ways
1: put a z-index field on your css to your background image so that it overlaps whatever is overlapping it at the moment
z-index: 999 //for example
2: Or make your image have top-margin to make way for the input field's autofill space:
margin-top: 25px;
Try the change with jQuery:
if ($.browser.webkit) {
//$('input[name="password"]').attr('autocomplete', 'off');
$('input[name="password"]').attr('background-image', 'src');
}

Set opacity on background-image with media query

I have a couple of divs, each with a background image. I'm using responsive and adaptive CSS, and when my divs' widths gets less than a certain size(760px btw), the text and some tables with styling becomes hard to read/see with the background image moving in behind them(the background image is on the far right of the text/tables and unobtrusive if the width is above 760px...). So when the width of the viewport gets to 760px and less, I only want the background image to have an opacity...
How do I do that?
So my CSS starts like this:
#media screen and (max-width: 760px){
background: #cdcdcd url("/images/back.jpg") no-repeat top right;
/*How do I set the opacity of only the background?*/
}
You can not change the opacity of a background image, unless you move it to a separate container.
All you can change is the opacity of BG color using rgba():
background: rgba(0, 0, 0, .5);
You can't set opacity just for a background, but the whole element. You can set opacity of background color (see Zoltan's answer for the example).
You can set white <div> over the image and change it's opacity.
<div class="yourImage">
<div class="imageCover"></div>
</div>
.yourImage {
background: url(http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png);
width: 300px;
height: 83px;
}
.imageCover {
background: #fff;
width: 300px;
height: 83px;
opacity: .5;
}
Live demo: Tinkerbin
However, this won't work if you don't have a clean background BEHIND your image.

Categories

Resources