Box-Shadow over child elements? - javascript

I need to make my box-shadow appear like a border: If I have a parent with a inset boxshadow and I put a child div in it, the box shadow should go over the child div like shown here with borders:
jsFiddle: http://jsfiddle.net/7rRsw/2/
Is there anything like a z index for this problem, or a css hack?
Thanks
EDIT: I need to use box shadow inset + no borders or box seizings.
I am searching for hacks to make this possible only with box shadow. A possible hack would be to add box shadows left and right on the child div.

If you want a solution in which you don't need any extra markup, you can use the ":before" pseudo class selector: http://jsfiddle.net/7rRsw/8/
HTML
<div class="a"><div class="b">No extra markup needed</div></div>
CSS
.a {
width: 200px;
float: left;
height: 200px;
margin-right: 100px;
background-color: red;
position: relative;
}
.a:before {
content: '';
position: absolute;
left: 0;
right: 0;
width: 200px;
height: 200px;
box-shadow: inset 0px 0px 0px 2px black;
-webkit-box-shadow: inset 0px 0px 0px 2px black;
-moz-box-shadow: inset 0px 0px 0px 2px black;
}
.b {
width: 200px;
height: 100px;
background-color: yellow;
}

It is because your box shadow is inset. Meaning it will appear inside the box.
Whilst your nested div will cover it. Using a border applies to the outside of the "box".
Removing the inset from your CSS will cause the effect you are after.
See updated fiddle with inset remove. fiddle
box-shadow: 0px 0px 0px 2px black;
-webkit-box-shadow: 0px 0px 0px 2px black;
-moz-box-shadow: 0px 0px 0px 2px black;
UPDATE
To have just the inset box shadow visible, you could make the child div 4px pixels smaller in width than the parent. Then use margins to correctly position the div. However I'm not sure this completely achieves what you are after? See this fiddle.
.a{
width: 200px;
float: left;
height: 200px;
margin-right: 100px;
background-color: red;
box-shadow: inset 0px 0px 0px 2px black;
-webkit-box-shadow: inset 0px 0px 0px 2px black;
-moz-box-shadow: inset 0px 0px 0px 2px black;
}
.b {
width: 196px;
height: 100px;
background-color: yellow;
margin:2px auto 0 auto;
}
UPDATE 2
This "Hack" applies an overlay to the two elements with the box shadow. See fiddle.
HTML
<div class="a">
<div class="b">How it is (Yellow div covers the box shadow)</div>
<div class="shadow"> </div>
</div>
CSS
.a{
width: 200px;
float: left;
height: 200px;
margin-right: 100px;
background-color: red;
position:relative;
}
.b {
width: 200px;
height: 100px;
background-color: yellow;
}
.shadow {
box-shadow: inset 0px 0px 0px 2px black;
-webkit-box-shadow: inset 0px 0px 0px 2px black;
-moz-box-shadow: inset 0px 0px 0px 2px black;
position:absolute;
top:0;
width:200px;
height:200px;
}

One way is to not make your box-shadow inset so that it appears outside the box. But if you really want to use an inset box shadow, you can add a padding to the container element equal to the thickness of the shadow:
.a {
...
padding: 2px;
box-shadow: 0 0 0 2px #000000;
}

Add:
z-index: -1; /** less than the parent in general */
To the child element and it should work.

Give your main element position: relative, then create another div within that element that has:
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 0px 2px black;
What this does is it creates an invisible div that goes over your content, then you apply your box-shadow to that div and it will lay on top of all the elements that were previously covering the shadow. It's like placing a sheet of glass with the shadow etched on to its edges over your element.

Related

How can I create the angle shown on the header with CSS?

I need to create a header that looks like the firs image, however, it can't be an image. Preferably just css, but open to jQuery if there is a way to do this with jQuery.
I have tried many different things, but cannot create the 45 degree angle on the header(just before Home). This is the closest I have gotten. The colors are wrong in this image but that is intentional so that I could better illustrate the issue.
This is part of my latest attempt make this work and I think I am close with it, but it still isn't right.
#header{
float:left;
margin-top:20px;
overflow: hidden;
padding-bottom: 10px;
background-color:#F1F1F1;
-moz-box-shadow: 3px 3px 5px 0px #ccc;
-webkit-box-shadow: 3px 3px 5px 0px #ccc;
box-shadow: 3px 3px 5px 0px #ccc;
width: 100%;
height:130px;
z-index: 1;
}
#secondHeader{
float:right;
background-color:#ffffff;
width:50%;
height: 80px;
position: relative;
margin-top: -50px;
margin-right:15px;
/* border-radius: 15px 15px 0px 20px; */
/* background-color:#ff0000; */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
z-index: 10;
}
#secondHeader::before{
height: 80px;
width: 70px;
border-radius: 10px 10px 10px 10px;
background-color: #f1f1f1;
content: "";
position: absolute;
left: 32px;
top: 0px;
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
z-index: -1;
}
What am I doing wrong? I have worked on this for two days and cannot figure it out.
this is pretty close to what you need. Simply using borders to do this:
#menubar {
width: 40vw;
min-height: 100px;
background-color: rgba(0,0,0,0.1);
}
#menubar ul {
margin-left: 55px;
padding-top: 40px;
}
#angle {
position: absolute;
border-top: 102px solid rgba(0,0,0,0.1);
border-right: 52px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 2px;
}
#angle2 {
position: absolute;
border-top: 100px solid white;
border-right: 50px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 1px;
}
<div id="menubar"><div id="angle"></div><div id="angle2"></div><ul>Menu here</ul></div>

Apply shadow to a triangle SVG using CSS

