Morning,
I have the following code that works in all browsers other than IE. I want a blue border to appear when clicking on input boxes, however did not want to see the elements resizing and positioning. I fixed this by putting a border colour to match the background colour, thus removing the resizing effect. However, on IE, you get ghost borders which seem to be a combination of both the border radius and border colour (background colour). Any ideas of how to fix this without using box shadow?
Screen Shot showing ghost borders:
input,
textarea,
select {
position: relative;
display: block;
border: 3px solid #4f4f4f;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
&:focus {
outline: none;
border: 3px solid #4cc7fa;
}
}
Many thanks!
You can do like this to overcome the ghost/resize/re-positioning effect, where you change border-width on focus and compensate its re-positioning with a negative top
body {
background: gray;
}
input,
textarea,
select {
position: relative;
display: block;
border: 0px solid gray;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
}
input:focus {
top: -3px;
outline: none;
border: 3px solid #4cc7fa;
}
<input type="text">
I would use the following javascript:
Your-function() {
document.getElementsByTagName('input','textarea','select').classlist.toggle('show')
}
add display:none to input:focus
add the following css
.show
{
display:block;
}
Note: Add onclick="Yourfunction()" to your markup to load the js.
I know i can create in CSS a lot of round corners, but i have never created something like this
I don't need styling for fonts, and heading only for left corner, it is possible to make it like this?
I know i can create moon like this, maybe this is the way?
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
I think it has to be before pseudo class?
Any idea how to make it like my picture?
i guess you want something like this
jsfiddle
just create and element with :before, and make it oval.
to make it oval you need to set border-radius:100%; and the element should have a rectangle form... not a square form.
and then some minor position adjustments.
for this solution to work the background-color of the container where your element is situated ( in this case body ) needs to be the same as the background-color of the :before element
body {
background:#fff;
}
h2 {
color:#fff;
font-size:20px;
padding:10px;
width:200px;
text-align:right;
background:blue;
text-transform:uppercase;
position:relative;
}
h2:before {
position:absolute;
content:"";
background:#fff;
height:120%;
width:50px;
border-radius: 100%;
left:-25px;
top:-10%;
}
<h2>
Predictions
</h2>
You can use radial-gradient for background property of your element without any extra elements or pseudo-elements:
.shape {
width: 200px;
height: 50px;
padding: 0 20px;
line-height: 50px;
color: #ffffff;
text-align: right;
text-transform: uppercase;
font-size: 20px;
background: radial-gradient(circle 26px at 0% 50%, transparent, transparent 25px, #0000ff);
}
<div class="shape">Predictions</div>
More over, you can play with parameters of radial-gradient to get any required arc:
.shape {
width: 200px;
height: 50px;
padding: 0 20px;
line-height: 50px;
color: #ffffff;
text-align: right;
text-transform: uppercase;
font-size: 20px;
background: radial-gradient(circle 41px at -13% 50%, transparent, transparent 40px, #0000ff);
}
<div class="shape">Predictions</div>
Please look at the jsFiddle.
I need to create a solid color inset border. This is the bit of CSS I'm using:
border: 10px inset rgba(51,153,0,0.65);
Unfortunately that creates a 3D ridged border (ignore the squares and dark description box)
You could use box-shadow, possibly:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
<div id="something"></div>
This has the advantage that it will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow you can add additional shadows of course:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
<div id="something"></div>
Edited because I realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over the background:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
padding: 0;
position: relative;
}
#something div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(0, 255, 0, 0.6);
}
<div id="something">
<div></div>
</div>
Edited after #CoryDanielson's comment, below:
jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images.
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
<div id="something"></div>
I would recomnend using box-sizing.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
#bar{
border: 10px solid green;
}
To produce a border inset within an element the only solution I've found (and I've tried all the suggestions in this thread to no avail) is to use a pseudo-element such as :before
E.g.
.has-inset-border:before {
content: " "; /* to ensure it displays */
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 4px dashed red;
pointer-events: none; /* user can't click on it */
}
The box-sizing property won't work, as the border always ends up outside everything.
The box-shadow options has the dual disadvantages of not really working and not being supported as widely (and costing more CPU cycles to render, if you care).
It's an old trick, but I still find the easiest way to do this is to use outline-offset with a negative value (example below uses -6px). Here's a fiddle of it—I've made the outer border red and the outline white to differentiate the two:
.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}
<div class="outline-offset"></div>
If you want to make sure the border is on the inside of your element, you can use
box-sizing:border-box;
this will place the following border on the inside of the element:
border: 10px solid black;
(similar result you'd get using the additonal parameter inset on box-shadow, but instead this one is for the real border and you can still use your shadow for something else.)
Note to another answer above: as soon as you use any inset on box-shadow of a certain element, you are limited to a maximum of 2 box-shadows on that element and would require a wrapper div for further shadowing.
Both solutions should as well get you rid of the undesired 3D effects.
Also note both solutions are stackable (see the example I've added in 2018)
.example-border {
width:100px;
height:100px;
border:40px solid blue;
box-sizing:border-box;
float:left;
}
.example-shadow {
width:100px;
height:100px;
float:left;
margin-left:20px;
box-shadow:0 0 0 40px green inset;
}
.example-combined {
width:100px;
height:100px;
float:left;
margin-left:20px;
border:20px solid orange;
box-sizing:border-box;
box-shadow:0 0 0 20px red inset;
}
<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>
I don't know what you are comparing to.
But a super simple way to have a border look inset when compared to other non-bordered items is to add a border: ?px solid transparent; to whatever items do not have a border.
It will make the bordered item look inset.
http://jsfiddle.net/cmunns/cgrtd/
Simple SCSS solution with pseudo-elements
Live demo: https://codepen.io/vlasterx/pen/xaMgag
// Change border size here
$border-width: 5px;
.element-with-border {
display: flex;
height: 100px;
width: 100%;
position: relative;
background-color: #f2f2f2;
box-sizing: border-box;
// Use pseudo-element to create inset border
&:before {
position: absolute;
content: ' ';
display: flex;
border: $border-width solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: $border-width solid black;
// Important: We must deduct border size from width and height
width: calc(100% - $border-width);
height: calc(100% - $border-width);
}
}
<div class="element-with-border">
Lorem ipsum dolor sit amet
</div>
You can do this:
.thing {
border: 2px solid transparent;
}
.thing:hover {
border: 2px solid green;
}
If box-sizing is not an option, another way to do this is just to make it a child of the sized element.
Demo
CSS
.box {
width: 100px;
height: 100px;
display: inline-block;
margin-right: 5px;
}
.border {
border: 1px solid;
display: block;
}
.medium { border-width: 10px; }
.large { border-width: 25px; }
HTML
<div class="box">
<div class="border small">A</div>
</div>
<div class="box">
<div class="border medium">B</div>
</div>
<div class="box">
<div class="border large">C</div>
</div>
I know this is three years old, but thought it might be helpful to someone.
The concept is to use the :after (or :before) selector to position a border within the parent element.
.container{
position:relative; /*Position must be set to something*/
}
.container:after{
position:relative;
top: 0;
content:"";
left:0;
height: 100%; /*Set pixel height and width if not defined in parent element*/
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:1px solid #000; /*set your border style*/
}
You may use background-clip: border-box;
Example:
.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}
<div class="example">Example with background-clip: border-box;</div>
So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn't look all that good I fixed it with the following:
#top-menu .menu-item a:hover {
border-bottom:4px solid #ec1c24;
padding-bottom:14px !important;
}
#top-menu .menu-item a {
padding-bottom:18px !important;
}
I hope this will help someone out there.
Simpler + better | img tag | z-index | link image | "alt" attribute
I figured out a method where you do not need to use the image as a background image but use the img HTML tag inside the div, and using z-index of the div as a negative value.
Advantages:
The image can now become a link to a lightbox or to another page
The img:hover style can now change image itself, for example:
black/white to color, low to high opacity, and much more.
Animations of image are possible The image is more accessible because
of the alt tag you can use.
For SEO the alt tag is important for keywords
#borders {
margin: 10px auto;
width: 300px;
height: 300px;
position:relative;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right: 0;
z-index: -1;
}
<div id="borders">
<img src="https://i.stack.imgur.com/RL5UH.png">
</div>
Is it possible to somehow create the following in CSS? (See attached image)
What i want to achieve is to be able to change the background-color of the bubble with CSS.
One solution would be to save the background bubble in a bunch of different colors and depending on the color chosen display the correct background image. However this would not be as dynamic as i wish.
Any ideas here?
Something like this was done over at CSS Tricks using pseudo-elements. The only limitation I can think of or foresee is the border that goes around the object... CSS Round-out borders
Using the :after and :before pseudo elements I was able to take the same concept and apply it to create your shape. Again... The only catch is the border. Also... it requires the background behind it to be solid, so that you can mimic the background color... No patterns or transparency here. Try changing the colors of the :after and :before elements and you'll see how its done.
JSFiddle Example
<div class="bubble">
<span>Some Text</span>
</div>
body { background: #999;}
.bubble {
position: relative;
width: 150px;
height: 60px;
border-radius: 10px 10px 0 10px;
border: 1px solid #fff;
background: #444;
}
.bubble:before {
content: " ";
position: absolute;
width: 30px;
height: 30px;
bottom: 0;
right: -30px;
background: #444;
}
.bubble:after {
content: " ";
position: absolute;
width: 60px;
height: 60px;
bottom: 0;
right: -60px;
background: #999;
border-radius: 100%;
}
The other options are nice css approaches but with the border on a shape like that will not be possible with just css.
In my approach I am going to use an svg image.
This is a path in the image and as you can see classes and ids are possible to use on an svg image.
<path class="bubBg" fill="#7C7C7C"
Here is a JSFIDDLE you can play around with.
(currently I believe this is the best option to have that exact design but Michael's answer is pretty good)
Here's what I did: Not exactly the same bubble but similiar, Check it out
Fiddle: http://jsfiddle.net/zD3bV/1/
CSS
#speech-bubble {
width: 120px;
height: 80px;
background: purple;
top: 2px;
position: absolute;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid purple;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}
#talk-bubble {
width:120px;
height:80px;
background:blue;
position:relative;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#talk-bubble:before {
content:"";
position:absolute;
right:100%;
top:26px;
width:0;
height:0;
border-top:13px solid transparent;
border-right:26px solid blue;
border-bottom:13px solid transparent;
}
Also, search for css shapes you'll more likely to get the best results and then you can modify them according to your needs
I have a rectangular div, like the one above. I want to remove the bottom border (from C to D) in my div. How can I do this?.
Edit: Here is my CSS:
#index-03 {
position: absolute;
border: .1px solid #900;
border-width: .1px;
border-style: solid;
border-color: #900;
left: 0px;
top: 102px;
width: 900px;
height: 27px;
}
<div id="index-03"
style="background-color:limegreen; width:300px; height:75px;">
</div>
Just add in: border-bottom: none;
#index-03 {
position:absolute;
border: .1px solid #900;
border-bottom: none;
left:0px;
top:102px;
width:900px;
height:27px;
}
You can either set
border-bottom: none;
or
border-bottom: 0;
One sets the border-style to none.
One sets the border-width to 0px.
div {
border: 3px solid #900;
background-color: limegreen;
width: 28vw;
height: 10vw;
margin: 1vw;
text-align: center;
float: left;
}
.stylenone {
border-bottom: none;
}
.widthzero {
border-bottom: 0;
}
<div>
(full border)
</div>
<div class="stylenone">
(style)<br><br>
border-bottom: none;
</div>
<div class="widthzero">
(width)<br><br>
border-bottom: 0;
</div>
Side Note:
If you ever have to track down why a border is not showing when you expect it to,
It is also good to know that either of these could be the culprit.
Also verify the border-color is not the same as the background-color.
You seem to misunderstand the box model - in CSS you provide points for the top and left and then width and height - these are all that are needed for a box to be placed with exact measurements.
The width property is what your C-D is, but it is also what A-B is. If you omit it, the div will not have a defined width and the width will be defined by its contents.
Update (following the comments on the question:
Add a border-bottom-style: none; to your CSS to remove this style from the bottom only.
You could just set the width to auto. Then the width of the div will equal 0 if it has no content.
width:auto;