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
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.
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 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
I'm having some issues with a webpage of mine, mainly on mobile devices but it also affects desktop devices too, I would be willing to award a bounty (as and when stackoverflow allows me) to whomever can help with these problems
HTML: http://pastebin.com/raw.php?i=bbFsMcwT
CSS: http://pastebin.com/raw.php?i=SGMwt3cs
JSFiddle: http://jsfiddle.net/D8SJD/
Issue 1 - Left/Right Scroll Image Buttons
Currently my left and right scroll image buttons are done in html using onmouseover and onmouseout I want to be able to convert them into css based "buttons"
Issue 2 - Dynamic Resolution(s)
The header and footers aren't dynamic with different resolutions for example, I created the page designed on a 1680x1050 monitor which looks like: Desktop 1680x1050 however making the window smaller it looks like: Desktop Small Window
On a Nexus 4 mobile phone on default zoom it looks like: Mobile Original Zoom
On a Nexus 4 mobile phone zoomed out to as far as it can go it looks like: Mobile Max Distance
On a Nexus 4 zoomed out and scrolled to the bottom (so that the browsers URL bar disappears) it looks like: Zoomed out without URL bar (the footer of the actual webpage vanishes)
On a Nexus 4 zoomed out and scrolled just off from the bottom (so that the browsers URL bar is visible) it looks like: Zoomed out with URL bar (the footer returns)
.
The placeholder image and arrows are supposed to be in the center of the footer and headers and should shrink in accordance to the screen resolution.
Mobile device default zoom (if possible) needs to be decreased so they can see more and on getting smaller (if possible) if it gets close to Mobile Original Zoom then the Up to Top, Down to Key, placeholder logos should vanish...
Please see images at bottom of this post
For the mobile devices I tried things like below just for testing but none of them worked...
#media (max-width: 640px) {
#header > a img {
display: none;
}
}
EDIT 14/11/2013 # 01:58GMT
On a 1920x1080 screen it looks kind of okay although there is a big gap between the text and the placeholder image as seen below:
On a 1680x1050 screen it looks roughly how it should take note of where "Semi" is located and compare to the 1920x1080 image from above.
On a 600x600 screen it appears as follows, which as you can see there is a big gap between the placeholder and the left arrow but on the right arrow there is no gap and infact it overflows, as for the text it too is too far to the right.
Type
#media screen and (max-width:640px) {
/* Your specific styles go here */
}
and dont forget to add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Hope that helps :-)
I see a border around your links, remove from your links:
a{
border:none ;
}
for first issue you can do it with CSS, just remove <img> tag inside <a> tag like this:
<div class="footleft">
<a class="def" href="javascript: void(0);">
</a>
</div>
create image buttons like this:
then set background to <a> tag like this:
#footer .footleft a {
width: 100px;
height: 47px;
display: block;
background: url(path/to/leftarrow.png);
background-position: 0 0;
}
#footer .footright a{
width: 100px;
height: 47px;
display: block;
background: url(path/to/rightarrow.png);
background-position: 0 0;
}
#footer .footleft a:hover , #footer .footright a:hover{
background-position: 0 100%;
}
second issue, I think if you remove position:absolute; from #header .headimage and #footer .footimage it will be okay.
and if your want to centerize headmid and footmid and footmidtwo you have two choices,
First: set fixed width to them and use CSS like this:
#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
width: 292px;
margin-left: -146px;
}
#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
width: 126px;
margin-left: -63px;
}
#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
width: 302px;
margin-left: -151px;
}
Second: if you need to have dynamic width you can use this CSS and JQuery:
CSS:
#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
}
#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
}
#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
}
JQuery:
var $widthhead = $(".headmid").width();
var $widthfoot = $(".footmid").width();
var $widthfoot2 = $(".footmidtwo").width();
$(".headmid").css("margin-left",$widthhead/2*(-1));
$(".footmid").css("margin-left",$widthfoot/2*(-1));
$(".footmidtwo").css("margin-left",$widthfoot2/2*(-1));
jsFiddle is here
Okay I've tried to filter out all of the irrelevant code for this solution.
See the solution here.
Most of the time, it is best to use relative positioning to fit elements absolutely inside of another element. In your case, with three different strings to fit in a 300x80 window, it's a bit crowded. I tried to place things in a logical position to demonstrate.
By placing a container in the footimage div with relative position, you can then place every element inside the footimage div absolutely relavtive to the footimage div, rather than to the entire page.
For example, what you had:
#footer .footmid
{
position: absolute;
top: 50%;
left: 50%;
}
Will place the div of class footmid at a position 50% of the page height from the top of the page and 50% of the page width from the left of the page:
This will work if every user that visits your page has the exact same resolution, however it causes problems when the don't. Obviously, this isn't a perfect world, so different resolutions will visit your page.
What you can do is use relative positioning!
Basically I tell CSS that instead of moving 50% from the top and left of the window, move 50% from the top and left of the nearest parent element with relative positioning:
You can modify the bottom, left, and right attributes of my fiddle to move the footmid elements within the relative element .footimageContainer that is the same size and in the same position as the .footimage.
As far as your arrows, I wasn't quite sure what you were trying to accomplish; your question was pretty vague, so I simply made them fade out slightly when you mouseover them. Any mouseover/out events can be handled using CSS psuedo-elements.
.element //Native and mouseout
{}
.element:hover //onmouseover
{}
Remember that if you use pseudo-elements, you have to specify the attribute that will be changing in both the native and :hover rules.
.element
{color:red;}
.element
{color:black;}
If you have any additional questions on the arrows, let me know and I'll revise my answer.
http://jsfiddle.net/D8SJD/4/
Instead of using absolute positioning, you can just take advantage of the text-align center and images and text will center automatically.
If you want offset from center, try position:relative, and top, left, right etc and it will move relative to it's central position.
Elements that are display:inline; or display:inline-block; will align according to parents text-align property, in this case text-align:center.
#footer .footimage {
display:inline;
position:relative;
top:-10px;
}
#footer .footmid {
top: 50%;
width:100%;
position: absolute;
font-size: 15px;
}
#footer .footmidtwo {
top: 70%;
width:100%;
position: absolute;
font-size: 15px;
}
As per issue 2, i could be wrong but when targeting the image through the structure of the site
i.e.
headImg a img{...}
The style wouldn't work. But if you add classes to the images the style will work; the case could be that there are some unclosed divs or elements messing with the architecture.
<div class="headimage">
<img class="placeholder" src="http://placehold.it/300x80"/>
</div>
#media screen and (max-width: 640px) {
.placeholder {
display: none;
}
}
JsFiddle here - http://jsfiddle.net/Q5bEb/
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.