I'm trying to create a box shadow for underneath my header similar to the one on the https://github.com/RaghavMangrola/the-brighton-times project-mockup.
I've already tried adding the property and value
.header {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
but I'm unsuccessful in getting the box shadow to appear.
Could anyone tell me what am i doing wrong? https://gist.github.com/webdevchris/dd10c3e0c585ad94edb0eef793a092c5 Suggestions are greatly appreciated. Thank-You! :)
Your shadow is under your navigation now.
If you remove the background color of .topnav
.topnav {
overflow: hidden;
// background-color: #333;
width: 100%;
}
You will see what I mean. Your shadow actually is there, on it's place ( .header class )
May be you would like to use it like that ?
.topnav {
overflow: hidden;
background-color: #333;
width: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
Related
I need to create an element with shadow like in the mockup:
http://take.ms/UdLFk
But I created only
http://take.ms/lns0J .
I have next styles:
.shadow {
width: 45px;
left: 37px;
position: relative;
box-shadow: 0 0px 2px 2px rgba(0,0,0,0.5);
}
My markup:
<div class=" shadow"></div>
So, how i can get a shadow like in mockup? I searched many articles but they did not help me.
Adding a border-radius (with a small height and a background-color that fits the shadow) to the element will give the shadow a nice rounded effect. Maybe decrease the opacity a little and you'll get pretty close. Also try using z-index: -1 to put the shadow behind the image.
.shadow {
width: 45px;
left: 37px;
position: relative;
box-shadow: 0 0px 4px 2px rgba(0, 0, 0, 0.1);
border-radius: 50%;
height: 3px;
background: rgba(0, 0, 0, 0.1);
}
<div class="shadow"></div>
I try to remove the blue box that appears on click in front of buttons as you can see below:
Before asking, I have made a lot of research, I have tried the solutions given by the following topics:
How to remove focus border (outline) around text/input boxes? (Chrome)
Remove blue box around buttons. HTML
How to remove the blue box shadow border in button if clicked
How do I remove blue "selected" outline on buttons?
How do I remove blue "selected" outline on buttons?
Remove blue border from css custom-styled button in Chrome
How to remove focus around buttons on click
I have tried all the answers! It works on computer but not on mobile.
If you are using a computer, you can try by simulating mobile with the inspector. Here is the button: https://jsfiddle.net/t4ykshst/
#add {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
outline: none;
cursor: pointer;
padding: 10px;
overflow: hidden;
border: none;
-webkit-border-radius: 50%;
border-radius: 50%;
color: rgba(255, 255, 255, 0.9);
text-align: center;
background: #1abc9c;
-webkit-box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
}
#add:active {
opacity: 0.85;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
}
<input type="button" id="add" value="+" title="" style="position: absolute; left: 0px; top: 0px; width: 52px; height: 52px;" />
You can add:
-webkit-tap-highlight-color: transparent;
You can also add this to your stylesheets to define it globally:
input,
textarea,
button,
select,
a {
-webkit-tap-highlight-color: transparent;
}
Refer to here for more information.
* {
-webkit-tap-highlight-color: transparent;
}
Test it.
You just need to add
style="-webkit-tap-highlight-color: transparent;"
There will be no highlighting (at least in Chrome 88+) at all if you remove cursor: pointer from #add selector. And if you need it in the "desktop" mode, use something like this:
#media (min-width: 768px) {
#add {
cursor: pointer;
}
}
-webkit-tap-highlight-color is a non-standard feature (mdn). It won't work in browser like safari 14.
Instead, you can use
{ outline: none; }
or apply it specifically through selector
a:focus,a:visited,a:active{
outline: none;
}
Try it
add to the button style "cursor: default;"
This will make a cursor:pointer; it turns into a "default", but will remove the blue shadow on the buttons on the mobile screen as you want
In addition to all the answers here, you have to also specify the background css property explicitly yourself to the button.
I am trying to set the size of a div to A4 so that every new box start from a new page. But my box is overlapping over the previous page.
I used this code from this post:
.invoice-box {
width: 21cm;
min-height: 29.7cm;
padding: 1cm;
margin: 1cm auto;
border: 1px #eee solid;
background: white;
font-size:16px;
line-height:24px;
color:#555;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
but the pages are overlapping.
How to correct it?
Not an exact fix, but you can set a page break for printing with page-break-after definition.
I'm trying to overlap some text fields with transparency over a background that also has transparency, the problem is that the text fields appear opaque, as if they had no transparency applied, how can I manage for both the field and background to appear with a certain transparency?
This is the div that contains everything:
#wrapper {
width: 940px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
}
And this is my input field:
input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 30px;
padding-top: 5px;
background: rgba(0, 0, 0, 0.8);
color: white;
border: 1px solid black;
}
This is how it looks:
Your code seems to be working great, it just doesn't look all that transparent as the .8 transparency of the black background creates a dark grey which perhaps you aren't quite distinguishing from fully opaque. If you want to check this on your local copy, apply a basic background image (e.g. http://purelycss.com/data-uri-tileable-transparent-patterns/) and you should be able to just about see it below your wrapper and input field.
EDIT: If you're looking to reduce the "black on black" effect, you might want to just reduce the opacity of the 'rgba' - so something more like rgba(0, 0, 0, 0.5) for example. If not this, changing the colour of the base RBG colour might help you out here. It's one of those things you probably just want to play with and tweak.
it looks like it a problem with the stacking of your transparency, to ahcieve a 0.8 transparency on the input box you jsut need to add a further 0.2 transparency to the input (as it has effectively inherited 0.6 of the 0.8 you require from its containing element. see here:
http://jsfiddle.net/e6Z8N/1/
html:
<div id="wrapper">
<input type="text" />
</div>
css:
#wrapper {
width: 940px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
padding:50px;
}
input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 30px;
padding-top: 5px;
background: rgba(0, 0, 0, 0.2);
color: white;
border: 1px solid black;
}
You may need to clear the default browser styles applied to input elements.
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
I am new to the designing/programming world so I am sure the issue is easy to solve. I am trying to add the moz-box-shadow effect to my header. But as soon as I add that component, the header which is taking up space horizontally shortens up. I want the header to be like Twitter's, where they use a shadow effect.
#header {
background-color: #990000;
width:101.3%;
margin-left:-8px;
margin-top:-8px;
height:40px;
-moz-box-shadow: 1px 1px 10px #D7D7D7;
}
Also, the way i have set the width is it likely going to create cross browser issues?
Here's a version similar to what Twitter has:
This is Twitter's version, more or less:
Live Demo (edit)
HTML:
<div id="top-fixed">
<div id="top-bar"></div>
</div>
CSS:
html, body {
margin: 0; padding: 0
}
body {
padding-top: 50px;
background: #c0deed
}
#top-fixed {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
#top-bar {
height: 40px;
width: 100%;
background-color:#00a0d1;
background-image:-webkit-gradient(linear,0 0,0 100%,from(#00a0d1),to(#008db8));
background-image:-moz-linear-gradient(#00a0d1,#008db8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8')";
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
The trick that Twitter is using, is putting in an absolutely positioned box and giving that box a width of 100% and the shadow. Using overflow-x: hidden on it´s parent, you get the effect that you are looking for.
I've been doing shadows with .png's. I see no benefit of using this (esp. since I would assume browsers started supporting .png prior to supporting box shadowssee, for example, Mozila's statement that FF started supporting box shadows in FF3.5,) but of course, if this is better than doing shadows via .png, feel free to leave a comment proving me wrong!