I have a div 700px x 300px and a background picture 700px x 300px. The div height can be increased to 600px. Div sizes are changed with jQuery.
I have a next CSS style for div:
#myDiv {
position:relative;
overflow:visible;
background:transparent url(../images/background.jpg) bottom no-repeat;
border:1px solid #000;
-webkit-box-shadow:0 0 10px 2px #000;
-moz-box-shadow:0 0 10px #000;
-ms-box-shadow:0 0 10px #000;
-o-box-shadow:0 0 10px #000;
box-shadow:0 0 10px 2px #000;
margin:10px;}
If div height is increased, the background should be mirrorly reflected by vertical. I've added the next CSS style in my CSS file:
#myDiv:before {
background:url(../images/background.jpg);
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);}
But it does not work (I try different browsers). May I miss something?
I think you miss few important styles in the :before element. You have to specify content, dimensions and since :before has display default inline, you have to make it block.
#myDiv:before {
content: "";
display: block;
height: 300px;
width: 700px;
background: url(http://lorempixel.com/700/300/);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
The whole demo: http://codepen.io/canescz/pen/zHCjA
Note that the :before element pushes whole content down so you might want to make the :before as position:absolute. But I think if you play with it, you will figure out what you need.
By the way only -webkit prefix should be enough since other browsers don't use prefixes anymore for transform. Check http://caniuse.com/#search=translate to match your desired browser support.
Related
i have a menu hamburger "icon" for the mobile breakpoint. i have it set up as 3 lines and i want them to transition to an X (that will close the menu).
i want the top bar to go 45 degrees, the middle bar to disappear, and the bottom bar to go 45 degrees the other way. then the top and bottom bars will shift up and create an X
AS OF NOW....it only animates for as long as i hold my mouse down. Why is this so? I just need the animation to complete itself on click.
html:
<a class="navbar-item-link" "javascript:void(0)" >
<div class="hamburger-icon"><span></span></div>
</a>
stylus:
.hamburger-icon
&:before, &.hamburger-icon span, &:after
content ''
display block
height 2px
width 20px
background-size 100%
background rgba(255,255,255,0.5)
margin 6px auto 7px auto
transition all 0.2s linear
&:active
&.hamburger-icon span
background-color transparent
&:before
transform rotate(45deg)
top -10px
height 2px
background rgba(255,255,255,0.5)
width 30px
&:after
transform rotate(-45deg)
bottom -10px
height 2px
background rgba(255,255,255,0.5)
width 30px
The :active acts like a mouse down. When you'll release the click, the animation will stop.
You have a few solutions using JS or CSS.
In CSS, you could use the keyframes to be sure your animation will be finished.
In JS, you could use a click event which could animate your icon with JS animations, or add a class which would contain your clicked properties.
The following example is using a preprocessor. LESS or SASS would have the same syntax here:
.hamburger-icon {
/* .hamburger-icon styles */
&.active {
span {
background-color: transparent;
}
&:before {
transform: rotate(45deg);
top: -10px;
height: 2px;
background: rgba(255,255,255,0.5);
width: 30px;
}
&:after {
transform: rotate(-45deg);
bottom: -10px;
height: 2px;
background: rgba(255,255,255,0.5);
width: 30px;
}
}
}
Then in jQuery
$('.hamburger-icon').on('click', function(){
$(this).addClass('active');
});
Hope you got the point.
Good Luck'
The site I'm working on has headings that look like this:
http://i.imgur.com/ssvj8J1.png
They need to...
a) be centered on the page
b) be flexible width, to fit the contained text with a few em of padding either side.
c) work on IE9+, and of course all the other modern browsers
d) work on any background (so the images used can't contain white bits to help with overlaying)
I started off chopping it into 3 bits, and using ::before and ::after. This had problems with the backgrounds overlapping.
I then tried a sliding-doors approach, with just 2 images, but obviously had similar problems.
Now I'm on multiple BG images, which I've not used before. Same problem as above, they overlap. The solution seems to be to "clip" the middle one to content-box, but then that limits the padding I can use to strictly 53px, the "width" of each end bit of the banner, making them look too cramped?
Also, what's the best way of centering these? They're h1 tags. Do I need to use positioning/translation/inline-block? Or can I somehow keep them as 100% width block elements (which would be easier/better) and just centralise the backgrounds?
This is what I had before I tried to make them fluid:
h1{
background:url(banner.png) 50% 0 no-repeat;
line-height:52px;
color:#fff;
padding:0 0 6px}
And this is where I'm at now:
h1{
background-image:url(banner-left.png), url(banner-mid.png), url(banner-right.png);
background-position:0%, 50%, 100%;
background-repeat:no-repeat, repeat-x, no-repeat;
background-clip:border-box, content-box, border-box;
line-height:52px;
color:#fff;
display:inline-block;
padding:0 53px 6px}
I'm not happy with this for the reasons mentioned above. I feel I'm missing some obvious/easy tricks?!
Thanks - CSS seems to have moved on a lot since I last did anything significant!
You can use a pseudo elements and avoid the images completely.
Codepen Demo
HTML
<div><h1><span>Short Text</span></h1></div>
<div><h1><span>Much Longer Text</span></h1></div>
CSS
body {
text-align: center;
}
div {
margin: 25px;
}
h1 {
position: relative;
line-height: 1em;
max-width:50%;
display: inline-block;
}
h1 span {
color:gold;
padding: .5em;
background: black;
box-shadow:
0 0 0px 1px gold,
0 0 0px 3px black;
}
h1::before, h1::after {
position: absolute;
content:"";
top:35%;
z-index:-1;
border: solid black;
border-width:25px;
}
h1::before { /* left */
border-left-color:transparent;
left:0;
transform:translateX(-75%)
}
h1::after { /* right */
border-right-color:transparent;
right:0;
transform:translateX(75%)
}
I wanted to make a cool div, so I made this image to get its borders:
The problem is that half of the borders are transparent area, so when I try to fill the empty center of the div with background-color it also paints the outer, transparent area. I'd like the background color not to get past the border.
Here's what I'm talking about:
#charset "utf-8";
/* CSS Document */
#testDiv{
border-image-source:url(https://s9.postimg.org/40j461sf3/Div_Sprite.png);
border-image-slice: 50% 25% 25%;
border-image-repeat:repeat;
border-image-width:auto;
border-image-repeat:round;
background-color: red;
min-height:600px;
width:600px;
}
#body {
height:100%;
width: 100%;
background: #CCC;
position: absolute;
margin: 50px 0 0 0;
}
<div id="testDiv">
</div>
Or see http://jsfiddle.net/6M59T/119/.
How can I solve this? I've thought on putting a slightly smaller div inside this one, but I don't know how to adjust it so it always covers a bit less than its parent. Also, I'd like to keep it as simple as possible. Any ideas?
Maybe i am mistaken, but you can try to play with border-image-outset and margin attribute.
float:left;
margin:50px 20px;
border-image-source:url(http://s9.postimg.org/40j461sf3/Div_Sprite.png);
border-image-slice: 50% 25% 25%;
border-image-repeat:repeat;
border-image-width:auto;
border-image-repeat:round;
background-color: red;
border-image-outset:30px;
http://jsfiddle.net/6M59T/120/
I am applying CSS3 blur filter on an image, but unexpectedly the blur effect goes out of the image original size (at least on Webkit browsers ).
I used overflow: hidden; but it's not working.
Here is my code:
HTML:
<div class='container'>
<img src='img.jpg' class='blur' />
</div>
CSS:
body{
padding:0px;
margin: 0px;
background: #1f1f1f;
}
.blur{
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
}
.container {
border:1px solid #fff;
margin:40px;
float:left;
overflow: hidden;
}
And here is a fiddle
Any ideas?
By giving the img a negative margin such as
img {
margin: -5px;
}
... will hide the spillage. You can play around with the margin.
FIDDLE
EDIT: Why This Occurs
Applying blur... you are blending your element by whatever amount of px, em etc. you declare e.g. 5px. To create this blur, the element will be expanded/feathured by that amount outside of its current size.
So applying a negative margin essentially "clips" the size and prevents anything outside of it to work. "Clipping" it is one approach, another would be by wrapping the element with a div and declaring a height and width and applying overflow: hidden. This will mask the overflow.
As I was experiencing the exact same bug on Safari 8 I thought I'd post my solution.
In the above example, you'd just need to add
-webkit-filter:blur(0px);
to the container.
The blur effect always go beyond the width.
In your case you can fix the issue using one of the following techniques -
Try setting a width of your .container and reduce 15px + 15px from both height and width of the img using CSS calc() function.
Or you can just add a padding of 15px to the img
DEMO of 2nd solution
I don't know much about "blur" yet, but I'm guessing it spreads / blurs out the edges 15px (in this case) in every direction. When you add padding: 15px; to your .container class it looks fine:
.container {
border:1px solid #fff;
margin:40px;
float:left;
overflow: hidden;
padding: 15px;
}
here is the fiddle
Put height and width attributes that are smaller than the image on the container. A size of 1px less than the image seems to work well.
CSS:
.container {
/* ... */
width:399px;
height: 223px;
}
JSFiddle
If your background around the clipping box .outer can be solid, you can cheat with a drop shadow. http://jsfiddle.net/ffghjkbj/
.overflow{
width: 200px;
height: 200px;
overflow: visible;
background-color: transparent;
position: relative;
z-index: 4;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
margin: 30px;
}
.overflow:after {
content: "";
position: absolute;
display: block;
box-shadow: 0 0 0 40px #fff;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.inner{
width: 100%;
height: 100%;
background: green;
filter: blur(10px);
-webkit-filter: blur(0px);
transition: all 0.5s ease-in-out;
-webkit-transform: scale(1.2 , 1.2);
-webkit-transform-origin: 50% 50%;
z-index: -1;
position: absolute;
-webkit-backface-visibility: hidden;
margin: 0px;
padding: 10%;
box-sizing: border-box;
}
.overflow:hover .inner{
filter: blur(10px);
-webkit-filter: blur(10px);
}
If you background is not solid, you could maybe use a border-image, with the same image than the background, to fake the effect, which would be almost the same than using a png mask with a hole in the middle, instead of a background, and moving the pseudo-object with the mask to the front with z-index.
The blurry border you see is generated by the .inner element being CLIPPED (by its parent) BEFORE the blur is applied. Definitely a way for the acceleration not to waste power in rendering hidden areas.
So the .inner element is ALREADY clipped at the parent's edges when the blur is applied to it, and the blurry frame is actualy the outside empty area bleeding inside the image when blurred. The blur is NOT applied to the whole inner element as we would imagine if the element was "inside" or "behind". Just to the visible part. (This is why an oversized .inner element as suggested above won't work).
It's not obvious because the idea of a children element "inside" or "behind" its parent is in our mind. Objects just happen to be clipped at the paren't coordinates, but are actually IN FRONT of the parent.
I'm trying to get these divs to overlap and have the text be inside the triangle but the text can only be moved around outside the triangle.
JSFiddle
This is the HTML+CSS:
<div class="tri">
<div class="test">
This is test
</div>
.tri {
width: 0;
height: 0;
border-top: 100px solid black;
border-left: 100px solid transparent;
position:relative;
}
.test {
display:inline-block;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
zoom:1;
margin-top:-80px;
margin-left:-80px;
color:red;
}
You can simply use position: relative; for the container element and than use position: absolute; for the child element, this way, your absolute positioned element won't flow out in the wild, and will be relative to the parent element, also it will be overlapped this way
Demo
Also it's a CSS triangle with borders and height and width set to 0 respectively, so you cannot expect an the child element to overlap the triangle
I'm not entirely sure of what you are trying to achive here.
If you want the text to be inside the black triangle, you could just edit out
display:inline-block;
Worked in JSFiddle, only tested in FireFox and Chrome though, might want to check more browsers.