Parent background over child's - css

I was wondering maybe there is any way I can do this with CSS.
I have the parent div, and child one. The child is always going to have a background-color, and I want to switch additional class in data loading case. So when data is loading, parent div will have the background image and color (probably rgba with transparency).
The reason I want to do this with parent is I don't know the exact number of childen, or resulting height, so loading overlay div seems not to be a good idea...
http://jsfiddle.net/3Xpnx/15/ here is fiddle, where it can be seen that child's background is over parents
.parent{
background: url('http://www.securenet.com/sites/default/files/spinner.gif') no-repeat scroll 0% 0% / contain #FFF;
z-index:10000;
position:relative;
}
.child{
width:300px;
height:300px;
background-color: rgba(0,250,250,.7);
}

You can do this with a pseudo element which would have to be removed once the loading has finished (but that's another issue). Here I used a hover to show it on and off.
JSfiddle Demo
HTML
some content
CSS
.parent {
position: relative;
}
.parent:after {
position: absolute;
content:"";
top:0;
left:0;
bottom:0;
right:0;
background: url('http://www.securenet.com/sites/default/files/spinner.gif') no-repeat scroll 0% 0% / contain #FFF;
}
/* temp hover state for demo purposes*/
.parent:hover:after {
display:none;
}
.child {
width:300px;
height:300px;
background-color: rgba(0, 250, 250, .7);
}

Related

rotate a image within background-blend-mode

I wonder if there is a possibility to rotate an image within background-blend-mode.
I want to rotate my second image:
GLRlogo_RGB.png. I've tried it to transform, translate but it doesn't seem to work that way.
Can anyone help me with a solution?
Thanks!
Here my code
#main-image-3{
background-image: url(../img/layout-picture4.jpg), url(../img/GLRlogo_RGB.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover, calc(15rem + 10vw);
margin: 0 0 73rem 0;
transform: rotate(0,0,45deg);
}
#main-image-1, #main-image-2, #main-image-3{
background-color: rgba(9, 231, 9, 0.301);
background-blend-mode: screen, multiply;
}
The only way I know to do that is by seting your background property to a pseudo element ::before or ::after then apply the rotation to it and hide what is overlapping with overflow:hidden like so
.back-rotate {
width:500px; /*it's important to have a size for the relative size of the ::before pseudo element*/
height:200px;
position:relative; /*also important, but if you don't use it, then set the ::before to 'relative' instead of 'absolute' and .back-rotate to 'static' */
overflow:hidden;
}
.back-rotate::before {
content:'';
position:absolute;
/*positioning my background relatively to the main container*/
width:200%;
height:200%;
top:-50%;
left:-50%;
/*layer position 0 so he get behind what the div contains (text etc) */
z-index:0;
/*the rotation*/
background-size:cover;
background-position:center center;
transform:rotate(45deg);
}
/* my background image */
.back-rotate::before {
background-image:url('https://helpx.adobe.com/in/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg');
<div class='back-rotate'></div>

css toggle switch - add transition for background-color between pseudo elements

I've made a switch-toggle checkbox with pure css, Check it out.
Now I want to animate it with some transition - (have the background slide right and left, like it does here). But I'm really not sure how (that example I linked uses different html, and I don't plan to change mine).
I tried to do something like this:
#keyframes goleft {
0% { margin-right: 10px; text-indent: 10px; }
50% { margin-right: 22px; text-indent: 22px; }
100% { margin-right: 35px; text-indent: 35px; }
}
// later:
transition: goleft 1s infinite;
35px is half the width of the entire box, I thought the background would move but the text would stay, and I'd make another animation for the other direction. But it didn't work.
I'm pretty new to creating animations\transitions with css3, any suggestions?
p.s. as mentioned, I don't want to change my html there, and I don't want to use javascript
FIXED DEMO
I add a little changes in code :
- I move the text to spans, and used the before element for the background of moving with transition.
you can see the fixed demo
label{
position:relative;
}
.switchbox input + label:before {
transition:0.3s;
content:""; display:block;
width:50%;
height:20px;
position:absolute;
left:0;
top:0;
background: #a5a5a5; /* W3C */
}
.switchbox input:checked + label:before {
left:50%;
}

Sidebar height 100% on div not extending to bottom of page

