I'm new to HTML5 and I'd like some help adapting this particular code: http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect to be used as a background for a webpage. I've got the snow falling but when I use it as a background, nothing else displays.
You can use z-index with a value of -1 on it:
#myCanvas {
position: fixed; /* or absolute */
z-index: -1; /* put it behind all other elements */
}
Made a JSFiddle to have something to work with. As others stated, position: fixed; and z-index: -1; for the canvas works fine.
This worked for me...
CSS
#myCanvas
{
display: block;
position: absolute;
z-index: -1; //optional.. Depends if you have used z-index for any other element
}
Hope it helps someone...!!
This works for me as well. For future reference to manipulate the z-index you are required to also set the position to absolute or it will not work.
#canvas {
background: #202020;
position: absolute;
z-index: -1;
}
Related
How do you make the position: absolute; position: relative; stay together but have an auto height
I am trying to make profile cards in the style of Discord (latest design). When trying to show both the banner and a banner color it isn't aligned correctly. If anyone could help me, please?
Screenshot 1
Screenshot 2
To debug I tried to use CSS data selectors (\[data-??='true'\])
.preview-card.pfp[data-prem='True'] img {
top: 85px;
}
.preview-card .pfp[data-prem='False'] img {
top: 50px;
}
Yesm this will work but not for everything.
I think you have a space missing. Try this maybe:
.preview-card .pfp[data-prem='True'] img {
top: 85px;
}
.preview-card .pfp[data-prem='False'] img {
top: 50px;
}
I am using PrimeNG OverlayPanel to be displayed in dropdown click but I have a problem to move default left arrow to right position. I tried everything that was in my mind but I am out of ideas.
Can you please give me some new idea for resolving this issue?
code example: https://stackblitz.com/edit/primeng-overlaypanel-demo
dropdown arrow image
Your goal is override deeply incapsulated CSS. One of the possible sollution is to add an id to overlay-panel and then ovverride the desired element(in our case this is before and after pseudo-elements of a div with the p-overlay class
html:
<p-overlayPanel #op [showCloseIcon]="true" id='hello'[style]="{width: '450px'}">
css:
:host ::ng-deep #hello .p-overlaypanel::before,
:host ::ng-deep #hello .p-overlaypanel::after
{
left: 80%;
}
left: 80% is for example.
stackblitz
Add this to style.css:
.p-overlaypanel:after, .p-overlaypanel:before{
left: unset !important;
right: 1.25rem !important;
}
Now the arrow is on the right side opposite of initial.
Additional info: avoid using :host ::ng-deep as it is deprecated.. use the style.css file instead!
.mybutton .p-overlaypanel:after, .mybutton .p-overlaypanel:before {
bottom: 100%;
content: " ";
height: 0;
right: 1.25rem; //<---
pointer-events: none;
position: absolute;
width: 0;
}
is the place but the question is;
how you wish to handle button positioning on page. If button near left,right,bottom border then you should handle arrow position. by this variable.
Convert your entire Angular project to Scss. The reason is that View styles do not go deep. Scss in root does go deep and is worth it long term to stop using just CSS in Angular projects. I wrote an article on this.
For p-overlaypanel
:before and :after are the attributes you should catch for this to work
body .p-overlaypanel:before {
left: calc(100% - 17px);
}
body .p-overlaypanel:after {
left: calc(100% - 17px);
}
You can override it in global stylesheet ie style.scss
by wrapping the elements with a custom class. This will provide more specificity.
.your-class {
.p-overlaypanel:before {
left: calc(100% - 17px);
}
.p-overlaypanel:after {
left: calc(100% - 17px);
}
}
I'm working on making a Squarespace page with custom CSS to be mobile responsive. In a mobile screen, my page has a drop down menu with the different links for the page. My problem is that in certain pages (such as Music or Watch) when you click on the menu button, the drop down menu hides behind the content of the page. I know this has to do with using position: absolute, but i have not found a way to have the placement of the menu button and drop down list as I want it by using position: relative. This is my CSS for the menu:
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
}
#mobileNav .wrapper {
border-bottom-style: none;
border-bottom-color: none;
}
You can view the page at richiequake.com using the password Help123. Is there another way I can have the placement of the menu button and the drop down list and have the list "push" the content of the page down so the link list is visible?
Basically, are you are missing is the z-index property. Which will place the container #mobileNav in a higher layer.
By making this change (adding z-index property to your CSS selector):
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
z-index: 1;
}
I can now see the menu links in all pages. You can read more about the z-index spec here.
UPDATE - To also push the content down while using absolute positioning:
As you are already using a custom class to toggle the menu links, you can use that to also toggle the content section.
Add a selector rule as following to your stylesheet:
.menu-open~section#page {
transform: translateY(355px);
}
What this will do is, when the menu-open class is in the document, the sibling section with id of page, will be pushed down 355px.
You can also add a some kind of animation if you want a smoother effect on pushing the content down, like so:
#page {
margin-top: 100px;
margin-bottom: 100px;
opacity: 1;
position: relative;
transition: transform .3s linear;
}
I just added the transition, where the .3s is the time that the transition will take.
One problem with using absolute positioning, even if you use transforms to compensate for it, is that on some devices and browser widths, the logo will overlap the navigation. Observe what the current solution renders:
Another problem is the delay between when the navigation collapses and when the text is no longer visible:
Because this is Squarespace and you don't have access to edit the underlying DOM, I would use flexbox to solve this. To do that, first get rid of this:
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
z-index: 1;
}
And add this:
#media only screen and (max-width: 640px) {
#canvas {
display: flex;
flex-direction: column;
}
#mobileMenuLink {
order: 1;
}
#mobileNav {
order: 2;
}
#header {
order: 3;
}
#header ~ * {
order: 4;
}
}
Note that the above is not vendor-prefixed, so if you want to support older browsers, you'd correspondingly want to add vendor prefixing.
i am using a template from AMP Start.
i have used the amp-carousel.
the arrow images for next image and previous image buttons are on top of the screen and are not visible.
how can i fix this?
image one
image two
Do following things :
.amp-carousel-button .amp-carousel-button-prev {
position: absolute;
top: 50%;
left: 0;
}
.amp-carousel-button .amp-carousel-button-next {
position: absolute;
top: 50%;
right: 0;
}
or else replace default indicators to custom indicators using following link :
https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md
To dont let hide arrows try to add type=slides in amp-carousel
I can't seem to get the background image to show in Safari. It works in IE and Chrome. I tried a couple of alternates with the -webkit prefix but no dice.
<style type="text/css">
h1, h2, h3, h4, p {position: relative; z-index: 10;}
.jumbotron {
position: relative;
z-index: 3;
}
.jumbotron:after {
background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,.5)), url('img/carousel_island.png');
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
</style>
Here is the HTML:
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1><strong>Welcome to Pepi's Island</strong></h1>
<h3><strong>A place for kids to emotionally and socially learn and grow.</strong></h3>
<br>
<p><a class="btn btn-success btn-lg">Learn more ยป</a></p>
</div>
</div>
Safari has some known bugs when using the short-hand background style; some features that are supported as individual CSS styles do not work when used together in a single background style.
I'm not sure whether the styles you're using here would be affected, but it's worth a try (I know for a fact that it bites background-sizing and others).
So I suggest splitting your background style out into separate styles:
background-color: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,.5));
background-image: url('img/carousel_island.png');
Hope that helps.
Try
.jumbotron:after {
content: url(img/carousel_island.png);
background-color:linear-gradient(rgba(255,255,255,1), rgba(255,255,255,.5));
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
For my simple test it DOES show up, but your background is from white to 0.5 alpha-white. Try adding "background-color: red" to the CSS and you'll see your problem.
EDIT:
Some seconds after posting it I realized how stupid it was before actually testing it on safari, my bad.
I can confirm that it does not work in safari 5.xx on win7. But this worked for me, could you test if it does for you also?
.jumbotron:after {
background-image:url('img/carousel_island.png');
}
If not, there are some more ideas that come to my mind (just long-shot-guesses):
1. mobile safaris have a limitation of 3MP or 5MP for PNG images
2. case of letters
3. try `./img/carousel_island.png`
4. A protocol restriction? Do you run it on a server or by `file://` or a `http(s)://` protocol?