I am very proficient in CSS but I can't for the life of me figure this one out.
I need to recreate a number of shapes in pure CSS (if possible) for a project. What makes it even more harder is that I need the shapes to use a background images. I have tried numerous CSS3 properties such as skew, transform, rotate etc... however none has worked so far. Skew got me closest but the background and it's contents where skewed. I tried setting an image inside the div and giving it opposite properties to the div skew which straightened the image but then I couldn't position the image correctly.
Is it possible in anyway to recreate this using CSS?
Even if someone can help me find the right property to use so I can research how it'll be done that would be helpful.
Thanks in advance.
Difficult shape to make this one. You can create this shape using clip-path but I'm afraid the support is not amazing for this property.
See the support here.
Now here is an example of the shape with a background.
.shape {
width: 400px;
height: 400px;
background: #000;
-webkit-clip-path: polygon(24% 0, 100% 20%, 100% 100%, 0 40%);
clip-path: polygon(24% 0, 95% 20%, 100% 100%, 0 40%);
background-image: url(http://p1.pichost.me/640/39/1629941.jpg);
background-size: cover;
}
<div class="shape"></div>
This will give a diamon so you can tweak it to get your shape :
#diamond-narrow {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
#diamond-narrow:after {
content: '';
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
http://css-tricks.com/examples/ShapesOfCSS/
Related
I've seen people make designs like this for their website. As you can see those two low opacity blue lights, one at the top right and the other at the bottom left. I am wondering how are they making this in HTML and CSS? I can make PNG out of this, but is there a way that can be done with HTML and CSS? I think it would load faster than a PNG file. Thank you in advance. :)
I tried using this code.
HTML:
<body>
<div></div>
</body>
CSS:
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
div {
width: 100%;
height: 100%;
background-color: #191b1f;
}
div::after,
div::before {
content: "";
display: inline-block;
position: absolute;
background: hsl(199, 56%, 18%);
width: 300px;
height: 300px;
border-radius: 50%;
filter: blur(70px);
mix-blend-mode: lighten;
}
div::before {
top: 0;
right: 0;
transform: translate(50%, -50%);
}
div::after {
top: 50%;
left: 0px;
transform: translateX(-50%);
}
/*With gradient background*/
div {
background: radial-gradient(
circle closest-corner at center 125px,
hsl(199, 56%, 18%),
#191b1f 70%
)
no-repeat;
}
Result:
For this method, the normally used styling is the backdrop filter method. By using that, you can create a frosted glass effect in CSS. First you should create a main div and then a sub div which we should create the backdrop effect. The method which I follows is:
Find a picture with similarity to the background.
Then reduce the brightness of the background image using filter: brightness(48%); and then I use the backdrop-filter: blur(5); to the sub div.
This is the exact same method which I was following for the past few months.
I created a diagonal line on a container div: when I zoom a whitespace (or maybe a margin) of 1px appears on the bottom of my div showing a piece of the background color of the parent div.
I have been facing this problem for days without a solution.
You can view it here: https://codepen.io/Sirvasile/pen/GyPapb
div {
position: relative;
width: 100%;
height: 212px;
background-color: orange;
}
div::after {
content: "";
position: absolute;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 40px 100vw;
border-color: transparent transparent white transparent;
}
<div></div>
This is a screenshot of the div without zoom.
This is a screenshot of the div when the web page is zoomed (> 100%) (experienced using Google Chrome and Safari):
P.S. I already tried using transform: translateY(1px) but I can't accept it as a solution because using it the div has no more a perfect diagonal line.
I've dealt with similar problems, though not this exact one, and I believe the cause, ultimately, is a rounding error that ends up leaving a spare pixel. It's a browser bug that you won't fix with CSS alone, and transform: translateY(1px) might be the only guaranteed fix to the above code.
But, we can probably avoid that bug just by creating this effect by different means.
div {
position: relative;
width: 100%;
height: 212px;
background-color: orange;
-webkit-clip-path: polygon(100% 0, 100% calc(100% - 40px), 0 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% calc(100% - 40px), 0 100%, 0 100%, 0 0);
}
<div></div>
Have you tried replacing 100% with100vw ?
Sometime using these two different values for the same element can resolve to a weird scroll appearing.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I want to create a diagonal background image as seen in the attached image. I can create a diagonal line using linear-gradient however as I have two different angles this didn't work.
Using Linear Gradients:
This can be done using multiple background images and positioning them accordingly. In the snippet below I've used 3 different layers - one for the top angle (a triangle which is transparent for 50% and is colored for the rest), one for the middle which is essentially nothing but a solid colored rectangle, this is created using linear gradients as it is easier to control the dimensions of an image and finally one for the bottom angle (same approach as the top one but this has a different height and so different angle.)
The output is also responsive as you can see by hovering the element in the below snippet. In the 2nd div, I've set different colors for each image so that you can see how it is formed.
div {
height: 300px;
width: 100%;
background: linear-gradient(to bottom right, transparent 50%, lightblue 51%), linear-gradient(lightblue, lightblue), linear-gradient(to top right, transparent 50%, lightblue 51%);
background-size: 100% 30px, 100% calc(100% - 130px), 100% 100px;
background-position: top left, left 30px, bottom left;
background-repeat: no-repeat;
transition: all 1s ease; /* just for demo */
}
/* just for demo */
div {
margin-bottom: 10px;
}
div:hover {
height: 400px;
}
div:nth-of-type(2) {
background: linear-gradient(to bottom right, transparent 50%, lightblue 51%), linear-gradient(lightpink, lightpink), linear-gradient(to top right, transparent 50%, lightgreen 51%);
background-size: 100% 30px, 100% calc(100% - 130px), 100% 100px;
background-position: top left, left 30px, bottom left;
background-repeat: no-repeat;
}
<div></div>
<div></div>
Using SVG: recommended
This is the approach that I generally recommend and is the best. It involves creating the shape using SVG and then placing it absolutely behind the div element.
div {
position: relative;
height: 300px;
width: 100%;
}
svg {
position: absolute;
height: 100%;
width: 100%;
}
polygon {
fill: lightblue;
}
<div>
<svg viewBox='0 0 300 100' preserveAspectRatio='none'>
<polygon points='0,10 300,0 300,100 0,75z' />
</svg>
</div>
Using Clip-path:
Another approach that can be used is to position a pseudo-element behind the main div and then set a clip-path in the required shape to this pseudo-element.
Note: This snippet will currently work only in WebKit powered browsers. Firefox would need the clip-path to be created via SVG element whereas IE doesn't support it all.
div {
position: relative;
height: 300px;
width: 100%;
}
div:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: lightblue;
-webkit-clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 75%);
clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 75%);
}
<div></div>
CSS Perspective
You can use a CSS Perspective Transform to create the shape you want.
div {
margin-top: 25px;
width: 500px;
height: 150px;
transform: perspective( 800px ) rotateY( -25deg );
background: blue;
}
<div></div>
CSS Tricks Docs
Perspective - CSS | MDN
You can apply perspective to the parent container of the rotated div to give it 3-dimensional depth from the front of the viewport.
N.B. For the difference between transform: perspective(value) and perspective: value, see the CSS Tricks Almanac entry on perspective:
Important: Please note the perspective property doesn't affect how the element is rendered; it simply enables a 3D-space for children
elements. This is the main difference between the transform: perspective() function and the perspective property. The first
gives element depth while the latter creates a 3D-space shared by all
its transformed children.
After applying a 3-dimensional depth to the parent container using perspective, you can then apply rotateY to the div you want to rotate.
Working Example:
section {
position: relative;
width: 600px;
perspective: 800px;
transform: translateX(-60px);
}
div:nth-of-type(1) {
position: absolute;
top:30px;
left: 0;
width: 100%;
height: 100px;
background-color: rgb(235,250,255);
transform: rotateY(320deg);
}
div:nth-of-type(2) {
position: absolute;
top: 0;
left: 220px;
width: 120px;
height: 140px;
background-color: rgb(103,201,236);
box-shadow: 6px 6px 6px rgba(127,127,127,0.5);
}
div:nth-of-type(3) {
position: absolute;
top: 24px;
left: 340px;
width: 120px;
height: 140px;
background-color: rgb(255,255,255);
box-shadow: 6px 6px 6px rgba(127,127,127,0.5);
}
<section>
<div></div>
<div></div>
<div></div>
</section>
I am trying to convert PSD into HTML using CSS.
I have a plain rectangle like this :
Now a oval shape glow element : ( As in PSD )
Because of this if you look at only rectangle , With a glow at top it looks like below :
How to achieve the same ? Any lead is appreciated :)
Using Radial Gradients:
You can sort of achieve that by placing a radial-gradient image on top of your rectangle with the solid color. The positioning and size of the gradient may need to be modified to suit your needs.
The radial-gradient that I had used is very similar to the one in your PSD image. That is is starts from a bluish color and then gradually moves to transparent. This gradient is then positioned such that its center point is at 75% width of the parent and a distance that is 25% of the parent's height above it.
div {
height: 200px;
width: 400px;
background-color: rgb(17, 45, 67);
background-image: radial-gradient(ellipse at 75% -25%, rgb(14, 102, 150) 0%, transparent 50%);
background-size: 100% 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
The main thing to worry with using radial-gradient is the relatively poor browser support.
Using Box Shadow:
Below is a slightly different approach using a pseudo-element and box-shadow. The box-shadow has a very high spread radius which produces a glow like effect.
This has better browser support than radial-gradient (even as low as IE8) but box-shadow cannot take values in percentage and hence this solution wouldn't be very useful for dynamic sized containers.
div {
position: relative;
width: 1280px;
height: 480px;
background-color: rgb(17, 45, 67);
overflow: hidden;
}
div:after {
position: absolute;
content: '';
right: 150px;
top: -250px;
height: 250px;
width: 300px;
border-radius: 50%;
background: rgb(14, 102, 150);
box-shadow: 25px 25px 150px 250px rgba(14, 102, 150, 0.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
The only way I can see is to use a pseudo element and put a gradient background on it. I've made this quickly to show you but it does not reproduce exactly your image :
.rectangle {
position: relative;
width: 300px;
height: 100px;
background-color: #112D43;
}
.rectangle:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 40px;
background: radial-gradient(ellipse at center, #094567 0%, rgba(0, 0, 0, 0) 50%);
}
<div class="rectangle"></div>
I have following markup
<body>
<div class="holder">
<div class="circle"></div>
</div>
</body>
and i have applied a fixed background to body element and white background applied to class holder
body {
background: url(image.png);
background-attachment: fixed;
}
.holder {
width: 500px;
height: 500px;
background: #fff;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(0, 0, 0, 0);
}
what i have tried to do is to make the circle transparent to see the body background. Simply, what i am trying is, making the circle transparent to see the body background image while the white background around the circle still exist. please excuse my English. Guys please help me.
What you are asking to do will not work using transparency.
However, there is a work around that is quite acceptable:
body {
background: url(http://placekitten.com/g/400/500);
background-attachment: fixed;
}
.holder {
width: 500px;
height: 700px;
background: rgba(255,255,255,0.8);
border: 1px dotted blue;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: url(http://placekitten.com/g/400/500);
background-attachment: fixed;
}
see demo at: http://jsfiddle.net/audetwebdesign/FqMXz/
Just apply the same background image to the .circle div.
This trick is taken from one of the CSS books by Eric Meyer.
The 4th number in rgba() is the alpha transparency. You've set it to 0, which is completely transparent. 1 would be completely opaque. You need to set that to some value between 0 and 1.
That said, if you are trying to create the effect of a hole, then what you need to do is create a background image that is white and has a transparent circle cut in it and make that the background to .holder. It doesn't matter how transparent you make .circle if .holder is completely opaque!
may be you should try it by adding opacity: value attribute or by setting its background-color: rgba(0,0,0,value)
Value must be between 0 to 1.
I'm about to just make 5 divs with 1 in the center all inside of a parent. Parent is transparent and your circle would be too. Surrounded on all 4 sides with ::before & ::after elements that aren't transparent to tighten up the seams... hope that helps.