I am making a One-Page webstie to practise Flexbox etc.
To do that, Im using PSD file and I have some troubles.
I wanna make rectangle with an oblique upper side with opacity on my background, i read about svg and should I do it with that like on this picture:
(brown thing with opacity throughout the website view)
I have again similar problem. I have a pic:
And it should looks like:
Tips will be great
You could do this with a CSS gradient.
Here I have a <div> with two backgrounds:
the image
a CSS linear gradient on top of it.
The sharp edge of the gradient works because there are two gradient steps that coincide. Meaning the gradient colour jumps straight from transparent to 50% blue.
I've used blue so that it shows up well in this example. In your case, just switch it to brown.
div {
width: 1240px;
height: 648px;
background: linear-gradient(175deg, rgba(0,0,200,0) 0%, rgba(0,0,200,0) 70%, rgba(0,0,200,0.5) 70%, rgba(0,0,200,0.5) 100%),
url(https://i.stack.imgur.com/Rq6eR.jpg);
}
<div></div>
Another approach without gradient.
Create a wrapper
It can be the div with background image. Important thing is you need to overflow: hidden and position: relative.
Create a rectangle and rotate it
You can create a :before pseudo element like this:
.wrapper {
position: relative;
width: 100%;
height: 200px;
background: red;
overflow: hidden;
}
.wrapper:before {
content: '';
position: absolute;
display: block;
background: blue;
opacity: .5;
bottom: -100px;
left: -100px;
right: -100px;
height: 150px;
transform: rotate(-5deg);
}
<div class="wrapper"></div>
Related
I've been trying to use the mix-blend-mode on a page that has contains instances of css opacity transitions. What appears to be happening is that the div containing the mix-blend-mode displays as it would without the blend mode during the transition, or rather, while the animation is in progress. I've only found it to be an issue in Chrome.
In my example, while the div is transforming the blend-mode displays correctly over the image but not over the page background. Once the transition is complete it goes back to display as it should. In other words the blended div appears as solid yellow on the black background while the animation is ongoing but since it is set to darken it should be invisible over the black background. Once the animation is finished it appears as it should. It appears normal over the image.
I've tried this is Firefox and Safari and there seems to be no issue.
Pen: http://codepen.io/anon/pen/QGGVOX
Edit - I've found another instance where this occurring that doesn't involve any animation. Weirdly it happens when the position of one div is set to fixed while the other is absolute, see here: http://codepen.io/anon/pen/wooRME If the position of the div .image is changed to absolute then the blend-mode appears normal.
body {
background: #000;
}
.blend {
height: 650px;
width: 50%;
background-color: yellow;
mix-blend-mode: darken;
position: absolute;
opacity: 1;
left: 0;
top: 0px;
z-index: 100;
}
img {
position: relative;
z-index: 0;
}
So, I think I figured the problem. During the animation, it seems like the body doesn't count as an element, thus making the yellow appear at 1 opacity. I tested with other blend mode and it always appears yellow. (when set to 'difference the expected result would be white instead of yellow)
So the fix? just add a div with 100% sizes and a black background! Then, the yellow has something to blend in and doesn't show up.
Here's the code that worked in your pen:
html - added the bg div:
<div class="bg"></div>
<div class="blend"></div>
<img src="http://lorempixel.com/500/500/">
it's css:
.bg{
background: #000;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
}
body {
background: #000;
width: 100%;
height: 100%;
margin: 0;
}
I also changed the body to fill the window so the margin weren't yellow too. Alternatively, the blend div could be sized in function of the body.
tagging #chrscblls since they wanted to know if you found anything.
EDIT :
For the other codepen the problem wasn't the same tho. They were trying to darken an image and a yellow rectangle onto a gray background.
If they didn't want the yellow to show on their gray background, the solution was simply to put the image inside a div and use ::after to blend in a color. Or even just make an empty div, give it the image as background and use the ::after.
this:
<div/>
with:
body {
background: #333;
}
div{
position:fixed;
width: 500px;
height: 500px;
top:50px;
left: 50px;
mix-blend-mode: darken;
background-image: url("http://lorempixel.com/500/500/");
}
div::after {
content: "";
height: 100%;
width: 100%;
background-color: yellow;
mix-blend-mode: darken;
position:absolute;
opacity: 1;
left: 0;
top: 0;
}
or this:
<div><img src="http://lorempixel.com/500/500/"></div>
without the 'background-image' in the div css.
I have a div spanning the whole height of the viewport, while being horizontally center-aligned through use of margins, and would like to center a red square of, say, a 100px by 100px in that div just using CSS. Background-color: red wouldn't work, because that will span the whole div, which will be bigger than 100 pixels. I currently have the following solution:
div {
background-image: linear-gradient(to right, red, red);
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center;
}
It works, because there's no shift in gradient, but using linear-gradient in this way seems sort of hackish, which makes the solution less useable. Is there any way to generate a purely red square of some size smaller than the div without resorting editing the HTML of the page, or resizing the div with CSS? Preferably, I would also like to avoid scaling up an image of 1 red pixel (I wouldn't easily be able to change the colour).
Thanks for reading!
You could use the :after pseudo selector to add a block with these dimensions. If you position it absolute you can center it using left, top and a transform.
.box {
position: relative;
}
.box:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
}
Or see http://codepen.io/ckuijjer/pen/CbduL
try this
html
<body>
<div id="div0">
<div id="div1"></hr>
</div>
</body>
css
#div1 {
width:100px;
height:100px;
background-color:red;
top: 50%;
transform: translateY(50%);
margin-right:auto;
margin-left:auto;
}
#div0{
height:500px;
width:100%;
background:white;
}
Our designer wants to do that:
But I can't figure out a good way to do this triangle crop:
With an :after that takes all the width and uses some kind of borders trick to make a triangle
With a big :after element that is rotated and white, but it should not hide any other text
With some magic filter I don't know?
By using a canvas, cropping it in JS, then loading the image as a base64 url? (Maybe overkill :D)
What do you think?
Edit: version 2: http://jsfiddle.net/mtaU8/4/ works with changing bg.
Here ya go: http://jsfiddle.net/mtaU8/
HTML: (I used a div with a background, but you could easily use an img element.)
<div class="container">
<div class="img"></div>
</div>
CSS: (mostly fluff for setup, but basically use transform:rotate() on an :after content, then position it so it slices your picture nicely. Contain all that in your container and you're good to go.)
.container {
width: 250px;
height: 100px;
position: relative;
overflow:hidden;
}
.img {
width: 250px;
height: 100px;
background-color: blue;
position: relative;
}
.img:after{
content:"";
position: absolute;
width: 400px;
height:125px;
background-color: white;
top:90px;
left:-20px;
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
I'd suggest using the CSS clip property:
.crop {
position: absolute;
clip: rect(110px, 160px, 170px, 60px);
}
The clip property's rect value represents the section of the image that will be cropped. Here's a demo.
Is this even possible?
I have a box and want to add one background image over the other. But i want to add an opacity 0.5 just
for the top image.
You can do it with pseudo element:
#example1 {
position: relative;
width: 500px;
height: 250px;
background: url(http://goldenageofgaia.com/wp-content/uploads/2012/09/Field-flowers-image7.jpg) 60% 60% no-repeat;
}
#example1:after {
content: "";
position: absolute;
top: 10%;
left: 10%;
opacity: .7;
z-index: 10;
width: 100px;
height: 100px;
background: url("http://www.butterflyskye.com.au/Monarch%20Butterfly%202.jpg");
}
http://jsfiddle.net/Let8U/
Check out: http://www.css3.info/preview/multiple-backgrounds/ It would help somewhat.
#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
As you can see in the example given, there are two images - one center bottom and the other top left. For Opacity, I would do that in the image editor if I wanted to layer backgrounds.
There's no way to change a background-image's opacity.
What you can do is add an extra element with the desired opacity and background on top of your box.
This snippet on CSS-Tricks shows an elegant way of doing this with pseudo-elements, so you don't need to clutter your markup to achieve the effect: Transparent Background Images
Hope it helps.
Im looking for a way to recreate this button with CSS only.
I know about the triangle technique and I also know how to add a border to it, but unfortunately I don't know any way to recreate this button (without adding additional wrappers or using images).
The buttons I need this style on are <input["submit"]> and ordinary <a>'s.
With one element, you could do it using gradients and skewed pseudo-elements for a link:
demo
(you could actually do it using just gradients, but then a hover action won't be triggered on hover on the arrow shape itself, but on hover on the rectangular element containing it)
HTML:
<a class='boo' href='#'>click me</a>
Relevant CSS:
.boo {
display: inline-block;
position: relative;
padding: .5em 2em;
background:
linear-gradient(60deg, dodgerblue 50%, transparent 50%) 100% 0,
linear-gradient(-60deg, transparent 50%, dodgerblue 50%) 100% 100%,
linear-gradient(-90deg, transparent 1em, dodgerblue 1em);
background-repeat: no-repeat;
background-size: 1em 50%, 1em 50%, 100% 100%;
}
.boo:before, .boo:after {
position: absolute;
right: -.2em;
width: .5em; height: 50%;
background: dodgerblue;
content: '';
}
.boo:before {
top: 0;
transform: skewX(30deg);
}
.boo:after {
bottom: 0;
transform: skewX(-30deg);
}
EDIT:
If your background is a solid color, not an image or a gradient, you could do it in a much simpler way, without using gradients (which means that this second method also has the advantage of working in IE9).
demo #2
.boo {
display: inline-block;
position: relative;
padding: .5em 2em;
background: lightblue;
}
.boo:before, .boo:after {
position: absolute;
right: -.3em;
width: .5em; height: 50%;
box-shadow: -.2em 0 0 white;
background: inherit;
content: '';
}
.boo:before {
top: 0;
transform: skewX(30deg);
}
.boo:after {
bottom: 0;
transform: skewX(-30deg);
}
You should use a background image. Create a transparent png containing the arrow.
You would need two elements, the outer would contain the background image, the inner would contain the text, and a background color which is the same as the one on the arrow. Alternatively, you could use a second background image instead of a background color, for example if your button is not just a flat color.
The trick is to align the box containing the text with the background image.
If your arrow is 20px tall, your inner box could be e.g. 16px plus 2px padding on each side (search for box model if you would like to understand this better).
The outer element can have a right-margin set to the approximate width of the arrow image.
I hope this makes sense. The general technique is called sliding doors. I suggest reading the entire article if you have the time.