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/
Related
I made this button design in Figma and would like to apply it in CSS.
If you look closely you can see that I applied a highlight with a white shadow on the border
But when I do it with the following CSS lines it just has a shadow inside and not on the border like this image shows.
div {
border-style: solid;
border-width: 0.7em;
border-color: var(--highlight);
box-shadow: inset 0.2em 0.2em 0.4em rgba(255, 255, 255, 0.25), inset -2px -2px 4px rgba(0, 0, 0, 0.25);
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}
<div> Sign Up </div>
how can I apply the highlight/shadow on the border?
I have trying to create the div looks like your Figma design,
I use the combination of normal (outset) box-shadow and inset box-shadow.
The outset was used to give bright shadow and make the div looks stronger, and I saw the figma show the darker inner shadow to make the border looks a little bit 3D.
NOTE: I use border-style: ridge to make the border looks 3D as shown in Your Figma, you can make it flat by using border-style: solid
[Capture attached below
body{
background-color: rgb(50, 53, 90);
}
div {
width: 100px;
margin: auto;
color: white;
padding-top: 4px;
padding-bottom: 4px;
border-radius: .6rem;
text-align: center;
border-style: ridge;
border-width: 0.2em;
border-color: rgb(251, 55, 102);
box-shadow: 0em 0em 1.5px rgba(255, 255, 255, 0.25), inset 0px 0px 5px rgba(0, 0, 0, 0.25);
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}
Using border-style: ridge
body{
background-color: rgb(50, 53, 90);
}
div {
width: 100px;
margin: auto;
color: white;
padding-top: 4px;
padding-bottom: 4px;
border-radius: .6rem;
text-align: center;
border-style: solid;
border-width: 0.2em;
border-color: rgb(251, 55, 102);
box-shadow: 0em 0em 1.5px rgba(255, 255, 255, 0.25), inset 0px 0px 5px rgba(0, 0, 0, 0.25);
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}
Using border-style: solid
Sorry if this is not what you want, I hope you like my answer
<style>
#example3 {
border: 10px solid red;
border-radius: 5px
}
#bg{
background-color: #000;
color: #fff;
padding: 20px;
text-align: center
}
</style>
<div id="bg">
<div id="example3">
<p>A pink shadow.</p>
</div>
</div>
Image showing box shadow effect>
box-shadow: 0 0 25px color-of-choice;
This will create a faint shadow all around the image or block.
Make sure the color matches with your background color.
How do i make my checkboxes transparant? It does work with text fields and buttons but it doesnt seem to work with checkboxes.
This is the form of my code.
#checkbox {
width: 20px;
height: 20px;
cursor: pointer;
vertical-align: bottom;
color: black;
background-color: rgba(0, 0, 0, 0.08);
}
<div class="checkbox check-transparent">
<label>
<input type="checkbox" id="checkbox">Onthoud mij
</label>
</div>
The only thing that can be done for a regular checkbox is making it transparent by decreasing its opacity but it also lightens the tick mark inside if checked. A workaround is, having the checkbox wrapped in a div and changing the color of the checkbox when checked like shown in the snippet below:
#checkb {
width: 20px;
height: 20px;
cursor: pointer;
background: rgba(40,40,40,0.2);
color:black;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
position: relative;
left: -5px;
top: -5px;
}
#checkb:checked {
background: rgba(40,40,40,0.7);
}
.checkbox-container {
position: absolute;
display: inline-block;
margin: 20px;
width: 100px;
height: 100px;
overflow: hidden;
}
<div class="checkbox-container">
<input type="checkbox" id="checkb"/> Input
</div>
You can also (classic method that allows to restyle a checkbox crossbrowser following standards)
take input ahead and outside the label
link the label to its input via attribute for
use a pseudo on label to draw a checkbox via css and also apply size and background.
hide the checkbox
label {
display: inline-block;
}
#checkbox {
display: none;
}
label:before {
content: '';
cursor: pointer;
vertical-align: bottom;
color: black;
background-color: rgba(0, 0, 0, 0.1);
/* average checkbox styling */
line-height: 1.1em;
font-weight: bold;
text-align: center;
font-size: 20px;
height: 20px;
width: 20px;
display: inline-block;
box-shadow: inset 0 0 1px 1px rgb(153, 154, 154), inset 0 0 1px 2px white, inset 0 0 1px 2px white, inset 2px 2px 1px 1px rgb(182, 187, 192), inset -1px -1px 2px 1px rgb(182, 187, 192), inset 8px 8px 4px -4px rgb(182, 187, 192);
box-sizing: border-box;
}
:checked+label:before {
content: '\2713';
color: rgb(74, 95, 151);
}
:checked+label {
color: rgb(74, 95, 151);
}
label:hover {
color: rgb(28, 50, 125);
}
label:hover:before {
box-shadow: inset 0 0 1px 1px rgb(95, 133, 156), inset 0 0 1px 2px rgb(198, 237, 252), inset 0 0 1px 2px rgb(198, 237, 252), inset 2px 2px 1px 1px rgb(134, 203, 246), inset -1px -1px 2px 1px rgb(134, 203, 246), inset 8px 8px 4px -4px rgb(134, 203, 246);
}
<div class="checkbox check-transparent">
<input type="checkbox" id="checkbox">
<label for="checkbox"> Onthoud mij
</label>
</div>
I am trying to get a box shadow on an element wrapped around an input when an input is in focus. but can't get it to work. I have probably structured the code wrong. Snippet bellow
.cam-peoplepicker-userlookup {
margin-right: 55em;
height: 7em;
min-width: 50%;
overflow: hidden;
border: 1px solid #99b0c1;
padding: 2px 5px 2px 5px;
background-color: white;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
}
#k:focus #divAdministrators {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
#*Project Manager*#
<div class="form-group">
<div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
<span id="spanAdministrators"></span>
<textarea id="k"></textarea>
</div>
<div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
</div>
</div>
Thank you all for all the suggestions. really appreciate it!!!
Although you are not using jQuery, but if you would like to use jQuery it may be helpful...
$(document).ready(function() {
$('#k').focus(function(event) {
$('#divAdministrators').addClass('focused')
});
$('#k').blur(function(event) {
$('#divAdministrators').removeClass('focused')
});
});
.cam-peoplepicker-userlookup { margin-right: 55em; height: 7em; min-width: 50%; overflow: hidden; border: 1px solid #99b0c1; padding: 2px 5px 2px 5px; background-color: white; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; }
.focused { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
<span id="spanAdministrators"></span>
<textarea id="k"></textarea>
</div>
<div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
</div>
I think it may not be possible until you are not using js.
You would have to re-structure your HTML to achieve this without Javascript.
.cam-peoplepicker-userlookup {
margin-right: 55em;
height: 7em;
min-width: 50%;
overflow: hidden;
border: 1px solid #99b0c1;
padding: 2px 5px 2px 5px;
background-color: white;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
}
.form-group {
position: relative;
}
#k {
position: absolute;
top: .5em;
left: .5em;
}
#divAdministrators {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#k:focus~#divAdministrators {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
#*Project Manager*#
<div class="form-group">
<textarea id="k"></textarea>
<div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
<span id="spanAdministrators"></span>
</div>
<div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
</div>
In this button a shadow appearing and it looks like another button border there. I tried to use box-shadow property but I failed.
I used this CSS
a {
padding: 10px 40px;
border-radius: 30px;
font-size: 18px;
color: #fff;
border: 1px solid #fff;
box-shadow: 5px 5px 0px #2CBFBB;
}
Can anyone please help me?
You can achieve this effect with filter: drop-shadow and a transparent background:
body {
background: #76D7C4;
}
button {
text-transform: uppercase;
padding: 10px 20px;
color: white;
cursor: pointer;
background: transparent; /* no background! */
border: 1px solid white;
border-radius: 100px;
filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
}
<button>Learn More</button>
Based on chazsolo's answer. It's possible to get shadow on button without shadow on text using absolutely positioned pseudoelement and CSS property inheritance:
body {
background: #76d7c4;
}
button {
text-transform: uppercase;
padding: 10px 20px;
color: white;
cursor: pointer;
background: transparent; /* no background! */
border: 1px solid white;
border-radius: 100px;
position: relative; /* new */
}
button:after {
content: "";
position: absolute;
/* Making pseudoelement the same size as container */
left: 0;
right: 0;
top: 0;
bottom: 0;
/* Inheriting border properties */
border-radius: inherit;
border: inherit;
/* Applying filter with shadow */
filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
}
<button>Learn More</button>
You can also do it by combining box-shadow: ... and box-shadow: inset .... Just adjust the box-shadow so it fits your needs.
Example
body {
background: #32DBD7;
}
button {
background: transparent;
color: #fff;
border: 3px solid #fff;
border-radius: 35px;
padding: 10px 40px;
font-size: 34px;
box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
-moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
}
<button>Learn More</button>
.test { margin-top: 2em; }
a {
padding: 10px 40px;
border-radius: 30px;
font-size: 18px;
color: #fff;
border: 1px solid #fff;
box-shadow: 5px 5px 0 darkgray;
text-decoration: none;
}
body {
background-color: #2CBFBB;
}
<div class="test">
Learn More
</div>
I'm having a strange issue with chrome where the initial rendering of the page is incorrect, but as soon anything is done that forces a redraw (eg. resizing the window) then the layout is rendered correctly. Maximizing also seems to cause problems.
codepen example here
Initial (bad) layout:
Redrawn (good) layout
html,
body {
margin: 0;
padding: 0;
}
.photo-frame {
display: inline-block;
padding: 1.75%;
background-color: #111;
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 1);
}
.photo-matte {
display: inline-block;
padding: 5% 6%;
background-color: #fff;
box-shadow: inset 2px 2px 12px 3px rgba(0, 0, 0, 0.6), inset 0px 0px 1px 1px rgba(0, 0, 0, 1);
}
.photo-inset {
display: inline-block;
border: solid 5px #000;
border-top-color: rgba(170, 170, 170, 1.0);
border-right-color: rgba(216, 216, 216, 1.0);
border-bottom-color: rgba(240, 240, 240, 1.0);
border-left-color: rgba(204, 204, 204, 1.0);
}
img {
height: 70vh;
display: block;
}
<html>
<body>
<div class="photo-frame">
<div class="photo-matte">
<div class="photo-inset">
<img src="http://jlee.me/glow_cube.jpg" />
</div>
</div>
</div>
</body>
</html>
UPDATE: after some more tinkering, this only seems to fail when the CSS height for the is specified.
I think it's a weird bug of Chrome. I can offer you to use vh instead of % in the padding property. I hope it'll give you a similar result.
Also I removed ".photo-inset" block and set borders directly for image.
html,
body {
margin: 0;
padding: 0;
}
.photo-frame {
display: inline-block;
border: 5vh solid #000;
background-color: #111;
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 1);
}
.photo-matte {
display: block;
padding: 5vh 6vh;
background-color: #fff;
box-shadow: inset 2px 2px 12px 3px rgba(0, 0, 0, 0.6), inset 0px 0px 1px 1px rgba(0, 0, 0, 1);
}
img {
height: 70vh;
display: block;
border: solid 5px #000;
border-top-color: rgba(170, 170, 170, 1.0);
border-right-color: rgba(216, 216, 216, 1.0);
border-bottom-color: rgba(240, 240, 240, 1.0);
border-left-color: rgba(204, 204, 204, 1.0);
}
<html>
<body>
<div class="photo-frame">
<div class="photo-matte">
<img src="http://jlee.me/glow_cube.jpg" />
</div>
</div>
</body>
</html>
Seems like this fixed your issue, change:
.photo-matte {
display: inline-block;
}
to:
.photo-matte {
display: block;
}
Remove the display: inline-block; in display: inline-block;
Or you can try adding box-sizing: border-box; for both photo-matte and photo-frame
html, body {
margin: 0;
padding: 0;
/*background-color: #000;*/
}
.photo-frame {
display: inline-block;
/*padding: 30px;*/
padding: 1.75%;
background-color: #111;
/*background-color: rgb(47, 21, 17);*/
box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
}
.photo-matte, .photo-frame{
box-sizing: border-box;
}
.photo-matte {
display: inline-block;
padding: 5% 6%;
/*padding: 50px 60px;*/
background-color: #fff;
box-shadow: inset 2px 2px 12px 3px rgba(0,0,0,0.6), inset 0px 0px 1px 1px rgba(0,0,0,1);
}
.photo-inset {
display: inline-block;
border: solid 5px #000;
border-top-color: rgba(170,170,170,1.0);
border-right-color: rgba(216,216,216,1.0);
border-bottom-color: rgba(240,240,240,1.0);
border-left-color: rgba(204,204,204,1.0);
/*box-shadow: 0px 0px 225px -30px rgba(0,0,0,0.3);*/
}
img {
height: 70vh;
display: block;
}
<div class="photo-frame">
<div class="photo-matte">
<div class="photo-inset">
<img src="http://jlee.me/glow_cube.jpg"/>
</div>
</div>
</div>
Remove display property from class .photo-matte.
please try this:
.photo-matte {
display:inline-block //remove this one
}
Edit your .photo-matte class to match the following code:
.photo-matte {
box-sizing:border-box;
padding:35px;
background-color:#fff;
box-shadow:inset 2px 2px 12px 3px rgba(0,0,0,0.6), inset 0px 0px 1px 1px rgba(0,0,0,1);
display:inline-block;
}