This idea comes from the idea of an arcade cabinet. Let's say you have 2 layers in a project. Layer 1 with z-index of -1 has a background of blue. I want the upper most div to be black with the inner area of the div to be semi-transparent, similar to a window on an arcade cabinet. How would I solve this issue?
To give you an idea it would look like:
Arcade Cabinet Screen
Here you are:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
perspective: 1000px;
}
#s {
border-radius: 7vh;
width: 102vh;
height: 77vh;
box-shadow: 0 0 0 50vw #000;
transform: rotateX(-3deg);
background: linear-gradient(0, rgba(0, 0, 0, .3) 1px, transparent 0) 0 / 1px 3px, url(https://picsum.photos/800/600) 0 0 /cover
}
<div id="s"></div>
You can't do that... in the way you want. You would need to have multiple layers compose the "cabinet" facade. These would sit on the top. The blue could be in the background at -1. If you wanted to then have the "semi-transparent" part in there, then that would probably be a separate layer.
The facade below is in four "pieces": top, right, bottom, left. The screen itself sits in one layer. The glare sits in another.
.screen{
z-index:-1;
right:0;top:0;left:0;bottom:0;
background-color:blue;
position:absolute;
}
.screen div{
margin-top:90px;
color: yellow;
text-align: center;
font-family: fantasy;
}
.piece{
z-index:1;
background-color:black;
position:absolute;
}
.top{
height:4%;width:100%;
top:0;left:0;
}
.bottom{
height:4%;width:100%;
bottom:0;left:0;
}
.right{
height:100%;width:2%;
top:0;right:0;
}
.left{
height:100%;width:2%;
top:0;left:0;
}
.glare{
z-index:0;
background: radial-gradient(75% 35%, rgba(200,200,200,0.5), rgba(240,240,240,0.3));
right:0;top:0;left:0;bottom:0;
position:absolute;
}
<div class="top piece"></div>
<div class="right piece"></div>
<div class="bottom piece"></div>
<div class="left piece"></div>
<div class="glare"></div>
<div class="screen">
<div>press any button to continue...</div>
</div>
Try using three layers.
The Screen can be blue and behind that you have a big black div as the screen frame. On top of the screen you can put a transparent div.
The problem you'd face when using two divs is that the frame of the screen would look grey instead of the desired black effect.
To accomplish what you want, you need to think of layering in a different manner then how an arcade machine is built.
The black screen bezel is the lowest layer (#bezel)
The screen is the middle layer (#screen)
The overlay is the top layer (#overlay)
#bezel,
#overlay,
#screen {
height: 240px;
width: 256px;
}
#overlay,
#screen img {
border-radius: 20px;
}
#bezel {
background-color: black;
padding: 50px;
}
#overlay {
z-index: 2;
position: absolute;
background-color: rgba(0, 0, 255, 0.4);
}
<section id="bezel">
<section id="overlay"></section>
<section id="screen">
<img src="https://www.mobygames.com/images/shots/l/116293-rad-racer-ii-nes-screenshot-driving-off-into-the-sunset.png" />
</section>
</section>
Related
Everything I've seen for this basically uses a background image with a linear gradient over the top of it, and that won't work for me:
I have 2 divs with background images that appear next to each other vertically, with, say, 50px of overlap. I would like to make the top 50px of the background image on the second div into a gradient so it fades in from transparent.
Here's the setup to start:
* {
box-sizing: box-sizing:border-box;
}
div {
width: 200px;
height: 200px;
padding: 10px;
color: #fff;
}
.one {
background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/06/picture-0051-300x225.jpg');
}
.two {
padding-top: 60px;
margin-top: -50px;
background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/02/img_1530-large-225x300.jpg');
}
<div class="one">Unimportant content</div>
<div class="two">More unimportant content.</div>
And here's roughly what I want it to look like:
I can't just upload a background image that fades one into the other because the content of the real divs is variable height, and the background needs to change only between the two divs.
mask can do it
* {
box-sizing: box-sizing:border-box;
}
div {
width: 200px;
height: 200px;
padding: 10px;
color: #fff;
}
.one {
background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/06/picture-0051-300x225.jpg');
}
.two {
padding-top: 60px;
margin-top: -50px;
background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/02/img_1530-large-225x300.jpg');
-webkit-mask: linear-gradient(#0000, #000 50px);
}
<div class="one">Unimportant content</div>
<div class="two">More unimportant content.</div>
If you want it to stay a little more modular, you can only fade to a specific color (in my example white):
div { height: 300px; width: 500px; background-size: cover; }
div:first-child {
background-image: linear-gradient(to bottom, transparent, white), url("https://cdn.pixabay.com/photo/2022/08/28/09/40/wild-7416210__340.jpg");
}
div:nth-child(2) {
background-image: linear-gradient(to top, transparent, white), url("https://cdn.pixabay.com/photo/2022/08/09/16/19/sea-7375377__340.jpg");
}
<div>Test 1</div>
<div>Test 2</div>
I do have a feeling that this post will get a lot more negative responses as compared to positive ones but it's ok, one response containing the correct answer is worth it!
Ok, this feature is a bit hard to explain in words. I want to add a loading animation whenever a button from the navigation bar is clicked. It should take up 100vh height and 100vw width and should be from right to left and then disappear. (Need help with both CSS and js, maybe HTML too)
I suggest checking out https://www.jacekjeznach.com using a laptop. You can see the really cool loading animation going on when you click on any of the options from the main navigation bar situated on the left side of the website
I know I can't make the exact effect without becoming an expert in web development. I even checked out the GitHub repo of his portfolio but there was no index.html there. A lot of .jsx files (ReactJS) though.
I know the basics of HTML, CSS, JS and never worked with any frameworks (not been more than 2 months since I started learning web dev) but I need help with this project because it is a college assignment.
I chose to make an eLearning website, similar to what this guy teaches(using webflow and few backend tools like MemberStack, Airtable & Zapier): https://www.youtube.com/watch?v=1-_rGcBQLzE&list=PL23ZvcdS3XPINPbP6y06tcLY_rZLi8euf
I am allowed to use any frameworks but I am not allowed to use any website building tools(I can't explain the complex javascript code if I ignore the instructions and use it anyway). Connection to the backend is a plus point but not a requirement.
Currently I am just making the basic homepage of the website and its code is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.slide {
width: 97vw;
height: 97vh;
margin: auto;
}
.wrapper {
display: flex;
flex-direction: row;
width: 500vw;
transform: rotate(90deg) translateY(-97vh);
transform-origin: top left;
}
.one {
background: #efdefe;
}
.two {
background: #a3f3d3;
}
.three {
background: rgb(245, 228, 228);
}
.four {
background: #ffddcc;
}
.five {
background: rgb(245, 241, 225);
}
.outer-wrapper {
width: 97vh;
height: 97vw;
margin: auto;
transform: rotate(-90deg) translateX(-97vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
::-webkit-scrollbar {
display: none;
}
.wrap-class {
margin-left: 1vw;
display: flex;
align-items: middle;
justify-content: space-around;
height: 100vh;
width: 10vw;
align-content: space-between;
justify-content: center;
position: fixed;
flex-direction: column;
vertical-align: center;
}
/*Code for the horizontal navbar on left side: */
.navbar {
width: 10vw;
height: auto;
}
.margin1vh {
margin-top: 0.7vh;
margin-bottom: 0.7vh;
}
a:-webkit-any-link {
text-decoration: none;
color: white;
padding: 1vw;
padding-left: 0;
display: block;
/* padding: 3vh 1vw 3vh 1; */
height: 100%;
width: 100%;
}
button {
background-color: black;
display: block;
width: 100%;
box-shadow: inset 2px 2px black, 4px 4px 0 grey;
}
button:hover {
transform: scale(1.1);
}
html {
background-color: black;
/* filter: invert(1); */
scroll-behavior: smooth;
}
/*This code allow us to add linear gradient to a text*/
p,
h1 {
display: block;
margin-left: 31%;
margin-top: 5000px !important;
max-width: 1vw;
background: rgb(2, 0, 36);
background: radial-gradient(circle,
rgba(2, 0, 36, 1) 0%,
rgba(165, 106, 108, 1) 0%,
rgba(175, 99, 99, 1) 0%,
rgba(148, 116, 123, 1) 0%,
rgba(91, 153, 175, 1) 0%,
rgba(62, 172, 200, 1) 0%,
rgba(194, 226, 162, 1) 0%,
rgba(0, 212, 255, 1) 0%,
rgba(18, 255, 21, 1) 14%,
rgba(230, 65, 87, 1) 29%,
rgba(194, 185, 52, 1) 46%,
rgba(43, 83, 210, 1) 64%,
rgba(59, 221, 55, 1) 80%,
rgba(222, 85, 217, 1) 92%);
-webkit-background-clip: text;
background-clip: text;
/*for compatibility with safari browser*/
-webkit-text-fill-color: transparent;
display: inline;
background-size: 300%;
animation: bg-animation 17s infinite;
}
#keyframes bg-animation {
0% {
background-position: left;
}
50% {
background-position: right;
}
100% {
background-position: left;
}
}
/*Now, let's add the animation that happens when a button of fixed position is clicked: */
.animation-on-click {
min-width: 100vw;
min-height: 100vh;
background-color: black;
animation-name: animate;
animation-duration: 2s;
animation-iteration-count: 1;
overflow: visible;
}
#keyframes animate {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide one" id="one">
<div>
<br />
<br />
<h1>Welcome to the website</h1>
</div>
</div>
<div class="slide two" id="two">
<div>
<br />
<br />
<h1>Welcome to the eLearning website</h1>
</div>
</div>
<div class="slide three" id="three"></div>
<div class="slide four" id="four"></div>
<div class="slide five" id="five"></div>
</div>
</div>
<div class="wrap-class">
<div class="navbar">
<button>
Home
</button>
<div class="margin1vh"></div>
<button>
About
</button>
<div class="margin1vh"></div>
<button>
Website
</button>
<div class="margin1vh"></div>
<button>
Support
</button>
<div class="margin1vh"></div>
<button>
Contact
</button>
</div>
</div>
<script>
function clicked() {
var element = document.getElementById("one");
element.classList.add("animation-on-click");
setTimeout(function () {
element.classList.remove("animation-on-click");
}, 2000);
}
</script>
</body>
</html>
I just need a loading animation (without a loading bar should also work) but it should be done on the whole screen. I think I might change the background color of all the elements in CSS horizontal flexbox to black also because black is the best background and it will allow me to change width ad height attributes of the .slide class and translateX and translateY functions from 97vw, 97vh to 100vw, 100vh (as they were in the original code)
Btw, I have combined the codes of CSS and JS files in the HTML file here to be able to share the code here on StackOverflow.
You can visit https://github.com/shubham-garg1/web-project to check the GitHub code. I have also published the work done till now online so you can go to http://www.elearningweb.tk and check the sources files.
Any help is appreciated, thanks.
They're actually pretty easy to do if you just want a spinner, but a "loading" animation should be tied to a "loading" process. Without making any assumptions, lets consider some native Javascript Ajax call...
var xmlhttp = new XMLHttpRequest();
document.getElementById("myLoader").style.display = "block";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
document.getElementById("myLoader").style.display = "none";
}
}
};
xmlhttp.open("GET", "https://www.httpbin.org/get", true);
xmlhttp.send();
You can just throw an animation inside your myLoader div... If you want to get a little fancy, you can use Javascript to animate it after you load it.
Let's grab some code: I'll grab it from https://www.w3schools.com/howto/howto_css_flip_card.asp.
It's just a card flip on hover, but I've removed the hover part.
The important part here is in the flip-card-inner portion of the CSS. It's going to dictate to Javascript how long the animation process should take. If you want a longer one, just adjust the transition value.
JsFiddle: https://jsfiddle.net/L1fk0nhm/
<style>
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
</style>
<div class="flip-card">
<div id="myLoader" class="flip-card-inner">
<div class="flip-card-front">
I'm hiding stuff that's loading!
</div>
<div id="loadedStuff" class="flip-card-back">
</div>
</div>
</div>
We can actually have it flip on load, using Javascript after the inside of the element has loaded.
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
document.getElementById("loadedStuff").innerHTML = xmlhttp.responseText;
animatedCardRotation(document.getElementById("myLoader"), 0, 180);
}
}
};
xmlhttp.open("GET", "https://www.httpbin.org/get", true);
xmlhttp.send();
function animatedCardRotation (Element, startDegree, endDegree) {
if(startDegree < endDegree ) {
startDegree += 10;
Element.style.transform = `rotateY(${startDegree}deg)`;
requestAnimationFrame( () => this.animatedCardRotation(Element, startDegree, endDegree) );
}
}
Combining requestAnimationFrame here really adds a lot to your CSS animations. You can virtually do any kind of CSS transformation here and if you have something that loads in chunks, it can help you build a very accurate "loading bar".
I'm creating a homepage using HTML/CSS/Javascript, on this page I have text floating on the top left portion of the screen. I have a number of backgrounds saved from Reddit and a script which randomly selects one upon start, my problem is that because this background can be any colour it is difficult for the text to be readable, so my idea was to blur the background around just the text in order to make it readable. Ideally, it would follow just the text and blur the outline of it but I tried placing it in a box, however, because it uses relative layout it was difficult to have the box fill and blur the minimum space possible.
How can I improve the readability of text by blurring the background just around the text? I'm also open to other suggestions to improve readability (remembering the background changes)
Try using the CSS3 filters: https://www.inserthtml.com/2012/06/css-filters/
The link above should have a guide on how to blur image and you should be able to modify this to fit your requirements.
You have chosen the difficult way. Simply use CSS text-shadow Property. For example if the text is in black, use white shadow color for it.
Example:
body {
background-image: url('https://images.template.net/wp-content/uploads/2015/09/01191816/Perfect-Summer-Background-Free-Download.png');
background-size: cover
}
.text {
color: #000;
font-size: 3em;
text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff
}
<div class="text">Some Text</div>
It's a quick n dirty fix... but I usually just add a contrast background color to the text wrapper (like the first one in the example below). You can also use blur filter if you want. I referred to this article frosting glass css filter for the second one. But in the comment of that article, some say there's a trade off of performance.
#bg {
background: url(https://picsum.photos/500/400?image=0) center center no-repeat;
background-size: cover;
width: 500px;
height: 300px;
margin-bottom: 30px;
}
#text-wrap1 {
padding: 30px;
background-color: rgba(255,255,255,0.7);
text-shadow: 1px 1px 1px white;
width: 150px;
}
#text-wrap2 {
padding: 30px;
width: 150px;
position: relative;
}
#text-wrap2 p {
position: relative;
text-shadow: 1px 1px 1px white;
}
#text-wrap2:before {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: white;
position: absolute;
left:0;
top:0;
-webkit-filter: url('#blur');
filter: url('#blur');
-webkit-filter: blur(5px);
filter: blur(5px);
background-size: cover;
opacity: 0.7;
}
<div id="container">
<div id="bg">
<div id="text-wrap1">
This is a random paragraph
</div>
</div>
<div id="bg">
<div id="text-wrap2">
<p>This is a random paragraph</p>
</div>
</div>
</div>
I have a square with a logo inside. On hover in the square, I want the background color to change as well as the color of the logo.
I have the following code:
<div class="pure-u-1 pure-u-md-1-3">
<div class="project", id="project1">
</div>
</div>
.project {
background-color: #f5f4f4;
margin: 0 0.5em 2em;
padding: 4em 4em;
}
#project1:hover {
background-color: red;
}
I can get the logo to change on hover and I can get the square to change, but I can't get them to both change at the same time, i.e. when the mouse touches the square.
I'm assuming this needs javascript, which I do not know. Any tips/help is greatly appreciated.
No JavaScript required, just CSS. No need for an <img> either.
<div class="logo">Brand Name</div>
.logo {
width: 80px;
height: 78px;
text-indent: -9999em;
background-image: url('http://s17.postimg.org/7hltqe5e3/sprite.png');
background-repeat: no-repeat;
background-position: 0 0;
background-color: blue;
}
.logo:hover {
background-color: red;
background-position: -80px 0;
}
http://jsfiddle.net/12u7ma2q/
Create a sprite with both versions of the logo side-by-side. When you hover you will change the background color and shift the position of the sprite image (left, right, up, down - depends on how you created your sprite).
The benefits to this answer over sailens is that you're not using invalid markup (<img> without a src attribute) and you're only making a single request for an image instead of two. Oh, and less markup - a single <div> (which could be an <a>, <span> etc).
You could also shorten .logo by using background instead of individual background properties. I listed them out at first for clarity.
.logo {
width: 80px;
height: 78px;
text-indent: -9999em;
background: blue url('http://s17.postimg.org/7hltqe5e3/sprite.png') no-repeat 0 0;
}
http://jsfiddle.net/12u7ma2q/1/
Cleaner HTML (since img tag needs a source, you can change it for a div):
<div class="pure-u-1 pure-u-md-1-3">
<div class="project", id="project1">
<div class="pure-img">
</div>
</div>
And the CSS:
.project {
background-color: #f5f4f4;
margin: 0 0.5em 2em;
padding: 4em 4em;
}
#project1:hover {
background-color: red;
}
.pure-img{
background-image: url(http://dummyimage.com/600x400/000/fff);
width: 80px;
height: 78px;
}
#project1:hover .pure-img {
background-image: url(http://dummyimage.com/600x400/666/0011fc);
}
and the fiddle
http://jsfiddle.net/h6gwwox6/1/
I'm trying to create a sound control bar that shows the current position of playback with a loading bar that is underneath the control bar. example:
This is what it looks like when my window size is medium or large. but when it gets smaller, it turns into this:
not only is it no longer centered, but it shifts everything left and the position bar over flows. you will notice that the position bar is fine, the real problem comes from the play control div instantly shrinking and shifting left. is there a way to fix this?
HTML:
<div class="container">
<div class="playBar row"></div>
<div class="positionBar row"></div>
</div>
CSS:
.container { position: relative }
.playBar {
background-color: rgba(173, 173, 173, 0.55);
border-radius: 5px;
height: 50px;
font-size: 27px;
background: linear-gradient(to bottom, rgba(207, 207, 207, 0.58) 0%,rgba(134, 134, 134, 0.54) 100%);
z-index: 1;
position: absolute;
width: inherit;
}
.postionBar {
border-radius: 5px;
background-color: #CC5A5A;
z-index: 10;
height: 50px;
}
If you set a min-width on the bar, it won't shrink past a certain point.
min-width: 100%;