I'm trying to make elements that look like this: http://i.imgur.com/oQr7vBI.png
but so far I've only been able to make something like this: http://i.imgur.com/o2KXgxI.png
Is there a way to move the border inside a little bit ?
span.smallCircle {
position: relative;
top: 20px;
background-color: rgba(145, 142, 142, 0.5);
padding-top: 1px;
padding-bottom: 1px;
padding-left: 11px;
padding-right: 11px;
border: 2px dashed #fff;
border-radius: 20px;
}
Add a box shadow with the same color
box-shadow: 0px 0px 0px 5px rgba(145, 142, 142, 0.5);
Related
What is the right way to place the content inside the box div with rounded corners so it wouldn't overlap?
Blue box is the content div which is inside the white box parent div. I want the header to be within that parent box so that it has rounded corners at the top as well.
When I tried "overflow: hidden;" on parent box, content (blue box) just went down:
.WhiteBox {
box-sizing: border-box;
color: rgb(17, 17, 17);
max-width: 340px;
background-color: rgb(255, 255, 255);
box-shadow: rgba(118, 143, 255, 0.1) 0px 16px 24px 0px;
padding-bottom: 30px;
margin: 65px auto 45px;
border-radius: 12.5px;
}
.BlueBox {
background-color: rgb(50, 116, 186);
height: 35px;
}
Specific CSS Properties
If you want border-radius for less than 4 corners, then you need to use specific properties:
border-top-right-radius: 12.5px;
border-top-left-radius: 12.5px;
Demo
body {
background: #000;
}
.wbox {
box-sizing: border-box;
color: rgb(17, 17, 17);
max-width: 340px;
background-color: rgb(255, 255, 255);
box-shadow: rgba(118, 143, 255, 0.1) 0px 16px 24px 0px;
padding-bottom: 30px;
margin: 65px auto 45px;
border-radius: 12.5px;
}
.bbox {
background-color: rgb(50, 116, 186);
height: 35px;
border-top-right-radius: 12.5px;
border-top-left-radius: 12.5px;
}
<section class='wbox'>
<div class='bbox'></div>
</section>
I have the CSS for the basic design of this rounded box. I have pasted that below. I'm trying to add a blue border with the following design effect (please see image below). Firstly is this possible? If so, any suggestions would be great..
I tried adding just a top border, but it doesn't quite give it the effect i'm looking for.
.contentbox {
border-style: solid;
border-width: 2px;
border-color: rgb(54, 81, 143);
border-radius: 10px;
background-color: rgb(255, 255, 255);
opacity: 0.2;
box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
position: absolute;
left: 190px;
top: 324px;
width: 100%;
height: 524px;
z-index: 118;
}
This Codepen uses different border widths to create a similar effect to what is pictured in the example.Good luck, and I hope this helps.
html, body {
perspective: 100px;
height: 100%;
width: 100%;
margin: 0;
}
div {
margin: 20px;
border-style: solid;
border-width: 4px 1px 1px 1px;
border-color: rgb(54, 81, 143);
border-top-color: blue;
border-radius: 10px;
background-color: rgb(255, 255, 255);
box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
position: absolute;
width: 100px;
height: 100px;
}
<div></div>
I'm trying to recreate this image in CSS.
This is what I got from experimenting, so far. I used box-shadow to act as the second box. I'm not sure if there's a better way to do this?
h4 {
font-family: sans-serif;
text-transform: uppercase;
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
background: white;
box-shadow: 10px 5px 0px 0px #ffffff, 11px 7px 0px 2px #000000;
}
<h4>3. Scouting for a location</h4>
You can achieve this via absolutely position pseudo element. Also avoid property duplication via CSS inheritance.
.border {
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
margin: 15px 15px;
background: white;
position: relative; /* new */
}
/* new */
.border:after {
content: "";
position: absolute;
display: block;
background: inherit;
border-radius: inherit;
border: inherit;
left: 2px;
top: 2px;
width: 100%;
height: 100%;
z-index: -1;
}
<div class="border">3. Scouting for a location</div>
The concept behind using box-shadow is that two shadows, one white and one black, overlap to simulate a second black border. But the black shadow is only visible in the direction from which it is offset from the white shadow, so a gap is apparent between the original border and the black shadow (as shown in the OP's original post).
The "spread radius" of the black shadow could be utilized to eliminate this gap (cleverly demonstrated by Nirav Joshi), but then the curvature of the corners is amplified and the two borders look different.
To duplicate the original border, I'd use ::after to generate an absolutely-positioned pseudo-element and use z-index to place it behind the original element. To further ensure that the border is duplicated exactly, I like Vadim Ovchinnikov's idea of inheriting the border color and radius from the original element.
.border {
position: relative;
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
margin: 15px 15px;
background: white;
}
.border::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 3px;
left: 3px;
border: solid 3px black;
border-radius: 5px;
z-index: -1;
}
<h4 class="border">3. SCOUTING FOR A LOCATION</h4>
Try this example
Hope it will help you.
.border {
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
margin: 15px 15px;
background: white;
-webkit-box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000;
-moz-box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000;
box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000;
}
<div class="border">Title</div>
EDIT
Here now you can see that i made box-shadow to 3px and no longer right side corner.
Use an absolute positioned ::after or ::before pseudo element and have its z-index lower than the element itself.
I'm trying to insert a data-icon to two input fields, but they keep shifting my input fields to the right, like they where adding a margin-left to it.
I'm using z-index:2 to the icons in order to keep them floating above the fields and they do, but the added margin is still there.
Here's my css:
#loginBox input#username, #loginBox input#password {
height: 20px;
width: 120px;
padding: 5px 5px 5px 32px;
border: 1px solid rgb(178, 178, 178);
box-sizing : content-box;
border-radius: 3px;
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
transition: all 0.2s linear;
}
#loginBox [data-icon]:before {
content: attr(data-icon);
font-family: FontomasCustomRegular;
color: #999;
position: relative;
left: 25px;
z-index: 2;
}
And here's a screenshot:
Any thoughts?
Thanks.
Sanjeev and Stéphanie Walter's code in nearly identical
http://www.infotuts.com/email-verification-php/
http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/
[data-icon]:after {
content: attr(data-icon);
font-family: 'FontomasCustomRegular';
color: rgb(106, 159, 171);
position: absolute;
left: 10px;
top: 35px;
width: 30px;
}
position: absolute;
inner radius of input box
<input type="text" class="input-text">
css
.input-text{
border-width: 4px;
border-color: #F85534;
padding: 6px 14px;
width: 540px;
font-size: 16px;
margin: 0px !important;
height: 35px;
-webkit-appearance: none;
z-index: 5;
position: relative;
border-radius:0px;
box-shadow: inset -1px 1px 2px
rgba(43, 40, 40, 0.2),-1px 1px 0px
rgba(43, 40, 40, 0.2),-2px 2px 0px
rgba(43, 40, 40, 0.2);
-webkit-box-shadow: inset -1px 1px 2px rgba(43, 40, 40, 0.2),-1px 1px 0px rgba(43, 40,40,0.2),-2px 2px 0px rgba(43, 40, 40, 0.2);
}
I need inner radius for text box, outer radius should be zero.
EDIT
Image
I'm not sure if you can do it without wrapping the input in a div, this is how i would do it:
HTML:
<div class="input-wrapper"><input type="text" placeholder="text"></div>
CSS:
.input-wrapper {
background: blue;
padding: 3px;
display: inline-block;
}
.input-wrapper input {
border-radius: 5px;
border: none;
font-size: 14px;
padding: 3px;
}
Check a JS-fiddle here: http://jsfiddle.net/qCyKW/