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;
}
Related
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 need to make this using only css and css3 drop shadows
Please help to make like this using css...
Image : http://technocodes.us/Lab/Html/vidbees/img/frame.png
ADDED MORE TO THE ANSWER:
I looked into this. I believe this is the solution. Not using images at all, only CSS.
This is not the full solution, but I believe this is the solution. You should get the idea and solution to run from from here I think:
This is the result:
(Here is the fiddle: http://jsfiddle.net/uwfL5azw/3/ )
Here is the place that inspired me, and I lend code from: http://www.themeshock.com/css-drop-shadow/
The HTML:
<div class="main-box">
<div class="box_shadow">Here is my content
<div class="sh_bottom"></div>
</div>
</div>
The CSS:
.main-box {
padding: 0 0 0 30px; /*just for the box's content*/
}
.sh_bottom:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 150px;
height: 100px;
z-index: -1;
background: rgba(0, 0, 0, 0.2);
box-shadow: -20px 30px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: -20px 30px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: -20px 30px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-10deg,-10deg) translate(40px,-15px);
transform: skew(-10deg,-10deg) translate(40px,-15px);
-moz-transform: skew(-10deg,-10deg) translate(40px,-15px);
}
.sh_bottom:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 150px;
height: 100px;
z-index: -1;
background: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.3);
box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(10deg,10deg) translate(-40px,-15px);
-webkit-transform: skew(10deg,10deg) translate(-40px,-15px);
transform: skew(10deg,10deg) translate(-40px,-15px);
}
.box_shadow {
padding:20px;
width: 374px;
min-height: 200px;
margin: auto;
background: #ccc;
border: 5px solid white;
position: relative;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 1px; box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 1px;
}
MORE:
See fiddle: http://jsfiddle.net/uwfL5azw/5/
This is only a little example of drop shadows.
For an example more helpful, I need of you code, or a web page with a result similar at your.
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
<div>Hello world!</div>
Thank you and bye,
Giacomo
How about this it is made of two divs
#box {
width:200px;
height:200px;
background:grey;
margin:20px;
border:2px solid white;
box-shadow:0px 16px 20px black;
}
#b {
position:absolute;
width: 0px;
height: 0px;
border-left: 250px solid transparent;
border-right: 250px solid transparent;
border-bottom: 100px solid white;
margin-left:-130px;
margin-top:-17px;
}
<div id="box"></div>
<div id="b"></div>
Without using two divs [Fiddle]http://jsfiddle.net/udq412fe/3/)
#box {
width:200px;
height:200px;
background:grey;
margin:20px;
border:2px solid white;
box-shadow:0px 16px 20px black;
}
#b {
position:absolute;
width: 0px;
height: 0px;
border-left: 250px solid transparent;
border-right: 250px solid transparent;
border-bottom: 100px solid white;
margin-left:-130px;
margin-top:-17px;
}
<div id="box"></div>
I have a feeling I have my stacking contexts messed up, but I cannot get this working.
I have several divs, for which z-index is working correctly, however, one child is not cooperating.
My HTML looks something like this:
....
<div id="filters">
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="set">
<img src="Cat.png">
<div class="drop">
<img src="Hammer.png">
<img src="Cat.png">
<img src="Bat.png">
</div>
</div>
</div>
....
My CSS looks something like this:
#filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
padding: 0px 0px;
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
z-index: 1;
}
.filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
z-index: 4;
}
.set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
position: relative;
z-index: 3;
}
.drop {
position: relative;
z-index: 2;
width: 20px;
padding: 8px 4px 2px 4px;
top: 2px;
left: -6px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
}
What I am trying to do is to get the .drop behind the .set, which is behind the filter but all of them are ontop of .filters. With my code, everything is displayed properly except that .drop is ontop of .set.
Sorry to say that this is not possible. A child element cannot have a lower z-index than the parent element.
More on that topic
//text code
body{
padding:0;
margin:0;
}
#filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
}
.filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
border:1px solid gold;
}
.set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
border:1px solid black;
}
.drop {
position: relative;
width: 20px;
padding: 8px 4px 2px 4px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
border:1px solid cyan;
margin-top:-138px;
position: absolute;
right:21px;
transition:all 0.5s linear;
z-index:-1;
}
#filters .set:hover .drop{
margin-top:0px;
transition:all 0.5s linear;
}
Im creating a ribbon using css. the page it is on is FOUND HERE
I know the rest of my page needs more work but right this second I am focusing on the ribbon.
I need it to be auto 90% and center no matter what the screen size. at the moment it is cut off on the left a little and not center.
my css code:
.ribbon {
width: 90%;
position: absolute;
text-align: center;
font-size: 15px!important;
background: #2cdb1c;
background: -webkit-gradient(linear, left top, left bottom, from(#2cdb1c), to(#618028));
background: -webkit-linear-gradient(top, #2cdb1c, #618028);
background: -moz-linear-gradient(top, #2cdb1c, #618028);
background: -ms-linear-gradient(top, #2cdb1c, #618028);
background: -o-linear-gradient(top, #2cdb1c, #618028);
background-image: -ms-linear-gradient(top, #2cdb1c 0%, #618028 100%);
-webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
font-family: 'Helvetica Neue',Helvetica, sans-serif;
}
.ribbon h1 {
font-size: 23px!important;
color: #000000;
text-shadow: #b9c9b5 0 1px 0;
margin:0px;
padding: 15px 10px;
}
.ribbon:before, .ribbon:after {
content: '';
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #379c27;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
-webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
-webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
border-color: #000000 transparent transparent transparent;
position: absolute;
display: block;
border-style: solid;
bottom: -1em;
content: '';
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
.ribbon-stitches-top {
margin-top:2px;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
}
.ribbon-stitches-bottom {
margin-bottom:2px;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
}
Can someone please help me? thank you.
It can't be positioned as absolute. Remove that. Make sure its parent has 100% width and then set margin:0 auto;
You could put your entire ribbon inside a divide. Then instead of centering the ribbon just give it a width of 100%.
ribbon_divide {
margin: 0 auto;
width: 90%;
}
You should wrap ribbon element and set width=100% for ribbon.
.ribbon-wrapper {
position: relative;
width: 90%;
margin: 0 auto;
}
.ribbon {
width: 100%
}
<div class="ribbon-wrapper">
<!-- Your ribbon html code -->
</div>
Just wrap your ribbon with a div.
<div style="width:90%;margin:0 auto;">
<div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>Xclo.mobi</h1></strong><div class="ribbon-stitches-bottom"></div></div>
</div>
You could actually center it based on percentage and absolutely:
.ribbon {
position: absolute;
width: 90%;
left: 50%;
margin-left: -45%;
}
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/