How can I define background-image repeat with cap insets? I want the image to be repeated without border. Is it possible to repeat (tile) or stretch the middle in CSS?
The first (smaller) rounded rectangle is my PNG image. Red lines show cap insets I want to define. The latter (bigger) should be shown as result.
Check out the CSS3 border-image property. It's designed for this sort of thing.
.box {
border-image: url(my-image.gif) 20 20 20 20 repeat;
}
Interactive demo here.
It's supported on most non-IE browsers.
This looks like you could just solve this by using pure css3
.box {
background: white;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
Related
I would like to have a dotted line below to a text :
The web designer have designed a custom dotted so i can’t use :
h2 {
border-bottom: 4px dashed #fff;
display:table;
}
because it is not conform.
What i’ve done : I’ve made an image with a dot and position it with css :
h2 {
padding-bottom: 20px;
display:table;
background-image: url('../images/tiret.png');
background-repeat: repeat-x;
background-position: center bottom;
}
It works very well but depending on the width of the text, the last dot could appear cut like you can see on this picture :
Do you have a suggestion on how to avoid this ?
You could try background-repeat:space
The image is repeated as much as possible without clipping. The first
and last images are pinned to either side of the element, and
whitespace is distributed evenly between the images. The
background-position property is ignored unless only one image can be
displayed without clipping. The only case where clipping happens using
space is when there isn't enough room to display one image.
You can use border-image:
h1 {
display: inline-block;
border-style: solid;
border-width: 0px 0px 12px;
-moz-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
-webkit-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
-o-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
}
<h1>Hello world</h1>
Codepen here
Also there is usefull online generator
ive got a div styled with the css properties:
border: 20px solid #000;
-webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.5);
the problem i have is, the shadow of the div is just outside, but not inside of the border.
ive allready tried to set the background to 100% opacity with background: rgba(0,0,0,0); but nothing changes.
I also tried to use inset but then the shadow is just inside.
what to do?
No reason to expect anything different. If you want an inner shadow, add a second one to the declaration that starts with the keyword inset.
E.g. -webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.5), inset 0 0 40px 0 rgba(0,0,0,0.5);.
Note that elements that are descendants of the element with the box shadow will cover the inner shadow.
Also note that some older versions of modern browsers only support one shadow declaration at a time, but I think that set of browsers/versions is quite small.
Try something like this:
#mydiv {
border: 1px red solid;
box-shadow: 0 0 15px #555, inset 0 0 15px #555;
width: 100px; height: 100px;
}
Codepen
I'm investigating since some days box-shadow and text-shadow. I'm trying to gain the following effect. I want a glow come out from the text of the <a> once hovered. Simple, this should be easy as I explored using text-shadow. Ok, but it works with small glows, I mean, once the glow is bigger you just cannot see the glow due to its high blur. There has to be a solution for this. An image will explain better than 100 words.
This is what I want to gain:
LINK:
HOVER:
This is the code I've used for
#projectBox a:LINK{
background-image: url('../_img/showcase/projectTabs/link.png');
}
#projectBox a:HOVER{
background-image: url('../_img/showcase/projectTabs/link.png');
color:#fa0000;
text-shadow: 0 0 80px white;
}
I know I can use background image again for the hover but I want to avoid this. The problem is that if you add more blur it doesnt appear anymore, as its too blur. the other two properties dont help too much, as I want the glow to begin from the middle.
Lets work out this together and see how we can do with CSS a wide and high glow effect.
You can add multiple text-shadows:
text-shadow:
-3px 0px 10px #FFF,
3px 0px 10px #FFF,
0px 0px 10px #FFF,
-3px -3px 10px #FFF,
3px -3px 10px #FFF,
0px -3px 10px #FFF,
-3px 3px 10px #FFF,
3px 3px 10px #FFF,
0px 3px 10px #FFF;
This would give you a wider, fuller glow, as there are 9 separate shadows surrounding the text. Adjust the values to get the intensity you're looking for.
(the values are a random guess - untested as I'm on my phone) :)
http://jsfiddle.net/pzMmC/ -
You can overlay concentric shadows to multiply the effect:
a:hover {
text-shadow: 0 0 80px white,
0 0 70px white,
0 0 60px white,
0 0 50px white,
0 0 40px white,
0 0 30px white;
}
I've written a test: http://jsfiddle.net/simbirsk/DnHKk/
Why not use CSS3's gradients?
Take a look at this fiddle.
You can generate your own gradients here or here.
I want to achieve this in CSS - not CSS3 as I want it to be supported by all browsers
ie a div containing content, with the shadows on every side. The top area will be used for navigation. I have searched for tutorials but so far to no avail. Help!
Box Shadow works in all mordern [IE>8] browsers, This code uses no images and works in all browsers in IE versions below 9.
box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10px #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;
/* For IE<9 */
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=0,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=135,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=225,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=315,strength=2);
Box shadow supported from IE 9 onwards.
CSS3pie is a tool that lets you use some css3 properties in IE.
What you're trying to do is fairly widespread css3 in newer browsers, and emulated really well (and easily) in IE with the .htc file you can download from there.
As for the markup, I see just 2 elements, with the top one floated right, for example. You'd have to play with z-index to hide excess shadows.
In that site there's also a very similar effect, you should be able to adapt it for your needs.
This should work in all browsers:
.allSidesShadow {
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
/* For IE 5.5 - 7 */
/* for IE4 - IE7 */
filter:
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4);
-ms-filter: "
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4)
";
}
As Ventus said is not possible to use css shadows with ie (only ie9). But you can use shadowOn. It's a great jquery plugin and very easy in use. With it you will have cross browser compatibility.
The answer posted by Sekar, needs a little editing,
box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;
this doesnot work on IE(I checked on IE8).
box-shadow: inset 0 0 3px 0 #000;
Means 0 pixel left, 0 pixel right, 3px blur, 0 pixel diffuse, use a color slightly darker than the BGs.
I cant see your picture now, but for all side shadows I use the below code:
box-shadow: 0 0 5px 0 #000;
Instead of the 5px use your size.
You have to create several images. One for the left side. One for the right. One for the bottom, etc. And then have several div's and set the background for each of them.
You can do this with three divs, assuming they are all the same (fixed) width:
<div class='top'>
</div>
<div class='middle'>
<p>Hello World!</p>
</div>
<div class='bottom'>
</div>
.top{
background:url('top.png');
height:20px;
width:800px;
}
.middle{
background:url('middle.png') repeat-y;
width:800px;
}
.bottom{
background:url('bottom.png');
height:20px;
width:800px;
}
Alternatively, you can make one big image, and use that as the background for the entire content area; then hard-code the positions and sizes of the contained elements.
You can place the following code in the div in order to drop shadows on all four sides.
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);
Hi I'm not too sure how to create the attached image effect where the right hand side is my main content and it shades onto my left sidebar which has a gradient effect downwards.
Check this out: CSS3 gradient Generator, pick the colors and generate the code, then add it to the body in your CSS (Or whatever element you want it on).
.body /*or element of your choice*/
-webkit-gradient(
{
linear,
left bottom,
left top,
color-stop(0.02, rgb(91,204,245)),
color-stop(0.76, rgb(5,37,70))
)
-moz-linear-gradient(
center bottom,
rgb(91,204,245) 2%,
rgb(5,37,70) 76%
)
}
For the shadow from your main content use:
.MyElement
{
box-shadow: 10px 10px 5px #888;
}
And also check out CSS3 Box-shadow.
Also, because not every browser supports the box-shadow yet (IE), you can use border images. But IE doesn't suppport that either so, what I did on a site was to just make a 1px high PNG image of the shadow and set it as the background to my wrapper div, repeated it down/up (can't remember if that's X or Y) and it worked fine :)
Hope some of that helps.
img.shady
{
display: inline-block;
webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
padding: 10px;
margin-bottom: 5px !important;
min-height: 240px;
width: 630px;
border: 1px solid #D7D7D7
}
Your sidebar should use a png image that has an opacity/transparency, then the shaded sidebar will work with gradient background. (Note, IE6 wont like this solution, so you have to find an IE6PNG hack solution which can be found almost everywhere nowadays)
For gradient background, either create a background image or use the css3 gradient