Is it possible to remove this vertical line between two colored elements(red and green). Whats wrong with my code? or its color shadow or what i dont understand
div {
height: 30px;
font-size: 0;
}
div li {
display: inline-flex;
height: 100%;
}
li:first-child {
width: 33.3%;
background-color: red;
}
li:nth-child(2) {
width: 33.3%;
background-color: green;
}
li:last-child {
width: 33.3%;
background-color: yellow;
}
<div>
<li></li>
<li></li>
<li></li>
</div>
The line is black because computers are "lazy" and combine colors by mediating the color value like C = (C1+C2)/2 when it should be C = ((sqr(C1) + sqrt(C2)/2)/2)^2. You understand why they are "lazy".
Watch this youtube video for more details. https://www.youtube.com/watch?v=LKnqECcg6Gw
And they combine because the browser pixels don't fit to your screens pixels.. at some point someone does some color combination.
33.3% x 3 = 99.9%
I agree with the previous comments, set 33.4% one of them.
Related
I made a HTML volume bar:
.volume_bar {
background: #A5D5FF;
border-radius: 20px;
height: 12px;
}
<div class="volume_bar"></div>
I am trying to format this volume bar, such that when there is a volume income, display the volume on the bar with another color. So it looks like this:
I got the reading volume input codes correct. I am just trying to figure out the frontend. One way I thought of achieving this is to format only a portion of the div. Such that 20% of the width is yellow, and the remaining is blue. Is that possible to only format a portion of the width of a div with CSS?
Just Change the width property of .volume class using javascript to make it work.
document.querySelector(".volume").style.width="50%";
.volume_bar {
background: #A5D5FF;
border-radius: 20px;
height: 12px;
}
.volume {
background: #ffd105;
width: 25%;
height: 100%;
border-radius: 20px;
font-size:10px;
text-align:center;
}
<div class="volume_bar">
<div class="volume"></div>
</div>
const volume_bar = document.querySelector('.volume_bar');
const volume_control = document.querySelector('.volume_control');
const rect = volume_bar.getBoundingClientRect();
volume_bar.addEventListener('mousemove', e=>{
let per = (e.clientX - rect.x) / (rect.width) * 100;
volume_control.style.width = per + '%';
});
.volume_bar,
.volume_control {
border-radius: 20px;
height: 12px;
}
.volume_bar{
background: #A5D5FF;
}
.volume_control{
background: red;
width: 0;
}
<div class="volume_bar"><div class="volume_control"></div></div>
To answer your question, yes you can style a div so that the left is one color, the right another. Liner-gradient can make this effect. Your problem is the rounded edge of the left side - for that I think you need a second element, or pseudo selector.
Using linear-gradient() for easy effect but no rounded edge
.volume {
width: 80%;
height: 50px;
border-radius: 25px;
background: linear-gradient(90deg, blue 30%, yellow 30%);
}
<div class="volume"></div>
Using psuedo selector:
.volume {
width: 80%;
height: 50px;
border-radius: 25px;
background: rgb(253 216 53);
}
.volume::after {
height: 100%;
width: 30%;
border-radius: 25px;
background: rgb(3 169 244);
content: "";
display: block;
}
<div class="volume"></div>
so I'm creating a gallery of images with captions and I'm confused as before I've never had it happen but now when I set the background color of the p element it sets the background behind the element too. I've tried several things so far such as setting the background color of the image to none and other things, but nothing has worked, any help would be greatly appreciated! Here is my code snippet, I will gladly update any more information needed.
HTML
<div id="wrapper">
<ul id="products">
<li><a href="ambco.html"><img src="img/650a.jpg" alt=""><p>Hello I am Jacob
and I'm confused as hell and this doesn't make sense...</p></a></li>
<li><p>Hello I am Jacob and I'm confused as hell and this doesn't
make sense...</p></li>
<li><p>Hello I am Jacob and I'm confused as hell and this doesn't
make sense...</p></li>
</ul>
</div>
CSS
#products {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#products li {
width: 95%;
margin: 2.5%;
float: left;
}
#products img {
margin-bottom: 15px;
}
#products p {
background-color: black;
color: brown;
}
#products a {
text-decoration: none;
}
Because you have float: left; for the <li> everything after the <li> is collapsing - try switching for display: inline-block; on the <li> elements, this might work.
Thank you in advance for your help.
I have spent a good deal of time scouring the web and this forum for a solution to having a diagonal angled bottom to my navigation buttons. Here is an example:
I want to avoid using images if possible. I'm wondering how to create a box like this in the example image for each navigation choice with CSS. This navigation code will make its way into a Wordpress install. I really appreciate the expertise. Thank you again!
So good-news, bad-news...
This can be most-of-the-way done using nothing but CSS.
For sufficiently-new browsers (ie: you don't require IE<=8 to maintain all styles that Chrome 42 has) this can be done without using extra DOM elements.
This can also be done using just CSS ...wait for it...
buuuut the CSS-only version can only make the angle a set width.
It can't make the angle stretch across an arbitrary width, so either the buttons have to be the same length, or the width/height of the angle has to be the same on all buttons (meaning part of the bottom will be flat, on longer buttons).
CSS-only Solution (good enough?)
nav {
background-color: green;
padding: 20px;
}
nav > button {
background-color: rgb(60, 60, 60);
color: rgb(120, 120, 120);
position: relative;
border-radius: none;
border: none;
padding: 20px;
}
nav > button:after {
content: "";
width: 0;
height: 0;
right: 0;
bottom: 0;
position: absolute;
border-left: 60px solid transparent;
border-bottom: 15px solid blue;
}
<nav >
<button >About</button>
<button >Bios</button>
</nav>
I made the colours obvious for a reason.
For the full experience of the cheat, I'll make the solution a little more obvious, by changing the colour of the left border:
Behind the Scenes Look
nav {
background-color: green;
padding: 20px;
}
nav > button {
background-color: rgb(60, 60, 60);
color: rgb(120, 120, 120);
position: relative;
border-radius: none;
border: none;
padding: 20px;
}
nav > button:after {
content: "";
width: 0;
height: 0;
right: 0;
bottom: 0;
position: absolute;
border-left: 60px solid red;
border-bottom: 15px solid blue;
}
<nav >
<button >About</button>
<button >Bios</button>
</nav>
As you can see, the triangle that I created using the border-bottom (in blue) and border-left (transparent) is just about perfect.
The width of the border-left determines the width of this effect, and the height of the border-bottom determines the height; it just happens that the left one is invisible.
If that blue were set to the same green as the <nav> itself, then it would look like a notch was missing from the button, rather than having a corner painted over.
If you wanted to make this ES6-8 friendly, you'd just add 1 div per button (after each button or whatever), and size that and use its borders.
Really, you'd need to add a div to contain the div and the button, as well (so the container was relatively positioned, the button took up 100% of its space, and the paint-chip was absolutely positioned inside).
If you don't care about old browsers getting the exact same view, you really don't need to do this to yourself.
That's most of the way solved...
If you can say "My theme's smallest button is 60px, so a 60px triangle is okay", then great. Change the colours and you're done.
If not, there's a little more you can do.
It's not ideal, and it's not as pretty as it could be (still prettier than a lot out there), but if you can use JS to do this, and you can guarantee that all of the buttons are going to be on the page before the code runs, and their widths won't change, you can do something like:
JS + CSS (good enough!)
(function () {
var nav;
var buttons;
var style;
var styleText;
function getElWidth (el) { return el.getBoundingClientRect().width; }
function borderLeftText (width, i) {
return ["nav > button:nth-child(", i + 1, "):after { border-left: ", width, "px solid transparent; }"].join("");
}
function getStyleEntries (els) {
return els.map(getElWidth).map(borderLeftText);
}
try {
nav = document.querySelector("nav");
buttons = [].slice.call(nav.querySelectorAll("button"));
style = document.createElement("style");
styleText = getStyleEntries(buttons).join("\n");
style.textContent = styleText;
document.head.appendChild(style);
}
catch (err) {
// because the same browsers that will blow up won't support the CSS anyway;
// don't fix it, just move on
// good code shouldn't do this, but that's another story
}
}());
nav {
background-color: green;
padding: 20px;
}
nav > button {
background-color: rgb(60, 60, 60);
color: rgb(120, 120, 120);
position: relative;
border-radius: none;
border: none;
padding: 20px;
}
nav > button:after {
content: "";
width: 0;
height: 0;
right: 0;
bottom: 0;
position: absolute;
border-left: 60px solid transparent;
border-bottom: 15px solid green;
}
<nav >
<button >About</button>
<button >Bios</button>
</nav>
Here I'm basically grabbing all buttons that exist at this time, and writing my own CSS file, full of
nav > button:nth-child(1):after { /*...*/ }
nav > button:nth-child(2):after { /*...*/ }
and then appending a <style> tag to the <head> with that text inside.
There will just be one rule inside each one of those selectors; the border-left width is going to be set to the actual width of the button, in pixels.
Terms and Conditions
Now you have exactly what you wanted, but it required JS and requires that the buttons be on the page before that code runs, and requires that the widths not change (through styling, or through media-queries, et cetera). If either of those things happens, and you want to keep the corners updated, that code needs to be run again.
And if that's the case, special care should be made to cache and reuse the style tag, so that you don't have 8 tags with the same rules, on the page.
Conclusion
If you're good with mostly-fine, go CSS-only.
If you're good with knowing that the fix doesn't have to respond in real-time, or be applied to more and more buttons that are dynamically added, go JS + CSS.
If neither of those is good enough, use an .svg or .png
Transform: skewY(deg);
will skew a div up like that, you might need to build it in layers though, and then skew the text -deg to unskew the text
Simple example:
https://jsfiddle.net/uex2umac/
.wrapper{
width:500px;
height:300px;
background-color:#000;
overflow:hidden;
}
.tobeskew{
width:280px;
height:220px;
margin-bottom:0px;
background-color:#f1f;
text-align:center;
transform:skewY(-15deg);
}
p{
transform:skewY(15deg);
line-height:220px;
font-size:40px;
color:#fff;
}
<Div class="wrapper">
<div class="tobeskew">
<p>Hello</p>
</div>
</div>
Here's a solution using SVG background images. Note that using SVG requires IE9+ though...
BODY
{
background-color: #333;
}
.button
{
float:left;
float: left;
font-family: sans-serif;
font-weight: bold;
font-size: 44px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115' preserveAspectRatio='none'><polygon points='0 0 100 0 100 100 0 115' fill='%23282828'/></svg>");
background-size: 100% 100%;
color: #999;
height: 110px;
line-height: 96px;
padding: 0 50px;
margin-right: 10px;
}
.button.selected
{
color: #fbac31;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115' preserveAspectRatio='none'><polygon points='0 0 100 0 100 100 0 115' fill='black'/></svg>");
}
<div class="button">
<div>ABOUT</div>
</div>
<div class="button selected">
<div>BIOS</div>
</div>
I'm having a real hard time wrapping my brain around grouping different selectors and styles into one coherent setup.
I found this one set of CSS/HTML code that is exactly what I need (http://jsfiddle.net/joshnh/daFDn/) but I'm at a loss how I can utilize it with my setup.
body {
padding: 50px;
}
ul {
border: 1px solid #444;
display: inline-block;
height: 301px;
position: relative;
width: 400px;
}
li {
font: bold 16px/100px sans-serif;
height: 100px;
}
a {
border-right: 1px solid #444;
border-top: 1px solid #444;
color: red;
display: block;
text-align: center;
text-decoration: none;
width: 99px;
}
li:first-child a {
border-top: none;
}
li:nth-child(2) a {
color: blue;
}
li:nth-child(3) a {
color: green;
}
a:hover {
background: red;
color: #fff;
}
li:nth-child(2) a:hover {
background: blue;
color: #fff;
}
li:nth-child(3) a:hover {
background: green;
color: #fff;
}
img {
background: red;
display: none;
height: 301px;
position: absolute;
right: 0;
top: 0;
width: 300px;
}
li:nth-child(2) img {
background: blue;
}
li:nth-child(3) img {
background: green;
}
a:hover + img,
img:hover {
display: block;
}
I have a WordPress site, using Headway Themes (GUI theme creator). I want to create a section on one page that does exactly what the Fiddle does. I also don't want any other similar HTML elements to be affected by the CSS in that fiddle. (i.e. I use LI's elsewhere on the site and don't want them "font: bold 16px/100px sans-serif;" like this example).
For me, this truly baffles my mind and would seriously appreciate some guidance on how to structure this correctly.
I'm sure I need to create an ID (because this page will be unique to the rest of the site) but I'm not sure that this is correct syntax for an ID:
#switch ul {border: 1px solid #444;display: inline-block;height: 301px; position: relative;width: 400px;}, li {font: bold 16px/100px sans-serif;height: 100px;}
(as an example but is essentially what I want to do)
Just had a quick stab at this - As you say, you'll need to add something to limit those selectors to the scope you're interested in. An id is one way of doing this - in that case you would need to update your selectors to look something like: http://jsfiddle.net/2osg7a31/
Two things to look out for:
- ul#switch instead of #switch ul (since you're applying the styles to the ul that has an id of #switch, rather than a ul with a descendant of #switch)
- Make sure all styles for the descendants are limited to the #switch id too, not just those applied directly to the ul tag.
I'd suggest using a class instead of an id might be a better idea, since you're only adding the identifier to allow styling, rather than to try and identify the element uniquely: http://jsfiddle.net/0h54wseL/
Yes, you'll need to use and id or preferably a class which is better if you want to repeat that specific fiddle in other pages of your website. The way to do it is to add a .switch in every css entry for the list style. Then in your HTML put the whole ul inside a div with class="switch".
HTML:
<div class="switch">
<ul>
<li>
Item 1
<img src="" alt=""/>
</li>
<li>
Item 2
<img src="" alt=""/>
</li>
<li>
Item 3
<img src="" alt=""/>
</li>
</ul>
</div>
Here is the fiddle to explain : http://jsfiddle.net/zyd1822w/1/
Also check this link for more info about essential css selectors.
I hope this helps.
Problem
I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.
Requrements
I need to style a h3 tag to have an
underline/border after the content.
This h3 will be used multiple times
on the page, so the conent length can
vary
The solution needs to be
cross-browser (IE 6/7/8, FF 3, &
Safari)
Sample Code
<div class="a">
<div class="b"><!-- etc --></div>
<div class="c">
<h3>Sample Text To Have Line Afterwards</h3>
<ul><!-- etc --></ul>
<p class="d"><!-- etc --></p>
</div>
</div>
Sample Output
Sample Text to Have Line Afterwards ______________________________________
Another Example __________________________________________________________
And Yet Another Example __________________________________________________
Notes
I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags
I tried a background-image, but if it gave me problems if I gave it one with a large width
Using text-indent didn't see to give me the effect I was looking for
I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either
Any ideas would be much appreciated!
This will work if class 'c' is always the parent of the h3...
.c {
position: relative;
margin-top: 25px;
border-top: 1px solid #000;
padding: 0px;
}
h3 {
font-size:20px;
margin-top: 0px;
position: absolute;
top: -18px;
background: #fff;
}
It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.
try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?
.c {
background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
margin: 0;
padding: 0 0 2px 0;
float: left;
font-size: 20px;
background: #ffffff;
}
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
http://besh.dwich.cz/tmp/h3.html
H3 {
border: 1px solid red;
border-width: 0 0 1px 0;
text-indent: -60px;
}
You need to know the width of the text, but works pretty well.
The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:
h3#main-title { background: url(line.png) no-repeat bottom XYZem; }
where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.
this worked for me
div.c
{
background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
}
div.c h3
{
height:20px;background-color:white;display:inline;
}
you make the div the width of your content
then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image
Can you pad content in the UL tags? If so, this might work:
h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }
check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html
then again i have NO IDEA how to control the end of the line.
Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky
Imagine:
A long title that will wrap to two lines___________________
and leave you like this in great_llama's solution
and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.
Solution:
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))
Here's a better answer:
.c {
background: url('line.png') repeat-x 0 20px;
}
H3 {
background-color: white;
display: inline;
position: relative;
top: 1px;
}
Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.
h3:after {
content: '___________';
}