I found an intriguing SCSS example of dynamic moving background colors, Floating Stained Glass Effect. Think multi-colored lava lamp. Here's the original codepen.
What I'm trying to achieve is a simple "clip" of that background content and display a div with the dynamic color content... My current codepen and the display.
What I'm looking for is the dynamic content only in the inscribed "box" with everything else on the screen pure white.
<div class="splash box">
<div class="splash_head" />
<div class="splash_body" />
</div>
All my attempts at overflow: hidden; have failed miserably. Not sure how to beat the position: fixed; code within
.splash_head::before,
.splash_head::after,
.splash_body::before,
.splash_body::after {
position: fixed;
top: 50%;
left: 50%;
width: 3em;
height: 3em;
content: "V";
mix-blend-mode: screen;
animation: 44s -27s move infinite ease-in-out alternate;
}
Turns out if I wrap the content with an additional surround container, I'm able to get what I asked for.
<div class="surround">
<div class="splash box">
<div class="splash_head" />
<div class="splash_body" />
</div>
</div>
SCSS:
.surround {
background-color: white;
padding: 10%;
height: 100vh;
}
And it looks pretty.
Unfortunately, this example as written was a minimum problem statement. And in a static HTML web page, these div containers would work great. Unfortunately my actual use case is a complex SvelteKit application, with nested slots where the color bleed thru is terrible. It's not clear if this is a z-index issue or something else. But yeah, it's ugly, sigh.
The other issue here is with the pretty lava lamp stuff is a significant Lighthouse website ranking performance degradation. (71 goes down to 63) At this point, not sure it's worth spending time on. I may just create a static site, grab some screen shots of the pretty pictures and use them static. I'm really just looking for a subtle but interesting splash of color.
Related
I am working on this task where I need to put the divs in the required positions. The final result should be this:
.
I have the following code:
HTML:
<div class="activity">
<h2>Activity 5</h2>
<section class="hint"><input type="checkbox" > <h3>Hint 5</h3><i></i><div><p>Grid is <strong>not</strong> the right way to do this. In fact there is only one way to really do that...and that is with float. Remember that we float the thing we want the text to wrap around. Also remember to start by making all the shapes the right size and shape.</p><h4>Properties used:</h4><ul><li>float: left;</li></ul></div></section>
Wrap the text around the square like in this image. This is one case where Grid is NOT the right way to solve this one and will in fact make it harder if you try to use it!
<div class="content5" >
<div class="red5" ></div>
<div class="green5" ></div>
<div class="yellow5">Step 01: Continue creating the main page for your chosen web site by modifying the CSS file you created in week 9's Adding Classes and IDs to Your Website assignment. This week, you will position all of the content on your main page using the CSS positioning techniques taught in KhanAcademy. When you are done, your webpage layout should reflect what you outlined in the wireframe you designed in the assignment Your Own Site Diagram and Wireframe in week 3. <br />
If you have changed your mind on how you want the content of your main page laid out, take an opportunity to update your wireframe before completing this assignment (it is much easier to experiment with different layouts in a wireframe than it is to do so by modifying the CSS). Also, if you find that you are having trouble with using CSS positioning, feel free to review the concepts at the learn layout site: http://learnlayout.com/. You should be able to apply these principles to your site. For futher help, refer back to the Max Design site used in the beginning of the course for an example of how to implement your site design.</div>
<div class="blue5"></div>
</div>
</div>
CSS:
.content5 {
/* This is the parent of the activity 5 boxes. */
position: relative;
}
.red5 {
width: 100%;
height: 100px;
background-color: red;
}
.green5 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
}
.yellow5 {
width: 100%;
height: auto;
background-color: gold;
}
.blue5 {
width: 100%;
height: 100px;
background-color: blue;
}
The code I have so far looks like this: I have tried a couple of things to make the text appear next to the div but they haven't worked. The HTML should not be modified. And I need to use CSS for this task, not bootstrap or something else. Thanks!
Add this to .green5 would work.
I've tried it and it actually works well.
.green5 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
I am looking for an advice. I have to draw a wind turbine generator. I'm guessing its possible with html, css or canvas but maybe it would take ages.
I have in mind to do it with just images, have the main image for the generator and then have other images over the main one. I think it's the easiest solution to achieve it.
It has to have responsive as well.
The small pieces change the color depending on the data. So I am thinking to replace the images depending on it.
Any recommendation?.
Thanks in advance.
You could skin this cat in several ways, but if you're sure that these are all the components you need (and you won't need to keep expanding it), I agree that canvas is overkill.
Probably all you need is some markup like this:
<div id="turbine">
<div id="injector"></div>
<div id="motor"></div>
<div id="block"></div>
<div id="battery"></div>
</div>
And some CSS that looks something like this:
#turbine {
background: url("turbine-main.png");
position: relative;
}
#injector {
background: url("injector-green.png");
position: absolute;
left: 160px;
top: 130px;
width: 40px;
height: 30px;
}
#injector.failing {
background: url("injector-red.png");
}
#motor {
background: url("motor-green.png");
position: absolute;
left: 220px;
top: 140px;
}
#motor.failing {
background: url("motor-red.png");
}
Rinse and repeat for each part (adjusting image names, coordinates, and size as necessary, so that your pieces fit nicely over the main image). Add and remove the failing class from your individual pieces to toggle the red/green for each part, probably using javascript. (Or just do it in the HTML, if this is a statically rendered page.)
If you should be able to click these engine parts and jump to additional information, replace my <div>'s with <a>'s.
First post so I am unsure of the format works for post but I have created a site as a newbie in which I got it to work on desktop but when on mobile, the right hand side of the website goes over another text instead of under. Any thoughts? I have trouble with getting the side bar update to appear where I want to. The solution now is to add the code between two left side divs which in turn, when minimized, the stripo goes over there divs and the following ones.
My trouble is that if i put the div at the end of the code, then the div only appears next to the last div then going down. The website is http://clinicalresearch-apps.com/index.html. Thank you.
HTML CODE
<div class="col-md-5">
<br>
<div class="navigation">
Center for Biostatistics Updates
<br>
<div class="my-text">
<p><font size="4"> Application cycle open for our Center for Biostatistics-sponsored 1-year MS in Biostatistics Program in Theory and
Methods! Learn more here
<br>
<p><font size="4">Apply now for our Center for Biostatistics-sponsored 1-year MS in Biostatistics
Program in Clinical Applications geared specifically for clinically-trained professionals! Learn more here
</div>
</div>
</div>
CSS CODE
.navigation
{
position:absolute;
left: 20px;
padding-left: 10PX;
background-color:#221f72;
opacity: .9;
width:502px;
height:745px;
color:white;
}
First off let me say good job for creating the site as newbie, many comments on what you could be doing better but awesome start, everyone starts somewhere.
Your have two main issues:
1) Your class of "navigation" is causing issues with it's current rules.
2) You are not utilizing bootstrap html/css correctly.
First update your class to something like this:
.navigation {
background-color: #221f72;
opacity: .9;
width: 100%;
height: auto;
color: white;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 20px;
padding-top: 15px;
}
Removing the position : absolute solves a lot, let the element flow naturally.
Add this for your video iframes, particularly for mobile:
.navigation iframe { width: 100%; }
Next, since you are already using bootstrap, utilize it correctly. Bootstrap specifies that you should place columns inside of rows, and your rows inside of a container. You have columns and a container, but not rows around your columns!
You looks like you want to have the main column be col-md-7 and the right/side column be col-md-5, surround both of these with a <div class="row"></div>, then seeing what you get. Remember to refer to the docs: https://getbootstrap.com/docs/3.3/css/#grid
Use media screen, you can control it through its width size. Make the position relative instead of absolute
I am trying to make my divs appear horizontally across the page but there is an automatic line break in between them. I was wondering how I could fix this.
<div id="box1">
<header id="whyshouldi">
What is iOS Development
</header>
<p id="whatis">
iOS Development is the process used to create native applications for iPhone, iPod, and iPad. Applications are made using the SDK(software development kit), Xcode. Aside from the software, it is necessary that iOS Developers know Objective-C.
</p>
</div>
<div id="box2">
<header id="whyshouldi">
Why Should I learn it?
</header>
<p id="whatis">
Learning native app development can allow you to better expand the horizon of knowledge in iPhone, and can make you a better programmer overall. It is a great skill to know no matter who you are.
</p>
</div>
This is the default behaviour of block-level elements .. there are many options to have the two divs appear side by side but one simple way is by using the float property and giving each div a width of 50%
Example
you can position them absolutely:
#box1,#box2 {
position: absolute;
width: 50%;
}
#box1 {
left: 0;
}
#box2 {
right: 0;
}
This can be quite easily achieved introducing either a class or using some specificity trickery. If you use display: inline-block you can achieve what you're after. So let's say you introduced a class to your #box1 and #box2 ID's you could in theory...
.col { display: inline-block; max-width: 170px; width: 100%; vertical-align: top; }
Always remember when using inline-block to close any gaps in mark up between #box1 closing </div> and #box2 opening <div>. Otherwise you'll be left with 3 or 4 unwanted pixels.
Check this fiddle. I think this is what you're after. http://jsfiddle.net/UsNBj/
I'm trying to make a simple browser game without relying on anything fancy like flash or html5. I was doing pretty well in getting everything set up, but when I got to the ground I ran into trouble as I'm not very good at setting up html pages. I want to have a tiled ground that I can put objects on, then click on the objects to take the user to another page. I'm not sure how to go about something like this and am looking for some direction.
I have a fairly good grasp on PHP, understand basic html, very limited css and am starting to learn javascript and am planning on picking up jQuery.
I don't really understand what you want, but this might help:
Live Demo
To understand how the positioning works, see:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
HTML:
<div id="gameContainer">
</div>
CSS:
#gameContainer {
width: 320px;
height: 320px;
border: 1px solid #000;
background: url(http://i.stack.imgur.com/sFV9k.png);
position: relative
}
.wall {
background: url(http://i.stack.imgur.com/IFjyp.png);
width: 32px;
height: 32px;
position: absolute
}