Two inline-block elements next to each other.
.e{border:1px #ccc solid}
.e:hover{border-color:#555}
What I'd like is to reduce the 1px+1px border between them to a shared 1px border.
To illustrate.
---------
| | |
---------
Select first element.
+++++-----
+ + |
+++++-----
Select second element.
-----+++++
| + +
-----+++++
It's simple to reduce the 2px border to 1px by setting either border-right or border-left to 0, but how to keep the 1px shared border when either element is selected?
Without JavaScript.
You could give them a -1px left margin to get their borders overlapping and then undo that margin on the first one. Then adjust the z-index on hover (and don't forget position: relative to make the z-index work). Something like this:
.e {
border: 1px #ccc solid;
position: relative;
margin-left: -1px;
}
.e:first-child {
margin-left: 0;
}
.e:hover {
border-color: #555;
z-index: 5;
}
Demo: http://jsfiddle.net/ambiguous/XTzqx/
You might need to play with the :first-child a bit depending on how your HTML is structured; a couple other options if :first-child or another pseudo-class won't work:
Wrap it all in a <div> with padding-left: 1px to kludge around the margin-left: -1px .
Add an extra class to the first one that has margin-left: 0.
Make the :hover state have a 2px border and give it -1px margin on both sides. Make exceptions for :first-child and last-child assuming you don't have to care about every browser out there… I'm looking at you IE6/7
Related
I am customising and Ant Design table with scss and want to add a box shadow when hovering a table header cell. With the following code, the element is surrounded on each of the four sides of the element by a 1px green solid border, but the box shadow only ever shows up on the left hand side of the element, outside of it:
.ant-table-thead>tr>th:hover {
box-shadow: 0 0 6px green !important;
border: solid 1px green !important;
transition: 0.5s;
background: #E8F8F5;
cursor: grab;
}
Here's what it looks like:
How can I add the box shadow to every side of the element, inside and out? I have tried to make it work but I am missing something. TIA.
Try using an offset. For example:
box-shadow: 2px 2px 6px green
This should help.
Also, I'd not recommend using !important in your CSS, as it can cause problems.
How can I create vertical border line on both (left, right) side like facebook using CSS??
I've read several posts on Stackoverflow, but I could not find exactly what I wanted...Anybody know how to make vertical lines(layout)?
Thank you :)
facebook
| contents |
| |
| | <-these two vertical lines on facebook
| |
| |
There are two options:
use css borders and play with box-shadow too
use image lines there
both work fine. I would choose the css solution but there are others who create an image background and place it behind the main content area and then center all content on top of it.
Just apply borders and shadow to these borders (you can change the box-shadow value to fit your needs). Here's a fiddle
.middle {
width:400px;
height:800px;
border-left:1px solid #eeeeee;
border-right:1px solid #eeeeee;
margin:0 auto;
box-shadow: 5px 5px 5px #888888;
}
Specify your content width first. then use
margin : 0 auto;
it will keep your content in the middle of the page with both side equal space blank. then put dashed border on the content. try it. give your feedback.
You can use border-right and border-left here is an example below
#middle-region{
width: 900px;
min-height: 600px;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
margin: auto;
}
I'm looking at making a trapezium with a box shadow that's 10px wider at the top than the bottom. In the past I've made a trapezium as outlined in the following jsfiddle, but you'll notice that if I put a box-shadow onto the element it boxes the outerWidth in a rectangle, rather than putting a shadow on the slanted border:
#trapezium {
margin:20px auto;
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
box-shadow:0 0 10px #333;
}
http://jsfiddle.net/YhePf/8/
My initial thoughts would be to use something along the lines of:
-webkit-transform:perspective(100) rotateX(1deg);
Something like that. While this certainly begins to resolve the issue, I'm not sure what the number 100 refers to in 'perspective', and how I could calculate a formula that would make sure the top width was precisely 10px wider than the bottom, regardless of how high or wide this element is.
Any tips? Or a third option to pull this off?
What you've built isn't a trapezoid (aka trapezium) -shaped element; it's a rectangle-shaped element where the border styling creates the appearance of a trapezoid. This is why the box-shadow is rectangular.
Using the proprietary -webkit-transform property wouldn't change the shape of the actual element.
To create a truly non-rectangular element, you'll need to use SVG. See Multi-Shaped CSS Layers \ Non-rectangular CSS Layer or non-rectangular hoverable area.
I'm using bootstrap to drawing a well. In this well, I create two span6 and would like to draw a vertical divider between these two column. How can I achieve my goal?
Draw the left border on all, but first column:
.well [class^="span"] + [class^="span"] {
margin-left: -1px; /* compensate border width */
border-left: 1px solid #e3e3e3;
}
Alternatively, CSS columns can be used (prefixes required):
.well.col {
columns: 2;
column-gap: 20px;
column-rule: 1px solid #e3e3e3;
}
If you have never use it before, you should check my tutorial on CSS columns.
The selected answer breaks if your elements take up the entire width because the border adds 1px too many! To combat this you can adjust the margin to account for the border.
.line-right {
margin-right: -1px;
border-right: 1px solid black;
}
If you'd like a bigger border, just be sure to account for it in the margin!
You can always use an HTML <hr> tag.
How to make this button is CSS with Angled , Drop shadow, Inset shadow with flexibility in width?
I've tried to make it here http://jsfiddle.net/jitendravyas/6RsnN/ but don't how to give angle to it and how to create cut-out border around it.
And button should be flexible in width.
I'm only making this for iphone so full CSS3 is allowed.
The final result is:
pure css blue button http://img832.imageshack.us/img832/8258/664d7b5656434db68cbee8b.png
Demonstration of flexibility:
Although I tried to make a button like in the picture, but some parts may not be the same. Would consider it a proof of concept.
This button can be pure CSS only with a lot of extra markup with this markup:
<a class="btn">
<span class="triangle"></span>
<span class="btn_inner">
<span class="triangle"></span>
Back
</span>
</a>
The main trick for creating triangles with box-shadow includes several steps:
Step 1. Create element '.triangle' - it will be a wrap for real triangle.
Step 2. Apply position: absolute;, fix its width and height:
red background-color is onle for demo
Step 3. Create big square element '.triangle::before' — it will be 'real' triangle after step 6
Step 4. Turn it 45 degrees (transform: rotate(45deg)).
Step 5. Add box-shadow.
The result after step 3 is:
Step 6. Add overflow: hidden; Ta-dum!
On .tag_inner use the same trick, but box-shadow should be not inset but normal.
Notice, that if you will use this trick always check what vendor prefixes must be used and place property without prefix on the last place.
Update: Make markup more semantic — only one element for triangle trick.
Here's your angle, but since it is already a border, you can't put a border on it:
body {padding:40px; background-color: #1693da;}
.input {
display:block;
text-decoration:none;
padding:10px 60px;
background:#117ebb;
font-size:60px;
color:#fff;
border-radius: 20px;
box-shadow: 0px 10px 0px #003355;
position:relative;
}
.input:after {
position:absolute;
top:0;
left:-32px;
content:" ";
width: 0;
height: 0px;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
border-right:45px solid #117ebb;
}