I'm trying to blur the left and right edges of a divider, as the line is too harsh. Is there a way to do this with CSS? This is what the right edge currently looks like:
right blur
This is my current code:
.front-name {
position: fixed;
top: 70%;
left: 50%;
transform: translate(-50%, -30%);
width: 80%;
background-color: linear-gradient(to right, transparent, rgba(148, 148, 148, 0.5));
backdrop-filter: blur(4px);
padding-top: 15px;
padding-bottom: 20px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
It'd be nice for this to be a smoother transition from the blurry part of the divider to the sharp background image.
Try with mask:
.front-name {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -30%);
width: 80%;
background: #fff5;
-webkit-mask: linear-gradient(90deg, #0000, #000, #0000);
backdrop-filter: blur(4px);
padding-top: 15px;
padding-bottom: 20px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
html {
background: url(https://picsum.photos/id/1003/800/400)
}
<div class="front-name"></div>
Related
I need to make a box with arrow for a tooltip but I can't use pseudo-elements because :
The box background is a little transparent
It has border
here is the example :
.box {
margin: 60px 0 0 0;
width: 250px;
height: 50px;
background-color: rgba(255, 144, 89, 0.5);
border-radius: 5px;
position: relative;
border: 2px solid #ff6e26;
}
.box:after,
.box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: rgba(255, 144, 89, 0.5);
border-width: 10px;
margin-left: -10px;
}
.box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #ff6e26;
border-width: 12px;
margin-left: -12px;
}
<div class="box"></div>
https://codepen.io/Masoudm/pen/qgvJGX
as you see when I make the background transparent it doesn't works for the arrow, because I already used ::before behind it for its border. I wonder if there is another approach which allows me to keep the box size dynamic.
Update:
the box should be something like this ( except the top curvy line)
Based on this previous answer I will adjust slightly the code to have a transparent background. There is two main tricks. Half the coloration of the pseudo element to avoid the intersection with the main element and the use of gradient on the main element to create the border top and create the hole for the pseudo element:
body {
margin:0;
background-image:linear-gradient(to right,yellow,pink);
}
.box {
border: 2px solid red;
border-top:transparent; /*make border-top transparent*/
margin: 50px;
height: 50px;
position:relative;
/* Use gradient to mimic the border top with a transparent gap */
background:
linear-gradient(red,red) left top /calc(50% - 10px*1.414) 2px,
linear-gradient(red,red) right top/calc(50% - 10px*1.414) 2px,
rgba(0,255,0,0.4);
background-repeat:no-repeat;
}
.box:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-top: 2px solid red;
border-left: 2px solid red;
top: -11px;
left: calc(50% - 11px);
transform: rotate(45deg);
background:linear-gradient(-45deg,transparent 50%,rgba(0,255,0,0.4) 50%);
}
<div class="box">
</div>
* {
box-sizing: border-box;
font-family: inherit;
}
html {
font-size: 62.25%;
}
body {
padding: 50px;
}
.outter {
width: 200px;
height: 100px;
position: relative;
}
.box {
padding: 20px;
width: 100%;
height: 100%;
background: rgba(255, 68, 0, 0.568);
border: 3px solid orangered;
border-radius: 5px;
clip-path: polygon(0 0,45% 0,45% 10px,calc(45% + 15px) 10px,calc(45% + 15px) 0,100% 0,100% 100%,0 100%,0 0)
}
.arrow {
width: 15px;
height: 8px;
background: rgba(255, 68, 0, 0.568);
transform: translate(-67%, 100%);
position: absolute;
left: 50%;
bottom: 98%;
}
.arrow::after {
border: 3px solid transparent;
border-left-color: orangered;
border-top-color: orangered;
border-right: 0px solid transparent;
border-bottom: 0px solid transparent;
width: 11px;
height: 11px;
position: absolute;
left: 0;
bottom: 34%;
content: '';
transform: rotate(45deg);
background: linear-gradient(134deg,rgba(255, 68, 0, 0.56) 0%,rgba(255, 68, 0, 0.56) 50%,transparent 50%, transparent 100%);
}
<div class="outter">
<div class="arrow"></div>
<div class="box"></div>
</div>
I'm trying to create a background for a banner using css where one side has a color and on the other side has another one with a 45° cut like this
I've been able to recreate the above image except for the drop shadow that doesn't stay in the right position.
Any advice would be greatly appreciated.
This is my code code:
#container {
height: 100px;
width: 400px;
overflow: hidden;
background-color: #2962ff;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid #2196f3;
border-right: 400px solid transparent;
-webkit-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
}
<div id="container">
<div id="triangle-topleft"></div>
</div>
The CSS triangle trick with border can not be used for this, as a shadow will still be applied to the box, and not only to the triangle.
You will have to create a pseudo element, rotate it and THEN apply shadow to it.
#container {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
background-color: grey;
}
#container:before {
content: '';
position: absolute;
left: 20%;
width: 100%;
height: 200%;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.5);
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: inset 0 0 20px 10px #333;
}
<div id="container"></div>
Basically you create a rectangle which is larger than the parent, then rotate it and apply a shadow. You can tweak the colors and rotation-degree for your needs
Demo: http://jsfiddle.net/b5TnZ/2032/
You can add multiple color stops in Linear Gradients. Use two color set.
Gradient generated using Shapy
.canvas {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
min-height: 100%;
min-width: 100%;
}
.gradient-canvas {
max-height: 100%;
max-width: 100%;
width: 100%;
height: 100%;
background: linear-gradient(127deg, rgb(31, 163, 209) 0%, rgb(31, 163, 209) 50%, rgb(25, 64, 208) 0%, rgb(46, 101, 223) 52%) 50% 50% / 100% 100% no-repeat;
}
<div class="canvas"><div class="gradient-canvas"></div></div>
You can try gradient like below:
#container {
height: 150px;
background:
linear-gradient(135deg,#2962ff 49.8%,rgba(0,0,0,0.75) 50%, #2196f3 calc(50% + 10px));
background-color:#2196f3;
}
<div id="container">
</div>
And simply replace the deg with to bottom right if you want the diagonal result:
#container {
height: 150px;
width:50%;
background:
linear-gradient(to bottom right,#2962ff 50%,rgba(0,0,0,0.75) 50%, #2196f3 calc(50% + 10px));
background-color:#2196f3;
}
<div id="container">
</div>
http://jsfiddle.net/6HyjZ/
.bookmarkRibbon{
width:0;
height:100px;
border-right:50px solid blue;
border-left:50px solid blue;
border-bottom:30px solid transparent;
}
<div class="bookmarkRibbon"></div>
I'm struggling to make a version of this shape where the ribbon is pointing right instead of down,
how can I achieve this?
Ribbon shape using CSS Clip Path:
.bookmarkRibbon {
width: 100px;
height: 60px;
background: blue;
clip-path: polygon(0% 0%, 100% 0%, calc(100% - 20px) 50%, 100% 100%, 0% 100%);
}
<div class="bookmarkRibbon"></div>
Pointing down:
.bookmarkRibbon {
width: 60px;
height: 100px;
background: blue;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 20px), 0% 100%, 0% 0%);
}
<div class="bookmarkRibbon"></div>
Ribbon shape using CSS border
To help you visualize the logic step-by-step, so you can apply it easily on any side:
.bookmarkRibbon {
border: 30px solid blue; /* All borders set */
border-left: 0; /* Remove left border */
border-right: 20px solid transparent; /* Right transparent */
width: 100px; /* Increase element Width */
}
<div class="bookmarkRibbon"></div>
Using the helpful accepted answer here is it with text version.
Vertical(Top to bottom) Banner with text
.ribbon-vertical {
position: absolute;
right: 10px;
border: 13px solid #e46a76; /* All borders set */
border-top: 0; /* Remove left border */
border-bottom: 10px solid transparent; /* Right transparent */
height: auto; /* Increase element Width */
width: 0;
word-wrap: break-word;
color: white;
z-index: 1;
-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.ribbon-vertical div{
position: relative;
right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
<div class="ribbon-vertical"><div>BANNER</div></div>
Horizontal(Right to Left) Banner with text
.ribbon-horizontal{
position: absolute;
right: 0;
bottom: 5rem;
border: 13px solid #e46a76;
border-right: 0;
border-left: 10px solid transparent;
height: 0;
line-height: 0;
width: 100px;
color: white;
z-index: 1;
-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
letter-spacing: 3px;
}
.ribbon-horizontal span{
position: relative;
padding: 0 4px 0 10px;
text-align: center;
}
<div class="ribbon-horizontal"><span>BANNER</span></div>
.bookmarkRibbon{
width:100px;
height:0;
border-bottom:50px solid blue;
border-top:50px solid blue;
border-right:30px solid transparent;
}
If you 'rotate' the css properties, it rotates the form by 90 degrees.
.bookmarkRibbon{
width:100px;
height:0;
border-bottom:50px solid blue;
border-top:50px solid blue;
border-left:30px solid transparent;
}
http://jsfiddle.net/6HyjZ/6/
Use transform:rotate :
.bookmarkRibbon{
width:0;
height:100px;
border-right:50px solid blue;
border-left:50px solid blue;
border-bottom:30px solid transparent;
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}
Just swap what you have and you are good to go jsfiddle:
.bookmarkRibbonRight{
width:100px;
height:0px;
border-right:30px solid transparent;
border-bottom:50px solid blue;
border-top:50px solid blue;
}
You already have the shape, just use the transform property to change its angle.
Here is the code that I have added to the code you have.
transform: rotate(270deg);
Here is the fiddle, http://jsfiddle.net/6HyjZ/11/ It now points to the right (unless that's right right side)
Use the rotate css transform:
.bookmarkRibbon{
width:0;
height:100px;
border-right:50px solid blue;
border-left:50px solid blue;
border-bottom:30px solid transparent;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
http://jsfiddle.net/6HyjZ/13/
I would like to create a Vodafone logo with css like this one:
I know some people are able to draw anything with css. I can't figure out how to make the tear drop shape. This is what I have as far as now:
#logoMain {
width: 100px;
height: 100px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 50%;
box-shadow: 0px 0px 50px 0px #999 inset;
position: relative;
}
#logoMainafter {
width: 100px;
height: 100px;
margin-top: -35px;
margin-left: 55px;
display: block;
border-radius: 50%;
background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%);
-webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
-webkit-filter: blur(10px);
}
#logoInside {
width: 50px;
height: 50px;
margin: 24px;
background-color: #fe0000;
border: 1px solid red;
border-radius: 50%;
box-shadow: 0px 0px 15px 3px #a80000 inset;
}
<body>
<div id="logoMain">
<div id="logoInside"></div>
<div id="logoMainafter"></div>
</div>
</body>
Can anyone give me any ideas how to create this unusual shape?
For more complex shapes I'd look at using d3js or raphael and the svg element with css backing it. Take a look at this example. There is alot of other examples on the same site of complex shapes you can draw with CSS with a little help from JS.
Well, since anybody is answering, here you have a draft to begin with
CSS
#logoMain {
width: 100px;
height: 100px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 50%;
box-shadow: 0px 0px 50px 0px #999 inset ;
position: relative;
}
#logoMainafter {
width: 100px;
height: 100px;
margin-top: -35px;
margin-left: 55px;
display: block;
border-radius: 50%;
background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%);
-webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
-webkit-filter: blur(10px);
}
#logoInside {
width: 50px;
height: 50px;
margin: 24px;
background-color: #fe0000;
border: 1px solid red;
border-radius: 50%;
box-shadow: 0px 0px 15px 3px #a80000 inset;
z-index: 23;
position: absolute;
}
#logoMain:after {
content: "";
width: 50px;
height: 50px;
position: absolute;
top: 2px;
left: 57px;
/* background-color: green; */
border-radius: 50%;
box-shadow: -19px 17px 0px 14px #e80000;
clip: rect(0px, 12px, 63px, -110px);
z-index: 0;
}
fiddle
This is probably not the best use of your time, drawing this in CSS. Use a graphics editor that is made for it and export it to SVG or any other picture format. The pain you need to go to code this is not worth it.
How would I have a top right corner div as shown in the image. I want to do something similar though not exactly the same. I think the text is not an image.
Also, I have seen some websites that has a page hover effect when a mouse is over the top right section. Any idea how to do that?
If the text isn't an image, none of the other answers will work. Here is some css that rotates a div 45 degrees and works in IE + FF + Webkit.
#yourdiv
{
top: 0px;
right: 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11='0.7071067811865476', M12='-0.7071067811865475', M21='0.7071067811865475', M22='0.7071067811865476', sizingMethod='auto expand');
}
Make sure it's a transparent PNG
#Element {
position: fixed;
top:0;
right:0;
z-index:10;
}
(An element with greater stack order is always in front of an element with a lower stack order.)
div.topRight {
position: absolute;
top: 0%;
right: 0%;
}
This will assign a division with class set as 'topRight' to the top right corner. I'm sure you can figure out how to get the image to show up properly from that. Make sure you set the proper width and height on it. As for hovering, what exact effects do you want? You can modify the CSS on hover easily, if that's all you want to do.
div.topRight:hover {
// new css rules
}
you may want to take a look at this JSFiddle:
Css:
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
html:
<div class="wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>
I'm assuming you want fixed positioning.
#Element {
position: fixed;
top:0;
right:0;
}