I'm wondering if it's possible to achieve this effect only with css. As you probably noticed the image have 4 borders if you zoom in a little bit(without that bottom shadow, I don't want to use that).
img http://img265.imageshack.us/img265/192/version203.jpg
It appears that the most outward border is already done using CSS with a simple border effect. The outermost border would be a box with a border and some padding to push the image inside. Then going down to the grey box, you could use another box with border: 3px double since the border color is the same as the background color, and adding background-clip: padding-box so that the background will not cover the white line between the double border. It also appears there would be around a 3px border radius on that box and some padding until you get to the actual image which simply has a white border around it.
A simple example of CSS:
span.imgbox {
background: #CCC;
background-clip: padding-box;
border: 3px double #CCC;
border-radius: 3px;
display: inline-block;
padding: 10px;
}
span.imgbox > img {
border: 1px solid #FFF;
}
This is generally what would be involved, assuming you don't want the white box with black border as shown in the actual website view, but just the borders you want that are shown in the image itself.
With box-shadow you can emulate multiple borders. This is exactly what you're looking for:
http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow/
you could mix box-shadow, outline, border, and padding/background-color... but this wouldn't be cross browser..
border: 4px solid #000;
outline: 4px solid #f00;
background-color: #ff0;
padding: 10px;
box-shadow: 0px 0px 0px 4px #333;
demo
I think the only way is to have nested elements.
Related
Inside of my textarea, I wish to maintain a padding of 30px from the top.
textarea {
display: block;
width: 300px;
height: 50px;
padding-top: 30px;
}
However, once the text-area is filled with text and the content starts scrolling. The padding is no longer maintained.
http://jsfiddle.net/w47wbq77/
When you run this fiddle, initially you'll notice that the padding from top (inside of the textarea) is maintained. However, the minute you have more than 150 characters, the padding is gone.
Any solution to this ?
I would remove all styling from the text area, and wrap it in a div that looks like a text area
.wrapper {
border: 1px solid #aaa;
padding-top: 30px;
}
textarea { padding: 0 }
You might have to fiddle about with border radius etc, but that would maybe do it
It looks like for the textarea element the padding is added, but the text is still visible in the padding zone.
I haven't really found a good solution so I came up with a workaround using a combination of border and outline to mimic the padding inside the textarea:
textarea {
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 0px solid transparent;
border-left: 0px solid transparent;
outline: 1px solid #dadcde;
}
The top and bottom transparent borders are the actual padding. They add extra space between between the text and the textarea.
The left and right transparent borders prevent border artifacts left due to how the borders are calculated and drawn in the browsers.
The outline is the actual visible border of the textarea and replaces the border property.
Here's a jsFiddle example to show how it works
I think the correct it's usage a "margin", but for you request can be:
http://jsfiddle.net/Lhderpup/
.padTextarea {
background-color: white;
padding-top: 30px;
display: table;
border: 1px solid #CCC;
}
Adding a new DIV. More about, Margin, Padding, etc:
Difference between margin and padding?
I hope I have helped.
Guys I do have two very simple CSS doing same thing(creating a triangle), i Need your suggestion which one is better.
Example 1
.leftArrow {
border-right: 5px solid #000;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
height:0px;
width: 0px;
}
In example above, i am trying to define border for right, bottom, and top separately. Now the problem is if i do need to change border from 5px to 10px. I need to make changes in 3 declaration.
So it's not good to make change every time in 3 declaration for a single change. Suppose i do have arrow for all(four) direction. In that case i do need to make change in 4 X 3 = 12 declaration.
It's very time consuming :(
Example 2
.leftArrow {
border: 5px solid transparent;
border-left-width: 0px;
border-right-color: #000;
height:0px;
width: 0px;
}
In second example I'm defining border or all sides in first declaration "border: 5px solid transparent;". In second declaration i am replacing left border width from 5px to 0px. and in third declaration replacing right border color from transparent to black.
Now in my opening it's also not a good idea to define border width in first declaration and then change it in second.
Same situation for third declaration. I'm changing border color from transparent to black.
Please give me your opinion for this type of situation or if you do have any better idea :)
Use http://sass-lang.com/ with variables.
If I understood you right, you're problem is, that you don't wanna change the same things over and over again?
Then Less CSS could be something for you, it also allows you to e.g. nest your CSS, the best thing is, you can either compile the Less CSS to "real" CSS or include the less.js and you don't have to compile it (but I recommend the first, so it will also work with browsers, which have JS disabled).
I'd do it like this:
border: 5px solid #000; /* Set base style */
border-width: 5px 5px 5px 0px; /* All 5px except left */
border-color: #000 transparent /* Top/bottom #000, left/right transparent */
height: 0px;
width: 0px;
The first line sets a "base" style that is overridden by the next two border- properties. You can use border-width and border-color to set different colours and widths for each of the four sides of the element.
The border-color property above sets the left colour to transparent, but because the left border-width is 0, it doesn't have any effect.
To make things even easier to change, do this:
border: 5px solid #000; /* Set base style */
border-left: none; /* Get rid of left border */
border-color: #000 transparent /* Top/bottom #000, left/right transparent */
height: 0px;
width: 0px;
Now all you need to change is the first border property. The border-left: none takes care of making sure the left border never shows. You don't have to change
This is pretty much as simple as LESS or alternatives, and sticks to pure CSS.
I'm having trouble visualizing what your are trying to do, but if I understood you correctly, you could do something like this to reduce code rewriting:
Define common arrow properties
.arrow {
border: 5px solid;
color: #000;
height: 0px;
width: 0px;
}
And then turn off the borders where needed
Show the left and bottom border only on the left arrow
.arrow.left {
border-right-color: transparent;
border-top-color: transparent;
}
That way you keep the basic styling in the .arrow block.
I would do it like this:
<div class="arrow arrow-left"></div>
.arrow {
border:5px solid #000;
width:0;
height:0;
}
.arrow-left {
border-left:0;
border-bottom-color:transparent;
border-top-color:transparent;
}
http://jsfiddle.net/pdRYE/15/
In this case you have only one border-width declaration and you are using the second class only to hide the border you don't need.
I applied the following style to the submit button visible in this test page :
border-radius: 25px;
border: none;
background: #FE6181;
box-shadow: 0 0 0px 0.4em #f4f4f4 inset;
padding: 20px;
As you can see there's some awfully irregular pink border which has nothing to do here around the button. Why is that ?
Your inset box shadow doesn't QUITE fill right out to the edges, leaving the background visible.
I'm not familiar with box shadow, but you need a shadow that is both inset and outset, but only outset by about a pixel, so it covers up the outline.
The property "box-shadow" apparently render bad because of the background.
In your case using "border" may solve the problem
border-radius: 25px;
border: 0.4em solid #F4F4F4;
background: #FE6181;
padding: 20px;
I am creating a menu with 4 different color borders. When viewed in Safari 5, the left and right borders go from top to bottom with no angles around the box. When viewed in FF 4, there is a border angle at the border-bottom and border-right elements. This makes the menu look different in different browsers. Here is the CSS for the menu item:
ul#mainnav a {
display: block;
text-decoration: none;
color: #b0c9da;
padding: 7px 7px 7px 14px;
border-bottom: 1px solid #01304f;
border-top: 1px solid #1a74af;
border-right: 1px solid #fff;
border-left: 1px solid #246792; }
Please advise. Thanks
This is caused by the browsers' determination of where to begin the border line and where to end it. Unfortunately there is no fix for this. Your best bet is to pick border colors that are similar enough that they will not stand out so tremendously.
Another option, requiring modern browsers / CSS3 support, would be to use a box-shadow on the element. For example:
box-shadow: inset 1px 1px 1px rgba(255,0,0,1),
inset 1px -1px 1px rgba(0,255,0,1);
You can add multiple layers of box shadows of only 1px width, and specify the direction that they "drop". Could be fun to play with.
This question already has answers here:
Placing border inside of div and not on its edge
(15 answers)
Closed 1 year ago.
On click I am adding, 1px border to div, so Div size increases by 2px X 2px.
I dont want to get div size increased. Is there any simple way to do so?
Messy Detailed Explanation
Actually I am adding DIVs with float:left (same size, like icons) to a container-div, so all stacks up one after another, and when (container-div width is 300px) no space left width-wise so child DIVs comes in next row, so its like catalog, but because of border only selected DIV size get increased, DIV under selected DIV goes to right and creates empty space below selected DIV.
EDIT:
Decreasing Height/Width on selection, but how to increase it back. Using some 3rd party framework, so don't have event when DIV loses selection..
This is also helpful in this scenario. It allows you to set borders without changing div width
textarea {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Taken from http://css-tricks.com/box-sizing/
If you don't have a border-radius change border to outline:
outline: 1px solid black;
Having used many of these solutions, I find using the trick of setting border-color: transparent to be the most flexible and widely-supported:
.some-element {
border: solid 1px transparent;
}
.some-element-selected {
border: solid 1px black;
}
Why it's better:
No need to to hard-code the element's width
Great cross-browser support (only IE6 missed)
Unlike with outline, you can still specify, e.g., top and bottom borders separately
Unlike setting border color to be that of the background, you don't need to update this if you change the background, and it's compatible with non-solid colored backgrounds.
The border css property will increase all elements "outer" size, excepts tds in tables. You can get a visual idea of how this works in Firebug (discontinued), under the html->layout tab.
Just as an example, a div with a width and height of 10px and a border of 1px, will have an outer width and height of 12px.
For your case, to make it appear like the border is on the "inside" of the div, in your selected CSS class, you can reduce the width and height of the element by double your border size, or you can do the same for the elements padding.
Eg:
div.navitem
{
width: 15px;
height: 15px;
/* padding: 5px; */
}
div.navitem .selected
{
border: 1px solid;
width: 13px;
height: 13px;
/* padding: 4px */
}
set a border on it before you click to be the same color as the background.
Then when you click just change the background color and the width will not change.
Another good solution is to use outline instead of border. It adds a border without affecting the box model. This works on IE8+, Chrome, Firefox, Opera, Safari.
(https://stackoverflow.com/a/8319190/2105930)
I usually use padding to solve this issue. The padding will be added when the border is not there and removed when it is back. Example:
.good-border {
padding: 1px;
}
.good-border:hover {
padding: 0px;
border: 1px solid blue;
}
See my code here: https://jsfiddle.net/3t7vyebt/4/
Try this
box-sizing: border-box;
Sometimes you don't want height or width to be affected without explicitly setting either. In that case, I find it helpful to use pseudo elements.
.border-me {
position: relative;
}
.border-me::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: solid 1px black;
}
You can also do a lot more with the pseudo element so this is a pretty powerful pattern.
Just decrease the width and height by double of border-width
You can do some fancy things with inset shadows. Example to put a border on the bottom of an element without changing its size:
.bottom-border {
box-shadow:inset 0px -3px 0px #000;
}
Try decreasing the margin size when you increase the border
I needed to be able to "border" any element by adding a class and not affect its dimensions. A good solution for me was to use box-shadow. But in some cases the effect was not visible due to other siblings. So I combined both typical box-shadow as well as inset box-shadow. The result is a border look without changing any dimensions.
Values separated by comma. Here's a simple example:
.add_border {
box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}
jsfiddle
Adjust for your preferred look and you're good to go!
We can also use css calc() function
width: calc(100% - 2px);
subtracting 2px for borders
You can try a box-shadow inset
something like this:
box-shadow:inset 0px -5px 0px 0px #fff
adds a white 5px border to the bottom of the element without increasing the size
.filter_list_button_remove {
border: 1px solid transparent;
background-color: transparent;
}
.filter_list_button_remove:hover {
border: 1px solid;
}
You can create the element with border with the same color of your background,
then when you want the border to show, just change its color.
In case content of your div is rendered dynamically and you want to set its height, you can use a simple trick with outline:
button {
padding: 10px;
border: 4px solid blue;
border-radius: 4px;
outline: 2px solid white;
outline-offset: -4px;
}
button:hover {
outline-color: transparent;
}
Example here: https://codepen.io/Happysk/pen/zeQzaZ