i want to make a division like below image. i tried to make it by CSS3 transform property but it make full division 2D. i want to make just top left side. can your please help me?
try this one :), not the exact css you want, but hopefully this will help. check this link for the output. >> http://prntscr.com/lijc08
.hvr-curl-top-right {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
}
.hvr-curl-top-right:before {
width: 20px;
height: 20px;
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
top: 0;
right: -2px;
background: transparent;
// background: linear-gradient(225deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
background: -webkit-linear-gradient(225deg,transparent 45%,#ffde72 50%,#ffde72 56%,#ffde72 80%);
background: linear-gradient(225deg,transparent 45%,#ffde72 50%,#ffde72 56%,#ffde72 80%);
box-shadow: -1px 1px 1px rgba(0, 0, 0, .4);
-webkit-transition-property: width, height;
transition-property: width, height
}
Related
I have wasted 2 days to create a shadow effect like here.
You see, the front white buttons look not flat, don't know how to describe. I bet this is because of box shadow effect, inset or something like that. But I can't make the same.
Can anyone help to make such a button with the same design, effect?
My example
.button {
background-size: 400% auto;
background: linear-gradient(to top right, rgb(247, 212, 167), #eef2f3);
border-radius: 7%;
box-shadow: inset 4px -4px 1px 1px rgb(252, 205, 144), inset -4px 4px 1px 1px white, -15px 25px 25px 0px rgba(0, 0, 0, .3);
width: 200px;
height: 200px;
-webkit-transition: all .1s linear;
transition: all .2s linear;
left: 0;
transform: rotate(45deg);
}
<div class="button main-circle"></div>
Here is an idea using some gradient and pseudo elements:
.box {
width: 100px;
height: 100px;
margin: 100px;
border: 3px solid #e0e1e6;
border-radius: 10px;
background: linear-gradient(to right, #b9b7dc, #a7a7c9);
transform: rotate(45deg);
position: relative;
z-index: 0;
box-sizing: border-box;
}
.box:before {
content: "";
position: absolute;
z-index: 2;
top: 30%;
left: -32%;
width: 100px;
height: 100px;
border: 3px solid #fefefe;
border-radius: 10px;
background: linear-gradient(to right, #e0e0e0, #fefefe);
box-sizing: border-box;
}
.box:after {
content: "";
position: absolute;
z-index: 1;
top: 30%;
left: -31%;
width: 100px;
height: 100px;
border-radius: 10px;
background: linear-gradient(to right, rgba(0,0,0,0.3),rgba(0,0,0,0.1));
box-sizing: border-box;
transform: skewY(11deg) scaleX(1.15);
filter: blur(4px);
transform-origin: top left;
}
body {
background: pink;
}
<div class="box"></div>
Here is a shadow:
So I need this to be a shadow which appears on button hover. I know its css but I didn't manage to make any blur:
background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
border-radius: 100px;
filter: blur(5px);
So, two basic questions:
Is it possible to make this blurred thing with CSS?
If yes, is it possible to make it a button shadow? Or how else can I solve this? One thought was to just make a png with absolute positioning, which is hacky a bit
update
So the final result I want achieve looks something like this:
The shadow repeats button gradient which is
linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
New answer
I have made an online generator that helps you get a gradient shadow easily: https://css-generators.com/gradient-shadows/
All you have to do is to adjust a few values and get the code:
button {
margin: 50px;
border-radius: 999px;
padding: 10px 30px;
font-size: 25px;
color: #fff;
text-align: center;
line-height: 50px;
border: none;
background: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
position: relative;
transform-style: preserve-3d;
}
button::before {
content: "";
position: absolute;
inset: -10px;
background: inherit;
filter: blur(20px);
transform: translate3d(15px,15px,-1px);
border-radius: inherit;
pointer-events: none;
}
<button >
this a button
</button>
More detail: https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
Old answer
What about multiple box-shadow:
.box {
margin:50px;
width:100px;
height:50px;
border-radius:20px;
color:#fff;
text-align:center;
line-height:50px;
box-shadow:
20px 5px 40px #CF77F3,
0px 5px 40px #009BFF,
-20px 5px 40px #2AC9DB;
background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
}
<div class="box">
this a button
</div>
You can get this effect in modern browsers using a pseudo element with the same background, and a filter blur applied on it.
To get compatibility with IE, you can set also a pseudo, and to get the blurred borders use an inset shadow. At least in Chrome, there is a small left over of the border that still can be seen.
.test {
margin: 20px;
background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);;
border-radius: 50px;
display: inline-block;
height: 100px;
width: 200px;
position: relative;
border: solid 4px black;
}
#test1:after {
content: "";
position: absolute;
background-image: inherit;
border-radius: inherit;
width: inherit;
height: inherit;
transform: translate(0px, 20px) scale(1.1);
z-index: -1;
filter: blur(14px);
}
#test2:after {
content: "";
position: absolute;
border-radius: 90px;
width: 250px;
height: 150px;
z-index: -1;
top: 1px;
left: -25px;
background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
box-shadow: inset 0px 0px 25px 18px white;
}
<div class="test" id="test1">
</div>
<div class="test" id="test2">
</div>
I need to do a triangular onfocus on button, like on this image
I looked at different examples like this, but the focus zone is rectangular.
Is it possible make triangular onfocus?
You could use clip-path to give a triangular shape to the button and apply the same shape to button::before pseudoelement slightly enlarged to mimic an outline, e.g.
Codepen Demo
Note: working only on browser supporting clip-path
Markup
<button><span>button</span></button>
CSS
button {
position: relative;
border: 0;
padding: 0;
cursor: pointer;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50% 100% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50% 100% 0);
}
button span {
position: relative;
z-index: 1;
display: block;
background: linear-gradient(#f4f4f4, #d4d4d4);
padding: 10px 20px;
}
button:focus {
outline: none;
-webkit-clip-path: polygon(0 0, 0 100%, 90% 100%, 100% 50%, 90% 0);
clip-path: polygon(0 0, 0 100%, 90% 100%, 100% 50%, 90% 0);
}
button::before,
button span {
-webkit-clip-path: inherit;
clip-path: inherit;
}
button:focus::before {
content: "";
position: absolute;
height: calc(100% + 4px);
width: calc(100% + 4px);
left: -2px;
top: -2px;
background: rgba(81,153,219, .7);
}
Maybe like this?
Adding an element after the button to provide the triangular shape...
Now it is 45° rotation, you could play by skewing to get another angle.
CodePen Sample
button:hover { border-color: blue; }
button:hover:after { border-color: blue;}
button {
font-size: 14px;
background: none;
border: 1px solid red;
border-right: 0;
position: relative;
height: 44px;
z-index: 1;
background-color: #FFF;
}
button::after {
content: "";
display: block;
position: absolute;
width: 30px; height: 30px;
background: #FFF;
right: -15px;
top: 5px;
transform: rotate(-45deg);
z-index:-1;
border-right: 1px solid Red;
border-bottom: 1px solid Red;
}
You could use the map tag : http://www.w3schools.com/tags/tag_map.asp
But in that case your button must be a picture.
little late,
but you can do for almost every browser with transform and a pseudo.
Eventually add background gradient and shadow : http://codepen.io/gc-nomade/pen/yOjOby
* {
box-sizing: border-box;
}
a {
display: inline-block;
padding: 0.5em 1em;
margin: 0 1.5em 0 0;
text-decoration: none;
color: #177EE5;
border: solid 3px;
border-radius: 5px;
border-right: none;
position: relative;
background: linear-gradient(to right, lightgray, white, lightgray);
box-shadow: 0 0 5px black;
}
a:after {
content: '';
position: absolute;
top: 3px;
bottom: 3px;
right: -.8em;
width: 1.75em;
border-radius: inherit;
border-top: solid;
border-right: solid;
border-color: inherit;
transform: rotate(45deg);
background: linear-gradient(45deg, transparent 45%, lightgray 60%);
box-shadow: 0px -5px 5px -5px black, 5px 0px 5px -5px black
}
arrow
longer arrow
#
you can use this site and make triangular, polygon: The Shapes of CSS - CSS-Tricks
https://css-tricks.com/examples/ShapesOfCSS
make a css class. add that class on focus.
http://www.w3schools.com/jquery/html_addclass.asp
I have created a shape which represents a page with a shadow that gets bigger towards the bottom.
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div></div>
I need this to be rotated but when i try to add transform: rotate(10deg), the box-shadow illusion gets ruined and goes on top of the parent layer.
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
transform: rotate(10deg);
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div></div>
I have found this question: Which CSS properties create a stacking context? but there doesn't seem to be a proposed solution for my requirement.
Would there be any good solutions which would work in my case. I do not mind if they are SVG, filter, canvas or any thing else as long as it is supported reasonably well.
If you use another div it fixes the problem that you are experiencing, so that the background colour is on the inner div and the rotate is on the outer div.
Else you might need to use another method to get the same result.
body {
background: #dddddd;
}
.two{
background: white;
height: 300px;
width: 300px;
padding: 10px;
}
div.one {
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
transform: rotate(10deg);
}
div.one:before,
div.one:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div.one:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div class="one">
<div class="two">
</div>
</div>
Note: This answer does not describe how to fix the stacking context problem that is seen in your approach. This just provides a couple of alternate approaches that could be used to achieve a similar effect. Advantage of these approaches is that they should work in IE10+ and does not require any extra elements.
I would still recommend vals' answer if IE support is not mandatory.
Method 1: Perspective Transform
This is almost similar to the one that you had used except that it uses a single pseudo-element rotated with perspective to produce the shadows. Since only one pseudo-element is utilized, the other pseudo can be used to add a white foreground above the shadows.
body {
background: #dddddd;
}
div {
position: relative;
height: 300px;
width: 300px;
padding: 10px;
margin: 40px auto;
transform: rotate(10deg);
}
div:before,
div:after {
position: absolute;
content: '';
top: 0px;
}
div:before {
height: 100%;
width: 100%;
left: 0px;
background: white;
}
div:after {
height: 98%;
width: 97%;
left: 1.5%;
transform-origin: bottom;
transform: perspective(125px) rotateX(1deg);
box-shadow: 10px 0px 10px rgba(0, 0, 0, .5), -10px 0px 10px rgba(0, 0, 0, .5);
z-index: -1;
}
<div></div>
Method 2: Linear Gradients
We can use linear-gradient background images and position them appropriately to produce an effect similar to the one produced by the box-shadows. But as you can see in the output, it doesn't quite match up to a shadow because the blurred areas are not the same.
Here, we make use of the following:
One small angled linear gradient image (to top left) to produce the shadow on the left side of the box.
Another small angled linear gradient image (to top right) to produce the shadow on the right side of the box.
A large linear-gradient image for the white colored area (which is almost a solid color). A gradient is used here instead of a solid color because the size of a gradient image can be controlled.
body {
background: #dddddd;
}
div {
margin: 40px auto;
height: 300px;
width: 300px;
transform: rotate(10deg);
backface-visibility: hidden;
background: linear-gradient(to right, transparent 0.1%, white 0.1%), linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%);
background-size: 280px 100%, 10px 97%, 10px 97%;
background-position: 10px 0px, left top, right top;
background-repeat: no-repeat;
background-origin: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
The bottom of the gradient still doesn't get the blur that is seen in the box-shadow output. If needed, this can be achieved to some extent by adding even more gradients like in the below snippet.
body {
background: #dddddd;
}
div {
margin: 40px auto;
height: 300px;
width: 300px;
transform: rotate(10deg);
backface-visibility: hidden;
background: linear-gradient(to right, transparent 0.1%, white 0.1%), linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 5%, transparent 60%), linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 5%, transparent 70%);
background-size: 280px 100%, 10px 97%, 10px 97%, 10px 2.5%, 10px 2.5%;
background-position: 10px 0px, left top, right top, left 99.25%, right 99.25%;
background-repeat: no-repeat;
background-origin: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
When you go into the transforms world, the transforms themselves will solve some of the problems that they create.
You can solve this with the 3d equivalent of z-index, the Z coordinate
Unfortunately, this won't work in IE (I believe until they support preserve 3d)
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
transform: translateZ(1px) rotate(10deg);
transform-style: preserve-3d;
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: translateZ(-1px) rotate(1.5deg);
}
div:after {
transform: translateZ(-1px) rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div></div>
Is it possible to create two arrows like the photo below with css or I have to use a png or svg?
So far
HTML
a {
position: relative;
display: block;
padding-left: 30px;
line-height: 45px;
height: 45px;
}
a:after,
a:before {
right: 100%;
top: 26px;
border-left: 1px solid black;
content: " ";
height: 30px;
width: 25px;
position: absolute;
pointer-events: none;
left: 7px;
}
a:after {
-webkit-transform: rotate(135deg);
left: -11px;
}
a:before {
-webkit-transform: rotate(45deg);
top: 5px;
}
Next
jsfiddle
I can't figure how to put another pair of borders.
Thanks in advance
With a bit of tinkering of your example, it's possible, but you'd probably be better off using another method to draw it or using an icon or icon font.
Here's the fiddle
Achieved with
transform: skew();
rather than rotate.
It's possible, but I would just use a SVG in this case:
http://jsfiddle.net/6v7Np/
HTML
<div class="arrow_box"></div>
<div class="arrow_box alt"></div>
CSS
.arrow_box {
position: relative;
background: #fff;
top:50px;
left:60px;
}
.arrow_box.alt {
left:80px;
}
.arrow_box:after, .arrow_box:before {
right: 100%;
top: 50%;
border: solid transparent;
content:" ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 30px;
margin-top: -30px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000;
border-width: 31px;
margin-top: -31px;
}
With gradients:
a{
position: relative;
padding-left: 40px;
}
a::before{
content: '';
position: absolute;
width: 40px;
height: 40px;
left: 0;
top: 0;
background-image:
linear-gradient(135deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
linear-gradient(45deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
linear-gradient(135deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
linear-gradient(45deg, transparent 0px, transparent 19px, black 20px, transparent 21px);
background-repeat: no-repeat;
background-size: 50% 50%;
background-position: 0% top, 0% bottom, 50% top, 50% bottom;
/* distance ^ ^ */
}
http://jsfiddle.net/E8sRw/