I'm created a progress bar and for some reason, it shows a weird outline and I don't know what to change to fix it. Here is a picture below. You can see that tiny spacing and I don't know why it shows there
Here is a codepen showing the same exact outline issue https://codepen.io/designextras/pen/PoZKJMK
Note: I am using google chrome to view this
html code
<div id="progressBar">
<div id="progressBarFull"></div>
</div>
css code
#progressBar {
width: 20rem;
height: 4rem;
border: 0.2rem solid rgb(18, 93, 255);
margin-top: 2rem;
border-radius: 66px;
overflow: hidden;
z-index: 1;
}
#progressBarFull {
height: 4rem;
background-color: rgb(18, 93, 255);
width: 50%;
}
remove this line.
#progressBarFull {
height: 100%;
background-color: rgb(18, 93, 255);
width: 50%;
}
Related
I am trying to style the videojs CSS for the ChapterButton menu so that it expands to accommodate varying line lengths (e.g. no line wrapping). I can expand it to a fixed width but I need it to handle varying line lengths. Is there an easy way to do this? Am I looking at the right CSS rule?
Existing CSS
.vjs-menu-button-popup .vjs-menu {
display: none;
position: absolute;
bottom: 0;
width: 10em;
left: -3em;
height: 0em;
margin-bottom: 1.5em;
border-top-color: rgba(43, 51, 63, 0.7);
}
.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
background-color: #2B333F;
background-color: rgba(43, 51, 63, 0.7);
position: absolute;
width: 100%;
bottom: 1.5em;
max-height: 15em;
}
Result
My CSS override
.vjs-menu-button-popup .vjs-menu {
width: 20em;
left: 1em;
}
Result
fit-content should work if the 100% width is unset on .vjs-menu-content
.vjs-chapters-button.vjs-menu-button-popup .vjs-menu {
width: fit-content;
}
.vjs-chapters-button.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
width: unset;
}
I hope you can help me. I was trying to hover an image with "add to cart" like here: https://spacewallet.de/shop
I dont know, what I am doing wrong here, can you help?
.hunderter {
background: url(http://neuronade.com/wp-content/uploads/bfi_thumb/Shop-Produktbild_Bundle_englisch-min-mhvx28jvtfhpc0dhkugvgrvgvg1h17l9ze3zkr118a.jpg);
display: block;
background-size: 100%;
border: transparent !important;
background-color: transparent !important;
}
a.hunderter:hover {
background-color: rgba(100,230,230,0.5);
background-position: 0 0;
content:"⏵ ➡Zum Warenkorb hinzufügen";
}
First, a few notes:
1) Your image should probably be part of the HTML. It will be changing and is part of the page content (vs design).
2) You can't use unicode in CSS the same way you do in HTML. You need a backslash before the number (see Placing Unicode character in CSS content value)
Now, on to the answer to your main question...
Option 1:
If you want the CSS content value to always be the same, you can use CSS pseudo elements ::after and/or ::before to accomplish what you were trying to do (see snippet below). You can't use content in CSS without these, though.
.cart-item-link {
position: relative;
display: inline-block;
border: transparent !important;
background-color: transparent !important;
}
.cart-item-link:hover::before {
content: "Add to Cart";
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
bottom: 20%;
padding: 15px;
background-color: rgba(100, 230, 230, 0.5);
min-width: 80%;
text-align: center;
}
<a href="/?preview_id=4212&preview_nonce=a62d30b2b8&preview=true&add-to-cart=5767" class="cart-item-link">
<img src="http://neuronade.com/wp-content/uploads/bfi_thumb/Shop-Produktbild_Bundle_englisch-min-mhvx28jvtfhpc0dhkugvgrvgvg1h17l9ze3zkr118a.jpg" alt="" />
</a>
Option 2:
Of course, there is another possibility, too: The "add to cart" could also be placed into a <span> tag which could then use CSS with a slightly different selector like .cart-item-link:hover > .cart-item-info { ... }. (see snippet below)
.cart-item-link {
position: relative;
display: inline-block;
border: transparent !important;
background-color: transparent !important;
}
.cart-item-link > .cart-item-info {
display: none;
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
bottom: 20%;
padding: 15px;
background-color: rgba(100, 230, 230, 0.5);
min-width: 80%;
text-align: center;
}
.cart-item-link:hover > .cart-item-info {
display: block;
}
<a href="/?preview_id=4212&preview_nonce=a62d30b2b8&preview=true&add-to-cart=5767" class="cart-item-link">
<span class="cart-item-info">Add to Cart</span>
<img src="http://neuronade.com/wp-content/uploads/bfi_thumb/Shop-Produktbild_Bundle_englisch-min-mhvx28jvtfhpc0dhkugvgrvgvg1h17l9ze3zkr118a.jpg" alt="" />
</a>
You can solve this problem with adding a <span>, that is only visible on hover:
.hunderter {
position: relative;
background: url(https://unsplash.it/200/300);
display: block;
width: 200px;
height: 100px;
background-size: 100%;
}
.hunderter span {
position: absolute;
bottom: 0;
visibility: hidden;
}
a.hunderter:hover span {
background-color: rgba(100, 230, 230, 0.5);
visibility: visible;
color: white;
}
<a href="#" class="hunderter">
<span>⏵ ➡Zum Warenkorb hinzufügen</span>
</a>
If I understand you correctly..you want a hand on hover?...then you use
cursor:pointer
a.hunderter:hover {
background-color: rgba(100,230,230,0.5);
background-position: 0 0;
content:"⏵ ➡Zum Warenkorb hinzufügen";
cursor:pointer
}
.shop_bar{
background:black;
color:white;
opacity:0;
transition:all 0.5s;
}
.product_img:hover .shop_bar{
opacity:1;
}
Edit: The approach below shows how to add a bar at the bottom of the product...when you hover over the image the bard with some details will show..put whatever details you want in this html tag.
<div class="product_img">
<img src="https://spacewallet.de/wp-content/uploads/2016/06/businessblack-1-ohne-Rand.jpg">
<div class="shop_bar">
Buy this
</div>
</div>
In the following example, I demonstrate the issue where the colors are perfect, except for portions at different %'s results in some or all of the text being obscured.
What I would like to achieve, is to somehow assign the font color to be the difference of the background. I recall seeing something many years ago in DHTML which allowed for this. The result I am looking for is as follows
In the 50% sample, the '5' would be in white, and the '0' would be in black.
In the 75% sample, the '75' would be in white.
In the 20% sample, the '20' would be in black.
I believe there is a way to do this using CSS/CSS3, but I am unable to locate information on it.
The resulting style information should be contained inside the 'p' style in the CSS file. No 'tricks' like splitting data or altering the HTML using JavaScript / etc. The number inside the <p> element should remain whole and in tact.
body {
background: #000000;
}
p {
background: #ffffff;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAA1BMVEVilQmZw+RvAAAAAXRSTlOF3TSvyQAAAD1JREFUeNrtwQENAAAAwqD3T20PBxQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPBmnQgAAd4aVNwAAAAASUVORK5CYII=");
background-repeat: repeat-y;
background-size: 0% auto;
color: #ffffff;
padding: 5px;
text-align: center;
border: 1px solid #3E8096;
display: block;
}
<p style="background-size: 50% auto !important">50</p>
<p style="background-size: 75% auto !important">75</p>
<p style="background-size: 20% auto !important">20</p>
Note:
I was considering a drop-shadow, however this would result in a funny
looking font when it is a white font. I also considered encapsulating
the text in a border, however the ideal result would be for the font
to adjust based on background.
body { background: navy }
div {
background-color: white;
display: inline-block;
border: 1px solid red;
width: 200px;
font-size: 50px;
text-align: center;
position: relative;
color: red;
}
span {
content: '';
position: absolute;
background: cyan;
width: 50%;
top: 0;
left: 0;
height: 100%;
display: inline-block;
mix-blend-mode: difference;
}
<div>
0000 <span></span>
</div>
body { background: navy }
div {
background-color: white;
display: inline-block;
border: 1px solid red;
width: 200px;
font-size: 50px;
text-align: center;
position: relative;
color: red;
}
div:after {
content: '';
position: absolute;
background: cyan;
width: 50%;
top: 0;
left: 0;
height: 100%;
display: inline-block;
mix-blend-mode: difference;
}
<div>00000</div>
I need to add a transparent coloured layer over a background image. I tried doing this with rgba but with no result.
What I get now is:
page-heading {
background: rgba(36, 70, 105, 0.74) url("../images/samples/bg3.jpg") no-repeat fixed 50% 0px / cover;
opacity: 0.9;
position: relative;
text-align: center;
padding: 72px 0px;
}
I know that the background color is a fallback for when the image cannot be loaded. How do I add a layer over it in a correct way?
Use a simple box-shadow inset:
.page-heading {
background: url(../images/samples/bg3.jpg) no-repeat fixed 50% 0px / cover;
box-shadow: inset 0 0 0 100px rgba(36, 70, 105, 0.74);
}
JS Fiddle: http://jsfiddle.net/ghorg12110/q0cLf2s7/
I see that a lot of people here create an extra element or pseudo elements, but you don't need two elements to create this effect. You can simply declare two background-images. One of which is the original image, and the other a linear gradient. See this Fiddle to see the effect working.
background-image: linear-gradient(rgba(36,70,105,.74), rgba(36,70,105,.74)),
url("https://dummyimage.com/1000x1000/3/f.png&text=Background-image");
Note that you first have to declare the gradient and then the image (I always get this wrong the first time I try to make this)
You can do this with a gradient like the fiddle below.
The left is the original image. The right is the one with the gradient applied.
.block {
width: 300px;
height: 300px;
display: inline-block;
}
.og {
background: url(http://placehold.it/300x300);
}
.ed {
background: linear-gradient(rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.2)), url(http://placehold.it/300x300);
}
<div class="block og"></div>
<div class="block ed"></div>
Use a pseudo element...
.page-heading {
background: url("http://lorempixel.com/400/200") no-repeat fixed 50% 0px / cover;
opacity: 0.9;
position: relative;
text-align: center;
padding: 72px 0px;
}
.page-heading:before {
content: "";
background: rgba(36, 70, 105, 0.74);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="page-heading">
</div>
You can use a pseudo-element to place over your . This way you won't use an extra DOM element.
.element {
background: url('http://lorempixel.com/500/500/');
height: 500px;
width: 500px;
position: relative;
}
.element:after {
background: rgba(0,0,0,0.8);
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
JSFiddle here: http://jsfiddle.net/volzy/LLfhm0kc/1/
body{
background-color: #ccc;
margin:0px;
}
.page-heading {
background: rgba(36, 70, 105, 0.74);
opacity: 0.4;
margin: 0;
position: relative;
width:100%;
height:100vh;
text-align: center;
padding: 72px 0px;
}
I use body but the element could be something else
Hi, here a fiddle :
http://jsfiddle.net/5f46znzx/
is what you are looking for?
remember that opacity trasform each element with the opacity set.
i suggest to eliminate it if you dont need that internal element takes opacity.
You need another box above the header. Imagine that's your HTML:
<div class="page-heading">
<div class="page-heading-fake">
</div>
</div>
You can have this CSS
.page-heading {
background: url(yourimg.png);
position: relative; /* neccesary to make an anchor in the fake */
}
.page-heading-fake {
position: absolute;
top: 0;
left: 0;
background-color: rgba(36, 70, 105, 0.74) ;
}
I am trying to code the attached layout (needs to be responsive and not use JavaScript if possible). I want to support IE8, or if not, a gracefully degrading solution would be great.
I found ways to make the semicircle cutout using pseudo-elements and border-radius, but the background image of the previous div needs to show through and I can't figure out how to do it. Please help!! I have highlighted the area covered by the background image, in case it is not clear. Here is the layout
I got this far: https://jsfiddle.net/dcwoLb7f/
HTML:
<div id="first"><p>IMAGE CREDIT: WIKIPEDIA</p></div>
<div id="second"></div>
CSS:
#first {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/5/5a/VirtuellesStudio_Greenbox.jpg');
background-size: cover;
position: relative;
}
p {
color: white;
text-align: center;
margin: auto;
font-size: 40px;
}
#first, #second {
width: 100%;
height: 200px;
}
#second {
background-color: blue;
}
#first:after {
content: '';
background-color: white;
height: 40px;
width: 40px;
border-radius: 100%;
position: absolute;
bottom: -20px;
left: 50%;
transform: translate(-50%, 0);
}