I'm trying to clip an image. This image has a box-shadow property.
Want I want is to apply a clip to the image but I want to mantain the box-shadow, not to the original image but to the clip image.
How can I do that?
Follows my HTML/CSS3 code:
img {
position: absolute;
width: 500px;
height 100px;
top: 10px;
left: 10px;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
clip: rect(0px, 500px, 500px, 0px);
transition: all 1s;
}
#image {
position: relative;
}
#image:hover img {
clip: rect(0px, 50px, 50px, 0px);
}
<div id="image">
<img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">
</div>
Note: I want to avoid using javascript or jquery to manage this problem. But of course, if there is no other solutions and the javascript/jquery code is necessery, I will use it.
[EDIT]
I want that the original image and the final image have box-shadow, and the box shadow could be animated as well as the clip is.
Here's my solution, no clip needed.
#image {
position: absolute;
top: 10px;
left: 10px;
width: 500px;
height: 100px; background:url("http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg");
transition: all 1s;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
}
#image:hover {
width: 50px;
height: 50px;
}
<div id="image">
</div>
Related
I have apply opacity using 'rgba' on parent div and i don't want to inherit this effect on child div.. How can i restrict rgba style from child element...
i have posted images as well for better assistance.
'http://imgur.com/a/YxipO' = (actual image of my code)
'http://imgur.com/a/7ltDa' = (what i want to do using css or js)
.banner-inner {
background-color: rgba(255,255,255,0.2);
padding: 3%;}
.logo-circle {
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;}
You can use a box shadow, like this
.content {
height: 200px;
width: 300px;
position: relative;
background: url(http://lorempizza.com/500/350/);
background-size: cover;
}
.logo-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
border: 7px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1000px rgba(255,255,255,0.5);
/* background: rgba(0,0,0,0.5); uncomment if you want a semi transparent
opacity inside circle
*/
}
<div class="content">
<div class="logo-circle"></div>
</div>
You may consider following example approach:
.content {
height: 200px;
width: 200px;
position: relative;
}
.banner-inner {
background-color: rgba(0, 0, 0, 0.2);
padding: 3%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.logo-circle {
width: 1em;
border: 7px solid #fff;
border-radius: 50%;
padding: 1em;
z-index: 2;
height: 1em;
position: absolute;
top: 50%;
margin-top: -1.5em;
left: 50%;
margin-left: -1.5em;
}
<div class="content">
<div class="banner-inner"></div>
<div class="logo-circle"></div>
</div>
For background in circle use RGBA
.logo-circle {
background: rgba(0, 0, 0, 0.2);
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;
}
You could use the same picture (as seen in the background) as background in .logo-circle. And set the position of the image like this: background-position: center;
or:
Use a wrapper div for .logo-circle with the same size of the image and set overflow: hidden;. For .logo-circle set a very big shadow, like box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.2);
I coded a simple, one-page website for my parents from scratch, and I added a simple navigation menu below the hero that sticks when it reaches the top of the browser on scroll. It works flawlessly in Chrome and Firefox.
In Safari, the stick on scroll part works fine, but everything inside the navbar does this weird thing where it re-animates in from the left.
Here's the site: http://firstfruitsllc.com
Here's the little jQuery script and the CSS:
var mn = $(".nav");
mns = "nav-fixed";
hdr = $('header').height();
$(window).scroll(function() {
if ($(this).scrollTop() > hdr) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
});
.nav {
border-bottom: 2px solid #eee;
position: relative;
background: white;
height: 100px;
margin-bottom: -100px;
box-sizing: border-box;
overflow: hidden;
transition: 0.2s ease-in-out;
}
.nav-fixed {
z-index: 999998;
width: 100%;
max-width: 1440px;
position: fixed;
top: 0;
transition: 0.2s ease-in-out;
-webkit-box-shadow: 0px 6px 10px -5px rgba(0, 0, 0, 0.08);
-moz-box-shadow: 0px 6px 10px -5px rgba(0, 0, 0, 0.08);
box-shadow: 0px 6px 10px -5px rgba(0, 0, 0, 0.08);
}
.nav-fixed:before {
z-index: 999999;
content: '';
display: block;
position: absolute;
width: 150px;
height: 50px;
top: 25px;
left: 25px;
background-image: url('https://dl.dropboxusercontent.com/s/uezydedqpo55ub2/first-fruits-logo-color.svg?raw=1');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transition: all 0.5s ease-in-out;
}
Thanks!
It looks like safari is having a hard time with the transition of no widths being declared to having both declared as it goes to fixed. Try this:
.nav
{
width: 100%;
max-width: 1440px;
}
The issue occurs because new animatable properties are being added when the .nav-fixed class is added. Specifically width and max-width. To prevent this you can add
width: 100%;
max-width: 1440px;
to the .nav class.
When you add width: 100% to .navigation, the glitch is gone. I cannot explain why Safari behaves so odd though.
I found myself stuck with this problem: I have game map with following code
Code
.content-right {
width: 50%;
height: 100%;
position: relative;
align-self: auto;
background-color: #44362D;
}
.content-inner-top {
width: 100%;
height: 70%;
background-image: url("http://i.imgur.com/wLJ1Pnt.jpg"); /* map.png */
background-position: left center;
background-size: 100% auto;
-moz-user-select: none;
background-repeat: no-repeat;
box-sizing: border-box;
position: relative;
-webkit-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
}
.content-inner-bottom {
width: 100%;
height: 30%;
margin: 0 auto;
z-index: 9;
text-align: center;
display: block;
position: relative;
top: 10%;
transform: translateY(-10%);
}
#position {
width: 4%;
height: 6.11979%;
background-color: #FF503C;
border: 3px solid #90EE90;
box-shadow: 0px 0px 35px #87CEEB;
position: relative;
border-radius: 50%;
transform: scaleY(0.75);
left: 85%;
top: 200px;
}
<div class="content-right">
<div class="content-inner-top">
<div id="position"></div>
</div>
<div class="content-inner-bottom"></div>
</div>
I would like to absolute position #position element on game map, but, I find it impossible because every time I resize browser window height, element goes to another place. Images are shown below.
Images
1st image (normal window)
2nd image (resized window)
What should I do? I cannot find solution via javascript nor jQuery either...
Thanks for your help in advance
I see that there's a top in 'px' but when you decrease the size of window, the image is smaller not only in width but also height. That's why the pointer went down.
The percentage 'left' property seems to work fine. If you want to use also percents for 'top' property (which could solve the problem), you have to explicitly define the height of the element (the image in your case). You can do that with jQuery for example most easily like this (given that you have an #image element):
$('#image').height($('#image').height());
Then you can add a resize handler and reassign new height. You may have to remove the previous height, so the whole would be something like this:
$(window).resize(function() {
$("#image").css("height","");
$('#image').height($('#image').height());
});
Then you should be able to use css top property in percents and it would be working after window resize.
You will need to modify your layout in order to achieve this behavior
First of all you need to add your map as an img and created a holder for it
<div class="content-right">
<div class="content-inner-top">
<div class="map-holder">
<img src="http://i.imgur.com/wLJ1Pnt.jpg" class="content-inner-map" />
<div id="position"></div>
</div>
</div>
<div class="content-inner-bottom"></div>
</div>
After that it is a matter of css:
added
.content-inner-map {
resize: both;
width: 100%;
}
.map-holder {
position: relative;
top: 50%;
display: block;
transform: translateY(-50%);
}
.content-inner-top:after {
position: absolute;
-webkit-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
top:0;
left:0;
right:0;
bottom:0;
content:"";
}
Altered
.content-inner-top {
width: 100%;
height: 70%;
-moz-user-select: none;
box-sizing: border-box;
position: relative;
}
#position {
width: 4%;
height: 6.11979%;
background-color: #FF503C;
border: 3px solid #90EE90;
box-shadow: 0px 0px 35px #87CEEB;
position: absolute;
border-radius: 50%;
transform: scaleY(0.75);
left: 85%;
top: 24%;
}
Here is a working Fiddle
I would use SVG instead, simple code and fully responsive:
svg {
display: block;
width: 100%;
}
circle {
stroke: white;
stroke-width: 3;
fill: red;
}
<svg viewBox="0 0 604 568">
<image x="0" y="0" width="586" height="604" xlink:href="http://i60.tinypic.com/2enrntu.jpg"/>
<circle cx="400" cy="190" r="20"/>
</svg>
For the "range" input element in HTML5, there is a nice way to style the thumb and track separately. The only problem being it works differently on different browsers.
Daniel Stern has done some great work on this. Also he's written an online tool which generates the basic css styles for cross browser range input styling- range.css, I'm using these styles but I'm facing a few problems when using the z-index parameter.
In the webkit styles, its easy to give different z-index values to the thumb and track by setting the position to relative and assigning a z-index value.
This method doesn't work in the Firefox styles. Firefox would just ignore the z-index values of the track and thumb.
I am trying to draw a div element on the lower half of the range slider to make the lower and upper halves look different. So effectively i want my z-index values to be like this track < div < thumb
I have written a codepen to show this behavior. Its working perfectly in Chrome/Safari, but not in Firefox. Try opening it in Chrome/Safari to see how I it should behave in Firefox.
http://codepen.io/anon/pen/vOmQxr
How can i achieve similar behavior for Firefox? or is there any other way to style the upper and lower halves of the range slider separately for Firefox?(without external libs)
I know you asked this question a while ago but I actually spent some time to find a workaround solution for this issue.
The issue is z-index with pseudo elements of input range works differently on Firefox and Chrome. What you will have to do is to make the input range track's background to be transparent. Create a div divFill that will replicate the track and make it the lowest z-index. Then, divLowerFill is the next highest z-index. After that, put the input field as the next highest z-index. Since we made the background color for input range to be transparent, the lower elements should be visible. Of course, make the thumb pseudo element to be the highest z-index.
Although I didn't debug this on IE but the concept should work. Here's code snippet that I made some modifications on your Codepen code.
document.getElementById("rangeinput").addEventListener("input", function(e){
var rangeInput=document.getElementsByClassName("divLowerFill")[0]; rangeInput.style.width=e.target.offsetWidth*e.target.value/100 +"px";
});
.parent {
display:inline-block;
margin-left: 35px;
position:relative;
}
/* repplicating input range track background */
.divFill {
position: absolute;
width: 100%;
height: 6px;
top: 7px;
z-index: -2;
background: #00c9ff;
}
/* track fill */
.divLowerFill {
position: absolute;
height: 6px;
width: 70px;
top: 7px;
background-color: #273042;
z-index: 0;
pointer-events:none;
}
/* input range track style settings */
input[type=range] {
-webkit-appearance: none;
width: 70px;
margin: 2px 0;
vertical-align: middle;
position: relative;
background-color: transparent;
}
input[type=range]:focus {
outline: none;
}
/* Chrome, Safari track style settings */
input[type=range]::-webkit-slider-runnable-track {
width: 100px;
height: 6px;
cursor: pointer;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border-radius: 0px;
z-index: 1;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -2px;
z-index: 2000;
position: relative;
}
/* Firefox track style settings */
input[type=range]::-moz-range-track {
width: 100%;
height: 6px;
cursor: pointer;
background: none transparent;
border-radius: 0px;
border: 0px solid rgba(0, 0, 0, 0);
position: relative;
z-index: -1;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
/*cursor: pointer;*/
position: relative;
z-index: 100;
}
/* IE style settings */
input[type=range]::-ms-track {
width: 100%;
height: 6px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #00c5fa;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #00c9ff;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
cursor: pointer;
height: 6px;
z-index: 2000;
position: relative;
}
input[type=range]:focus::-ms-fill-lower {
background: #00c9ff;
}
input[type=range]:focus::-ms-fill-upper {
background: #05caff;
}
<div class="parent">
<div class="divFill"></div>
<div class="divLowerFill"></div>
<input id="rangeinput" type="range" min=0 max=100 value=100>
</div>
I am using bootstrap framework and what i am trying to achive is putting a background image over gradient with the following code:
jumbotron{
position: relative;
padding: 60px 30px;
margin-bottom: 30px;
color: #FFF;
text-align: center;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4), 0px 0px 30px rgba(0, 0, 0, 0.075);
background: linear-gradient(45deg, #020031 0%, #6D3353 100%) repeat scroll 0% 0% transparent;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2) inset, 0px -3px 7px rgba(0, 0, 0, 0.2) inset;
}
.jumbotron:after{
content: "";
display: block;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: url('css/bs-docs-masthead-pattern.png') repeat scroll center center transparent;
opacity: 0.4;
}
The problem i am facing is that when i use the position: absolute property in jumbotron:after all the link and hover (but i get an image over gradient) property ceases to exist. And when I don't use it, i don't get an image (but the link and hover property works).
Is there any way to get both the things at the same time w/o messing up the layout?
Instead of making an overlay with :after pseudo element, try to set up two gradients on jumbotron itself:
.jumbotron {
position: relative;
padding: 60px 30px;
margin-bottom: 30px;
color: #FFF;
text-align: center;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4), 0px 0px 30px rgba(0, 0, 0, 0.075);
background:
url('css/bs-docs-masthead-pattern.png') repeat scroll center center,
linear-gradient(45deg, #020031 0%, #6D3353 100%) repeat scroll 0% 0% transparent;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2) inset, 0px -3px 7px rgba(0, 0, 0, 0.2) inset;
}
Demo: http://plnkr.co/edit/Z64z6U28fff8jDEB3xgn?p=preview