The quickest way to demonstrate this is https://jsfiddle.net/9jL30wjh/1/
I have a responsive table that stacks on a mobile device. Pretty simple but I want the white borders on the table to be transparent through to the body background. If I set the borders to transparent then the background of the actual cell is shown so the whole table looks like a block colour (actually an opacity but I don't think this matters). That makes sense I guess but since I cant have a margin on the table cells, I can't decide how to work around this or even if I can in this setup. Can anyone shed any light?
I am using the following CSS for a display: table layout.
body {
background-color: #3498db;
color: #fff;
}
.pcp-table {
display: table;
table-layout: fixed;
width: 100%;
background: transparent;
padding: 10px 0 3px 0;
}
.pcp-table__row {
display: table-row;
width: 100%;
border-bottom: 1px solid;
background: transparent;
}
.pcp-table__cell {
display: table-cell;
background: rgba(255, 255, 255, 0.4);
height: 30px;
line-height: 30px;
padding: 0 10px;
border-right: 7px solid;
border-bottom: 1px solid;
}
I belive I achieved your desired effect. See this fiddle.
All that I do was add the following lines of code
.pcp-table {
border-spacing: 1px;
}
.pcp-table__cell {
border: 0;
}
#media screen and (max-width: 768px) {
.pcp-table {
border-spacing: 0;
}
.pcp-table__cell {
margin-bottom: 1px;
}
}
The trick was not to use an actual border but to simulate it using either border-spacing or margins.
Later edit: Another cool way to achieve this effect is by using background-clip: padding-box; combined with border-color: transparent;. You can see this example in this fiddle.
From background-clip docs:
The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.
Related
I have my column's borders change size when they are hovered on. But it moves the position of my image below them. I tried increasing the margin bottom of the columns so that it doesn't effect the image. But that did not work. I also tried using the z-index property, but that had no effect as well. What is the best way to fix this issue?
Code Pen: https://codepen.io/isaiahwebdev/pen/zWjyEJ
.plans-col {
width: 33.33%;
float: left;
padding: 10px;
margin-bottom: 40px;
text-align: center;
}
.plans-price:hover {
cursor: pointer;
border: 10px solid #eee;
}
.plans-price .title {
margin: 50px 0;
}
It's because of a border that is different width when you hover. Whenever you are applying any transformation, the borders need to stay the same width. The trick is to apply the transparent border for the object before hover.
.plans-price {
list-style: none;
border: 10px solid transparent;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.082), 0 6px 20px 0 rgba(0, 0, 0, 0.082);
}
.plans-price:hover {
cursor: pointer;
border: 10px solid #eee;
}
Now, I have seen that your original plans-price had border of 1px. You have a few options here:
use my solution where object doesn't have initial border,
keep my solution for the transparent border but add 'faux border' using solid inset box-shadow of 1 px and the desired color or
change the initial border width to 10px
Enjoy :)
I want to create a table with the following look:
At first it might look easy, but it's actually not:
The background image is tricky since it spans over several elements with no common parent
Table cells must have abnormal sizes, which tables don't usually like
The hover overlay must exclude the part of the column that sticks out
Here is a base fiddle you can use to test. It contains the basic markup + styles for the table. Everything without the abnormal table cells and hover effect.
I'm using the :before pseudo element in td to create the blue background and the :after to create the 0.5 opacity image with multiply blending mode.
I offset the background image in each table cell via background-position. The first cell has 0 offset, the second one has 100%, third one 200% etc. They seamlessly align alright.
What I've tried
I forked the above fiddle, trying to make it visually correct. I almost made it. Here's the result. There are problems, though:
I created the hover effect via an :after pseudo element in the tr element. However, that required me to make the element have a block display (because elements with display table-row can't have pseudo elements apparently). This means that if the cells don't have min-width or they simply have more content, all columns would be misaligned and the table wouldn't look like a table. Can be seen in the fiddle.
Because I use percentage based offset in background-position for each table cell's background, having a single cell slightly larger or smaller ruins the alignment of the background image since that percentage is based on the size of the element itself and not on those before it. In the fiddle, you can clearly see that background image is just thrashed.
Question
You can obviously do that very easy with 4 elements next to each other and some JavaScript for the hover effect perhaps. However, is it possible to create this layout while preserving a semantically correct table markup? I.E. using a <table> element.
Feel free to use this fiddle for testing.
I have kept your layout as is, I only added a wrapper
On the other side, the special popping out column is made only with an pseduo element. This way, I can adjust to the top, but not to the bottom. That's why the container is needed, to cut the bottom of the pseudo.
The shadows in the bottom need a little adjustment, but otherwise I think that the result is ok.
.container {
margin: 20px;
overflow: hidden;
}
table {
margin: 10px 10px 20px 10px;
background: #F0F6F7;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.16);
border-radius: 5px;
border-collapse: collapse;
}
tr:hover td {
background: rgba(255, 0, 0, 0.2);
}
tr + tr td, tr + tr td.pop:before {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
tr:first-child .pop:after, tr:first-child .pop:before {
top: -10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
tr:last-child .pop:after, tr:last-child .pop:before {
}
td {
min-width: 150px;
box-sizing: border-box;
padding: 16px 10px 15px 10px;
color: #787878;
font-family: Roboto, sans-serif;
font-size: 16px;
text-align: center;
}
td + td {
border-left: 1px solid rgba(0, 0, 0, 0.05);
}
td.pop {
position: relative;
z-index: 0;
color: #FFF;
}
td.pop, td.pop + td {
border-left: none;
}
tr:first-child td.pop:after {
content: '';
position: absolute;
top: -10px;
right: 0;
left: 0;
z-index: -2;
background: url('https://i.imgur.com/lcKmrnE.jpg') #539BFC;
background-blend-mode: screen;
opacity: 0.75;
height: 1000%;
}
tr:last-child td.pop:after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
z-index: -1;
height: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 2px 2px 2px 0px lightgray, 0px 10px 0px 10px white;
}
<div class="container">
<table>
<tbody>
<tr><td>Josh</td><td class="pop">3 BTC</td><td>$46,343</td><td>27/12/17</td></tr>
<tr><td>Anne</td><td class="pop">2 BTC (veeery big cell)</td><td>$38,452</td><td>26/12/17</td></tr>
<tr><td>Jack</td><td class="pop">6 BTC<br><small>bigger</small></td><td>$126,989</td><td>26/12/17</td></tr>
<tr><td>Gyumur</td><td class="pop">0.7 BTC</td><td>$14,104</td><td>24/12/17</td></tr>
<tr><td>Boggy</td><td class="pop">12 BTC</td><td>$267,766</td><td>21/12/17</td></tr>
</tbody>
</table>
</div>
For an example, check out this fiddle (not in IE, please).
(You can see a description of the control at this link.)
She uses -ms-fill-lower and -ms-fill-upper to control the color on either side of the thumb, like this:
input[type=range]::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
(source: brennaobrien.com)
However, as far as I can tell, the ... ::-ms- ... pseudo-elements only work in IE. In Chrome, the code above seems to have no effect. In Chrome, I just end up with this:
(source: brennaobrien.com)
What can I do to achieve this effect cross-browser?
Thanks!
You can achieve this effect using gradient, look here: http://codepen.io/ryanttb/pen/fHyEJ
For example:
input::-moz-range-track{
background: linear-gradient(90deg,black 50%,grey 50%);
}
Of course you need js as well to change percentage values.
For anyone else finding this - with HTML5 now standard background-size is a great option if you don't want the fading look of a gradient. I've built my ranges around the tutorial at https://www.w3schools.com/howto/howto_js_rangeslider.asp.
So my solution was in css:
.slidecontainer {
display:inline-block;
vertical-align:middle;
width: 60%;
position:relative;
margin:5px 0;
background:url('/images/cyan_back.png') no-repeat left top;
background-size:0 14px;
border-radius:7px;
}
Then with jquery:
$('.slidecontainer').css('background-size',$(this).val()+'% 14px');
I believe this is also a bit more cross browser friendly.
I have this issue with <input type="text">where I see some extra border in top and left of the input box.
I have this CSS code -
#add{
width: 60%;
height: 25px;
margin: 0 auto;
border: auto;
border-radius: 10px;
}
I am attaching the screenshot from chrome. Firefox shows the same thing.
Try
#add{
width: 60%;
height: 25px;
margin: 0 auto;
border: none; /* <-- This thing here */
border:solid 1px #ccc;
border-radius: 10px;
}
By setting it to border:none the default css of the text field will be gone and your ready to style it for yourself.
Demo
#add {
width: 60%;
height: 25px;
margin: 0 auto;
border: 1px solid black;
border-radius: 10px;
}
Border auto is doing that for you. So have your own defined border style.
I noticed in Chrome that the user agent style that causes this specific look is border-style: inset; You can see it in the snippet below. Chrome is handy about indicating the user agent styles. I found two ways to fix this appearance.
Simply set border: 1px solid black; and you notice that the border will lose that inset look.
If you want extra caution, you can set border-style: none; This will cause the border to disappear altogether. You can then set the border as you wish.
I would test any of these solutions across different browsers.
Chrome User Agent Stylesheet:
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset; /* This rule adds the inset border */
border-color: initial;
border-image: initial;
}
By setting the border: none; will override/nullify the default input css of the text field and then you can add your own custom css to beautify the input text element like so:
border: none; /*removes the default css*/
border: 1px solid black; /*your custom css*/
border-radius: 10px; /*your-border radius*/
However the above method is unnecessarily tedious whereas you could achieve the same result in just a single line with:
border-radius: 10px !important; /*this simply does the trick!!!*/
**Note:** The !important property in CSS is used to provide more weight (importance)
than normal property. It means that “this is important”, ignore all the subsequent
rules
<input type="text" style="border-radius: 25px;" /> 100% works
Try this thing
I'm having trouble figuring out how to apply a split border on an element using CSS.
The effect I'm trying to achieve is this:
Where the red line and the grey line take up a % of the elements width. Preferably, I would like to apply this effect to an element using a single class.
Edit: for those asking for a code sample:
<!-- spans width 100% -->
<div id="wrapper">
<h1 class="title">DDOS Protection </h1>
</div>
Red text and a red underline? There's some simple CSS for this.
<span style='color:red; border-bottom: 1px solid red;'>DDOS</span>
<span style='color:#999; border-bottom: 1px solid #999;'>Protection</span>
Well, assuming that you want to use a single class, and without seeing your exact markup, this will work:
<div class="message">
<span>DDOS</span>
<span>Protection</span>
</div>
And then your CSS could look like this:
.message span {
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
color: #ccc;
}
.message span:first-child {
border-bottom-color: red;
color: red;
margin-right: 10px;
}
Here's a jsFiddle demo.
You can also try to play with :before and :after:
.line {
background-color: #DDD;
padding: 5px 10px;
position: relative;
}
.line:before, .line:after {
content: '';
width: 10%;
height: 2px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
.line:after {
width: 90%;
background-color: green;
left: 10%;
}
http://jsfiddle.net/DHDuw/
Ok I've made a similar one but that was asked for vertical, but now am changing the gradient direction so that it will help you
Demo (Works On Chrome, If Anyone Knows Cross-Browser, Please Feel Free To Edit, Because Am Using Old Browsers So Won't Be Able To Test)
CSS
div {
font: 40px Arial;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0505), color-stop(50%,#ff0000), color-stop(50%,#000000), color-stop(100%,#000000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}