I was trying to show a gif on my page and succeeded in showing it.
But now i want to show two gifs next to each other.
I was wondering is it possible to do so.
CSS
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') 50% 50% no-repeat;
}
HTML
<div id="loader"></div>
Jquery
$(window).load(function () {
$('#loader').fadeOut(500);
});
Now can i add one more gif in background using url???
I tried following but it does not seem to work
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') , url('../Images/ajax-loader.gif') 50% 50% ;
}
Check the fiddle
HERE
Code
div#loader {
background-image: url('http://www.misd.gov.sc/misdsd/Assets/programmer.gif'), url('http://www.misd.gov.sc/misdsd/Assets/programmer.gif');
background-repeat: repeat-y;
background-position: top left, top right;
width: 385px;
height: 100px;
border: 1px solid #000000;
}
You can have an element like this:
<div id="loader">
<span id='loadtxt'></span>
</div>
then two css classes like this:
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: url('http://i837.photobucket.com/albums/zz296/sayalie30/loading.gif') 50% 50% no-repeat;
}
#loadtxt {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: url('http://lotyd.xtgem.com/images/bg-loading.gif') 50% 70% no-repeat;
}
you can adjust it as per your need.
CSS3 does support multiple backgrounds (http://www.css3.info/preview/multiple-backgrounds/)
check out the examples below
Related
I have a slider, I want the edges of the content div to have a blur effect, blurring the background image behind it. The background image is from the parent div. As you can see the content inside it is not blurred and you can see through the background, but the edges are blurred. Any ideas on how to achieve this effect?
It doesn't matter if it's CSS only or mixed with JavaScript, I'm using React anyways.
Here's an approach using clip-path (documentation) and backdrop-filter (documentation) Both are relatively new rules, so check your browser compatibility.
We use the clip path to select a 10% "frame" around the inside of your box, and then apply a 10px blur with backdrop-filter
body {
min-height: 100%;
background-image: url('https://i.picsum.photos/id/502/1000/1000.jpg?hmac=L-KRcO3K2TOyaVRnDSO13QrAo73FnHrIBApbvfakTOw')
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 30px 100px;
}
.frame {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(0% 0%, 0% 100%, 10% 100%, 10% 10%, 90% 10%, 90% 90%, 10% 90%, 10% 100%, 100% 100%, 100% 0%);
backdrop-filter: blur(10px);
}
.content {
position: absolute;
border: 1px #fff solid;
top: 10%;
left: 10%;
right: 10%;
bottom: 10%;
}
<div class="box">
<div class="frame"></div>
<div class="content"> Your text here</div>
</div>
Here's a version using CSS variables so you can quickly/easily adjust the blurred border thickness. Just change the --b CSS variable:
body {
min-height: 100%;
background-image: url('https://i.picsum.photos/id/502/1000/1000.jpg?hmac=L-KRcO3K2TOyaVRnDSO13QrAo73FnHrIBApbvfakTOw')
}
.box {
/* The border thickness (Can be a percentage or pixel value) */
--b: 6px;
/* Work out the inverse value for the right/bottom sides of the clip path */
--b2: calc(100% - var(--b));
position: relative;
width: 300px;
height: 300px;
margin: 30px 100px;
}
.frame {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(0% 0%, 0% 100%, var(--b) 100%, var(--b) var(--b), var(--b2) var(--b), var(--b2) var(--b2), var(--b) var(--b2), var(--b) 100%, 100% 100%, 100% 0%);
backdrop-filter: blur(10px);
}
.content {
position: absolute;
border: 1px #fff solid;
top: var(--b);
left: var(--b);
right: var(--b);
bottom: var(--b);
}
<div class="box">
<div class="frame"></div>
<div class="content"> Your text here</div>
</div>
You don't need to use clip-path if you set the same background image on the content box. Caveat: background-attachment needs to be fixed. And if you use flex for all the boxes, just setting position: absolute on the content would be enough to center it on top.
html, body, .bg {
height: 100%;
width: 100%;
}
.bg, .blur-box, .content-box {
display: flex;
align-items: center;
justify-content: center;
}
.bg, .content-box {
background: url(https://picsum.photos/seed/1/1920/1080/) no-repeat fixed 0 0 / cover;
}
.blur-box {
position: relative;
width: 70vh;
height: 70vh;
backdrop-filter: blur(5px);
}
.content-box {
position: absolute;
width: 50vh;
height: 50vh;
color: white;
border: 1px solid white;
}
<div class="bg">
<div class="blur-box">
</div>
<div class="content-box">
TEXT
</div>
</div>
i changed the display of hotspots but I want to fix the hotspots location on the screen rather than on the photo. I want hotspots to follow the screen when I navigate through the panoramic view can i do this ?
I want to give perspective to hotspots my goal is to get hotspots more flat on the ground
.pnlm-hotspot-base {
position: absolute;
visibility: hidden;
cursor: default;
vertical-align: middle;
left: 0px;
top: 80px;
z-index: 1;
transform: skewX(-50deg);
transform-origin: 10% 30%;
}
.custom-hotspot-front {
position: absolute;
height: 50px;
width: 55px;
transform-origin: center;
transform-style: preserve-3d;
background-image: url("forward.png");
background-repeat: no-repeat;
background-position: 5px 0px;
transform: skewX(-50deg);
transform-origin: 10% 30%;
}
.custom-hotspot-front:hover {
background-color: rgba(173, 239, 255, 0.5);
perspective: 300px;
border-radius: 50%;
width: 60px;
height: 60px;
}
I tried something like this but it didn't work,
I want to do something like this;
Is it possible to do this with css?
and the image of the hotspots that I have obtained looks like this
I need to build the following screenshot, and I can't figure out how to do the angles responsively:
https://imgur.com/a/e9IJV
I tried using pseudo classes to add diagonal edges to a solid-color div.
But this design requires two images side-by-side so that won't work there. Also, the slants have to stay on the same angle through different sections with variable heights. I can't use clip-path because I need to support IE.
Here is my feeble attempt:
https://codepen.io/lsterling03/pen/zPEgaq
As you can see, I am having trouble! Is this design possible? Do you have any advice on how to approach this? Will it require javascript?
UPDATE
I have made a little progress. Here is an updated pen:
https://codepen.io/lsterling03/pen/GOOqmo
I can't get the slant right on the last section, which needs a variable height and width. I tried using javascript, but I don't have the right calculations:
$(".slant").css('width', $('.main').width() * 0.5 - 100);
$(".slant").css('border-top-width', $('.main').height());
I also haven't figured out how to do two images in a row yet.
Does anyone have suggestions to fix either of the above issues?
Here is something you can work with:
Bootply: https://www.bootply.com/4QuGRXY11d
.container{position:relative;width: 500px; overflow:hidden;}
.flex{display:flex;overflow:hidden;}
.cinq{overflow:hidden;width:50%;height:150px;background:blue;}
.cinq + .cinq{oveflow:hidden;right:-25%;width:75%;height:150px;position:absolute; transform: skewX(-20deg) translateX(-50px);background:red;}
.flex + .flex .cinq + .cinq{transform: skewX(20deg) translate(-50px)}
.cinq .img{height:100%;background-size:cover; background-image:url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg); position: absolute;
width: 100%;
top: 0;
left: -50px;transform: skewX(20deg);}
.flex + .flex .cinq + .cinq .img{transform: skewX(-20deg);}
<div class="container">
<div class="flex">
<div class="cinq">1</div>
<div class="cinq">
<div class="img"></div>
</div>
</div>
<div class="flex">
<div class="cinq">3</div>
<div class="cinq"><div class="img"></div></div>
</div>
</div>
And, here is another example that you can start to investigate some more: CodePen
body {
background-color: #00bcd4;
}
div { box-sizing:border-box; }
.row {
overflow: hidden;
position: relative;
width: 100%;
}
.image {
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
background-size: cover;
height: 400px;
width: 50%;
float: right;
}
.image2{
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
background-size: cover;
height: 400px;
width: 64.5%;
float: left;
-webkit-clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
}
.image3{
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) top left no-repeat #eee;
background-size: cover;
height: 400px;
width: 50%;
float: left;
-webkit-clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
position: absolute;
right: 0;
}
.text {
background-color: #eee;
padding: 30px;
position: relative;
width: 50%;
float: left;
height: 400px;
}
.text > div {
position: relative;
z-index: 1;
}
.text2 {
height: 400px;
width: 50%;
float: left;
background: #fff;
padding: 30px
}
.corner:after {
transition: all .3s ease;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: absolute;
display: block;
content: "";
top: 0;
}
.corner-right:after {
border-left: 150px solid #eee;
border-top: 400px solid transparent;
border-right: 270px solid transparent;
}
.corner-left:after {
border-right: 150px solid #eee;
border-top: 400px solid transparent;
border-left: 270px solid transparent;
right: 50%;
}
I'm using jQuery to show http://ajaxload.info/ icon.
$(".modal").show();
<div class="modal"></div>
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('http://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
}
I want to add some text below the icon. I've tried having new div inside class="modal" div but it doesn't work because what I need is to add the text on the background.
How can I had text below the background image?
If it were me, I wouldn't use the background image. I would do something like this:
<style>
.modal {
position: fixed;
text-align:center;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255,255,255, .8 )
}
.modal::before {
margin: auto;
display:block ;
text-align: center;
content: url('http://i.stack.imgur.com/FhHRx.gif');
}
</style>
<div class="modal"><p>Content loading</p></div>
Here' a working fiddle: https://jsfiddle.net/hsyprw2m/2/
I want to make the image only to be a link only and not outside of the picture with support of overlay functionality. I have problem to make the picture to make as a link only in relation to overlay. Today, the layout is perfect but not the link.
#aaa {
position: fixed;
left: 0;
display: block;
width: 128px;
height: 845px;
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
#aaa:hover {
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
A more responsive solution would be to use flexbox layout:
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
display: flex;
align-items: center;
}
#aaa {
display: block;
width: 128px;
height: 128px;
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
#aaa:hover {
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
<div class="overlay">
</div>
You can also align this centrally, like in the followin example:
http://codepen.io/jaycrisp/pen/ZQMEBm
You need to change the height of the link to same height as the image - 128px. Then display inline-block so the link state is exactly as you have specified. To get the link to be in the middle of the page you want it to be 50% from the top of the page minus half the height as a margin.
#aaa {
position: fixed;
left: 0;
display: inline-block;
width: 128px;
height: 128px;
margin-top:-64px;
top:50%;
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
#aaa:hover {
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}