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
Related
I have a background image that has background-size:cover; applied to it and then a series of divs overlaid which I would like to become individual clipping masks.
I've looked at the feature clip: rect(20px, 20px, 20px, 20px,); however as the divs are brought in through a CMS system, it will be inappropriate to define set sizes.
Is there a way of setting the div with a clipping mask property so that it clips the image anywhere the div is placed on the page?
I don't particularly want to use an image overlay either as this site will be responsive.
The clip-path CSS property can be applied to all HTML elements, SVG graphic elements and SVG container elements:
http://www.html5rocks.com/en/tutorials/masking/adobe/
If I understood correctly, you're simply looking for an overlay that will resize with the screen size, and the div with the background image?
In that case, if possible, why not simply append these divs INSIDE the div that needs clipping, like this. For this sample purpose I only used one div with a transparent background and a border applied to it. If you need to clip the image in a non-rectangular shape, you will need more divs (ex. for parallelogram, diamond, triangle shape, you'll need at least 2).
Also, sadly CSS doesn't allow for % borders, but I think this example is
You can also do it the other way around and place your img div inside the clipper divs; just a matter of what fits best...
body, html {
/* necessary for sizing children in % */
width: 100%;
height: 100%;
}
#tobeClipped {
width: 80%;
height: 40%;
position: relative;
background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
background-size: cover;
}
#tobeClipped>div {
position: absolute;
}
#clippers {
width: 100%;
height: 100%;
border: 20px solid grey;
border-left-width: 100px;
box-sizing: border-box;
}
<div id="tobeClipped">
<div id="clippers"></div>
</div>
Please do clarify if this was not at all what you were looking for.
This page centers and shrinks my logo to fit in the browser window. It uses a single PNG file and CSS flexbox with max-width/max-height. (View code)
This page animates the same logo. However, in order to limit the ripple effect to just the blue portion, some changes were needed (view code):
Logo split into two parts and stacked on top of each other (position:absolute).
Hard-coded the size of the logo. (No longer sized based on size of browser window)
I can't figure out two things:
How do I change the hard-coded sizes back to dynamic sizes based on the browser size? I also hard-coded the top and left, but if the two images are centered and scaled by the same ratio, they should line up properly without offsets.
How do I vertically/horizontally center the logo, again? I think my previous flexbox CSS doesn't work because the elements have position:absolute. Update: I was able to get centering to work again, but this involved more hard-coded width/heights.
I think I can do this via JavaScript, but is a pure CSS/HTML solution possible? (I have a feeling centering and dynamically sizing elements with position:absolute might not be possible). If JavaScript is disabled, the solution should gracefully degrade (the two parts of the logo are correctly aligned; the logo fits inside browser window).
Example: https://jsfiddle.net/2rdjfwhb/1/
It is possible to do both with CSS, you just need another wrapper element around the "logo" class. This wrapper element can be positioned naturally inside of a flexbox. After that it's just about calculating the ratio you need for your logo image and the ripple canvas.
.parent {
max-height: 100%;
max-width: 100%;
}
.logo {
width: 100%;
height: 100%;
position: relative; /* Parent handles centering this guy now */
}
.logo-ligature {
width: 100%;
height: 100%;
position: relative; /* Positioned for z-index */
pointer-events: none;
}
.logo-background {
background-image: url(https://cdn.glitch.com/b2cea96d-c2a3-486e-90d5-f60a651a36e3%2Fle_square_light_noborder.png?1553791477453);
background-size: contain;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
width: 75%;
height: 75%;
position: absolute;
top: 12.5%;
left: 12.5%;
}
I've noticed that google's image source files for their pages may contain lots of images in one source, but then only one will be displayed in a specific position.
for example, this: "https://www.google.co.uk/images/nav_logo242.png"
is one image source file for google's results page but then they will somehow choose a specific part of this source to display in a part of their webpage.
I would like to replicate this somehow but don't know how this is accomplished?
I only know how to use an image source when you use one image at a time and display all of it.
Thanks in advance to anyone who can help me!
These are known as CSS sprites.
These are called sprites, you can check out this link to find out how to use them: http://www.w3schools.com/css/css_image_sprites.asp
These are CSS-Sprites.
Basic detail on CSS-Sprite, Here 1 image will consists many images.
On using sprites unnecessary bandwidth use will be reduced.
To access individual images background-position CSS property plays main role.
That type of image is called a sprite. You would put the image as a background of an element and then use css to position that background to show only what you want to see.
Here's an example of how to use it. In the first example I am using a div. In the second example I am using a pseudo element to place it in a larger element so there will be no bleed of other parts of the image.
.google, .camera::before {
background: transparent url(https://www.google.co.uk/images/nav_logo242.png) left top no-repeat;
}
.google {
width: 120px;
height: 40px;
background-position: -22px 2px;
border: 1px solid red;
}
.camera {
position: relative;
padding-left: 30px;
font-size: 1.5rem;
}
.camera::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 20px;
height: 20px;
background-position: -40px -131px;
}
.camera:hover::before {
background-position: -60px -131px;
}
<div class="google"></div>
<p class="camera">
Hover over me.
</p>
I have a situation where I have fill the body with a background image which is nothing but a pattern - so I would use
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
but now I also need one more image to set on top of this which will appear the horizontal and vertical center of screen, (this image ofcourse smaller and would only occupy the center).
Its like putting 2 images in BG smaller one over the another. How could I do that?
And I have to do that in javascript/jQuery.
How about using pseudo elements.
CSS desk demo
body
{
background:url(http://placehold.it/200x100) repeat;
}
body:after
{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/400/200) center center no-repeat;
}
Using css3 you can achieve something like this (two images), since your question is tagged with HTML5, so I think you can use this probably
body {
background: url('paper.gif'), url('another.gif');
background-repeat: repeat-y, no-repeat;
}
This is an example but not sure how you want to place both images.
Either apply a z-index:{NUMBER}; that is greater than the body's z-index (default 1) if you don't mind the top of your background image being cut off (or you can just edit the image to have an empty bar at the top to account for your header).
Or, apply your background not to body, but to whatever your main content div underneath your header is.
So I'm using CSS :hover to replace a submit button background. When I mouse over the button the old background image disappears (so it looks like nothing is there) for a moment and then reappears with the new background. I thought that perhaps the button image file size was too large but its only 1.4kb. Is there a way to prevent this, caching or pre-loading, or something along those lines?
Is this only on the initial page display / hover?
This will be because the image file is only loaded on request - i.e. the hover action.
To avoid this, both button states should be stored in a single file. You then just need to adjust the background-position property to display the correct half of the image for it's current state.
Here's a rough example (note that button.png contains both image states and is 40 pixels high):
button {
background-image: url(button.png);
width: 60px;
height: 20px;
background-position: 0 0;
}
button:hover {
background-position: 0 -20px;
}
You could, maybe, use a technique that's similar in intent, albeit not execution, to Bryn's answer, above.
.button {background-image: url(img/for/hover-state.png)
background-position: top left;
background-repeat: repeat-x;
background-color: #fff;
height: 1.5em;
width: 5em;
}
.button span
{background-image: url(img/for/non-hover-state.png);
background-position: top left;
background-repeat: repeat-x;
background-color: #000;
height: 1.5em;
width: 5em;
}
.button:hover span
{background-color: transparent;
background-image: none;
}
The similarity I mentioned is to have both images present on the document in order to avoid the hover-flicker. On hover of the button the background-image of the span will disappear, and reveal the hover state, rather than having to load it on-demand.
The bonus is that, although I specified the height/width above this technique will work for dynamic re-sizing, not relying on fixed-width sizes of images (or it's as fluid as your design can allow it to be).
It's because it takes time for the "hover" image to download before it displays. To prevent this, you can use a sprite image technique.
Example: Using Sprite Images with INPUT for a Hover Effect