Hello trusty StackOverflow users,
I am creating a sample webpage and was wondering how to elongate a rotated header that extends off the page in css3. I can provide more code if necessary. I would show a picture of what i am looking for but haven't accumulated enough rep (Just got enough rep to show a picture)... Thanks for any help in advance!
Here is what i want:
'h4' is the header i'm trying to elongate and here is what i have it doing now:
h4 {
color: #fbff00;
background-color: #858585;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
float:left;
text-align:center;
-webkit-box-shadow: 0px 0px 10px #d1cfd1;
-moz-box-shadow: 0px 0px 10px #d1cfd1;
box-shadow: 0px 0px 10px #d1cfd1;
}
-Nate
Does this come close to what you want?
The idea is:
Give the header an explicit pixel width (to manage its "size")
Give it a negative left margin to make it hug the left edge (amount dependent on width given)
Give it a positive left padding to let the text be positioned naturally (also dependent on width given)
Related
Question ,surely, for CSS3-guru. I am used box-shadow for buttons,modals,etc. But I never would have thought that we can using like this.
HTML
<div></div>
CSS
div {
border-radius:50%;
height:2px; width:2px; /* To allow border-radius to work */
position:absolute;
top:50%; left:50%;
margin-top:-1px; margin-left:-1px;
box-shadow:
-75px -125px 0 40px #6cce74,
75px -125px 0 40px #c18d46,
150px 0px 0 40px #c14745,
75px 125px 0 40px #2e1e5b,
-75px 125px 0 40px #9c37a6,
-150px 0px 0 40px #76bdd1;
}
I saw only code and result (without explanation). And now i trying understand how single div with enumeration of six (N) box-shadow render to it :
OUTPUT
Please, explain me ( or give me link with any explanation), how renderer works in this case. Thanks!
JSFiddle: http://jsfiddle.net/9Rddm/1/.
The box-shadow style has the following syntax here:
box-shadow: [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]+
(source: MDN) - where the + represents that the group can be repeated 1 or more times, and the ? represents that that value is optional.
This means that the first dot, created by box-shadow: -75px -125px 0 40px #6cce74,, has an offset with coordinates (-75, -125) relative to the div it's made from. It has a blur radius of 0 (so no blur) and it has a spread-radius of 40px (so it's 40px in radius).
This is then repeated for the other 5 dots with different coordinates and colours. Each shadow gets different coordinates, and a different colour, which results in the 6 dots being positioned and coloured this way.
PS: I suggest (in Chrome:) right-clicking on the result frame in that fiddle, then clicking "Inspect Element" (bottom option), and then navigating down the DOM tree you'll find (you'll most open a panel that has either <html> or <body> selected, you'll want to navigate down that tree to end up on the <div>). In that interface you'll see what styles are applied to the element. What you could do to make things a bit clearer is first clicking on the box-shadow style in the styles part of the panel that showed up, then placing your cursor on any number you see there, and then pressing the up/down arrow. If you press the up/down arrow, it will in/decrement the number you've selected, and dynamically update the result too. If you do that, you can see directly what happens for each value you change.
You can separate different instances of a box-shadow with a comma, this is useful for creating 3D buttons or text boxes that look "pressed" into the page.
The relevant code:
box-shadow:
-75px -125px 0 40px #6cce74,
75px -125px 0 40px #c18d46,
150px 0px 0 40px #c14745,
75px 125px 0 40px #2e1e5b,
-75px 125px 0 40px #9c37a6,
-150px 0px 0 40px #76bdd1;
Each one of those declarations is a separate shadow. So in your example the code creates a small empty (thus invisible), circular div and gives it 6 different shadows with different positions. This effect can also be used for this effect:
HTML:
<input type='text'>
CSS:
html {
background: grey;
}
input {
border: 1px solid black;
box-shadow: inset 1px 1px 9px rgba(0,0,0,.3), inset -1px -1px 9px rgba(0,0,0,.3); /* note the separated declarations */
line-height: 25px;
border-radius: 4px;
}
http://jsfiddle.net/9Rddm/4/
Altering anyone of the properties in the box-shadow rule would alter one of the six-circles
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/
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/
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