I'm trying to create a frosted glass effect on a non-rectangular element but it's not working out. I'm experiencing an odd issue that I can't seem to wrap my head around...
The frosted glass effect is easy to accomplish by setting a fixed background-image on the document body, adding a partially transparent background color to the element and creating a ::before pseudo element with the same fixed background-image and applying a blur filter. Like so:
body {
background: url(bg-lanterns.jpg) 0 / cover fixed;
}
main {
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
}
main::before {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(bg-lanterns.jpg) 0 / cover fixed;
filter: blur(10px);
}
Creating a non-rectangular element is also easy by using clip-path like this:
main {
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
But trying to combine these two effects breaks the stacking order and causes the ::before element to appear above the white background.
I get the same result in Chrome and Firefox so I'm wondering if this is the expected behavior and I'm simply doing something wrong... Can anybody shed some light on what is happening here?
Here's a live demo:
body {
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
}
main {
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
main::before {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
}
<main></main>
According to the specification for clip-path:
A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity [CSS3COLOR] does for values other than 1.
I managed to achieve the desired effect by adding the white color to an ::after pseudo element and clipping both pseudo elements instead of the element itself.
body {
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
}
main {
position: relative;
margin: 1rem auto;
height: 600px;
width: 800px;
display: flex;
flex-flow: column nowrap;
align-content: center;
align-items: center;
justify-content: center;
}
main::before,
main::after {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
main::before {
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
}
main::after {
background: rgba(255,255,255,0.7);
}
<main> <span> test </span> </main>
Related
enter image description here
I want to make a similar effect to this one not changing html code , using only CSS , In HTML i have got only one div with class "square" , Thank you for your support in advance .
i think that is what you want
.container {
font-size: 16px;
background: #fff;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 28em;
-moz-perspective: 28em;
perspective: 28em;
position: relative;
top: 100px;
}
.box {
position: absolute;
width: 14em;
height: 14em;
left: 50%;
margin-left: -7em;
backface-visibility: hidden;
}
.anim {
transition: all 0.5s ease-in-out;
}
.b0 {
transform: translateX(-11.7em) rotateY(30deg) ;
}
.box img {
width: 100%;
height: 100%;
border-radius: 5px;
}
#media(max-width: 768px) {
.container {
font-size: 12px;
}
}
#media(max-width: 560px) {
.container {
font-size: 8px;
}
}
<div class="container">
<div class="box anim b0">
<img src="http://www.skitzone.com/wp-content/uploads/2010/06/I_am_nothing__in_the_dark_by_islandtime-630x630-500x500.jpg" alt="" />
</div>
</div>
The requirement is to cut the top in a sloping manner.
This snippet does this by putting the linear-gradient that is required for the border into a before pseudo element, using clip-path to get the required cutting off of the top, and putting the image as background on an after pseudo element.
.square {
width: 20vmin;
height: 20vmin;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
position: relative;
}
.square::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(red, blue);
background-image: linear-gradient(to right, #a2ca3c 0%, #0a7cff 50%, #a2ca3c 100%);
z-index: -1;
}
.square::after {
content: '';
position: absolute;
--borderW: 3%;
top: var(--borderW);
left: var(--borderW);
width: calc(100% - (2 * var(--borderW)));
height: calc(100% - (2 * var(--borderW)));
background-image: url(https://pesi.pl/img/main-bg.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat no-repeat;
clip-path: polygon(var(--borderW) var(--borderW), calc(100% - var(--borderW)) calc(20% + var(--borderW)), calc(100% - var(--borderW)) calc(100% - var(--borderW)), var(--borderW) calc(100% - var(--borderW)));
z-index: -1;
}
<div class="square"></div>
Obviously you will want to decide on exactly what width you want the border to be and whether the border is included in the overall size of the .square element (as here).
I have a simple div element that I wanna apply a background shape to it when the user hovers over it by using the ::before and ::after pseudo elements. I rotated these elements with rotateX(). How can I style it that the elements shouldn't overlap each other (or at least not ruin the background color) but it should look like a single shape?
Tried using % but didn't work.
Please help.
Thanks so much 🙏
div{
width:200px;
padding: 18px;
margin: 10px auto;
/* border: 1px solid black; */
text-align:center;
position: relative;
perspective: 100px;
z-index: 1;
}
div:hover{
color:#fff;
}
div:hover::before, div:hover::after{
content: "";
display: block;
background-color: #00000050;
width: 100%;
height: 50px;
position: absolute;
left: 0%;
z-index: -1;
}
div::before{
top:0;
transform: rotateX(-75deg);
}
div::after{
bottom:0;
transform: rotateX(75deg);
}
<div>Hello World</div>
If you make half of each pseudo element only have the color then when you rotate them the colors don't overlap.
A minor adjustment to the padding of the div was needed to get the two rotated 'halves' to meet correctly so this would have to be looked at if you ever went for a responsive rather than a fixed px unit solution.
This snippet removes the background-color from the pseudo elements, instead using a linear-gradient background-image going just half way up (or down) the pseudo element.
div {
width: 200px;
padding: 18px;
padding: 16px;
margin: 10px auto;
/* border: 1px solid black; */
text-align: center;
position: relative;
perspective: 100px;
z-index: 1;
}
div:hover {
color: #fff;
}
div:hover::before,
div:hover::after {
content: "";
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 50px;
position: absolute;
left: 0%;
z-index: -1;
}
div::before {
top: 0;
transform: rotateX(-75deg);
background-image: linear-gradient(#00000050 0 50%, transparent 50% 100%);
}
div:hover::after {
bottom: 0;
transform: rotateX(75deg);
background-color: transparent;
background-image: linear-gradient(to top, #00000050 0 50%, transparent 50% 100%);
}
<div>Hello World</div>
A Haworth's answer covers using linear gradient stops to hide the color of half of each pseudo element.
Another approach you could take is to use only one of the pseudo elements with a polygon clip path to make your shape.
.container { display: flex; }
.hoverable { position: relative; margin: auto; padding: 10px 100px; }
.hoverable:hover::before {
content: "";
position: absolute;
inset: 0;
/* top: 0; left: 0; right: 0; bottom: 0; */
background-color: rgba(0, 0, 0, 0.25);
clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%, 20% 50%);
}
<div class="container">
<div class="hoverable">Hello, World!</div>
</div>
My target is to implement a pure-CSS flag-shape container like this:
Requirements include:
background-color of parent container is unknown
works for different line-height and font-size settings
Option 1
Use clip-path, but check browser support for this property:
div {
clip-path: polygon(0% 0%, 100% 0%, 85% 50%, 100% 100%, 0% 100%);
background-color: #ff69b4;
/* styles for demo */
padding: 20px;
color: #fff;
}
<div>5 items</div>
Option 2
Use SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<polygon points="0 0, 100 0, 85 50, 100 100, 0 100" fill="#ff69b4" />
</svg>
Option 3
Use absolutely positioned pseudoelements with gradients (to simulate triangles)
div {
background-color: #ff69b4;
margin-right: 50px;
position: relative;
/* styles for demo */
padding: 20px;
color: #fff;
}
/* pseudoelement to simulate triangles */
div:before,
div:after {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 50px;
height: 50%;
background-image: linear-gradient(to left top, transparent 50%, #ff69b4 50%);
}
/* Flip triangle */
div:after {
top: 50%;
transform: scaleY(-1);
}
<div>5 items</div>
Another possible variant would be to use transformed pseudo elements.
Create 2 layers using ::before ad ::after pseudo elements.
Add background-color and place them with position: absolute having 50% height of the parent.
Apply CSS3 skew() transformations to get the flag shape.
Output Image:
Working Demo:
* {box-sizing: border-box;}
body {
background: linear-gradient(green, yellow) no-repeat;
min-height: 100vh;
padding: 10px;
margin: 0;
}
.flag {
padding: 5px 40px 5px 10px;
display: inline-block;
vertical-align: top;
position: relative;
line-height: 40px;
overflow: hidden;
}
.flag:before,
.flag:after {
transform-origin: top right;
transform: skewX(-45deg);
position: absolute;
background: pink;
content: '';
left: -45px;
height: 50%;
z-index: -1;
right: 0;
top: 0;
}
.flag:after {
transform-origin: bottom right;
transform: skewX(45deg);
top: auto;
bottom: 0;
}
<div class="flag">5 Items</div>
I'm trying to overlay this logo so it sits at the bottom of the page, and also so it is offset by its full width to the left (so that the right edge of the logo sits against the center line).
If I use position:absolute on #logo I have access to the top and left properties, which is good, but now centering won't work...
Here's the fiddle.
Also: making it a fixed distance from the left edge of the page won't work because the page is responsive. The right edge of the logo always has to sit perfectly on the center line.
In case the fiddle isn't working here's the code:
HTML:
<div id ="layer1">
<p>Hello</p>
</div>
<div id="layer2">
<div id="wrapper">
<img id="logo" src="http://i.stack.imgur.com/icxpG.png"/>
</div>
</div>
CSS:
body {
background: linear-gradient(to left, #1a1a1a 50%, #f15922 50%);
}
#layer1 {
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
#layer2 {
position: absolute;
z-index: 5000;
height: 100%;
width: 100%;
}
#wrapper {
position: relative;
background-color: rgba(255, 255, 255, 0.3);
height: 100%;
}
#logo {
background-color: rgba(255, 0, 0, 0.3);
bottom: 0;
display: block;
margin-left: auto;
margin-right: auto
}
You could add position: absolute; and transform to center your #logo like this:
JSFiddle - DEMO
#logo {
background-color: rgba(255, 0, 0, 0.3);
display:block;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
To get the image positioned offset perfectly at all widths, we need to get rid of the gradient and apply the second background to a pseudo element of the body.
In these 2 examples, body provides the orange background and body:before provides the dark background.
Example 1 - logo is a background image
calc(50% - 167px) offsets the logo.
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body {
background: #f15922 url(http://i.stack.imgur.com/icxpG.png) calc(50% - 167px) bottom no-repeat;
}
body:before {
width: 50%;
height: 100%;
background: #1a1a1a;
content: '';
display: block;
position: absolute;
right: 0;
}
Example 2 - logo is <img>
right: 50% and bottom: 0 keep it at the bottom and offset by the natural width of the image.
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body {
background: #f15922;
}
body:before {
width: 50%;
height: 100%;
background: #1a1a1a;
content: '';
display: block;
position: absolute;
right: 0;
}
#logo {
position: absolute;
bottom: 0;
right: 50%;
}
<img id="logo" src="http://i.stack.imgur.com/icxpG.png" />
Old Archived Examples (with gradient)
Limitation: There is a gap at certain viewport widths that is caused by the gradients 50% calculation. I'm not certain that this can be avoided.
Archived 1 - Keep it all in a background image / gradient
calc(50% - 167px) offsets the image from the center
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body {
background: url(http://i.stack.imgur.com/icxpG.png) calc(50% - 167px) bottom no-repeat, linear-gradient(to left, #1a1a1a 50%, #f15922 50%);
}
Archived 2 - Using <img>
right: 50% and bottom: 0 keep it at the bottom and offset by the natural width of the image.
body {
background: linear-gradient(to left, #1a1a1a 50%, #f15922 50%);
}
#logo {
background-color: rgba(255, 0, 0, 0.3);
bottom: 0;
right: 50%;
position: absolute;
}
<img id="logo" src="http://i.stack.imgur.com/icxpG.png" />
The code below will create an arrow right below an <a> element:
JSFiddle
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-width: 10px 50px 0 50px;
border-style: solid;
border-color: gray transparent transparent transparent;
}
Hello!
The problem is that we have to indicate the link width to get an arrow of a proper size because we cannot indicate the border width in pixels.
How to make a responsive triangle percent based?
You could use a skewed and rotated pseudo element to create a responsive triangle under the link :
DEMO (resize the result window to see how it reacts)
The triangle maintains it's aspect ratio with the padding-bottom property.
If you want the shape to adapt it's size according to it's content, you can remove the width on the .btn class
.btn {
position: relative;
display: inline-block;
height: 50px; width: 50%;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
padding-bottom: 15%;
background-clip: content-box;
overflow: hidden;
}
.btn:after {
content: "";
position: absolute;
top:50px; left: 0;
background-color: inherit;
padding-bottom: 50%;
width: 57.7%;
z-index: -1;
transform-origin: 0 0;
transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/
body {
background: url('http://i.imgur.com/qi5FGET.jpg');
background-size: cover;
}
Hello!
For more info on responsive triangles and how to make them, you can have a look at
Triangles with transform rotate (simple and fancy responsive triangles)
Another solution to this would be to use a CSS clip-path to clip a triangle out of a coloured block. No IE support however, but could be used for internal tools etc.
DEMO
Written with SCSS for ease.
.outer {
background: orange;
width: 25%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
p {
margin: 0;
text-align: center;
color: #fff;
}
&:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
padding-bottom: 10%;
background: orange;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
}
I found solution that works with any width/height. You can use two pseudo-elements with linear-gradient background, like this, (fiddle):
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:before {
content: "";
position: absolute;
top: 100%;
right: 0;
width: 50%;
height: 10px;
background: linear-gradient(to right bottom, gray 50%, transparent 50%)
}
.btn:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 50%;
height: 10px;
background: linear-gradient(to left bottom, gray 50%, transparent 50%)
}
A modified version of the below code can help you to achieve this
HTML
<div class="triangle-down"></div>
CSS
.triangle-down {
width: 10%;
height: 0;
padding-left:10%;
padding-top: 10%;
overflow: hidden;
}
.triangle-down:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid #4679BD;
}
For further reading on responsive triangles: CSS triangles made responsive
(archived link)
I tried the other answers and found them to be either too complex and/or unwieldy to manipulate the shape of the triangle. I decided instead to create a simple triangle shape as an svg.
The triangle height can be set to an absolute value, or as a percentage of the rectangle so it can be responsive in both directions if necessary.
html, body{
height:100%;
width:100%;
}
.outer{
width:20%;
height:25%;
background:red;
position:relative;
}
.inner{
height:100%;
width:100%;
background-color:red;
}
.triangle-down{
height:25%;
width:100%;
position:relative;
}
.triangle-down svg{
height:100%;
width:100%;
position:absolute;
top:0;
}
svg .triangle-path{
fill:red;
}
<div class="outer">
<div class="inner"></div>
<div class="triangle-down">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 1">
<g>
<path class="triangle-path" d="M0,0 l2,0 l-1,1 z" />
</g>
</svg>
</div>
Tested FF, Chrome, IE, Edge, mob Safari and mob Chrome
Another option would be to use background liner gradients, and flex positioning to make sure that the triangle always scales to its parent container. No matter how wide or narrow you make that container, the triangle always scales with it. Here is the fiddle:
https://jsfiddle.net/29k4ngzr/
<div class="triangle-wrapper-100">
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</div>
.triangle-wrapper-100 {
width: 100%;
height: 100px;
display:flex;
flex-direction: column;
flex-wrap: wrap;
}
.triangle-right {
right: 0px;
background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
width: 50%;
height: 100px;
}
.triangle-left {
left: 0px;
background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
width: 50%;
height: 100px;
transform: scaleX(-1);
}
I took #Probocop's answer and come up with the following:
<style>
.btn {
background-color: orange;
color: white;
margin-bottom: 50px;
padding: 15px;
position: relative;
text-align: center;
text-decoration: none;
}
.btn:after {
background-color: inherit;
clip-path: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="p" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points="0 0, 1 0, 0.5 1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#p'); /* fix for firefox (tested in version 52) */
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
content: '';
height: 50px;
left: 0;
position: absolute;
right: 0;
top: 100%;
}
</style>
Hello!
This works in Chrome and I've added a fix for Firefox. It doesn't work in Edge, however if you decrease the height of the down arrow then it doesn't look so bad.
Please note that if you are using bootstrap you will need to either change the name or override some of the styles it applies. If you decide to rename it then you also need to add the following to the .btn style:
box-sizing: content-box;