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%;
Related
I have a div that will be the header of the site I'm working on that is a custom shape. The issue I am having is that the header needs to resize horizontally while retaining the integrity of the border radius and curves that are part of the shape. The problem with just using a transparent div with the shape as a background SVG is that when the window is resized, the integrity of the border radius and the angled section of the graphic are lost, meaning they get distorted into another shape. Here is an image of the shape:
The initial way I attempted to create this element was by placing it as an SVG, and resizing one of the line segments of the SVG in Javascript, but the performance on this was very poor, it was overly-complicated, and it was difficult to get the sizing correct.
The closest I got to the desired result was by cutting the right side tail of the SVG and using it as an :after element, which gave me the horizontal fluidity I was looking for, but encountered issues with matching the border color of the div and the stroke of the SVG. The div uses a translucent white background and a translucent colored border. Since the border is technically "on top" of the white background, the resulting color value is dynamic depending on the background of the page. This makes it difficult to match the stroke of the SVG and the border color of the div. There was also an issue where a vertical line would show up at different resolutions between the div and :after SVG element. You can see in the picture below that this method is not ideal, the SVG border color and width does not match the div on the left, and if you look closely there is a gap between the two elements (much more visible on a dark background which the site will be using).
body {
background-color: black;
margin: 10px 20px;
}
.header {
background-color: rgb(217 217 217 / 0.5);
border: 3px solid rgb(122 112 158 / 0.5);
border-bottom-left-radius: 24px;
border-right: none;
display: block;
width: calc(100% - 305px);
height: 60px;
position: relative;
}
.header:after {
background-image: url("data:image/svg+xml,%3Csvg width='308' height='65' viewBox='0 0 308 65' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.00179921 3.00586H293.755C296.737 3.00586 299.597 4.08424 301.706 6.00378C303.815 7.92331 305 10.5268 305 13.2414V22.7809C305 25.4955 303.815 28.099 301.706 30.0185C299.597 31.938 296.737 33.0164 293.755 33.0164H126.396C75.9048 33.0164 52.8027 61.9625 0 61.9625L0.00179921 3.00586Z' fill='%23D9D9D9' fill-opacity='0.5'/%3E%3Cpath d='M293.755 0.00585938C297.447 0.00585938 301.037 1.33813 303.726 3.78519C306.424 6.24078 308 9.6351 308 13.2414V22.7809C308 26.3872 306.424 29.7815 303.726 32.2371C301.037 34.6842 297.447 36.0164 293.755 36.0164H126.396C101.996 36.0164 84.1741 42.9185 65.6587 50.0893L65.1482 50.287C46.4357 57.5333 27.0057 64.9625 9.15527e-05 64.9625V61.9625C1.01084 61.9625 2.01071 61.9519 3.00009 61.9311C28.1433 61.4023 46.5167 54.2861 64.6923 47.2465C83.1648 40.0919 101.433 33.0164 126.396 33.0164H293.755C296.737 33.0164 299.597 31.938 301.706 30.0185C303.815 28.099 305 25.4955 305 22.7809V13.2414C305 10.5268 303.815 7.92331 301.706 6.00378C299.597 4.08424 296.737 3.00586 293.755 3.00586H0.00189066L0 0.00585938H293.755Z' fill='rgb(122 112 158 / .50)' /%3E%3C/svg%3E%0A");
content: "";
background-size: contain;
background-repeat: no-repeat;
width: 310px;
height: 66px;
left: 100%;
top: -3px;
position: absolute;
}
<div class="header">
</div>
You were on the right track with splitting up the image. You could either split the png you provided in your example, or if you have access to the tools, you could make three svgs.
Using the png you provided as an example, I made a new image 50px wide starting from the left. I made a second image 500px wide starting from the right. Finally, for the center, I made a third image that was only 1px wide taken from the horizontal center of the provided png. That 1px can be repeated horizontally to give the illusion that it is one image.
There are many ways to assemble them for the header. You could use a table, a grid, divs with positioning and float. I chose to use flex.
body {
background-color: black;
margin: 10px 20px;
}
.header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 96px;
}
.header_left {
flex-grow: 0;
background-image: url("h_left.png");
background-repeat: no-repeat;
width: 50px;
max-width: 50px;
min-width: 50px;
}
.header_middle {
flex-grow: 1;
display: block;
background-image: url("h_mid.png");
background-repeat: repeat-x;
}
.header_right {
flex-grow: 0;
display: block;
background-image: url("h_right.png");
background-repeat: no-repeat;
width: 500px;
max-width: 500px;
min-width: 500px;
}
<body>
<div class="header">
<div class="header_left"></div>
<div class="header_middle"></div>
<div class="header_right"></div>
</div>
</body>
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>
Picture:
What I want:
I want the hover to be registered even when the mouse cursor moves over that blue diamond shaped area in the picture above.
Problem:
Whenever I hover over that blue diamond shaped area, which visually appears to the user as a region in .path_part, the hover rule .folder_path .path_part:hover is not being applied on .part_part.
What I tried:
Set the z-index of .path_part to 10000 and that of .right_arrow to -1. Still no luck.
JSFiddle link
Working fiddle.
First of all, z-index can have a maximum value of 9999.
One thing to note is that only the left portion .right-arrow is overlapping with .path-part, and since the hover handler is on .path-part only that left portion will trigger the hover handler.
Also, for z-index to work both .path-part and .right-arrow need to be positioned, that is, position property set to either relative, absolute or fixed.
Change your CSS to:
.folder_path .right_arrow {
position: relative;
z-index: 1;
display: inline-block;
vertical-align: middle;
height: 35px;
width: 35px;
content: "";
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, #000000), to(#000000));
margin-left: -25px;
}
.folder_path .path_part {
position: relative;
display: inline-block;
height: 50px;
line-height: 50px;
vertical-align: middle;
min-width: 40px;
font-size: 20px;
padding: 0 10px;
z-index: 2;
}
$(".path_part").hover(function(){
$(this).next().css({"background": "rgba(255, 255, 255, 0.3)"});
}, function(){
$(this).next().css({"background": "unset"});
});
You can use jquery.This code will work for you.
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've ran into a inconsistency with the sliding animation in jQuery and I'm not too sure how I can overcome it.
I basically have two floating divs that act as opening and closing doors:
.door-one{
float: left;
width: 50%;
height: 100%;
background-image: url('dark-wood.png');
box-shadow: inset 0 0 10px black;
}
.door-two{
float: right;
width: 50%;
height: 100%;
background-image: url('dark-wood.png');
box-shadow: inset 0 0 10px black;
}
And the animation to govern their movements:
$(document).ready(function(){
$('.home-button').click(function(){
$('.door-one').animate({width: 'toggle'}, 1000);
$('.door-two').animate({width: 'toggle'}, 1000);
});
});
The problem exists with the left floating element. You see, the right one moves off the page to the right (images and all) in one smooth motion. The left one however just gets 'covered' up and doesn't actually 'slide' off of the page.
Is anyone familiar with this? Is there anyway to get the left element to slide off the page properly?
The background image for right door works, because the float causes it to move right as the door's width shrinks. The background image simply goes along for the ride.
The background image for the left door does not work, because the door doesn't move left when its width shrinks.
An alternative would be to animate the left door's position rather than its width.
You can do this by removing float: left and adding absolute positioning for the left door. I don't think you can toggle left for this purpose. But you can animate it in one direction or the other based on its current offset.
Snippet:
$('.home-button').click(function(){
var d1= $('.door-one');
if(d1.offset().left < 0) {
d1.animate({left: '0'}, 1000);
}
else {
d1.animate({left: '-50%'}, 1000);
}
$('.door-two').animate({width: 'toggle'}, 1000);
});
html,body {
width: 100%;
height: 100%;
margin: 0px;
}
.door-one{
position: absolute;
width: 50%;
height: 100%;
background-image: url("http://www.iconsdb.com/icons/preview/royal-blue/stackoverflow-4-xxl.png");
box-shadow: inset 0 0 10px black;
}
.door-two{
float: right;
width: 50%;
height: 100%;
background-image: url("http://www.iconsdb.com/icons/preview/royal-blue/stackoverflow-4-xxl.png");
box-shadow: inset 0 0 10px black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="home-button">Click me</button>
<hr>
<div class="door-one"></div>
<div class="door-two"></div>