I'm wondering how to achieve a diagonal overlay/mask such as the image below:
This can be done by using a regular image that contains the mask, giving it a high z-index, and absolutely positioning it on top of the other image:
.bottom-mask {
position:absolute;
left:0;
bottom:0;
height:45px;
width:100%;
z-index:400;
background:url(../images/bottom-mask.png) no-repeat 50% 0
}
I have since learned that there are multiple ways to achieve this effect both using SVG, CSS and image background overlays. I decided to go with a pseudo element and using the transform property.
https://codepen.io/mattsince87/pen/VExQGm
.box:after {
content: "";
display: block;
position: absolute;
top: 150px;
width: 600px;
height: 600px;
background: #fff;
transform: rotate(-15deg);
transform-origin: center center;
left: -100px;
}
Related
This is what i am trying to achive
i have :
#image1 {
position: absolute;
bottom: 0px;
align-self: auto;
background-color: #dc022e;
width: 340px;
height: 100px;
border-radius: 50% / 100%;
border-bottom-left-radius: 0;
/*transform: rotate(10deg);*/
border-bottom-right-radius: 0;
opacity: 0.8;
}
#image2 img {
width: 80%;
}
<div>
<div id="image2">
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcThtVuIQ7CBYssbdwtzZjVLI_uw09SeLmyrxaRQEngnQAked5ZB">
</div>
<div id="image1"></div>
</div>
Finally I don't know how to make it rotated and with the margins cut like in the picture
A Quick example of this would use a pseudo element and have the image set in the background.
div {
position: relative;
height: 300px;
width: 500px;
background: url(http://lorempixel.com/500/300);/*image path*/
overflow: hidden;/*hides the rest of the circle*/
}
div:before {
content: "";
position: absolute; /*positions with reference to div*/
top: 100%;
left: 50%;
width: 0;/*define value if you didn't want hover*/
height: 0;
border-radius: 50%;
background: tomato;/*could be rgba value (you can remove opacity then)*/
opacity: 0.5;
transform: translate(-50%, -50%);/*ensures it is in center of image*/
transition: all 0.4s;
}
/*Demo Only*/
div:hover:before {/*place this in your pseudo declaration to remove the hover*/
height: 100%;
width: 150%;/*this makes the shape wider than square*/
transform: translate(-50%, -50%) rotate(5deg);/*ensures it is in center of image + rotates*/
}
div {/*This stuff is for the text*/
font-size: 40px;
line-height: 300px;
text-align: center;
}
<div>HOVER ME</div>
Instead of nested elements, you can just use a pseudo element. This is placed at the bottom of the container div. For this to work, you need position:relative and overflow:hidden on the container div. Also, pseudo elements always need the content declaration.
To modify the border radius, you just play around with left | width | height of the pseudo element. You don't need any rotation.
Instead of hex color and opacity you can as well use the "new" color space rgba(r,g,b,a) where a is the opacity value.
For the passepartout you simply use the border declaration.
#image2{
position:relative;
border:10px solid #888;
overflow:hidden;
box-shadow:0 0 4px #aaa;
}
#image2::after {
content:"";
display:block;
position: absolute;
bottom: 0;left:-10%;
background-color: #dc022e;
width: 120%;
height: 60%;
border-radius: 100% 100% 0 0;
opacity: 0.8;
}
#image2 img {
width: 100%;
display:block;
position:relative;
}
<div id="image2">
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcThtVuIQ7CBYssbdwtzZjVLI_uw09SeLmyrxaRQEngnQAked5ZB">
</div>
You can just use position: absolute for your image and position: relative for your overlay, adjusting the top position and width according to your needs. Here's a Fiddle. Hope this helps!
Edit: Here's an updated version of the Fiddle demonstrating border and overflow properties on the img container. As CBroe mentioned, rotating a circle is probably not a good use of your time in this case. Also, I definitely agree that using a pseudo element is a much cleaner approach than nesting images.
So I'm trying to get an element to align itself a certain percentage from the CENTER of the page.
So I've tried replacing where I'd usually put a percentage from either the left or the right with "center"
.aboutcredit {
z-index:-100000;
center:25%;
top:75%;
transform:translateY(-50%) translateX(-50%);
position:fixed;
text-align:center;
vertical-align:middle;
}
but no luck. Kind of what I'm trying to do here:
I don't know if you have noticed, but center:25%; does nothing. You probably want left:50%. Seeing as you want it to be moved 25%, make it left:75%; and that should be what you're looking for. Like so:
.aboutcredit {
width: 50px;
height: 50px;
background-color: black;
z-index: 1;
position: absolute;
left: 75%;
top: 50%;
transform: translate(-50%);
text-align: center;
vertical-align: middle;
}
<div class="aboutcredit"></div>
I've run into this several times, and the way I do it is to:
1. Set the element to position absolute
2. set the element using percentages to the area where you would like it, to center on page it would be left:50%, margin-left: -{width / 2}, but in this case it is left:75%, margin-left: -{width / 2}
.box {
height:400px;
width:400px;
border:1px solid black;
left: 75%;
margin-left:-200px;
position: absolute;
}
http://plnkr.co/edit/7j8DxiUUASrn8wQqBKNW?p=preview
.aboutcredit {
z-index:-100000;
left:50%;
top:50%;
transform:translateY(-50%) translateX(-50%);
position:fixed;
text-align:center;
vertical-align:middle;
}
http://jsfiddle.net/gerLkswu/1/
I have a template i need to override.My div is centered in the middle and as my design uses a fullwidth ribbon i used :before and :after to create the effect.it worked now on top of that ribbon i need to have an image displayed on top of it.it works for the main div but for the pseudo elements i cant get it to work.
.backbox:before
{
content: '';
display: block;
width: 5000px;
height: 400px;
background-color: gray;
background-image:url(/wp-content/uploads/2014/08/buildings.png) ;
background-position:bottom;
background-repeat: no-repeat;
top:0px;
background-repeat: no-repeat;
position: absolute;
left: -4985px;
z-index: 5;
}
.backbox:after
{
content: '';
display: block;
width: 5000px;
height: 400px;
background-color: gray;
background-image:url(/wp-content/uploads/2014/08/buildings.png) ;
background-position:bottom;
background-repeat: no-repeat;
position: absolute;
right: -4985px;
z-index:5;
}
Edit:
As you requested here is an image of what the web page should actually look like
Can't you use z-index for this?
So put make a div surrounding both the ribbon and the image you want to put on top of it. Then make the ribbon a z-index: 1; and the image and z-index: 2;
Im trying to figure out how to make shopping cart tab that would be positioned on the right corner and also rotated 90 degrees. The rotation naturally mixes the position but maybe there's a workaround of wrapping to different wrappers etc....
Extra points if there wouldn't need to define width. I don't care about older browsers
How about using transform-origin? See DEMO.
Relevant CSS:
#box {
position: relative;
}
.bg {
right: 40px; /* same as height */
height: 40px;
transform: rotate(-90deg);
transform-origin: 100% 0;
position: absolute;
line-height: 40px; /* same as height, for vertical centering */
}
Ana's answer is excellent and pointed me in the right direction, but I realised you could achieve the same effect without having to explicitly set the height, line-height and position for the element you want to move - instead, just set translate(0, -100%):
body {
margin: 0;
}
#box {
position: relative;
}
.bg {
right: 0;
padding: 1em;
transform: rotate(-90deg) translate(0, -100%);
transform-origin: 100% 0;
position: absolute;
background: #FF1493;
}
<div id="box">
<div class="bg">
<div class="txt">He's not the Messiah. He's a very naughty boy.</div>
</div>
</div>
...and a jsFiddle for good measure.
To rotate text at 90° using CSS, consider using writing-mode.
Set position: relative; on the parent div, then use something like this on the rotated element:
#rot {
position: absolute; /* only handy here because its parent is set to `position: relative;` */
left: 0;
top: 0px;
/* writing-mode: sideways-lr; /* Webkit browsers don't support `sideways-lr` yet */
writing-mode: vertical-rl; /* `vertical-rl` and a rotation will achieve the same effect */
transform: scaleX(-1) scaleY(-1);
height: 100%;
background: rgba(0, 0, 0, 0.1);
text-align: center;
line-height: 2.85;
color: white;
font-weight: bold;
}
You'll end up with a div stacked on the side of your parent div, with the text at a 90° angle.
This way you don't have to think about the rotation origin.
If you need to position wrapper div.and rotate child div so that its always centered vertically and horizontally, try something like this!
.togglewrap{
position:relative;
float:left;left:20%;top:0;
width:30px;
height:120px;
background-color: #ffde21;
}
.sbartoggle {
background:#f5f5f5;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
width:100%;
height:30px;/*equal to parent width*/
line-height:30px;/*center text*/
transform: rotate(-90deg);
background-size:10px 10px;
}
I'm trying to stretch a background image to 100% width and height of the parent div. background-size is not supported in IE8 of-course. I tried the following code but it's not working.
.box:before {
background: url(images/body_background2.png) no-repeat;
display: block;
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
content: '';
}
Use a <img> with position:fixed;top:0;left:0;width:100%;height:100%; and negative z-index. There's unfortunately no way to implement this behavior in IE 8 using only CSS.
See the following article for further information: How Do you Stretch a Background Image in a Web Page.
If you wish to use an image as a background for a given <div> try the following approach:
<div class="fullbackground">
<img class="fullbackground" src="yourImageSrc" />
</div>
.fullbackground{
position:relative;
}
img.fullbackground{
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%; /* alternative: right:0; */
height:100%; /* alternative: bottom:0; */
}
I use this article often to do my full screen backgrounds :)
http://css-tricks.com/perfect-full-page-background-image/
Using the AlphaImageLoader filter and setting the sizingMethod to scale seems to do the trick according to Perfect Full Page Background Image.
HTML:
<img class="fullscreen" src="fullscreen.jpg" />
CSS:
img.fullscreen {
border: 0;
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1001;
}
Have a look at https://github.com/louisremi/background-size-polyfill. This is a nice plugin another member of my team came across for the same issue.
Once you have the script included into your solution, add the following line into the relevant CSS class along with any other sizing/positioning attributes you may wish to add.
-ms-behavior: url(/scripts/backgroundsize.min.htc);
We have this implemented for full width images and widget backgrounds and it works a treat.
This (demo) does the trick (digestable version of css-only technique #2 from http://css-tricks.com/perfect-full-page-background-image/):
<div class="background-size_cover">
<img src="images/body_background2.png">
</div>
and
.background-size_cover {
top: -50%;
left: -50%;
width: 200%;
height: 200%;
position: relative;
}
.background-size_cover img {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
position: absolute;
}
You'll want to make sure that the parent div is overflow: hidden; besides having whatever dimensions you want the image to get stretched to fit in.
I combined AlfaImageLoader filter with css3 background-size and worked on all browsers. Here's what i did.
background : url('../images/background.jpg') no-repeat ;
background-size: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/background.jpg',sizingMethod='scale');
By the way, you need to put your background image to your wrapper div in this method.