Hello ive managed to create a star with css but it is hiding the field that i wat to show on front of the star. I was wondering if anyone coud point me i the right direction to what i should do to fix it. thanks
<div class="views-field views-field-field-freebetamount">
<div class="field-content">
<div id="star12">£200</div>
</div>
</div>
css
.views-field-field-freebetamount {
color:white;
}
#star12 {
background: blue;
width: 40px;
height: 40px;
position: relative;
}
#star12:before, #star12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: blue;
}
#star12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#star12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
the freebetamount field should hopefully appear on top of the star. my limited css skills has lead me to try z-indexs but to no avail.
Anyone?
thanks
you have to define the negative z-index value in :before and :after pseudo element.
#star12 {
background: blue;
width: 40px;
height: 40px;
position: relative;
font-size:1.3em;
}
#star12:before, #star12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: blue;
z-index:-1;
}
Check the Demo.
With css u need to set z-index: 100 or something like that to place something on top of the others
You're going to want to take a look at z-index. Whichever element you want to appear on top of another needs to have a higher CSS z-index number.
in css file;
#yourID {
z-index: 99;
}
Related
I have a page transition I'm trying to work into my site. I have 2 50% height, 100% width elements, one placed before and after the body (with pseudo-selectors). I would like the 2 elements to slide to the middle of the screen, covering the background content. The transition is triggered when the "is-changing" class is added to the body, via Javascript.
document.getElementById("btn").addEventListener("click", fakeReq);
function fakeReq() {
let body = document.body;
body.classList.add("is-changing");
console.log("class added");
setTimeout(function() {
body.classList.remove("is-changing");
console.log("class removed");
}, 5000);
}
body {
height: 100vh;
width: 100%;
background-color: grey;
}
main {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
body::after, body::before {
height: 50vh;
width: 100%;
position: fixed;
left: 0;
background-color: blue;
z-index: 10;
}
body::before {
top: 0;
transform: translateY(-100%);
}
body::after {
bottom: 0;
transform: translateY(100%);
}
body.is-changing::after, body.is-changing::before {
transform: translateY(0);
}
.loading-bar {
position: fixed;
height: 2px;
width: 90%;
}
.loading-bar::before {
position: absolute;
background-color: aqua;
left: 0;
top: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: left center;
}
.is-changing .loading-bar::before {
transform: scaleX(1);
}
<body>
<main>
<div class="index main-content">
<h1>Home Page</h1>
<button id="btn">html request</button>
</div>
</main>
</body>
It looks to me like you're running into two issues.
The first issue is that you forgot to include the content attribute in your pseudo elements (often this will be empty, like content: ""). Without this attribute, your pseudo elements will not exist in the DOM. Running your code snippet and inspecting it confirms this, since the pseudo elements are nowhere to be found.
Second, you're creating multiple pseudo elements. body::before is it's own pseudo element, and body.is-changing::before is a separate pseudo element. If you are hoping to create a constant set of elements that act as "doors" for a loading display, you may want to consider creating two real elements that sit in position: fixed above and below the viewport, and then slide in or out when a class is added. Perhaps these could be div.upper-door and div.lower-door.
Also, it looks to me like you're in need of a transition for your transform, or else the pseudo elements will just "snap" back and forth. You can take control of the position of your elements at different points during this transition by using a css animation. Your JavaScript would largely remain the same, except for targeting the .upper-door and .lower-door divs using document.querySelector(), or simply using IDs rather than classes and targeting with getElementById(), if that makes more sense for you. Your css might look like this:
div.upper-door {
top: 0;
transform: translateY(-100%);
}
div.upper-door.is-changing {
animation-duration: 5s;
animation-name: upper-door-closeopen;
}
div.lower-door {
bottom: 0;
transform: translateY(100%);
}
div.lower-door.is-changing {
animation-duration: 5s;
animation-name: lower-door-closeopen;
}
#keyframes upper-door-closeopen {
0% {
transform: translateY(-100%);
}
25% {
transform: translateY(0);
}
75% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
#keyframes lower-door-closeopen {
0% {
transform: translateY(100%);
}
25% {
transform: translateY(0);
}
75% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
The css animation will be triggered when .is-changing is added to the element. As you experiment, you may find different permutations of this solution (such as using event listeners if a button click is triggering the loading screen) to be ideal.
There is a great resource on MDN for css animations if you would like more information.
You missed to add the content property on the pseudo-elements which is mandatory to make them available on the page. You also missed to add the transition property on the pseudo-elements to achieve your animation of sliding up/down.
Here's a snippet containing a working demo, I only used the code that is related to your issue:
document.getElementById("btn").addEventListener("click", fakeReq);
function fakeReq() {
let body = document.body;
body.classList.add("is-changing");
console.log("class added");
setTimeout(function() {
body.classList.remove("is-changing");
console.log("class removed");
}, 5000);
}
body {
height: 100vh;
width: 100%;
background-color: grey;
position: relative; /* not really related to your issue but, to make sure that the body's pseudo-elements are positioned relative to the body */
}
main {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
body::after, body::before {
content: ""; /* make the pseudo-elements available */
height: 50vh;
width: 100%;
position: fixed;
left: 0;
background-color: blue;
z-index: 10;
transition: all .8s ease-out; /* allow the animation, change this rule per your requirements */
}
body::before {
top: 0;
transform: translateY(-100%);
}
body::after {
bottom: 0;
transform: translateY(100%);
}
body.is-changing::after, body.is-changing::before {
transform: translateY(0);
}
<body>
<main>
<div class="index main-content">
<h1>Home Page</h1>
<button id="btn">html request</button>
</div>
</main>
</body>
Learn more about after pseudo-element.
Learn more about before pseudo-element.
You can use the following
document.getElementById("btn").addEventListener("click", fakeReq);
function fakeReq() {
let body = document.body;
body.classList.add("is-changing");
console.log("class added");
setTimeout(function() {
body.classList.remove("is-changing");
console.log("class removed");
}, 5000);
}
body {
height: 100vh;
width: 100%;
background-color: grey;
}
main {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
body::after, body::before {
content:'';
height: 50vh;
width: 100%;
position: fixed;
left: 0;
background-color: blue;
z-index: 10;
}
body::before {
content:'';
top: 0;
transform: translateY(-100%);
transition: .5s all;
}
body::after {
content:'';
bottom: 0;
transform: translateY(100%);
}
body.is-changing::after, body.is-changing::before {
content:'';
transform: translateY(0);
}
.loading-bar {
position: fixed;
height: 2px;
width: 90%;
}
.loading-bar::before {
content:'';
position: absolute;
background-color: aqua;
left: 0;
top: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: left center;
}
.is-changing,.loading-bar::before {
transform: scaleX(1);
}
<body>
<main>
<div class="index main-content">
<h1>Home Page</h1>
<button id="btn">html request</button>
</div>
</main>
</body>
I distributed some images on the z-axis, then used the mouse as a (fake) 3D camera so that perspective changes while you move the mouse cursor and it works perfectly in Chrome but the button shows up behind all the images in Safari browser so you can't see it. I tried using z-index but it did not work.
<div class="cd-background-wrapper">
<figure class="cd-floating-background">
<img src="img/cd-img-1.jpg" alt="image-1">
<img src="img/cd-img-2.png" alt="image-2">
<img src="img/cd-img-3.png" alt="image-3">
</figure>
<a class="follow fade-in three" id="fade-btn" href="#"><img
class="follow-btn" src="/static/assets/images/Follow.gif"/></a>
</div>
Here is my css:
.cd-floating-background {
position: absolute;
right: 0;
}
.cd-background-wrapper {
width: 100%;
height: 100vh;
overflow: hidden;
background-size: cover;
position: relative;
}
.cd-floating-background {
transform-style: preserve-3d;
}
.cd-floating-background img:first-child {
transform: translateZ(50px);
}
.cd-floating-background img:nth-child(2) {
transform: translateZ(290px);
}
.cd-floating-background img:nth-child(3) {
transform: translateZ(400px);
}
.follow::before,
.follow::after {
position: absolute;
content: "";
transition: all 0.5s;
}
.follow {
position: absolute;
top: 93%;
left: 51%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Use z-index to change z-axis position. Set it to any number greater than 1 (1 is default value) and set position property.
.follow {
z-index: 2;
position: relative;
}
z index property will help you.
This is probably a silly question; I'm new to CSS, and any help would be much appreciated.
I found a nice CSS loader here https://codepen.io/tstoik/pen/Ywgxqb
It works quite nicely, except it seems that I can only render a single loader per page (or rather, that if I have multiple loaders, they render on top of each other). How can I restructure the CSS so I can have multiple loaders on a page?
For example:
<div class="loader"></div>
<div>
...some content
</div>
<div class="loader"></div>
The above example renders the two loaders on top of each other (I believe), making it seem that there is really only a single one.
.loader:before, .loader:after {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
border-style: solid;
border-top-color: #ECD078;
border-right-color: #C02942;
border-bottom-color: #542437;
border-left-color: #53777A;
content: '';
transform: translate(-50%, -50%);
animation: rotate 1.5s infinite ease-in-out;
}
.loader:before {
border-width: 5vh;
}
.loader:after {
width: 15vh;
height: 15vh;
border-width: 1vh;
animation-direction: reverse;
}
#keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
Thanks!
Answer from #chriskirknielsen
Adding .loader { position: relative; } works perfectly.
I'm trying to draw a cuboid with css (like this http://upload.wikimedia.org/wikipedia/commons/d/dc/Cuboid.png but ONLY 3 visible faces needed)
Lots of stuff checked, but nothing found exactly :S
Can anyone help?
SOLVED. The code is:
<style>
#cubetop {
width: 200px;
height: 40px;
background: green;
-webkit-transform:
translateX(20px)
skew(-45deg, 0deg);
}
#cubeface {
width: 200px;
height: 60px;
background: yellow;
display:block;
float:left;
}
#cuberight {
width: 40px;
height: 60px;
background: navy;
display:block;
float:left;
-webkit-transform:
translateY(-20px)
skew(0deg, -45deg);
}
</style>
<div id="cubetop"></div>
<div id="cubeface"></div>
<div id="cuberight"></div>
If you're ok with css3, you can use transforms. Have 3 separate div elements and apply the transformations on each.
Something like this in Mozilla
-moz-transform: rotate(15deg)
translateX(230px)
scale(1.5);
And Like this in IE
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand')";
Alternatively try :
http://www.useragentman.com/tests/cssSandpaper/cube3.html
I am performing a CSS transform: rotate on a parent, yet would like to be able to negate this effect on some of the children - is it possible without using the reverse rotation?
Reverse rotation does work, but it affects the position of the element, and it may have a negative performance impact (?). In any case, it doesn't look like a clean solution.
I tried the "transform: none" suggestion from this question prevent children from inheriting transformation css3, yet it simply doesn't work - please see the fiddle here: http://jsfiddle.net/NPC42/XSHmJ/
May be you have to write like this:
.child {
position: absolute;
top: 30px;
left: 50px;
background-color: green;
width: 70px;
height: 50px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}
Check this for more http://jsfiddle.net/XSHmJ/1/
Updated:
You can use:after & :before psuedo class for this.
check this http://jsfiddle.net/XSHmJ/4/
I believe that you are going to need to fake it using a second child, the specification does not seem to allow for the behavior you would like, and I can understand why the position of a child element has to be affected by a transform to its parent.
This isn't the most elegant of solutions, but I think you're trying to do something that the specification is never going to allow. Take a look at the following fiddle for my solution:
.parent {
position: relative;
width: 200px;
height: 150px;
margin: 70px;
}
.child1 {
background-color: yellow;
width: 200px;
height: 150px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.child2 {
position: absolute;
top: 30px;
left: 50px;
background-color: green;
width: 70px;
height: 50px;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
If you want to apply transforming effects on a parent without affecting its children, you can simply animate a parent's pseudo-element like this:
.parent {
display: inline-block;
position: relative;
}
.parent::before {
content: "";
background: #fab;
/* positioning / sizing */
position: absolute;
left: 0;
top: 0;
/*
be aware that the parent class have to be "position: relative"
in order to get the width/height's 100% working for the parent's width/height.
*/
width: 100%;
height: 100%;
/* z-index is important to get the pseudo element to the background (behind the content of parent)! */
z-index: -1;
transition: 0.5s ease;
/* transform before hovering */
transform: rotate(30deg) scale(1.5);
}
.parent:hover::before {
/* transform after hovering */
transform: rotate(90deg) scale(1);
}
This actually worked for me. JSFiddle