I have a div element which acts as a global contianer for my webpage, I also have a div element inside this which I use as a curtain i.e. when it is activated it covers the whole page in a dark semi transparent layer (just like a lightbox) so the page is essentially deactivated and a warning dialog or picture box, etc, etc can be displayed on top.
I can achieve this efect and functionality easily with javascript but I wanted to know whether it could be achieved purely with css animations?
<div id='globalCon'>
<div id='curtain' class='enabled'></div>
<div id='contentA'></div>
<div id='contentB'></div>
...
</div>
so when curtain is not active it should have opacity 0 and prefferably be display:none; to keep it out of the way. Then when it is activated it should have display:block and opacity animate to 0.8. Then when it is deactivated, opacity should animate back to 0 and then it should be set back to display:none;
Like I say, I can do this easily with javascript, I just want to know if and how it can be done with css only?
You can use:
animation-fill-mode: none/backwards/forwards/both;
The ‘animation-fill-mode’ property defines what values are applied by
the animation outside the time it is executing
From the Spec.
Related
I created a set of small PNG files to hug the top and bottom of my website. By repeating themselves on the X-axis they span the entire width of the site and actively shrink and expand with the browser. This worked as predicted until the upper span was pushed to the right allowing another image (logo/button) to occupy the upper-left corner. This repeating image and the banner logo are a contiguous image so I'm doing my best to make it work as designed. I added this bit to my style sheet to nudge the repeating image over to the right:
left:650px;
This caused a horizontal scroll-bar to appear allowing access to a big-open-nothing at the right side of my site (it appears to be the same distance the PNG is being pushed over to). I believe this is called overflow? To constrain the overflow I added the following to the html, body tag in the style sheet:
width: 100%;
overflow-x: hidden;
This removes the scroll-bar in all the browsers I've tested (Chrome, IE, FF & Opera) but in most cases, side scrolling can still be invoked by clicking down on the center mouse button and activating the easy-scroll feature (I don't know the actual name of this feature, but hope you understand what I mean).
FF deactivates this mouse feature but still allows scrolling with the keyboard arrows. IE is the only browser that is working correctly.
I've looked all over for an answer but have only netted some possible solutions, but I don't understand how to implement or even how to describe them. Being a novice I suspect incorrect terminology is also hindering my searches. In any case, if you take a peek at my website:
http://www.cybergolem.com/indexWIP.php
BTW, my div nesting looks like this:
<body>
<div id="container">
<a class="homebutton" href="index.php">Home Page</a>
<div id="header"></div>
</div>
<div id="footer">
<div id="footNote"> — Thar Be Dragons Here — </div>
</div>
</body>
Thanks Much.
Iam new to css and html5.
I`m using bxslider and would like to have controls (arrow nav) outside the slider div. I made it according to http://bxslider.com/examples/custom-next-prev-selectors but I do not like it.
How to replace "onward" with an arrow image (jpg)?
How can I move my arrow image to the edge of the slider? I don't want it in the center but aside the slider.
http://www.pulik.edl.pl/WWWMG/foto.html
Why you don't use the controls of the own bxslider and change its css?
Then with left/right you can work around to make the controls to be on the edge of the slider.
Else, if you really want to use the custom controls, make a container around the controls and the slider. Then you can easily do the trick, if the container was made properly.
To move the direction controls outside of the content, you'll need to override the bxslider css in your own css file:
.bx-prev {
margin-left: -70px;
}
.bx-next {
margin-right: -70px;
}
This might cause a further issue where the controls are outside ALL of your content and not even visible. In that case you should wrap the whole slider control inside another div that has left and right padding.
Please check this:
http://users.telenet.be/prullen/grid.html
This has a normal speed in safari, but the zoom effect is really slow in firefox.
Interestingly, if I add:
.item {
width:100px;
height:100px;
}
it seems to speed up a little (still not completely fluent). But that is not the size my images are at, so it looks messed up:
http://users.telenet.be/prullen/grid2.html
If I set the item width/height to the size of my images, thing slow down again:
.item {
width:160px;
height:160px;
}
http://users.telenet.be/prullen/grid3.html
Any ideas as that what is the reason of this? I'm out of ideas, I've removed/added statements but nothing seems to help. This is tested in different firefox versions up to version 10.
Thanks,
Wesley
To get your animation boosted, you can remove the box-shadow property from #container .item .thumbnail, this property is heavy and slows your animation.
But if you still want the shadow effect, you can try putting it behind as a background and not as a part of the animation.
It should take some change, but removing the box-shadow property from the animated div will make it faster. The "item zoom" div is the one responsible for the animation. By splitting the "zoom" class from the "item" class, and applying the right css properties on each, the animation shall work faster. (I've tried it with firebug)
HTML:
<div class="item">
<div class="zoom">
<div class="thumbnail">
<img src="...">
</div>
</div>
</div>
Position your elements absolutely so they are not part of the normal flow of the document. This will make it so the browser doesn't try to redraw the page every-time an animation plays.
When elements are relatively positioned, they can affect each-other when one is changed, so they all have to be redrawn to make sure that changing one element didn't affect all of them.
I created a demo and absolutely positioned the elements, you can see that the animations are much more efficient.
Here is a demo: http://jsfiddle.net/QLTbU/
Here is the jsFiddle:
http://jsfiddle.net/8dbQu/1/
In brief, I have such structure:
<div class='content'>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
</div>
.content is display as box
.columns have -moz-box-flex: 1;
without set .content's position to absolute everything works fine.
But when I do so, it seems the "box" style doesn't work any more...
How to fix it?
display: -moz-box triggers a XUL box (which is NOT the same thing as display: box (which simply doesn't exist) or display: flexbox (which does something completely different)). XUL boxes cannot be absolutely positioned; if you try to position one its display value will be forced to block, just like a box with display: inline would be forced to block if positioned.
The way to 'fix' it is to not use XUL boxes in web code, especially not if you expect them to behave like CSS flexboxes. Support for CSS flexbox (with display: flexbox) is coming to browsers in the near future.
I'm using stylish to modify a website and I have this div full of text the needs to be moved upwards. The problem is the surrounding div has overflow-y:hidden to prevent text from flowing down the page. How can I allow overflow up but not down.
P.S. I know the css properties I used in the title don't exist, although if they did the style would already be done.
I needed to same, I found out you can just use clip, it's a very handy css property that isn't very much known. It does exactly what you want, you can shape the dimension of a div to your liking. With clip you for example can do something like
<div id="myBox" style="clip: rect(10px 100px 100px 10px);">This is some text to play with so you can see it is clipped.</div>