I was wondering how I could apply shadows to svg images (for example a triangle). I found solutions like polyfill, but it just didn't work the way I wanted it to. I've made a JSFiddle to show you what I would like to give a shadow.
My HTML:
<div class="spikes"></div>
My CSS:
body {
background-color: #ccc;
}
.spikes {
margin-top: 20px;
width: 250px;
transform: rotate(180deg);
background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFhZ18xIiBkYXRhLW5hbWU9IkxhYWcgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogIC AgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZmZmZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQog IDwvZGVmcz4NCiAgPHRpdGxlPmthcnRlbDwvdGl0bGU+DQogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNSAxOS43IDI1IDI1IDAgMjUgMCAyMC4yNSAxMi43NyA3LjQ3IDI1IDE5LjciLz4NCjwvc3ZnPg0K");
height: 20px;
position: absolute;
max-width: 1000px;
transition: 0.75s;
-webkit-box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
-moz-box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
}
You can't apply a shadow to a background-image as it's a CSS property and not an element.
What you can do is apply a filter:drop-shadow to the element instead.
Provided the SVG has transparency / alpha it will look something like this:
body {
background-color: #ccc;
}
.spikes {
margin-top: 20px;
width: 250px;
transform: rotate(180deg);
background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFhZ18xIiBkYXRhLW5hbWU9IkxhYWcgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZmZmZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHRpdGxlPmthcnRlbDwvdGl0bGU+DQogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNSAxOS43IDI1IDI1IDAgMjUgMCAyMC4yNSAxMi43NyA3LjQ3IDI1IDE5LjciLz4NCjwvc3ZnPg0K");
height: 20px;
position: absolute;
max-width: 1000px;
transition: 0.75s;
filter: drop-shadow(-1px -1px 1px black);
}
<div class="spikes"></div>

How to automatically fit a paragraph into a div box

I'm using JQuery to prepend a <p> element into a div however if mainButtonText in the p element is too long, it will be outside of the div.
http://puu.sh/mvm7F/a99aba0b1e.jpg
I want it to look like this: http://puu.sh/mvmEy/c17db01e4a.jpg
Is it also possible to automatically resize the text font size?
html:
<div id="mainButton"></div>
css:
#mainButton {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100px;
height: 40px;
font-family: monospace;
font-size: 12px;
text-align: center;
line-height: 40px;
background: #808080;
color: #fff;
text-decoration: none;
border-radius: 10px;
box-shadow: inset 1px 1px 1px rgba(255,255,255,0.05), inset 0 0 35px rgba(0,0,0,0.6), 0 5px 5px -4px rgba(0,0,0,0.8);
}
#mainButton:hover {
background: #d3d3d3;
}
#mainButton:active {
top: 5px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.4), inset 0 0 35px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.1), inset 0 6px 4px rgba(0,0,0,0.4);
}
javascript:
function changeMainButton() {
'use strict';
$('#mainButton').empty();
$('#mainButton').prepend('<p>' + mainButtonText + '</p>');
}
Thanks for any help! :)
Maybe this could help:
#mainButton {
...
overflow: hidden;
}
You can make the text adjust to its container using
#mainButton {
word-wrap: break-word;
}
You can also resize the font size in relation to its parent element using javascript like http://simplefocus.com/flowtype/ or http://fittextjs.com/ but if you want to control it in granular use #media, em and rem

how can make a div like a box like in image?

hi iam trying to do this
When i open page i need a popup at the center of page and so i created a div and set its display as 'none' .In document.ready i made it like
$("document").ready(function (){
$(".box").show();
});
so it will show the div.
But i want my div as like a popup like in attached image. how can i make a div like that witha 3d small shading and all??
updated code
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
It giving only bottom and right shadow.
Putting .box { box-shadow:-1px 2px 0.2em grey } in the CSS should make it somehow like the image.
.box {
background-color: #FFF;
width: 180px;
height: 80px;
box-shadow: 1px 1px 5px 1px rgba(255,255,255,0.5); /* x-offset y-offset blur size color */
}
For multi browser support, use prefixes like:
-o-box-shadow
-ms-box-shadow
-moz-box-shadow
-webkit-box-shadow
To get the desired result, play around with the x-offset, y-offset, blur and size properties.
Try something like this:
box-shadow: 0px 1px 4px 1px #777;
You can create it with help of http://www.cssmatic.com/box-shadow :
.scenario-callout-text-right {
width: 400px;
height: 200px;
-webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
}

Changing CSS dynamically according to its inner elements

Just look at my code
http://jsfiddle.net/rkumarnirmal/GXAYa/6/
#box_bg is the outer gray box and #box is the inner black box. I used jquery accordion in the #box. What I need is #box_bg should dynamically enlarge or reduce its height according to the size of the inner #box.
Could anyone help me?
Thanks!
Don't specify an absolute height: just use height:auto. With a static position of #box and some padding for the frame the #box_bg will automatically resize to its content.
See http://jsfiddle.net/GXAYa/18/
I'm not sure why you need the position: absolute, so try this as an option and see if it resolves your problem:
#box_bg {
cursor: move;
background-color: #4f575e;
border-radius: 10px;
-moz-box-shadow: 3px 3px 5px 6px #00000;
-webkit-box-shadow: 0px 3px 5px 6px #00000;
box-shadow: 0px -3px 3px 1px #4f575e;
overflow: hidden;
width: 245px;
position: relative;
padding-bottom: 2em;
margin-left: 100px;
margin-top: 150px;
}
#box {
cursor: pointer;
background-color: #24272a;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
box-shadow: 0px 0px 3px 1px #4f575e;
width: 225px;
margin-top: 20px;
padding: 10px;
word-wrap: break-word;
}
JSFiddle here.
Change height:260px; to height:auto;.
UPD: Add position:relative to the #box

Categories