Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I need to add progress to table cell background. Here's fiddle: http://jsfiddle.net/kedctfmj/3/
HTML:
<table>
<tr>
<td>value1</td>
<td>
value2
<div class="bg" style="width: 20%"/>
</td>
<td>value3</td>
</tr>
<tr>
<td>value4</td>
<td>
value5
<div class="bg" style="width: 30%"/>
</td>
<td>value6</td>
</tr>
</table>
CSS:
table {
width: 300px;
}
tr:nth-child(odd) {
background-color: #f8f8f8;
}
td {
border: 1px solid #ccc;
}
td {
position: relative;
}
.bg {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: #8ef;
z-index: -1;
}
Closest I was able to achieve is with z-index: -1. But this doesn't play well with tr's background color.
Add a very little opacity to tr elements (so that new stacking context is created for tr elements) and then z-index: -1 will work as expected:
tr:nth-child(odd) {
background-color: #f8f8f8;
opacity: .999;
}
.bg {
/* ... */
z-index: -1;
}
Demo: http://jsfiddle.net/kedctfmj/5/
Another problem that potentially may cause troubles in IE is self-closing <div /> tags. This is not valid syntax, it should have closing tags </div>:
<div class="bg" style="width: 20%"></div>
Have you considered changing the opacity of the .bg item so that the value can still be displayed?
Using the code from your fiddle:
.bg {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: #8ef;
opacity: 0.5;
/*z-index: -1;*/ }
Hope this helps...
-- Lance
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am new in CSS and HTML but I creating website where I need to cover text or picture with another one. I made example in Photoshop what exactly I need:
A solution based on css shadow:
h1 {
font-family: cursive;
text-shadow: -10px -10px 0px rgba(150, 150, 150, 1);
}
<h1>Lorem Ipsum<h1>
Online tools like : https://css3gen.com/text-shadow/ could help you to construct right text-shadow property
The code is self explanatory, Nevertheless if any question leave a comment.
Text
Using text-shadow less flexible for instance the duplicated the text will always be behind the actual text, If we want to reverse this we will have to align the shadow as the actual text and the actual text as the shadow which is a lot janky and not dynamic.
p {
margin: 2rem;
border:1px solid red;
padding:10px;
display:inline-block;
}
p:hover {
text-shadow: -5px -5px red;
}
<p>Lorem</p>
Using pseudo-element highly flexible, Can place the text anywhere, Drawback is must provide the text as an attribute or a CSS variable
p {
margin: 2rem;
padding: 10px;
display: inline-block;
position: relative;
font-size:1.3em;
}
p:before {
color: red;
position: absolute;
top: 40%;
left: 40%;
width:100%;
}
p:nth-child(1):hover:before {
content: attr(data-text);
}
p:nth-child(2):hover:before {
content: var(--data-text);
}
<p data-text="attribute">attribute</p>
<p style="--data-text:'CSS variables';">CSS variables</p>
Image:
[box] {
width: 300px;
height: 300px;
background: url(https://picsum.photos/300);
position: relative;
}
[box]:hover:before {
content: '';
background: inherit;
width: 100%;
height: 100%;
top: 25%;
left: 25%;
position: absolute;
}
<div box></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am restricted to adding an any additional HTML markup to create an overlay div to do this.
However with the markup I have I need to put a dark overlay with opacity over the top of the image.
background: rgba(0, 0, 0, 0.5);
Markup is:
<div class="fusion-image-wrapper">
<a href"#">
<img src="image-path" >
</a>
</div>
Any ideas?
Thanks
You can use ::after so you don't have to add another element
.fusion-image-wrapper a {
position: relative;
display: block;
}
.fusion-image-wrapper a::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}
So you need a transparent image over a black background :)
.darkenImage{
display: inline-block;
background: #000; /* :) */
}
.darkenImage img {
vertical-align: middle;
opacity: 0.5; /* :) */
}
<a class="darkenImage" href="#">
<img src="https://loremflickr.com/cache/resized/4698_27827105189_d6ce3f3401_n_300_200_nofilter.jpg" >
</a>
And if you use a mix of .jpg and .png images you can add background: #fff; to the img styles.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm building a scalable mobile menu icon and the :after pseudo class is not working. This is intended to create 3 black lines to represent the "hamburger" menu icon. The first line is created, the second line is created using the :before pseudo class, however the :after pseudo class is not rendering, thus the third black line is not appearing.
JS Fiddle - https://jsfiddle.net/eeks1swx/
I'm not entirely sure why and I can't seem to figure it out. Any thoughts?
.hamburger {
height: 15px;
width: 20px;
position: relative;
display: block;
cursor: pointer;
box-sizing: border-box;
}
.hamburger__line:before,
.hamburger__line:after,
.hamburger__line {
position: absolute;
height: 20%;
background-color: #000;
width: 100%;
border-left: 0;
border-right: 0;
top: 40%;
}
.hamburger__line:before,
.hamburger__Line:after {
content: "";
height: 100%;
}
.hamburger__line:before {
top: -200%;
}
.hamburger__line:after {
top: 200%;
}
<div class="hamburger">
<div class="hamburger__line"></div>
</div>
.hamburger__line:before,
.hamburger__Line:after {
content: "";
height: 100%;
}
... you have an uppercase L - classes are case sensitive.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I want to add two triangles using pseudo elements after the text in a table header cell. You guessed it, they would represent that the column is sortable. Of course, I can do that using a background image but I want to avoid that traditional solution.
I can add one triangle using the pseudo element :after. That's easy. I cannot use pseudo element :before to add the other triangle because it is placed before the text in the "th" element. If I have to position it, using the :before pseudo element, to be placed after the text, that will not work as a generic solution because each column header has, of course, different text.
Any idea on how to get around this?
DEMO: http://jsfiddle.net/7Wfc8/
HTML
<table>
<tr>
<th>Short</th>
<th>Really much longer</th>
</tr>
</table>
CSS
th {
border: 1px solid red;
padding-right: 30px;
position: relative;
}
th:after,
th:before {
content: " ";
display: block;
height: 0;
width: 0;
border: 5px solid transparent;
position: absolute;
right: 5px;
}
th:after {
top: -2px;
border-bottom-color: lime;
}
th:before {
top: 10px;
border-top-color: lime;
}
Here's a FIDDLE
<table>
<tr>
<th>Text</th>
<th>Text</th>
</tr>
</table>
th {
width: 160px;
padding: 5px;
border: 1px solid #999;
}
th:after {
display: inline-block;
float: right;
width: 10px;
line-height: 11px;
font-family: sans-serif;
font-size: 12px;
color: #0296cc;
content: '▲ ▼';
}
I have a table which looks something like the following.
<table>
<tr>
<td class="selected plus"><a>+</a></td>
<td><a class="minus">-</a></td>
</tr>
</table>
I want that only the selected td is visible. My restrictions are to achieve this only through CSS. I am not able to alter the HTML or inject some kind of JavaScript.
This is what I come up with yet:
position the selected td over the other
expand the selected td to "displace" the other
hide the not selected td
Unfortunately I was not successful with neither of those ideas, so do you guys have any idea how to achieve this?
Here is a jsfiddle to play around with: http://jsfiddle.net/u6n7r/6/
I would be happy with a cross browser solution, but IE9 support is mandatory.
Just hide the <td/> with display: none:
td:not(.selected) { display: none; }
Here is an Update to your Fiddle
Position the table relative. Position the td's absolute, with top:0 and left: 0. Give the td's a z-index of 10. Give .selected a z-index of 11.
.selected {
background-color: green;
z-index: 11;
}
.plus {
}
.minus {
}
td {
width: 30px;
height: 30px;
border: 3px solid red;
background-color: silver;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
table {
border: 3px solid blue;
width: 72px;
height: 36px;
position: relative;
}