I cannot seem to Google my way out of this one. I am trying to re-create the input box shown below. I would like to create a subtle transparent border outside the input box (will be a bit less transparent, kind of hard to see in mock-up.)
It seems to be making the border inside of the text box, not outside it. Also it is making a sharp highlight on the bottom of the border (possibly the bottom of the input box itself.)
Mock-up Images
My CSS for the input box
#merchantForm>form>input.inputValue {
border-radius: 3px;
height: 30px; width: 350px;
margin-top: 5px;
font-family: Helvetica,sans-serif; font-weight: bold; font-size: 19px; color: #333;
-moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
border-style: solid;
border-width: 5px;
border-color: rgba(0,0,0,0.3);
}
Any ideas? I'm kind of new to CSS, so any suggestions to improve my CSS is welcomed as well.
The background of an element extends underneath the border by default. To change this behaviour use the following:
-webkit-background-clip: content-box;
-moz-background-clip: content-box;
background-clip: content-box;
Another, simpler option is to use the spread property of CSS box-shadows:
-webkit-box-shadow: 0 0 0 10px hsla(0, 0%, 0%, 0.5);
-moz-box-shadow: 0 0 0 10px hsla(0, 0%, 0%, 0.5);
box-shadow: 0 0 0 10px hsla(0, 0%, 0%, 0.5);
you could just add an input background-image: to your field in your css image sprite and call it a day and have consistency in all browsers.
This should do the trick. =) (Rough sample: http://d.pr/nDaN)
input.custom-input {
width: 250px;
font-size: 20px;
padding: 15px;
border: none;
border: 5px solid rgba(0,0,0,0.75);
border-radius: 5px;
box-shadow: inset 5px 5px 5px #CCC;
}
Related
Inspired by this link and this link, I am trying to make pure CSS folding effect with two requirements:
fully transparent background to show an <IMAGE> behind it (!)
being able to use the FULL height of the <DIV> element inside it (!)
I've tried making mine work but the topright corner doesnt become transparent. If I replace...
border-top: 60px solid red;
with
border-top: 60px solid transparent;
then the background of the rectangle box appears through it. Is there a way to solve this with pure CSS solution? If yes how? If not, then what alternatives are they that come close to CSS? The code/coordinations should be readable, interpretable and easily changeable by humans without the need of a vector based program such as inkscape.
The DEMO where I'm stuck:
https://jsfiddle.net/cg7hoyt3/
Perhaps use a linear-gradient instead of an solid color as a background to your primary div.
The border-width and the gradient stop have a ratio of 1 / sqrt(2) = .7071.
If you're using CSS Custom Properties or a CSS preprocessor this becomes much simpler.
Codepen Demo of variable use
body {
background-image: url("http://hdbackgroundspic.com/wp-content/uploads/2017/09/drop-of-water-background.jpg");
}
div {
width: 230px;
height: 230px;
margin: 50px auto;
background: linear-gradient(-135deg, transparent, transparent 45px, gold 45px, gold);
position: relative;
}
div::after {
content: " ";
position: absolute;
top: 0;
right: 0;
height: 0px;
width: 0px;
z-index: 2;
border-width: 30px; /* note .7071 of gradient-stop */
border-style: solid;
border-color: transparent transparent yellow yellow;
filter: drop-shadow(-2px 6px 6px rgba(0, 0, 0, .5));
}
<div></div>
As suggested in the comments, this can be done with a clipping mask:
clip-path: polygon(0 0, 210px 0, 100% 60px, 100% 100%, 0 100%);
While this can look rather daunting, it is actually really easy to read: just read the points one-by-one, starting from the top left. The points draw a polygon around what will be visible.
Note that clip-mask will only work with modern browsers (IE + Edge not included). See Can I use for up-to-date browser support and Mozilla Plotform Status for up-to-date development status.
Here is the code:
body {background-image: url("http://hdbackgroundspic.com/wp-content/uploads/2017/09/drop-of-water-background.jpg")}
.page {
width: 230px;
height: 230px;
margin: 50px auto;
background: gold;
padding: 20px;
}
.fold {
position: relative;
-webkit-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
-moz-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
-webkit-clip-path: polygon(0 0, 210px 0, 100% 60px, 100% 100%, 0 100%);
clip-path: polygon(0 0, 210px 0, 100% 60px, 100% 100%, 0 100%);
}
.fold:before, .fold:after {
content: "";
position: absolute;
top: 0%;
right: 0%;
width: 0px;
height: 0px;
}
.fold:before {
border-bottom: 60px solid #BBB;
border-right: 60px solid transparent;
-webkit-box-shadow: -5px 5px 5px 5px rgba(0,0,0,0.1);
-moz-box-shadow: -5px 5px 5px 5px rgba(0,0,0,0.1);
box-shadow: -5px 5px 5px 5px rgba(0,0,0,0.1);
}
.fold:after {
border-top: 60px solid transparent;
border-left: 60px solid yellow;
}
<div class="page fold">
<h2>Dear Bettie</h2>
Will you please erase that darn red corner from this folded note love?<br><br>
Thanks xxx<br>Sandra
</div>
I would like to make an HTML widget like this one:
https://jsfiddle.net/api/mdn/
.simple {
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
But I would like it to be pressable so that it flattens for 1 second and redirects to a different URL.
Edit:
I tried the following:
button {
width: 150px;
font-size: 1.1rem;
line-height: 2;
border-radius: 10px;
border: none;
background-image: linear-gradient(to bottom right, #777, #ddd);
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
button:focus, button:hover {
background-image: linear-gradient(to bottom right, #888, #eee);
}
button:active {
box-shadow: inset 2px 2px 1px black,
inset 2px 3px 5px rgba(0,0,0,0.3),
inset -2px -3px 5px rgba(255,255,255,0.5);
}
<button>Press me!</button>
https://jsfiddle.net/z7a0v8uv/
But I don't know how to translate the content of the button to make it look like it's being pressed down.
I found an answer here:
https://www.w3schools.com/howto/howto_css_animate_buttons.asp
I was looking for:
translateX(...) translateY(...)
As we can see in this working example:
https://jsfiddle.net/z7a0v8uv/1/
Now I just need to integrate this with the right style.
Edit:
Here is the complete CSS code:
button {
width: 100%;
border: none;
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
button:focus, button:hover {
background-image: linear-gradient(to bottom right, #888, #eee);
}
button:active {
box-shadow: 2px 2px 2px rgba(0,0,0,0.7);
transform: translateY(3px) translateX(3px);
}
I am trying to fit a image into div but something going wrong, actualy i just want when i set a image into div it should not affect the div property.
i am trying like this:
#image_try {
background-color: white;
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
float: right;
border: 2px;
color: #FF0000;
overflow: hidden;
width: 164px;
display: table;
margin: 0 auto;
padding: 78px 31px 7px 233px;
background: #FFFFFF;
height: 79px;
margin-top: -174px;
margin-right: 25px;
background-image:url(images/weather.jpg) no-repeat;
}
updates:
Actualy when i did not set image in background then div looks like good but when i am setting image its height and width being affected
any idea... answer will be fully appreciate...thank you
I can see few dupe in your css like for background, you using color twice also you are setting it to gradient for Chrome and Firefox. You are repeating margin too. As far as i can under stand your problem was with padding. I removed that only. Kindly check the css and provide screenshot if possible.
#image_try {
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;
border: 2px;
color: #FF0000;
width: 164px;
height: 79px;
background-image:url(images/weather.jpg) no-repeat;
}
Try above edited answer
Here's the code I got from a css button generator I was wondering how to make them all the same size instead of the button adjusting to the text length.
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#42aaff 0%,
#003366);
background: -webkit-gradient(
linear, left top, left bottom,
from(#42aaff),
to(#003366));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #003366;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.5);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.5);
text-shadow:
0px -1px 0px rgba(000,000,000,0.7),
0px 1px 0px rgba(255,255,255,0.3);
}
Just give them all a fixed width according to your largest content.
You can either do it with fixed px or percentage. But the trick is to then do text-align:center and also I'd throw them into a list:
http://codepen.io/anon/pen/CfjcG
well... you need to make an element out of it, that code is to just give you the effects you need for whatever you designed on the button creator, you need to apply it to an element that has a specific size.. for example
.buttons{
width:60px;
height:30px;
float:left;
(all the button stuff)
}
if you want it a different size just change the value of the width and height... this should do it.. let me know if it works.. :)
I have been making a button which (hopefully) looks fairly realistic. One part of this is having the text move down 1px inside the button when it is pressed. I've done this by adding an additional pixel to the top and removing one from the bottom.
Unfortunately, I've designed my button to work inline (inline-block) and when the button is "pushed" it means any text on the line also gets pushed down. Now I think I know why (presumably due to the baseline of the text) but I wonder if anyone knows how I can get the same "pushed" effect whilst keeping surrounding text in place. I would like to avoid floats if possible.
Anyway on with the code:
http://gard.me/xsfqH
HTML:
<a class="button noIcon smaller" href="#">Buy Now</a> hello world
CSS:
a.button {
margin: 20px;
display: inline-block;
padding: 12px 12px 12px 12px;
background: none;
background-repeat: no-repeat;
background-position: 9px 5px;
background-position: 9px 5px, 0 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-width: 1px;
border-style: solid;
font-family: Verdana, Arial, Sans-Serif;
text-decoration: none;
}
a.button:active {
padding-top: 13px; padding-bottom: 11px;
-webkit-box-shadow: inset 0px 1px 6px -1px #000000;
-moz-box-shadow: inset 0px 1px 6px -1px #000000;
box-shadow: inset 0px 1px 6px -1px #000000;
}
a.button.noIcon {
color: #FFECEA;
background-position: 0 0;
background-color: #E46553;
background-image: -o-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: -moz-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: -webkit-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: -ms-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #D15039), color-stop(1, #F27466));
border-color: #A03E33;
}
since it's inline-block you can use vertical-align.
so all you have to do is
a.button:active {
padding-top: 13px;padding-top:11px;
-webkit-box-shadow: inset 0px 1px 6px -1px #000000;
-moz-box-shadow: inset 0px 1px 6px -1px #000000;
box-shadow: inset 0px 1px 6px -1px #000000;
vertical-align:1px;
}
and problem solved