I was wondering if it is possible to create following shadow in using CSS.I tried adding box-shadow but it adds shadow to box not something like in the following image. I also tried it using pseudo elements but didn't find any way to make it elliptical. I want to know if this is possible using CSS or I just have to use transparent image for shadow.
Here is something I just made that resembles the shadow part. You need to add rules for other browsers if you want to make it work on non-webkit. The basic idea is to use border-radius to create a circle, then shrink it in y-direction using scale and finally blur it.
http://jsfiddle.net/L4QDs/1/
#shadow {
border-radius: 50%;
width: 100px;
height: 100px;
background: black;
opacity: 0.5;
-webkit-filter: blur(10px);
-webkit-transform: scale(1, 0.2);
}
You can create it with a pseudo element
CSS
#base {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
position: relative;
}
#base:after {
content: '';
position: absolute;
bottom: 0%;
left: 5%;
width: 90%;
height: 8%;
border-radius: 50%;
box-shadow: 0px 10px 5px black;
}
fiddle
Related
I have a rectangular sprite image that is 120px x 40px. When someone select the image I want the right side of the selected image to turn into an arrow pointing right.
I know how to use border-radius but that gives a curves whereas I want a point.
Using css how would I turn the right side of an image into a arrow?
Thanks
Basically I want to perform a border-radius only on the right side, but instead of curved pointed like an arrow.
.selected {
-webkit-border-radius: 0px 25px 25px 0px;
border-radius: 0px 25px 25px 0px;
}
If you can keep the white background here is a very simple solution:
jsFiddle here
Run the image in the background of the following example.
HTML
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
CSS
.container {
background: #333;
width: 200px;
height: 60px;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
.container:hover::after {
content: "";
position: absolute;
width: 70px;
height: 30px;
background: #fff;
top: -20px;
right: -20px;
z-index: 1;
transform: rotate(45deg);
}
.container:hover::before {
content: "";
position: absolute;
width: 70px;
height: 30px;
background: #fff;
bottom: -20px;
right: -20px;
z-index: 1;
transform: rotate(-45deg);
}
I do not know, i understood your question, but i think, what you want to achive, can be done by jQuery and css function with background-position
Basically, if you want to use a CSS Sprite image, background-position will indeed do it.
You may want to have a <div> positionned over your image, that will be displayed on hovering (CSS :hover) or click (jQuery click event) the image, depending on what you meant by "selecting" it.
Here is an example for hovering case (pure CSS) and here is an example for the clicking case (with 3 lines of jQuery).
I have this menu image
I want to code it in plain HTML/CSS to be used for a game I'm creating for a phonegap application. I could just use this image inside the app, but the menu items text must be editable.
So I created an empty image to use as a background:
In Android there's lot of screen resolutions which forces me to use percentage instead of pixel, so first I restricted the game to be played only in portrait mode.
Sofar my approach is;
Use percentage values to position elements.
Use the image above (without the text) as a background and the items as spans.
Check a live demo here.
But this is not accurate; in some devices the text gets out of the area where it should :(
Here's the full game window:
Any hints?
You could achieve something pretty damn close to that JPG using nothing but CSS, it will be tricky though. Additionally, if the target audience is ONLY mobile users, then you don't have to worry about IE8 and below. Doing this in pure CSS would be impossible without CSS3 stuff that IE8 and below doesn't support.
So there is the CSS option... Then there could also be the SVG option. SVG's are vector graphics, meaning they scale infinitely without that nasty pixelating you see in raster graphics (like a jpg). SVG's can also be styled with CSS... Which means you could change the hover color, or the text color by modifying some CSS. The text then would just be overlayed on-top of the graphic. The vector graphic would allow you to scale the image up or down according to your orientation and screen size.
This is about as good as I could get with what I have to work with and limited time. Note that widths, heights, angles, etc can all be adjusted and your widths can be adjusted to be percentage based so they are more dynamic.
JSFiddle Demo
HTML:
<div class="container">
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
</div>
CSS:
.container {
width: 500px;
}
.button {
position: relative;
width: 300px;
height: 40px;
margin: 10px auto 0 auto;
background: #b9aea2;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
}
.button:first-child:before {
content: ' ';
position: absolute;
z-index: -1;
width: 40px;
height: 0px;
top: 14px;
left: -20px;
margin: 0px 0px 0 0px;
border-top: 20px solid transparent;
border-left: 15px solid white;
border-bottom: 20px solid transparent;
-webkit-transform: skew(-5deg);
-moz-transform: skew(-5deg);
-o-transform: skew(-5deg);
background: #b9aea2;
}
.button:last-child:before {
content: ' ';
position: absolute;
z-index: -1;
width: 40px;
height: 0px;
top: 14px;
right: -20px;
margin: 0px 0px 0 0px;
border-top: 20px solid transparent;
border-right: 15px solid white;
border-bottom: 20px solid transparent;
-webkit-transform: skew(5deg);
-moz-transform: skew(5deg);
-o-transform: skew(5deg);
background: #b9aea2;
}
.button:after {
content: ' ';
position: absolute;
display: block;
width: 240px;
height: 10px;
bottom: -10px;
left: 30px;
-webkit-transform: skew(-80deg);
-moz-transform: skew(-80deg);
-o-transform: skew(-80deg);
background: #6b6562;
}
.button:last-child:after {
width: 0;
height: 0;
background: transparent;
}
A few things that might help:
In your CSS, looking at the .menu-game--container class, if you change background-size: center; to background-size: contain;, that makes sure that all of the image is indeed in the picture. Sometimes this doesn't happen.
If you really want to be sure that your text will be in the right place, consider putting the text directly into the image using photoshop or something, and then using a <map> tag for the links.
Finally, I have found that it works better if you use href="javascript:" rather than href="#" and then putting the javascript into the OnClick event or something.
I convert any div on my webpages to pop-up box by adding a class, turnIntoOverlay , to the div. (See JSFiddle)
.turnIntoOverlay {
position: fixed;
background-color: white;
top: 60px;
max-width: 680px;
z-index: 80;
border: 6px solid #BBB;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
max-height: 800px;
overflow: auto;
padding:10px;
}
Now when the pop up is displayed I also want to create a mask that puts up a faded layer(or mask) to the rest other page elements that appear below popup box. To create this mask, I resorted to pure css approach using psuedo selectors, so that the mask is shown/hidden simply when a popup box( a turnIntoOverlay element) is visible. I added the following css:
.turnIntoOverlay:after {
content: "";
background-color: whitesmoke;
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
top: 0;
left: 0;
}
Everything works fine except that the mask appears on the pop up as well even when I keep the z-index lower than of popup. Also to my surprise, it works only when z-index=-1.
Can you please suggest how to rectify this ?
See JSFiddle here
The problem is the stacking context. The :after content can not be below it's parent, except if the parent would be out of the stacking context which in your case is no option. z-index: -1 works because it's a special case and has priority over the parents content. That's why it does not effect the text, but effects background and border. See the list on Stacking Contexts. Your :after { z-index: -1 } is nr. 2 in the list.
Your only option would be using an additional wrapper:
<div class="turnIntoOverlay"><div>this div is convertible to pop up!<input/></div></div>
moving your current styles for .turnIntoOverlay to .turnIntoOverlay > div and applying the overlay to the outer div with a positive z-index:
.turnIntoOverlay:after {
z-index: 1;
}
Here is a demo.
Unfortunately IE8 and below are buggy on that. Also they do not know opacity and using -ms-filter does not work on elements without layout like pseudo classes :before and :after are.
Of course, if you'd use an additional wrapper anyway, you could just give the other wrapper the background-color. No need for :after then:
.turnIntoOverlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: skyblue; /* for old browsers */
background-color: rgba(135, 206, 235, 0.4);
}
Compared to the pseudo class approach, this includes a little fix for IE8 and below. Can be made even better by using a transparent png which is applied to IE. With that, it looks quite the same in every browser (after IE6 I would say).
Here is a demo.
My solution is to use both :before and :after to solve your problem:
.turnIntoOverlay {
position: fixed;
background-color: white;
top: 60px;
max-width: 680px;
border: 6px solid #BBB;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
max-height: 800px;
overflow: auto;
padding:10px;
z-index: 80;
}
.turnIntoOverlay:before {
content: "";
background-color: skyblue;
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.4;
top: 0;
left: 0;
}
.turnIntoOverlay:after{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
z-index: -1;
content: "";
}
JSFiddle
I took out the position: fixed from .turnIntoOverlay and now it works.
I want to achieve this using html and css:
I have tried to set the opacity of the container to 0.3 and the box to 1, but it doesn't work: both divs have 0.3 opacity.
jsFiddle of my try here
The effect I am trying to achive is a popup box that comes on top of the page. It is highlighted by fading the content below (by lowering the opacity).
You can use opacity in combination with background color, like this:
#container {
border: solid gold 1px;
width: 400px;
height: 200px;
background:rgba(56,255,255,0.1);
}
#box {
border: solid silver 1px;
margin: 10px;
width: 300px;
height: 100px;
background:rgba(205,206,255,0.1);
}
<div id="container">
containter text
<div id="box">
box text
</div>
</div>
Live demo
As far as I know you can't do it in a simple way. There a couple of options here:
Use absolute positioning to position box "inside" the container.
#container {
opacity: 0.3;
background-color: #777788;
position: absolute;
top: 100px;
left: 100px;
height: 150px;
width: 300px;
}
#box {
opacity: 1;
background-color: #ffffff;
position: absolute;
top: 110px;
left: 110px;
height: 130px;
width: 270px;
}
<div id="container"></div>
<div id="box">
<p>Something in here</p>
</div>
Use Javascript - almost the same as above, but position and size don't have to be hardcoded.
You can't apply an opacity property without affecting a child element!
"Opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another... If you do not want to apply opacity to child elements, use the background property instead." https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
If you want the opacity to be applied only to the background, without affecting the child elements, use:
background-color: rgba(255, 255, 255, .3)
However, you can achieve the desired effect if you place them inside a div parent element and use CSS position property:
.parent {
border: solid green 3px;
position: relative;
width: 400px;
height: 200px;
}
.sibling-one {
border: solid red 3px;
position: absolute;
box-sizing: border-box;
width: 400px;
height: 200px;
opacity: .3;
}
.sibling-two {
border: solid blue 1px;
margin: 10px;
width: 200px;
height: 100px;
position: absolute;
transform: translateY(50%);
}
<div class="parent">
<div class="sibling-one">
<p>A sibling's one element</p>
</div>
<div class="sibling-two">
<p>A sibling's two element</p>
</div>
</div>
Try using rgba as a 'pre content' overlay to your image, its a good way to keep things responsive and for none of the other elements to be effected.
header #inner_header_post_thumb {
background-position: center;
background-size: cover;
position: relative;
background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
border-bottom: 4px solid #222;
}
header #inner_header_post_thumb .dark_overlay {
position: relative;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
header #inner_header_post_thumb .dark_overlay .container .header-txt {
padding-top: 220px;
padding-bottom: 220px;
color: #ffffff;
text-align:center;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
font-size: 40px;
color: #ffffff;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
font-size: 24px;
color: #ffffff;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p {
font-size: 18px;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
font-weight: 700;
}
<header>
<div id="inner_header_post_thumb">
<div class="dark_overlay">
<div class="container">
<div class="row header-txt">
<div class="col-xs-12 col-sm-12">
<h1>Title On Dark A Underlay</h1>
<h3>Have a dark background image overlay without affecting other elements</h3>
<p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>
</div>
</div>
</div>
</div>
</div>
</header>
See a working codepen here
Using background-color: rgba(#777788, 0.3); instead of opacity could maybe fix the problem.
Apply this css rule
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
In addition to this, you have to declare background: transparent for IE web browsers.
For more details visit the following link:
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
Any child of an element with opacity set will take on that opacity.
To achieve this style you could use rgba colours and filters for IE for the background, and opacity on the textual elements. So long as the second box isn't a child of one of the text elements, then it won't inherit the opacity.
Another workaround is to simply use an overlay background to create a similar effect.
I personally like a black overlay with about a 65% opacity, but for what you are trying to do you may want to use a white overlay at round 70%.
Create a small (100 x 100 or less) PNG in Photoshop or GIMP that has the color and opacity you want. Then just set that as the background of your light box.
If you create multiple PNGs at different opacities you can easily switch between them with JS or dynamically at load via backend scripting.
It's not technically what you are trying to do, but aesthetically it can give a very similar effect and UX wise accomplishes the same thing. It is also very easy to do, and widely supported across pretty much everything.
Opacity will always inherits by the child element regardless whatever the element in there, there is no workaround up to today have suggested, when the moving of the child element outside the transparency background is not an option like in a popup menu/dialog box creation, use of background with the rgba is the solution.
Here is a input box that i created that i can turn on or off with the class property invisible by javascript
<div id="blackout" class="invisible">
<div id="middlebox">
<p>Enter the field name: </p>
<input type="text" id="fieldvalue" />
<input type="button" value="OK" id="addfname" />
</div>
</div>
CSS
#blackout {
z-index: 9999;
background: rgba(200, 200, 200, 0.6);
height: 100%;
width: 100%;
display: block;
padding: 0px;
clear: both;
float: left;
position: absolute;
margin-top: -10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -10px;
}
#blackout #middlebox {
border: thick solid #333;
margin: 0px;
height: 150px;
width: 300px;
background-color: #FFF;
top: 50%;
left: 50%;
position: absolute;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 10px 50px 0px 50px;
}
#middlebox p {
float: left;
width:100%;
clear:both;
}
#middlebox input {
clear:both;
margin-bottom:10px;
}
#middlebox input[type=text]{
width:100%;
}
#middlebox input[type=button]{
float:right;
width:30%;
}
.invisible{
visibility:hidden !important;
}
Use such elements that you can add :before or :after. My solution
<div class="container">
<div>
Inside of container element is not effected by opacity.
</div>
</div>
Css.
.container{
position: relative;
}
.container::before{
content: '';
height: 100%;
width: 100%;
position: absolute;
background-color: #000000;
opacity: .25
}
This might not be the most orthodox method but you can use a small semi-transparent background image for each div / container that repeats. It does seem that in this day and age you should be able to achieve this in pure (simple not hackish) css with no js but as the answers above show it isn't that straight forward...
Using a tiled image might seem dated but will work no worries across all browsers.
You can add a container's sibling absolutely positioned behind container, with the same size, and apply opacity to it.
And use no background on your container.
Now container's children have no opaque parent and the problem vanishes.
I'm trying to place a nice border around an image that's 250x250, using only html and css. The markup is this:
<div id="img-container"><img src="pic.jpg" border="0"/></div>
And the css is:
#img-container {
height: 225px;
width: 225px;
padding: 3px;
border: 1px solid black;
z-index: 10;
position: relative;
overflow: hidden;
border-radius: 10px;
}
#img-container img {
z-index: 5;
}
Basically, I want the div container to clip the picture's edges that exceed its boundaries. This will achieve the rounded edges effect using the border-radius property (-moz-border-radius, -webkit-border-radius, etc) - if it actually works or could even be done. Looking for tips and tricks on this. Thanks.
And, yes, I'm obviously not a web designer :)
Yes it's possible, but you should set the image as the div background using CSS:
#img-container {
height: 225px;
width: 225px;
padding: 3px;
border: 1px solid black;
background-image: url('pic.jpg');
border-radius: 10px;
}
This is necessary, otherwise you will get horrible white borders around the image (tested in Google Chrome).
as far as I understood your question, deleting the
#img-container img {
z-index: 5;
}
part should do the trick.
Or you could use the image as a background image:
#img-container {
...
background: url(pic.jpg) no-repeat top left;
}