I'm quite new to CSS and web programming. What I'm trying to do is add a hovering effect for a button. I'm doing this by using 2 images.
There is a button called download and in hover code I add:
.button:hover{
background-image:url(images/button2.png);
}
The problem is the button takes time to load ie: on hover there is a delay to show the button. How can i solve this?
EDIT: I tried using preloading,but there is also a kind of delay
div#preloadedImages
{
width: 0px;
height: 0px;
background-image: url(images/button2.png);
}
You should use an image sprite to get rid of the delay. A sprite is one larger file that contains multiple images. Your button will have it's background set to sprite.png file. You can then change the background-position property to shift the positioning of your sprite.
On the other note - why do you use images for buttons? Most buttons can be done in pure CSS with some fallbacks for older browsers.
Create a single image out of the two images (which is called a sprite)
Here is a working example with an animation as well to show you how it works.
Click here >>> FIDDLE
Then set your background position to to show the normal state of the background image
.button {
width: 150px;
height: 50px;
background-image: url('image-sprite.jpg');
background-position: left top;
}
Then on your hover css, just move the background image to show the lower part of it
.button:hover {
background-position: left bottom;
}
Keep your current css and other stuff as they are and add an <img> component at anywhere of your page and make it hidden to load the image initially.
<img src="images/button2.png" style="display:none;"/>
Related
I'm using the new gatsby image plugin, and StaticImage. I have got a few images on the website, all works perfect normally beside one that only has the black background
(source of black, change the bg color attribute to red for example change the view to red)
The<picture> tag has 0X0 pixels
Another weird thing is the auto-created div container has a max-width of 47px, though the image is bigger than that (in all rest cases the max-width actually corresponds to the image dimensions)
relevant code
// js
<div className="advertising">
<StaticImage
className="advertising-img"
src="../images/advertising.png"
alt="advertising"
/>
//scss
.advertising {
position: relative;
margin: 123px 162px 150px 536px;
.advertising-img {
width: 260px;
height: 230px;
position: absolute;
left: -460px;
top: -15px;
}
page lookout (for understanding the CSS a little bit and show another picture that working..)
any help will be appreciated, thanks in advance! :)
edit
live site - https://catsh-landing-page.netlify.app/
The request to advertising image is blocked by the browser, as you can see by opening the dev tools.
In addition, the fact that is working on my mobile phone (screenshot below):
Makes me think that the image is blocked by the browser itself or by some extensions (AdBlock, etc) because of the name to avoid advertisers or publicity by default.
Try changing the name of the image or try disabling the extensions.
I'm trying to use the kendo.alert function instead of the normal javascript alert - but whenever I pass in a lot of text (e.g. lots of paragraphs with linefeeds) the alert box grows past the height of the current window, meaning you can only see the bottom part of the text plus the OK button. Is there a way to enable scrollbars on kendo.alert so you can see all lines?
You could use some CSS to force scrollbars:
.k-alert {
max-width: 50%;
}
.k-alert .k-content{
max-height: 100px;
overflow: auto;
}
DEMO
You could also use JavaScript to calculate available screen height and then set the content max-height accordingly.
Alternatively, use the full kendo dialog and set the maxHeight property:
https://docs.telerik.com/kendo-ui/api/javascript/ui/dialog/configuration/maxheight
I am not very experienced with image sprites so here is the question..
I made an image sprite on the web; this is the code:
.sprite-slidebutton {
background-position: 0 0;
width: 70px;
height: 63px;
}
.sprite-slidecross {
background-position: 0 -113px;
width: 70px;
height: 63px;
}
The image I got, I downloaded to my page and I called the .png wherever wanted it. It does appear! And the sprite is working, the image is switching like i want it to..
But the PNG is not showing a transparent background :S also the image is not in the middle, I only see half of the both images.. where and how to adjust?
To see it live:
solved
If i had to guess i would say there is a problem with the alpha values in the image. Download gimp and see what they are.
the png probably has a white background, instead of a transparent background. that's something you will need to edit in photoshop, gimp or similar.
as far as only seeing half the image it might be due to the element you are assigning the class to. if its an inline element like <a> or <span>. try adding "display:block;" inside the sprite-slidebutton class.
I need use a modal plugin and colorbox looks great.
How do I load it w/o the rounded borders?
Given my page size, the thick border taking too much space.
Anyway to hide it or make it thinner and hide the border if needed on some calls?
You can hide the borders in easy way:
$("#cboxTopLeft").hide();
$("#cboxTopRight").hide();
$("#cboxBottomLeft").hide();
$("#cboxBottomRight").hide();
$("#cboxMiddleLeft").hide();
$("#cboxMiddleRight").hide();
$("#cboxTopCenter").hide();
$("#cboxBottomCenter").hide();
and add class with border style if you want with this way :
.thin_border {
border: 10px solid blue;
border-radius: 10px;
margin: 10px;
box-shadow: 0 0 25px blue;
}
and then add it with jquery
$("#cboxContent").addClass("thin_border");
I think colorbox isn't actually using the property "border" to get that huge black border going around. It seems like its being incased in a 3 x 3 div which uses images to create that border. Im sure you could remove it but its going to require messing with the actual colorbox javascript. You could try messing with the CSS as well.
You consider looking into a diffrent plugin like lightbox2 or shadowbox? I personally use slimbox (nice little clone of lightbox). If you want to mess with the code go for it. Otherwise I would just pick a diffrent plugin.
Lets say I have a div element, with a background in position: 0%; how would I change the position to e.g position: 100%; but with keyframes on hover
I can't seem to use keyframes properly, it never works and I have all the latest browsers.
Thanks.
If you just want to animate background position on hover it's a lot easier to use a transition instead of keyframe animations. See this fiddle for an example: http://jsfiddle.net/hfXSs/
If you want to put in the extra effort of making it an animation you'll have to set the animation-play-state on the div to 'paused' and change it to 'running' on hover. See the spec on pausing animations here: http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-
EDIT: I was bored so here's the same thing using keyframe animations: http://jsfiddle.net/wGRg5/
Obviously, the fiddle has the problem that when you aren't hovering over the div the animation pauses which is probably not the desired effect.
Some Code, looks like webkit only at this point in time.
.box {
display:block;
height:300px;
width:300px;
background:url('http://lorempixum.com/300/300') no-repeat;
background-position:-300px;
-webkit-transition:background-position 1s ease;
}
.box:hover{
background-position:0px;
}
Via: http://jsfiddle.net/hfXSs/
More here: http://css-tricks.com/parallax-background-css3/