I'm trying to place an image (the bamboo) behind a div (contact form) using "z-index".
However, the image is pushing the div out of the way.
Page can be seen here: http://www.abijahchristos.com/sample/springspa
JsFiddle here: http://jsfiddle.net/Abijah/4n9LZ/
you can use a background property to do it.
try this you do not need z-index
.copy_right {
background: url("../images/bamboo1.png") repeat scroll 0 0 transparent;
border: 2px solid #CCCCCC;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
float: left;
height: 310px;
margin: 0 25px 0 30px;
padding: 5px 0 0;
width: 310px;
z-index: 2;
}
having background image in CSS is valid solution but just incase you dont want background use follwoing.
in case of position absolute you need to have a container with position relative otherwise it will position based on body top left corner.
.copy_right {
position:absolute;
top:0;
width: 310px;
height: 310px;
border: 2px solid #CCC;
margin: 0 25px 0 30px;
padding: 5px 0 0 0;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 3px 10px;
box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px;
z-index: 2;
}
#bamboo {
position: absolute;
z-index: 1;
right: -17px;
top: 0;
}
Related
I want to add a box shadow to a button with a border radius but the shadow itself should lie below the button and within its width range.
I was able to get the rounded border shadow but when trying to position it within the elements width range the border radius effect was lost and instead I got only the shadow without the border radius.
.but1 {
width: 200px;
height: 100px;
border: none;
background-color: yellow;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
}
<button class="but1">
Click me!
</button>
The example of what I got till now is linked below.
Sample output in jsfiddle
Your box-shadow is being cropped because of the negative spread (the last parameter in your box-shadow declaration)
If what you want is a rounded shadow the exact same width of the element, then setting spread to zero and taking 10px out of the vertical offset to compensate will do.
.but1 {
width: 200px;
height: 100px;
border: none;
background-color: yellow;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.8) 0 15px 0px 0px;
}
<button class="but1">
Click me!
</button>
If what you want instead is a shadow that keeps the rounded borders but is shorter than the element width, you can draw a shorter pseudo-element positioned behind it, and apply the box-shadow to the pseudo-element
.but1 {
width: 200px;
height: 100px;
border: none;
background-color: yellow;
border-radius: 10px;
position:relative;
}
.but1:before{
content:"";
position:absolute; top:10px; bottom:10px; left:10px; right:10px;
border-radius:10px;
z-index:-1;
box-shadow: rgba(0, 0, 0, 0.8) 0 15px 0px 0px;
}
<button class="but1">
Click me!
</button>
Add 0px to the box-shadow
.but1 {
width: 100px;
height: 50px;
border: none;
background-color: yellow;
border-radius: 100px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 9px;
}
<button class="but1">
Click me!
</button>
I used :after to achieve this, just an idea, you can play around with the css as wish.
Code:
.but1{
width:200px;
height:100px;
border:none;
background-color:yellow;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
/* -webkit-box-shadow: rgba(0,0,0,0.8) 5px 20px 0px;
-moz-box-shadow: rgba(0,0,0,0.8) 5px 20px 0px;
box-shadow: rgba(0,0,0,0.8) 0px 3px 9px;*/
}
.but1:after {
content: "";
position: absolute;
left: 16px;
width: 84%;
bottom: 37px;
z-index: -1;
border-radius:10px;
transform: scale(.9);
box-shadow: -1px 20px 14px 20px rgba(0,0,0,0.8);
}
<button class="but1">
Click me!
</button>
Update Your Css Like this.
.but1 {
width:200px;
height:100px;
border:none;
background-color:yellow;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,0.8) 0px 7px 8px 1px;
-moz-box-shadow: rgba(0,0,0,0.8) 0px 7px 8px 1px;
box-shadow: rgba(0,0,0,0.8) 0px 7px 8px 1px;
float:left;
}
I have code below. It has several divs and css code. The image pic size is about 45kb,small size. So, I want to know, should I use img directly or use the code below. Which one has the faster speed when page loading. Appreciate.
div.smileyface {
width: 300px;
height: 300px;
position: relative;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
display: block;
background: #ffe632;
background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
background: -moz-linear-gradient(top, #fffe8d, #f6d23e);
box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
}
p.eyes {
width: 50px;
height: 80px;
background: #222;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
position: absolute;
top: 40px;
box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
}
p.eyes.lefteye {
left: 75px;
}
p.eyes.righteye {
right: 75px;
}
div.smile {
width: 200px;
height: 70px;
border: 10px solid #222;
border-top: 0;
background: rgba(0,0,0,0);
-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
border-radius: 0 0 120px 120px / 0 0 90px 90px;
position: absolute;
bottom: 50px;
left: 38px;
box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
}
div.corner {
width: 10px;
height: 30px;
background: #222;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
position: absolute;
top: -12px;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
left: -12px;
}
div.corner.right {
left: 202px;
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg);
}
<div class="smileyface">
<p class="eyes lefteye"></p>
<p class="eyes righteye"></p>
<div class="smile">
<div class="corner"></div>
<div class="corner right"></div>
</div>
</div>
According to YSlow, it is a best practice to Minimize HTTP Requests: use CSS sprites, avoid CSS images, combine files etc.
The overall goal should in the end be to optimize page weight, though.
Since the image is 45KB in this case, I would recommend the CSS solution - it is 2148 chars, which is 2KB. If all CSS is in one file, the CSS solution will save you 43KB and 1 HTTP request.
The CSS Solution might get even smaller with a tool such as FormatCSS and by minification.
45KB sounds like a very big file, unnecessary big even. Optimize Images could also be considered.
Here is a detailed explanation of what to use when. Hope it helps:
When to use IMG vs. CSS background-image?
This is what i have got so far
After after checking out tutorial
I want know how curved effect is generated on divs the only question that i found near to what i was looking for was At here at stackoverlow but that too dint help
How folded edge effect is created on as in the above picture
Css
#MenuShape{
height:50px;
background-color:orange;
width:200px;
position:relative;
text-align:center;
left:100px;
}
#MenuShape:after{
content:"";
position: absolute;
width: 0;
height: 0;
left:200px;
border-top: 50px solid transparent;
border-left: 100px solid orange;
border-bottom: 0px solid transparent;
}
#MenuShape:before{
content:"";
position: absolute;
width: 0;
height: -50;
left:-100px;
border-top: 50px solid transparent;
border-right: 100px solid orange;
border-bottom: 0px solid transparent;
}
HTML
<div id="MenuShape" >
sachin
</div>
https://css-tricks.com/ this the site on inspecting it i found its span wrapped
anchor tag along with svg tag
<a href="/" class="home">
<svg viewBox="0 0 100 25" class="shape-tab">
<use xlink:href="#shape-tab"></use>
</svg>
<span>Blog</span></a>
Click here to see the unexpected behaviour it works fine in codepen
Here is a final demo (archived) on the folded corners:
and the following code is how you can create them:
.note {
position: relative;
width: 30%;
padding: 1em 1.5em;
margin: 2em auto;
color: #fff;
background: #97C02F;
overflow: hidden;
}
.note:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #658E15 #658E15;
background: #658E15;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
/* Firefox 3.0 damage limitation */
display: block;
width: 0;
}
.note.rounded {
-moz-border-radius: 5px 0 5px 5px;
border-radius: 5px 0 5px 5px;
}
.note.rounded:before {
border-width: 8px;
border-color: #fff #fff transparent transparent;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}
<div class="note"></div>
To create a curved wave effect you can use this code:
#wave {
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}
<div id="wave"></div>
To achieve the curve you’ll need to inverse where it starts. Follow the same demo, just reverse your values.
See a live demonstration (archived) of how border radius can create the shapes and effects you want and adjust each corner to see it in action.
This is driving me nuts, I've seen it before but can't replicate it or find it or any resources for it. What I am doing is a vertical ribbon with a leather texture and a "stitched pattern". The way the stitches work is simple enough, inner divs with dashed borders, and even the ribbon shape is easy enough using the pseudo :after class, but combining the two is just not going to plan.
This is what I have for css that is working so far (it is all done with css minus the leather texture):
.wrapleather {
width:100px;
height:120px;
float: right;
margin-right:20px;
background-image : url("leather.png");
border-radius: 5px;
-webkit-box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
position:relative;
}
.wrapleather:after {
content: '';
display: block;
width: 0;
height: 105px;
position: absolute;
top: 0;
left: 0;
border-width: 0 50px 15px 50px;
border-style: solid;
border-color: transparent transparent #cdc0a8;
position:absolute;
top:0;
left:0;
}
.wrapleather .outside {
width:90px;
height:110px;
margin: 4px;
border-radius: 5px;
border: 1px dashed #aaa;
box-shadow: 0 0 0 1px #f5f5f5;
}
.wrapleather .inside {
width:90px;
height:110px;
border-radius: 5px;
}
<div class="wrapleather">
<div class="outside">
<div class="inside">
<p class="font">Leather</p>
</div>
</div>
</div>
Additionally the shadow is remaining in a "square" format and not taking the shape of everything. To clarify I am not asking anyone to debug or anything like that, I am simply asking for alternative or further methods to be shared that could achieve the desired results, css is still something I am in the process of learning so any advice or anything of that nature that you could give would be appreciated, and if you need any additional info please let me know. Thanks!
There is a way to do what you want with CSS only, but it won't work on all browsers. If you want the best browser support, you should probably use an image.
Here is a demo (you may have noticed I only use a single element, as you shouldn't introduce extra markup just for styling): http://jsfiddle.net/joshnh/eUje5/
HTML
<div class="ribbon"></div>
CSS
.ribbon {
background: #eee;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
border-radius: 5px 5px 0 0;
box-shadow: 5px 0 0 #eee,
-5px 0 0 #eee;
height: 120px;
margin: 0 5px;
position: relative;
width: 90px;
-webkit-filter: drop-shadow(0 2px 5px hsla(0,0%,0%,.5));
}
.ribbon:after,
.ribbon:before {
border-top: 15px solid #eee;
content: '';
height: 0;
position: absolute;
top: 100%;
width: 0;
}
.ribbon:after {
border-left: 50px solid transparent;
right: -6px;
}
.ribbon:before {
border-right: 50px solid transparent;
left: -6px;
}
So, I wanted to make sure that I wasn't losing my mind and that this ribbon effect is actually possible on modern browsers without relying on webkit specific filters. So here it is for all those who come across this later.
You just need to be more diligent with how you model your box-shadows.
Note that when increasing the width, you'll need to subsequently decrease the angle at which you're rotating and skewing the :before and :after elements.
Example:
.ribbon {
background: #eee;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
border-top: 1px dashed #aaa;
box-shadow: 5px 0 0 #eee,
-5px 0 0 #eee,
0 -5px 0 #eee,
5px -5px 0 #eee,
-5px -5px 0 #eee,
5px 1px 5px 5px #888;
height: 120px;
margin: 10px 5px 0 5px;
position: relative;
width: 90px;
z-index: 3;
}
.ribbon:after,
.ribbon:before {
content: '';
position: absolute;
top: calc(100% - 1px);
width: calc(50% + 1px);
border-bottom: 1px dashed #aaa;
}
.ribbon:after {
transform: rotateZ(20deg) skewX(20deg) translateY(-2px);
transform-origin: top right;
right: -1px;
height: 40px;
background-color: #eee;
border-right: 1px dashed #aaa;
box-shadow: 5px 0 0 #eee,
0 5px 0 #eee,
5px 5px 0 #eee,
15px 15px 5px -5px #888,
0 15px 5px -5px #888,
15px 0 5px -5px #888;
}
.ribbon:before {
transform: rotateZ(-20deg) skewX(-20deg);
transform-origin: top left;
left: -1px;
height: 40px;
background-color: #eee;
border-left: 1px dashed #aaa;
box-shadow: -5px 0 0 #eee,
0 5px 0 #eee,
5px 5px 0 #eee,
15px 15px 5px -5px #888,
0 15px 5px -5px #888;
}
<div class="ribbon"></div>
I have a box which overlaps another to form a sort of L shape, I am trying to achieve a glow around the whole of the L shape which therefore requires a glow on only 3 sides of one of these boxes.
I've tried using the box-shadow property but can't seem to get it to only work for 3 of the sides, is this the correct method to use or is there another method using borders I could use to achieve a glow on the 3 sides?
Here is the code I've been trying to use
-moz-box-shadow: 0 -1px 5px #80abc6;
-webkit-box-shadow: 0 -1px 5px #80abc6;
box-shadow: 0 -1px 5px #80abc6;
You could use the clip property:
div {
width: 100px;
height: 30px;
margin: 30px;
clip: rect(-15px,115px,45px,0);
position: absolute;
-moz-box-shadow: 0 -1px 15px #80abc6;
-webkit-box-shadow: 0 -1px 15px #80abc6;
box-shadow: 0 -1px 15px #80abc6;
}
Demo: http://jsfiddle.net/QBQJn/
You can do it with css :after property. Like this:
div{
width:100px;
height:30px;
-moz-box-shadow: 0 -1px 15px #80abc6;
-webkit-box-shadow: 0 -1px 15px #80abc6;
box-shadow: 0 -1px 15px #80abc6;
margin:30px;
position:relative;
}
div:after{
content:'';
width:10px;
height:100%;
background:#fff;
position:absolute;
top:0;
left:-10px;
}
Check this http://jsfiddle.net/QBQJn/1/
Here's one way to do it: http://jsfiddle.net/thirtydot/Wec5h/
HTML:
<div id="l">
<div id="v"></div><div id="h"></div>
</div>
CSS:
#l {
padding: 20px;
border: 1px solid red;
float: left;
}
#v, #h {
-moz-box-shadow: 0 0 5px #80abc6;
-webkit-box-shadow: 0 0 5px #80abc6;
box-shadow: 0 0 5px #80abc6;
display: inline-block;
vertical-align: bottom;
position: relative;
}
#v {
width: 48px;
height: 192px;
}
#h {
width: 96px;
height: 48px;
}
#v:after {
content: '';
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 38px;
left: 0;
height: 20px;
background: #fff;
}
#h:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -10px;
width: 20px;
background: #fff;
}