#logo {
position: fixed;
top: 85%;
left: 40%;
height: 104px;
width: 90px;
border: solid 3px black;
border-left: 0px;
opacity: 1;
transform: scale(.9) translate(-50%, -50%);
padding: 2px;
transition: all 1s ease;
box-sizing: border-box;
}
#logo::before {
z-index: 100;
content: "Brand";
line-height: 91px;
font-size: .9rem;
text-align: center;
color: white;
position: fixed;
height: 91px;
width: 91px;
left: -8px;
top: 4px;
background: black;
}
/*for demo only*/body {height:400px;}
<div id="logo"></div>
div#logo is not fixed on scroll... why ??
I've written this code on mobile and haven't tried it on desktop yet. So I'm not sure if it's a mobile only issue. I've probably done something silly here
I also checked it and it's working fine.
Could you post the whole css and html so We can better look at it? Cheers
When I run this code it all seems to be working fine.
You could try adding !important to the position of the logo to see if it works (position: fixed !important;). This might work if the CSS is being overridden by another line of code.
If that does not work you need to give us a bit more information about the browser you are using and update the question with the rest of the code. Thanks!
Related
Here is my demo: https://stackblitz.com/edit/js-6whwk2?file=style.css
here is the code
HTML
<div class="my-overlay" padding [hidden]="overlayHidden">
<ion-card class="card">
<ion-card-content>
Explore the App! See how everwell can help you achive your health goals.
</ion-card-content>
</ion-card>
<div class="circle" (click)="hideOverlay()"></div>
</div>
CSS
.card {
background-color: white;
}
.circle {
box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4);
justify-content: center;
flex-direction: column;
align-items: center;
border-radius: 100%;
display: flex;
height: 64px;
width: 64px;
float: right;
position: relative;
top: 100%;
transform: translateY(-100%);
}
.my-overlay {
position: fixed;
width: 100%;
height: 100%;
z-index: 20;
top: 0;
left: 0;
}
ion-card {
height: 9% !important;
--color: #434d65;
border-radius: 12px;
bottom: 64px;
position: absolute;
}
ion-card-content {
padding-top: 11px;
font-size: 14px !important;
font-style: normal !important;
font-weight: normal !important;
line-height: 20px !important;
}
What I want to achieve is to be able to place my ion-card above the overlay, to be visible and not beneath it how it's now. I tried to remove this from the class .cirle (see below), but this leads me to another problem which is the position of the circle which I can, of course, make it with margin to be placed on the right bottom of the page, but that's not responsive and doesn't look like a good approach.
position: relative;
top: 100%;
transform: translateY(-100%);
I am new to coding and I am doing this as I learning project and I am struggling for a few days. If anyone has any suggestion I would really appreciate it. Thanks a lot.
Try using z-index: 1 :)
The z-index basically helps you determine the level of the item.
More here:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
or for an easier read, since you're new to coding: https://www.w3schools.com/cssref/pr_pos_z-index.asp
css stylings:
.products {
display: inline-block;
position: relative;
align-items: ;
margin-top: -4px;
}
.product-cell {
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
}
.product-img {
position: relative;
}
.product-overlay {
background: rgba(0, 0, 0, 0.73);
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 1;
}
p.product-name {
position: absolute;
top: 40%;
color: #fff;
z-index: 2;
left: 38%;
font-family: 'Kaushan Script', cursive;
transform: translate(-30%,40%);
font-size: 30px;
}
.product-list {
padding: 5px 0px 0px 10px;
}
HTML code:
I am using bootstrap.but for mobile i am not getting expected output as shown in the images below.for mobile i made .product-cell width as 100%. if it possible us js fiddle to explain.thanks for your valuable information.
i need like this :
.
but I am getting like this:
<div class="products">
<div class="product-cell">
<div class="product-img">
<img src="images/products-electronic.png" class="img-responsive" >
<div class="product-overlay"></div>
<p class="product-name">ELECTRONICS ENGINEERING</p>
</div>
</div>
You need to make your website responsive, to do that we use something called media queries which is basically just extra markup in your css syntax.
A great framework to use since you're just starting out with responsive design would be using Bootstrap, it's easily customised to fit the needs of your project.
This should also help give you a better understanding about how fluid grid systems are incorporated into your site.
Hope this helps!
Putting a div to the center of the viewport with position:absolute and top:50%; left:50%; transform: translate(-50%, -50%).
and using before and after elements with rotate(60deg) and rotate(-60deg).
setting the divs box-sizing: border-box; border:1px solid blue; height:40px; and 20*2*3^(1/2) seems to be 69.28xxxxxxx, so I set the width as that.
but the result seems there are some unperfect pixels at the border crossing point. I don't know how to fix it.
browser: chrome
editor:bracket
http://jsfiddle.net/gonejack/hYN67/
The borders might be distorting the shapes in your fiddle.
Check out this fiddle: http://jsfiddle.net/zqS3Q/ and replace with this code to see a solid hexagon with no borders:
#container {
position: relative;
border: 1px solid red;
margin-top: 10%;
min-height: 200px;
}
#horizontal {
position: absolute;
box-sizing: border-box;
top: 50%;
left: 50%;
height: 39px;
width: 66px;
background-color: blue;
}
#horizontal:before {
content: "";
position: absolute;
box-sizing: border-box;
height: 39px;
width: 66px;
background-color: blue;
-webkit-transform: rotate(240deg);
}
#horizontal:after {
content: "";
position: absolute;
box-sizing: border-box;
height: 39px;
width: 66px;
background-color: blue;
-webkit-transform: rotate(120deg);
}
Also, rotated boxes aren't necessarily going to be the exact specified pixel dimensions:
It seems like a chrome console bug, the console turn on then the shape would became weird, when the console high enough to give the viewport a scrollbar.
It seems to work if rather than 60deg in horizontal:after you put in -120deg. It looks like a rounding error.
http://jsfiddle.net/m3Xx8/
I have been trying to create a 3D looking card-flip type of animation for a project I've been working on. Unfortunately my animation doesn't look entirely 3D.
I've been using this guide. In the first example the person managed to make it look like the windows background was flipping. However when I tried to use the same code on JSFiddle the result was not the same as his.
His demo code made the effect below. When the card is being flipped it causes one side to get smaller giving the impression of perspective:
On my JSFiddle using his code (except a different background), the sides appear to stay the same size the entire time:
Can someone explain to me what I have missed, or how to get the same perspective effect he had on his website? Thanks in advance.
His HTML code:
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="/images/Windows%20Logo.jpg"/>
</div>
<div class="back face center">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
His CSS code:
#f1_container {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}
See where he says he's stripped the vendor prefixes out of his CSS to keep things clean? I'm betting that's your problem. Some of those CSS properties aren't fully standard, but are implemented in different browsers with different vendor prefixes. I'm not actually sure which ones, but Google can help with that.
Edit: Hmm. Well, the CSS is the culprit anyway, but I don't actually see a lot of vendor prefixes. I pulled his actual CSS off of the page, and pasted it in place of the "clean" CSS you used, which makes the fiddle work. His real CSS is:
#f1_container {
height: 281px;
margin: 10px auto;
position: relative;
width: 450px;
z-index: 1;
}
#f1_container {
perspective: 1000px;
}
#f1_card {
height: 100%;
transform-style: preserve-3d;
transition: all 1s linear 0s;
width: 100%;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
box-shadow: -5px 5px 5px #AAAAAA;
transform: rotateY(180deg);
}
.face {
backface-visibility: hidden;
height: 100%;
position: absolute;
width: 100%;
}
.face.back {
-moz-box-sizing: border-box;
background-color: #AAAAAA;
color: #FFFFFF;
display: block;
padding: 10px;
text-align: center;
transform: rotateY(180deg);
}
They had some CSS incorrect...in the example, he had class .back.face, which should have been .face.back (not why it wasn't working, as pointed out. Just cleaned it up). Other issues were the culprit as other posters pointed out. I've created a new jsFiddle. I'd go the jQuery flip plug-in over this though, as IE will have a hard time rendering such effect.
http://jsfiddle.net/JJrHD/1/
I would like to create something like on attached image using only CSS. Until now I have come-up with:
.block5-header:after {
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
background: url({template_relativeimagepath}{template_imagesfolder}blocks/elipsa.png) no-repeat;
background-size: contain;
}
But this solution requires to use a lot of different png images, as i have many different sizes of header blocks. I have tried to use pseudo elements with radial gradients, but to no avail. If there is some simpler solution please let me know ;)
Pic of what i would like to achieve. http://i.imgur.com/pwN54o1.png
Alright, I used css position, circles, and rgba.
Pure CSS Solution (Fixed width)
It is also responsive to width changes
HTML
<header class="subNav">
<span class="headCirc"></span>
Something
</header>
CSS
.subNav {
width: 285px;
height: 60px;
overflow: hidden;
background: #4679bd;
display: block;
position: relative;
left: 30px;
top: 30px;
line-height: 60px;
font-size: 20px;
color: #fff;
padding-left: 15px;
border-radius: 10px 10px 0 0;
}
.headCirc {
position: absolute;
top: -30px;
left: -5%;
display: block;
width: 110%;
height: 70px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
}
What I did was positioned the circle absolutely inside of the header, I then gave the header an overflow: hidden to hide anything of the circle that came out of the box.
You wont be able to get the curved line but if you don't mind that you can try out http://www.colorzilla.com/gradient-editor/