How to make a angled arrow like this with gradient and transparent?
I made a block with gradient here. need help to convert into arrow.
http://jsfiddle.net/jitendravyas/aZ65c/2/
I need a compatible with ie8 compatibility
#jitendar; check this out i make it with pure css:
.button {width:70px;
height:140px;
overflow:hidden;
}
.button:after {
content:"";
width:100px;
height:100px;
background: linear-gradient(left top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display:block;
margin-top:20px;
margin-left:25px;
}
Check the fiddle http://jsfiddle.net/sandeep/aZ65c/7/
Related
Is it possible to apply a CSS filter with its parameter values depending on a gradient? For example I would like to apply a +15° hue rotation to the top-right corner of my web page and -15° to the bottom-left corner, with a smooth color gradient between them (any point in between should be like it was applied a hue-rotate(some number between -15 and +15) on).
I know gradients can easily be generated as a background but I want a gradient on the filter itself.
You can aproximate this using two layers and mask:
html {
min-height:100%;
position:relative;
}
html::before,
html::after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:red;
}
html::before {
filter:hue-rotate(100deg);
-webkit-mask:linear-gradient(to bottom right,#fff,transparent);
}
html::after {
filter:hue-rotate(-100deg);
-webkit-mask:linear-gradient(to top left,#fff,transparent);
}
This can also be done with an image:
html {
min-height:100%;
position:relative;
}
html::before,
html::after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url(https://i.picsum.photos/id/1074/800/800.jpg) center/cover;
}
html::before {
filter:hue-rotate(150deg);
-webkit-mask:linear-gradient(to bottom right,#fff,transparent);
}
html::after {
filter:hue-rotate(-150deg);
-webkit-mask:linear-gradient(to top left,#fff,transparent);
}
Use HSL color.
background-image: linear-gradient(0deg, hsl(0, 100%, 50%) 0%, hsl(30, 100%, 50%) 100%);
I'm trying to create a CSS animation where it looks like a div rotates around an image (or another div) on the X axis.
I was able to create a rough idea of it at: http://codepen.io/Kupe517/pen/zBKGev but the animated div does not have the rotation effect I am looking for. I figure I need to add in some kind of rotateX() to the transform and add perspective but I just can't figure out the right combo. I've attached a rough image of the kind of animation I am trying to achieve.
Here is my current animation code:
#keyframes moveBack {
0%{transform:translateY(0); z-index:10;}
25%{transform:translateY(435px); z-index:10;}
26%{z-index:0;}
50%{transform:translateY(0) scale(.8); z-index:0;}
75%{transform:translateY(-435px); z-index:0;}
76%{z-index:10;}
100%{transform:translateY(0); z-index:10;}
}
Here is a simple 3d transition that looks like what you are trying to achieve. The issue is that you are using translate but your aim is to rotate on the X axis.
To launch the transition, hover the div:
div{
position:relative;
width:300px; height:200px;
margin:10% auto;
perspective:500px;
transform-style:preserve-3d;
border:1px solid #000;
}
img{width:100%;}
p{
position:absolute;
left:250px; top:75px;
width:80px; height:40px;
margin:0; padding:5px 10px;
background:gold;
transform: rotateX(0deg) translatez(110px);
transition:transform 2s;
}
div:hover p{
transform: rotateX(360deg) translatez(110px);
}
<div>
<img src="http://i.imgur.com/k8BtMvj.jpg"/>
<p>Hover the div</p>
</div>
If you want the rotating div to always face the user, you can add another rotation after the translatez property like this:
div{
position:relative;
width:300px; height:200px;
margin:10% auto;
perspective:500px;
transform-style:preserve-3d;
border:1px solid #000;
}
img{width:100%;}
p{
position:absolute;
left:250px; top:75px;
width:80px; height:40px;
margin:0; padding:5px 10px;
background:gold;
transform: rotateX(0deg) translatez(130px) rotateX(0deg);
transition:transform 5s;
}
div:hover p{
transform: rotateX(360deg) translatez(130px) rotateX(-360deg);
}
<div>
<img src="http://i.imgur.com/k8BtMvj.jpg"/>
<p>Hover the div</p>
</div>
These work because when you chain transform properties on the same declaration, the last one is made according to the presvious ones. The coordinate system moves with the previous transforms.
I feel bad for this answer; I'll get the animation accurate. One moment-
Edit: Fixed.
A bit sloppy, but here's a working example of the concept you're shooting for. Play with the numbers to get how you want it. Hard to tell from the diagrams for what type of flow you're looking for:
http://codepen.io/anon/pen/JKRxmY?editors=1100
(You had a pesky origin property that I didn't see. Threw in some TranslateZ rules to clean 'er up a bit. )
I also forked this working example after changing the orientation:
http://codepen.io/anon/pen/WxGPpM?editors=0110
(and original) http://codepen.io/pukidepa/pen/nkJmv?editors=0110
The key here is with transform:rotateY(Xdeg);
Try out some of the code. Here's your animation CSS as it stands:
#keyframes moveBack {
0% {
transform: translateY(0) translateZ(100px) rotateX(0deg);
z-index: 10;
}
25% {
transform: translateY(125%) translateZ(-50px) rotateX(-70deg);
z-index: 10;
}
50% {
transform: translateY(0%) translateZ(-100px) rotateX(-180deg);
z-index: 10;
}
75% {
transform: translateY(-125%) translateZ(-50px) rotateX(-270deg);
z-index: 10;
}
100% {
transform: translateZ(25px) translateZ(100px) rotateX(-360deg);
z-index: 10;
}
}
Tip: when working with these types of rotations, it's best to remove the non-essentials like z-index at first and just get the movement down. You can always worry about that stuff later.
For a more circular rotation, you may want to stagger the effects of the rotation with the translation. In other words, try having one of the effects happen slightly before the other at different points of the animation.
How can I implement the following shape using CSS?
The right side should be slanted and the top corners should be rounded :
You can use pseudo-elements, border-radius and transform rotate to create the rounded edges and the oblique right part :
output : FIDDLE
div{
display:inline-block;
padding:1em 5em 1em;
position:relative;
overflow:hidden;
border-top-left-radius: 10px;
}
div:after{
content:"";
position:absolute;
top:0; left:0;
width:100%; height:100%;
background-color:#E70101;
z-index:-1;
border-top-right-radius: 15px;
-ms-transform: skewX(10deg);
-webkit-transform: skewX(10deg);
transform: skewX(10deg);
-ms-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
transform-origin:100% 100%;
}
<div>Some text</div>
Another option is to use 3d perspective transform: http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/
I'm very new to coding, but experienced on the computer.
On the following website I'm creating an enlarge-on-hover effect, written in css alone.
LINK: http://3514.linux3.testsider.dk/da/produkter/skumdetektorer
If you take a look in Chrome at the 1st, 4th, 5th, 6th, 7th... images, they have a serious stacking/layer/priotrity problem on hover.
Every browser worked fine one week ago, but suddenly Chrome started acting up...
I had the same problem with all browsers at first, but later on I fixed it by searching the internet and found that a z-index setting was the answer to the 'page-priority' problem.
I tried searching every corner of the internet, with every likely word related to the subject, but have found nothing.
Following is the code used on site:
<style type="text/css">
.hovergallery img {
-webkit-transform:scale(1); /*Webkit:Scale down image to 0.8x original size*/
-moz-transform:scale(1); /*Mozilla scale version*/
-o-transform:scale(1); /*Opera scale version*/
-webkit-transition-duration:0.5s; /*Webkit:Animation duration*/
-moz-transition-duration:0.5s; /*Mozilla duration version*/
-o-transition-duration:0.5s; /*Opera duration version*/
opacity:1; /*initial opacity of images*/
-webkit-perspective:1000;
-webkit-backface-visibility:hidden;
}
.hovergallery img:hover {
-webkit-transform:scale(1.6); /*Webkit:Scale up image to 1.2x original size*/
-moz-transform:scale(1.6); /*Mozilla scale version*/
-o-transform:scale(1.6); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow:30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity:1; /*initial opacity of images*/
-webkit-perspective:1000;
-webkit-backface-visibility:hidden;
z-index:999;
}
</style>
webkit-perspective: and webkit-backface-visibility: are used to stop images in chrome from flickering on hover.
z-index: is used to overwrite pageholder-shadow priority (998 in right side of page), so that images goes over and not under it on hover. As you see when viewing the link in Firefox or any other browser...
Try and add position:relative; to your .hovergallery img
.hovergallery img {
-webkit-transform:scale(1); /*Webkit:Scale down image to 0.8x original size*/
-moz-transform:scale(1); /*Mozilla scale version*/
-o-transform:scale(1); /*Opera scale version*/
-webkit-transition-duration:0.5s; /*Webkit:Animation duration*/
-moz-transition-duration:0.5s; /*Mozilla duration version*/
-o-transition-duration:0.5s; /*Opera duration version*/
opacity:1; /*initial opacity of images*/
-webkit-perspective:1000;
-webkit-backface-visibility:hidden;
position:relative;
}
I had similar problem. I have image gallary and I used opacity, transform and scale effect in hover effect. every image after scaling was becoming transparent and showing other images at background I modified the code based on above discussions and it is pasted below
.gallary{
text-align:center;
}
.gallary_img {
display:inline-block;
}
.gallary_img img{
border: 1px solid #660000;
display:inline-block;
opacity:0.4;
-webkit-transition: -webkit-transform 0.5s ease-in;
**position:relative;**
}
.gallary_img img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
border: 1px solid #660000;
-moz-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);
**z-index:999;**
}
how can i put the div's from top to buttom and left to right
example: http://jsfiddle.net/ZWxGW/2/
http://jsfiddle.net/ZWxGW/2/
SOLUTION
http://jsfiddle.net/pMbtk/33/
You can use the column-count property for this type of function:
Check my previous answers for this
I want to show list items as 2 or more columns (dynamic alignment)
.message {
width:90px;
margin:3px;
background-color:#dfdfdf;
float : left;
}
Try this if left to right and top to bottom works out for you.
1) In this case you have to take column div(s) (red colored in image) and you have to put other divs 1,2,3,4 inside this div... as in image
give below properties to div.
.message,.outer_div{ float:left; height:auto;
width:200px; }
2) in another case,if you want from left to right,top to bottom, then you don't need to have a outer div...specified in red color
you can try this...
ul {
width:60px; height: 60px;
}
ul li{
float:left;
width:20px;
list-style:none;
}
ul, ul li {
-moz-transform: rotate(-90deg) scaleX(-1);
-o-transform: rotate(-90deg) scaleX(-1);
-webkit-transform: rotate(-90deg) scaleX(-1);
-ms-transform: rotate(-90deg) scaleX(-1);
transform: rotate(-90deg) scaleX(-1);
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-3.061616997868383e-16, M12=1, M21=1, M22=3.061616997868383e-16, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=-3.061616997868383e-16,
M12=1,
M21=1,
M22=3.061616997868383e-16,
SizingMethod='auto expand');
}
untested in IE http://jsfiddle.net/rlemon/Y5ZvA/3/
Remove height from contentDiv and put float:left; so that it wraps your content.
http://jsfiddle.net/ZWxGW/5/
I tried this in your example:
.message {
width:90px;
margin:3px;
background-color:#dfdfdf;
position:absolute;
}
and it helps.
Good-Luck !