This question already has answers here:
Add outward curving border to elements like this: ◝◟___◞◜
(3 answers)
Closed 6 years ago.
Is it possible to add corners like this image (top corners)? I'm not sure what the effect is called. If it is, what would be your approach?
Update:
There were some who suggested that this question is a duplicate, unfortunately, the solution to the duplicate does not take into account that the 'wings' are filled in with color. While it works great for a tab that has an outline, this has an actual fill.
What is this technique Called?
My approach would be to use the :before and :after pseudoclasses to add and position the corner tips.
.box {
position: absolute;
background: gray;
width: 400px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 0 0 10px 10px;
}
em {
display: block;
font-style: italic;
font-size: 1.1em;
color: white;
text-align: center;
margin: 0 auto;
width: 100%;
line-height: 2.2em;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.box:before,
.box:after {
content: '';
display: block;
border: 10px solid transparent;
border-top: 10px solid gray;
position: absolute;
top: 0;
}
.box:before {
left: -6px;
}
.box:after {
right: -6px;
}
<div class="box">
<em>Benefits Included In Members Savings Package</em>
</div>
Related
I'm trying to recreate Alexander Plyuto's modern skeumorphic style (now called neumorphism) in CSS:
I'm attempting to do this by having a colored shadow on the top and left, and a differently colored shadow on the bottom and right.
I researched MDN for box-shadow and I can see box-shadow supports multiple values, but rather than being top-right-bottom-left like the rest of CSS, multiple values are actually full-size shadows for all sides that are stacked on top of each other:
The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).
Is it possible to create this effect in CSS?
Note that 'no' is an acceptable answer, but creating additional HTML (ie, not using CSS) is not. Buttons in HTML are normally represented by <button>A button</button>
As I suggested in the comments before this was re-opened, my suggestion is to use pseudo-elements to achieve the double shadow effect. You could probably achieve this with just one, but here's my quick-and-dirty exaple I've whipped up to show it off:
body {
background: #424242;
}
.button {
box-sizing: border-box;
display: flex; /* Just to center vertically */
align-items: center;
justify-content: center;
width: 160px;
height: 55px;
border-radius: 1em;
text-align: center;
font-family: sans-serif;
font-weight: 600;
color: #2b2a2e;
text-decoration: none;
background: linear-gradient(48deg, #c4ccd1, #e1e5e8);
position: relative;
z-index: initial;
}
.button::before, .button::after {
content: "";
display: block;
position: absolute;
width: 160px;
height: 35px;
background: transparent;
border-radius: 1em;
z-index: -1;
opacity: 0.65;
}
.button::before {
top: -1px;
left: -1px;
background-color: #fff;
box-shadow: 0 0 10px 5px #fff;
}
.button::after {
bottom: -1px;
right: -1px;
background-color: #b6c7e7;
box-shadow: 0 0 10px 5px #b6c7e7;
}
Request
I got a very close answer to your question. Here is the
https://jsfiddle.net/nuakbqe7/1/
<div class="button">
<p>Request</p>
</div>
Here is the css:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
* {
font-family: "Poppins", sans-serif;
transition: 0.5s;
}
body {
background: #e1ebf5;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
min-height: 97vh;
}
.button {
border-radius: 17px;
cursor: pointer;
background: #e1ebf5;
box-shadow: 6px 6px 11px #d2dce6, -6px -6px 11px #edf2f7;
width: 300px;
text-align: center;
}
p {
font-size: 18px;
color: #202c3d;
text-shadow: 2px 2px 2px #c3cfde;
}
This question was originally closed by a moderator in error. During the time the question was closed, and answers were not allowed, multiple users have contacted me with solutions. As the question has now been reopened, I'm posting their solutions, with credit to them, as as community wiki so I don't get karma.
In short: CSS itself doesn't provide a way to directly set different shadow colors on different sides. However there are ways to achieve a neumorphic look - see below:
neumorphism.io CSS generator
There is now an online Neumorphism CSS generator at https://neumorphism.io/
#noomorph's answer (provided as a comment when answers were closed)
Use two shadows (as mentioned), but with the offsets arranged so that one covers the top and left, the other covers bottom and right.
As commenters have noted the gradients can overlap. It's likely not
possible to copy the demo, as the demo has a wide spread radius but no
overlap, which cannot be achieved in CSS as the shadows stack on top
of each other.
body {
background: lightgrey;
}
button {
border: none;
background-color: #efefef;
color: black;
font-size: 24px;
text-transform: uppercase;
padding: 20px;
margin: 50px;
position: relative;
border-radius: 10px;
box-shadow: -2px -2px 8px 4px white, 2px 2px 8px 4px #222;
}
<button>This is a button</button>
#disinfor's answer (provided on chat when answers were closed)
Use a pseudo element, that has a gradient background, and is itself blurred. It's likely not possible to copy the demo here either, as the higher amount of darkness in the start of the gradient means that the blurry shadow isn't uniform:
body {
background: lightgrey;
}
button {
border: none;
background-color: white;
color: black;
font-size: 24px;
text-transform: uppercase;
padding: 20px;
margin: 50px;
position: relative;
border-radius: 5px;
}
button::after {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: blue;
background: linear-gradient(350deg, rgba(10,10,10,0.8) 0%, rgba(255,255,255,0.8) 100%);
filter: blur(10px);
}
<button>This is a button</button>
Does anyone have any pointers on how I can achieve the following 2 effects (red color) using pure CSS?
I am not asking for entire code but if anybody can guide me in proper direction, that would really be great.
Thanks in advance.
For second effect you should create for image's container two pseudo-elements :before and :after with border-radius set to desired value. Element :before you should position to left bottom side of container and the element :after you should position to right bottom side. You should also specify widths for each pseudo-element (for example: 50% and 50%, 60% and 40% etc.).
Code for the second effect:
.image {
position: relative;
width: 350px;
}
img {
display: block;
padding: 0;
margin: 0;
}
.image:before {
content: '';
display: inline-block;
background: rgba(255, 0, 0, .5);
width: 30%;
height: 120px;
position: absolute;
bottom: 0;
left: 0;
border-top-right-radius: 15px;
}
.image:after {
content: '';
display: inline-block;
background: rgba(255, 0, 0, .5);
width: 70%;
height: 120px;
position: absolute;
bottom: 0;
right: 0;
border-top-left-radius: 15px;
}
<div class="image">
<img src="http://placehold.it/350x350">
</div>
OK, here is a suggestion for the proper direction.
The lower red panel looks to me like two adjoining rectangles. You need to set the widths appropriately, and then for each rectangle round off one corner using border-radius: a b c d.
The effect looks to me like two of effect number 2. The red one, and then the same in white, possibly with a z-index to make sure that it (partly) covers the other one.
I trust you already know how to make the red translucent, either by using opacity or setting the colour using rgba.
I hope that helps.
You have to use the pseudo elements :after & :before to achieve the bulge in the otherwise straight div.
You may try something like this:
div {
height: 30px;
width: 200px;
background-color: red;
position: relative;
}
div:after {
content: '';
position: absolute;
left: 0;
right: 0;
width: 0px;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
margin: auto;
}
div:before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -8px;
width: 0px;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 10px solid red;
margin: auto;
}
<div></div>
Since you didn't provide a fiddle so use below solution as a guide. CSS will produces curved edges that you join together to produce desired results.
div.arrow-curved {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
div.arrow-curved:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
For more reference for CSS shapes: https://css-tricks.com/examples/ShapesOfCSS/
I am trying to create an offset border effect. Can this be done with pure css.
These are buttons so will be different sizes and colours.
I use pseudo-element :after to create offset border effect.
body {
background: black;
padding: 30px;
}
div {
background: white;
height: 75px;
width: 175px;
position: relative;
}
div:after {
content: '';
background: transparent;
border: 1px solid white;
top: 7px;
right: 7px;
bottom: -7px;
left: -7px;
position: absolute;
z-index: -1;
}
<div></div>
Update
As web-tiki pointed out in comments on this answer, you can achieve the entire affect entirely with box-shadow. Take a look at their JSFiddle demo here: https://jsfiddle.net/5a0bvyup.
I'm going to leave my answer in the state I submitted it in because it does give some idea of how their implementation works (and if you look closely you'll see how their box-shadow differs from the one described below).
Note: In my answer I've made the foreground box red instead of white to demonstrate that this 'offset border' does not overlap the initial element. You'll need to change this back to white yourself.
The Left and Bottom Borders
You can achieve the left and bottom borders really easily with box-shadow. You simply need to create a solid shadow which matches the background colour, and then behind that add a second shadow which matches the foreground colour, offset by one pixel:
body {
background: black;
padding: 30px;
}
div {
background: red;
height: 72px;
width: 192px;
box-shadow: -2px 2px 0 5px black, -7px 7px 0 1px white;
}
<div></div>
The Top and Right Borders
You can then use pseudo-elements (::before and ::after) to fill in those extra borders:
body {
background: black;
padding: 30px;
}
div {
background: red;
height: 72px;
width: 192px;
box-shadow: -2px 2px 0 5px black, -7px 7px 0 1px white;
position: relative;
}
div::before {
background: white;
content: '';
position: absolute;
height: 1px;
width: 7px;
top: 6px;
right: 100%;
}
div::after {
background: white;
content: '';
position: absolute;
height: 7px;
width: 1px;
top: 100%;
right: 6px;
}
<div></div>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
I have this jsfiddle demo.
I have an thumbnail of a vimeo movie (here it is a placeholder) in the center I would like a play btn.
The whole of the image will be clickable so the play button is just for illustration.
I would like the play button dead center.
I can do it with negative margins but I won't really know the size of the play button.
How can I dead center the play button with knowing it dimensions.
.video_thumbnail {
border: 1px solid red;
position: relative;
}
.video_thumbnail:hover {
cursor: pointer;
}
.video_thumbnail .play-btn {
background: white;
background: blue;
display: inline-block;
padding: 25px;
position: absolute;
top: 50%;
left: 50%;
/*
margin-left: -35px;
margin-top: -35px;
*/
}
.video_thumbnail .play-btn:after {
content: "";
display: block;
position: relative;
left: 2px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent white;
}
You can use transform: translate(-50%, -50%);.
Jsfiddle
.video_thumbnail .play-btn {
background: white;
background: blue;
display: inline-block;
padding: 25px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I have a jsfiddle here - http://jsfiddle.net/0nvns9Lj/1/
I've done what I need to do but don't know if it's the best way - I'm sure it should be easier.
I just need to create a play button so I have a circle containing a triangle.
It's working but seems like alot of messing for something simple
.wrap{
background: #ddd;
height: 300px;
position: relative;
}
.circle{
background: red;
border-radius: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
width: 50px;
margin: -25px 0 0 -25px;
}
.circle_inner{
position: relative;
height: 100%;
}
.circle_inner:before{
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #ffffff;
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -7px;
}
You can (and should) do this simpler.
* { margin:0; padding:0 }
figure {
background: #ddd;
height: 200px;
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
figure button[name="play"] {
width: 50px;
height: 50px;
background: red;
border: none;
border-radius: 100%;
margin: auto;
cursor: pointer;
}
figure button[name="play"]:focus {
outline: 0;
border: 1px solid hsl(210, 58%, 69%);
box-shadow: 0 0 0 3px hsla(210, 76%, 57%, 0.5);
}
figure button[name="play"]::after {
content: '';
display: inline-block;
position: relative;
top: 1px;
left: 3px;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent white;
}
<figure>
<button name="play"></button>
</figure>
Editable demo: http://jsbin.com/mipali/5
There is not much to improve.
Maybe you can use a special font like 'Webdings', and otherwise you can make a simple CSS triangle. In both cases you just need a simple element for the button, and a ::before pseudo-element for the shape. In the HTML and CSS below, both methods are shown.
Both buttons use a normal A element, so the buttons could (if you can find any url or useful onclick event to attach to it) still work as a normal link when you don't even have CSS (think about the visually impaired).
Moreover, the HTML doesn't contain any extra markup apart from the class names. No 'inner' element needed, and I think that's the most important improvement. The CSS isn't that much shorter than your's but I got rid of the 'inner' element, so the markup is completely clean.
And remember: if you want more complex shapes, you also have a ::after pseudo-element at your disposal. :)
/* Basic red round button properties */
.button {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: red;
color: white;
/* Hide the text 'play', which is present in the HTML document for accessibility */
font-size: 0;
}
/* Properties for the pseudo-element that almost every button will need.
You can just merge it into the style below if you are only going to have
the play button. */
.button::before {
content: "";
display: block;
position: absolute;
}
/* Play button properties using font */
.play1.button::before {
font-family: 'Webdings';
font-size: 28px;
content: '\25B6';
top: -2px;
left: 12px;
}
/* Play button properties using CSS shape */
.play2.button::before {
width: 0;
height: 0;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 15px solid white;
top: 10px;
left: 16px;
}
Play<br>
Play