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
Related
I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable to find a way to repeat it, so that it can fill the entire page.
Here is my CSS code:
.horizontalLines {
border-bottom: 2px solid #CCCCCC;
padding-top: 25px;
width: 100%;
}
This code only allows me to make only one line, how can i make multiple lines?
As an alternate solution, there's a beautiful lined paper effect written using CSS available here.
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
Browser Support: The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be
displayed correctly even on those browsers (for example at the time of
writing, Gecko is quite buggy with radial gradients).
Using your way you have to insert multiple of these elements. You can't simply repeat them.
Another - and I guess more suitable way - would be using a background image that you repeat horizontally and vertically to achieve this effect.
body {
background: transparent url(path/filename) repeat 0 0;
}
Or, if you can use gradients, nikhita dkslfslg's answer (+1 for that) might help.
Here you go.
.paper {
background-image:url("data:image/gif;base64,R0lGODlhFgAsAJEAAP////n8/ePv9gAAACH5BAAHAP8ALAAAAAAWACwAAAInhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuFsTyTNeBgOf6zgsFADs=");
}
Just Encode an image in base64 and it works fine.
You can try encoding HERE.
You can do it with box shadows:
.lines{
width:500px;
height:400px;
background: red;
box-shadow: 0px 10px 0px 0px black, 0px 20px 0px 0px green, 0px 30px 0px 0px blue;
}
http://jsfiddle.net/7DkKc/
Or simply with images:
.lines{
background: transparent url(url) 0 0 repeat-x;
}
Or with gradients.
http://www.colorzilla.com/gradient-editor/
I am creating a website, and I want to create this effect of giving an outer glow shadow to the main column in the page ..
This page serves as an example: http://royalwatches.pk/
Note that the main column has a shadow effect on both left and right sides, to make the column appear to be 'in front' of the background.
This picture also show's what I'm talking about:
This is the page where I want to replicate this effect: http://blu-rays.pk/index.php
Can someone guide me on what CSS/HTML changes need to be done ?
Sidenote: Putting this all in jsfiddle seemed impractical, which is why I've mentioned the sites instead ..
You can use box-shadow property.
CSS
img{
box-shadow: 0px 0px 5px gray;
}
JSFiddle
Or in your case:
#wrapper{
box-shadow: 0px 0px 5px gray;
}
Note: remove the background-image from #wrapper.
Remember to add code so that the shadow is visible in more browsers, like so:
#wrapper {
-moz-box-shadow: 0px 0px 5px gray;
-webkit-box-shadow: 0px 0px 5px gray;
box-shadow: 0px 0px 5px gray;
}
More can be read about this at: http://css-tricks.com/snippets/css/css-box-shadow/
http://asifslab.com
I want to lighten the area behind and near the logo on which the logo is located. The purpose for this is because the border of the logo is mixed with the background. Please help
To softly lighten up the area behing the logo you can use a combination of an rgba background, rounded borders and a light shadow on the image:
.head > img {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
Don't forget to add vendor-prefixes to support all browsers...
You can add a background with rgba property to give a fake light background.
Try this
#logo {
background-color: rgba(255,255,255, 0.5);
/* Then other css */
}
In your case, modify your .head to this
.head {
padding-left: 5%;
background-color: rgba(255,255,255,0.5);
}
The "border" as you put it is margin on the body. To remove this, simply:
body { margin:0; }
What you can do is give the .head divider an opaque background:
.head { background:rgba(255,255,255,0.3); }
This isn't supported on older browsers, however.
You can do
convert to PNG and make the original image 0.2 opacity
(better) have a <div> that is position: absolute inside body and the same height as body, then apply the background image and opacity: 0.2; filter: alpha(opacity=20);
Try CSS3 please
.box_shadow {
-webkit-box-shadow: 0px 0px 10px 0px #fff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: 0px 0px 10px 0px #fff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}
you can do this by 2 ways
1 text-shadow but you are using image so you have to do this in photoshop in layer style > drop shadow and select light color
you can do this in this also but it covers in rectangular form not behind your logo text
and
2 is to use background that also have the same effect in rectangular form
use background:rgba(255,255,255,0.6);
last 0.6 is opacity adjust this to darken or ligten the color
I have found lots of posts similar to what I am asking and have been working away at this for hours and finally decided I should probably seek some exterior advice :).
I am trying to shadow 3 sides of an div using box-shadow I want the right side to be shadowless but cannot figure it out there are lots of posts on how to un-shadow the top but after countless efforts i could not even apply this.
Update:
clip-path is now (2020) supported in all major browsers.
Original Answer:
If you're willing to use experimental technology with only partial support, you could use the clip path property.
This will provide you with exactly the effect I believe you are after: a normal box shadow on the top, left and bottom edges and clean cut-off on the right edge. A lot of other SO solutions to this issue result in shadows that "dissipate" as they near the edge that is to have no shadow.
In your case you would use clip-path: inset(px px px px); where the pixel values are calculated from the edge in question (see below).
#container {
box-shadow: 0 0 5px rgba(0,0,0,0.8);
clip-path: inset(-5px 0px -5px -5px);
}
This will clip the div in question at:
5 pixels above the top edge (to include the shadow)
0 pixels from the right edge (to hide the shadow)
5 pixels below the bottom edge (to include the shadow)
5 pixels outside of the left edge (to include the shadow)
Note that no commas are required between pixel values.
The size of the div can be flexible.
I think you have 2 options:
1) Set your shadow's horizontal alignment to the left (negative values).
box-shadow: -30px 0px 10px 10px #888888;
Although this way you won't have the same shadow size in the top and bottom.
2) Use a div inside a div and apply shadow to each one.
.div1
{
box-shadow: -30px 10px 20px 10px #888888;
}
.div2
{
box-shadow: -30px -10px 20px 10px #888888;
}
Then you'll have to ajust the size for the one you want.
Here, have a jsfiddle: http://jsfiddle.net/EwgKF/19/
Use :after pseudo element : http://jsfiddle.net/romiguelangel/YCh6F/
HTML
<ul>
<li>item</li>
<li class="hello">item with after element</li>
</ul>
CSS
li {
display: block;
position: relative;
-webkit-box-shadow: 0 0 2px 1px gray
}
.hello:after{
display: block;
background-color: #f3f5f6;
width: 20px;
height: 38px;
content: " ";
position: absolute;
top: 0;
right: -10px
}
try using this example hasn't right side border:
JsBin Demo
NONE of the above responses will work.
I am assuming you are using bootstrap or a library that has box-shadow in the default buttons. Here is the solution:
.your-btn-class {
box-shadow: none /* Removes the default box-shadow */
box-shadow: -0.1rem 0 0 0.2rem rgba(134, 142, 150, 0.5); /* Add your own */
}
(if you don't remove the initial box-shadow, then when you tried to remove the offset from the right, the left side will be double the size of the top and bottom. That's why you have to remove it. If you are not sure what the default colors of the box-shadow of the library you are using. Just go to the source code and find-out, not hard at all)
If you just need to add box-shadow to you button or input on all side except the right do:
.your-btn-class {
box-shadow: -0.1rem 0 0 0.2rem rgba(134, 142, 150, 0.5);
}
Here's what I mean:
http://www.lesliesommer.com/wdw07/html/images/glow.png
I need it to work with most browsers.
Could you point me to a tutorial or something?
Thanks for the answers. Can I do it without CSS3 ?
css3 box shadows I'd think. These aren't implemented in IE8
-webkit-box-shadow: 0px 0px 15px #dddddd;
-moz-box-shadow: 0px 0px 15px #dddddd;
box-shadow: 0px 0px 15px #dddddd;
To add on to Groovetrain's answer, if you use rgba instead of a hex value you can have the colors be rendered with transparency letting whatever is below be seen through (which may or may not be valuable depending on the application).
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.35);
box-shadow: 0px 0px 15px rgba(0,0,0,0.35);
There are a few techniques for this (outside of CSS3).
If the width is fixed, one way is to use two DIVS. One has the top and the sides. You need to make and image that is very tall, with the sides repeating and the bottom cut off and use it as a background on the outer DIV. Then make an image that contains the bottom, and nest it inside, and absolutely-position it to the bottom.
<div class="wrapper">
... content ...
<div class="bottom"></div>
</div>
.wrapper {
width:500px;
background-image:url(....);
position:relative;
}
.bottom {
position:absolute;
bottom:0px;
height:20px;
width:500px;
background-image:url(....);
}
If it is x/y scaleable you can use the 9-slice method:
_|_|_
_|_|_
| |
You slice your background into 9 pieces, where the middle piece is blank and contains your content. You make four corners and use repeat-x / repeat-y for the background of the sides.
http://www.css3.info/preview/box-shadow/
However, needs a CSS3 enabled browser.
Alternatively set a background image to get cross browser support: http://dimox.net/cross-browser-css3-box-shadow/