Is it possible to create multiple horizonal evenly spaced lines using only CSS? I am trying to replicate the look of a notecard and I would prefer not to use images. Seems like this should be possible. It looks like this person accomplished what i want to do, but they are using mozilla specific tags: Fiddle
Guess I have to add in code if I include a fiddle link.
The CSS from that page:
div {
background:
-moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;
border: 1px solid #f6f6f6;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 30px auto;
padding: 22px 15px 40px;
position: relative;
width: 400px;
color: #444;
}
h1 {
font: 24px/26px 'Helvetica Neue', Arial;
margin: 0 0 6px;
}
li {
font: 12px/16px Georgia;
margin: 0 0 7px;
}
div:before {
content: '';
z-index: -1;
width: 433px;
position: absolute;
bottom: -12px;
left: 4px;
height: 190px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
background: -moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;
-moz-transform: rotate(-1deg);
}
div:after{
content: '';
z-index: -3;
width: 433px;
position: absolute;
bottom: -18px;
left: 6px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
height: 190px;
background: -moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;
-moz-transform: rotate(-1deg);
}
Is this what you mean?
Fiddle
box-shadow:0 1px 0 1px #fff, 0 2px 0 1px #ccc, 0 4px 0 1px #fff, 0 5px 0 1px #ccc;
Related
Can you please take a look at this demo and let me know how I can add Box-shadow to Pseudo After Content? as you can see I tried to add like
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
but it is not adding the shadow and instead creating a box
body {
padding: 50px;
background: #eee;
}
.hero {
position: relative;
background-color: #fff;
height: 320px !important;
width: 100% !important;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.hero:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 40px #fff;
border-left: solid 40px transparent;
border-right: solid 40px transparent;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
<div class="hero"></div>
I think This Code will help you.
I have added properties: transform-origin and box-sizing
For reference: transform-origin and box-sizing
body {
background-color: #888;
}
.hero {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: #bada55;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.hero::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
bottom: -2em;
left: 50%;
box-sizing: border-box;
border: 1em solid black;
border-color: transparent transparent #bada55 #bada55;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
<div class="hero"></div>
Deleted all the shadows and added container with property filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .2)); which creates shadow by shape.
body {
padding: 50px;
background: #eee;
}
.container {
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .2));
}
.hero {
position: relative;
background-color: #fff;
height: 320px !important;
width: 100% !important;
}
.hero:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
filter: drop-shadow;
height: 0;
border-top: solid 40px #fff;
border-left: solid 40px transparent;
border-right: solid 40px transparent;
}
<div class="container">
<div class="hero"></div>
</div>
Many times I created simple shadows but now I need to create rounded shadow. Like on the picture
Is it possible to do this with CSS??
THIS IS MY CODE:
-webkit-box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);
box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);
It looks like your example image is a linear gradient in a round container, so do that:
.round-shadow-clip {
overflow: hidden;
}
.round-shadow {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.6));
border-radius: 100%;
height: 0;
margin-left: -10%;
padding-bottom: 25%;
width: 120%;
}
html {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAALklEQVQ4y2N89+4dA24gKCiIR5aJgQIwqnlkaGb8//8/Hun379+PBtioZko0AwAA0Ajuvut+RAAAAABJRU5ErkJggg');
height: 100%;
}
<div class="round-shadow-clip">
<div class="round-shadow"></div>
</div>
With pseudo you can do this
div {
position: relative;
height: 100px;
border-radius: 50%/40%;
overflow: hidden;
}
div::before,
div::after {
content: '';
position: absolute;
left:0; right:0; top: -5px; height: 0;
box-shadow: 0 0 25px 15px rgba(0,0,0,.5);
}
div::after {
top: auto; bottom: -5px;
box-shadow: 0 0 -25px 15px rgba(0,0,0,.5);
}
<div></div>
I'm trying to replicate the white box on this page, Where it says "your success".
body{
background-color:#DFDFDF;
}
.index_whitebox{
background-color: #fff;
height: 60%;
width: 25%;
position: absolute;
margin-left: 4%;
margin-bottom: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 10px;
}
<div class="index_whitebox">
</div>
I assume there's no border-style and I use % for mobile compatibility. I can't seem to get the border right.
If you look in 'inspect element' you can actually see how they've coded it. I bunched together the main bits they use, as some used a CSS file and others were inline.
.class1 {
left: 1px;
width: 302px;
position: absolute;
top: 445px;
height: 378px;
}
.class2 {
left: 1px;
width: 302px;
position: absolute;
top: 445px;
height: 378px;
}
.class3{
border: 2px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
It's all in here:
I would classify myself as a beginner and discover answers through trial and error. However I can't solve this. I would like an image to be behind the h2 text on my homepage. I have tried placing it everywhere within here and nothing makes it show up.
Here is my site: http://bitsybride.com
Here is what I want: http://bitsybride.com/Image8.png
Here is the relevant css:
.smallpost {
overflow:hidden;
width:730px;
padding-bottom:0;}
ul.smallpost li {
width:290px;
height:130px;
margin:0 40px 60px 0;
padding:0px 0px 0px 0px;
position:relative;
float:left;
background: url(images/pink ribbon.png);}
ul.smallpost h2 {
font-size: 12pt;
line-height: 0pt;
margin: 0 0 0px 0;
padding:5px 0px 100px 15px;
letter-spacing: -1px;}
ul.smallpost li img {
margin:-20px 0 15px -20px;
width:280px;
height:150px;
overflow:hidden;
padding: 4px;
margin: 1px 1px 4px 1px;
overflow: hidden;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /*-moz-border-radius: 5px;-khtml- border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-o-linear-gradient(#2F2727, #1a82f7);
background:
-moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent
;
background: -webkit-gradient(linear, left top, left bottom,
from(#fff),
color-stop(0.5, #fff),
to(#EFEFEF)
);
filter: progid: DXImageTransform.Microsoft.Gradient(StartColorStr='#ffffffff', EndColorStr='#EFEFEFEF');
-ms-filter: \"progid: DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#EFEFEFEF)";
-o-linear-gradient(top, #dcdcdc, #c6c6c6);
border: 1px solid #FFFFFF;
z-index: 5;}
Help!
If you want your h2's to have a background image, try this in your ul.smallpost h2
background-image: url('/wp-content/uploads/2012/05/bitsy2.png');
or wherever your image is.
use display:inline-block in your h2 tag
ul.smallpost li {
width:290px;
height:130px;
margin:0 40px 60px 0;
padding:0px 0px 0px 0px;
position:relative;
float:left;
}
ul.smallpost h2 {
font-size: 12pt;
line-height: 0pt;
margin: 0 0 0px 0;
padding:5px 0px 100px 15px;
letter-spacing: -1px;
background: url(images/pink ribbon.png);
display:inline-block;
}
Can't I have both box shadow inner and outer on the same div?
I've tried but it doesn't work
http://jsfiddle.net/CWuw8/
div{
top: 100px;
position: absolute;
left: 100px;
height: 100px;
width: 100px;
box-shadow: 10px 10px 10px;
box-shadow: 0 0 10px inset;
border-radius: 5px;
background: white;
}
body{background: #d14343}
<div></div>
You need to use comma to separate both shadows: http://jsfiddle.net/gryzzly/CWuw8/3/
And you must also specify the color for your shadow in order for it to be seen.
div{
top: 100px;
position: absolute;
left: 100px;
height: 100px;
width: 100px;
box-shadow:
10px 10px 10px #000,
inset 0 0 10px #000;
border-radius: 5px;
background: white;
}
body{background: #d14343}
<div></div>
Using CSS3 you can have multple box shadows just by seperating them by commas eg:
box-shadow: 10px 10px 10px, 0 0 10px inset;
You can have as many as you want.
Added a runable code snippet:
div {
top: 100px;
position: absolute;
left: 100px;
height: 100px;
width: 100px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, .5),
0 0 10px rgba(255, 0, 0, .5) inset;
border-radius: 5px;
background: white;
}
body {
background: #fff
}
<div></div>