I've seen several similar questions/answers to this problem on SO but none of the answers that I've checked have helped me.
I'm attempting to have a "Side-Bar" extend from 10px less than the top of the page, all the way to the bottom.
However (when using height:100%), the "Side-Bar" only reaches to the bottom of the loaded browser window, if there is content past the browser window that you scroll down to, the "Side-Bar" ends prematurely.
Basically, its height is only 100% of the browser window, I desire it to be 100% of the full page content.
I've created a JSFiddle that shows my problem:
http://jsfiddle.net/qaEzz/1/
My CSS:
#sidebar {
position:absolute;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
i put the <div id="sidebar"></div>
into the <div id="content">
and added in the css
#topbar {
width:100%; <--this
height:20px;
background-color: red;
}
and this
#sidebar {
position:absolute;
right:16px; <--! extended to 16 px
width:200px;
height:100%;
overflow:hidden;
margin-top:-10px; <--!
background-color: yellow;
}
#content {
position: absolute;<--! and remove the marging: 10px just add a <br> in the html
width:100%
}
Here is the working Fiddle
If you change position:absolute; to position:fixed;, then it would stick to its position on the right.
For a sidebar that might have a longer length than the browser length itself, instead of the position attribute, use the float attribute.
http://jsfiddle.net/wK2Yh/
#sidebar {
float:right;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}

text-align:center Not working properly on absolute positioned spans

I need to place 2 <span> inside a <div>, the first span must be placed on top, the second one on bottom, like North-South.
<div>
<span class="north">N</span>
<span class="south">S</span>
</div>
To do this, I thought about using position:absolute; on the 2 <span>.
div
{
display:inline-block;
width: 20px;
position:relative;
height:100px;
}
.north
{
position:absolute;
top:0;
}
.south
{
position:absolute;
bottom:0;
}
Now, the spans should be positioned to the left (default), to center them, I used:
div
{
text-align:center;
}
But I got this:
Check it out : http://jsfiddle.net/Zn4vB/
Why is this Happening?
Note: I cannot use margins, left, right, because the contents of those spans are different, I just need to align them properly in the center.
http://jsfiddle.net/Zn4vB/1/
The issue is that once absolutely positioned, it no longer follows the document flow. So the text is centered, but only inside the pink span. And since it's absolutely positioned, even if it were a div, the width would collapse.
The solution is to give the positioned spans a 100% width and then centering works.
span
{
background-color:pink;
left: 0;
width: 100%;
}
If you don't want the pink to extend the full width, then you must nest an element (e.g. span) inside the positioned spans and give that element the background color, as seen here: http://jsfiddle.net/Zn4vB/6/
please check if this one is the idea you want..
div
{
display:inline-block;
width: 20px;
position:relative;
height:100px;
border-style:solid;
}
span
{
background-color:pink;
width:100%;
text-align:center;
}
.north
{
position:absolute;
top:0;
}
.south
{
position:absolute;
bottom:0;
}
You've got the positioning right. But <span> tags are inline elements, so you need to make them display as block-level elements with display: block; and then explicitly declare their width with width: 100%;.
They will inherit the text-align property from your style rules on the <div> so the text will be in the center.
I've updated your code here: http://jsfiddle.net/robknight/Zn4vB/5/
you can use transform to solve this problem
div
{
display:inline-block;
width: 20px;
position:relative;
height:100px;
border-style:solid;
text-align:center;
}
span
{
background-color:pink;
}
.north
{
position:absolute;
top:0;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.south
{
position:absolute;
bottom:0;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}

CSS making an element entirely move out of visible screen?

suppose i have a div, i want it to be out of visible area of computer monitor screen, so that when i use CSS transitions to move it to a specific position, an effect of element moving in slowly from outside of screen is created, and i also would like to create its reverse effect.
position: absolute; then do something like left: -100px;
working example(hover over the box and wait): http://jsfiddle.net/fDnPj/
http://jsfiddle.net/DZFtt/
<div id="example"></div>
<div id="example2"></div>
<div id="example3"></div>
​
#example{
width:50px;
height:50px;
background-color: #386a95;
position:relative; /*Not moved*/
}
#example2{
width:50px;
height:50px;
background-color: rgb(177, 35, 35);
position:relative;
left:-25px; /*Pushed halfway off the screen*/
}
#example3{
width:50px;
height:50px;
background-color: green;
position:relative;
left:-50px; /*This is now totally hidden from view*/
}​
IF you know the width of the div you can use the combination of position and left property like this
#my-div {
position:absolute;
left:-100px;
top:0;
width:100px;
background-color:red;
}
<div id="my-div">Hello</div>​
Play here by adjusting the left property.
​

Resources