How to convert a gif into a shadow? - css

I have an elegant 3D animation of a molecule Codeine_3d_transparent.gif.
I wish to produce itsshadow : Codeine_3d_transparent-shadow.gif, which using some html and css I will put bellow the colorful animation.
How can I do it quickly ?
As of now I do this but it's not a shadow XD :

To be honest, this will probably hurt some devices performance AF (pardon me) - especially so many filters on GIF. Filters should be GPU accelerated though.
Also note, that filters aren't 100% supported across all browsers.
.animationHere,.animationHere:after{
position:relative;
width:200px;
height:200px;
display:inline-block;
background:url(https://upload.wikimedia.org/wikipedia/commons/3/3e/Codeine_3d_transparent.gif);
background-size:100% 100%;
}
.animationHere:after{
position:absolute;
top:3px;
left:3px;
content:"";
z-index:-1;
filter: brightness(0) blur(1px);
opacity: .5;
}
.animationHere.next:after{
position:absolute;
top:30px;
left:0;
filter: none;
}
<div class="animationHere"></div>
<div class="animationHere next"></div>

Related

Is it possible to skew the edge of a div without using CSS transform?

Let's say I want to make a skewed-edge div like this one,
As this JS Bin or this question demonstrate, it shouldn't be difficult. However, those two use CSS transform to do the trick. Is it possible to skew the edge without CSS transform? It would be useful to support IE8 without using polyfills, for example.
IE8 is suppose to be able to use matrix filter , so transform with a fallback for IE should do :
.skew {
display:table;
margin:auto;
transform:skew(0,5deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0.08748866352592415, M22=1, SizingMethod='auto expand')";
overflow:hidden;
}
.skew div {
margin-bottom:-40px;
margin-top:30px;
transform:skew(0,-5deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.08748866352592455, M22=1, SizingMethod='auto expand')";
}
img {
display:block;
}
<div class="skew">
<div>
<img src="http://lorempixel.com/600/400" />
</div>
</div>
Note, -ms-filter is to be tested in a real IE8 to make test efficient. Load this page into a genuine IE8 to test and run snippet or dowload the zip file from : http://codepen.io/gc-nomade/share/zip/LZpwwy/
a generator that can be helpfull : http://www.useragentman.com/IETransformsTranslator/
You can achieve this by creating a triangle using borders if you create an element with a very wide bottom border:
HTML
<div id="container">
<div id="mask">
</div>
</div>
CSS
#container {
position: relative;
width: 100%;
height: 25em;
overflow: hidden;
...
}
#mask {
/* position the element on top */
position: absolute;
width: 0;
height: 0;
bottom: 0;
left: 0;
z-index: 1;
/* create a triangle using borders */
border-style: solid;
border-color: YOUR_BACKGROUND_COLOUR transparent;
/* A fallback for browsers that don't support vw */
border-width: 0 2560px 5em 0;
/* make the border take the full width of the screen: http://caniuse.com/#feat=viewport-units */
border-width: 0 100vw 10em 0;
}
DEMO
http://codepen.io/Godwin/pen/PzPMBQ?editors=1100
However, like #kthornbloom said, unless you absolutely need to show a skew, it would be best practice to just let IE8 show a rectangle instead. You'll have more success making the page dependably responsive if you use transforms.

FAB button animation not working properly

I'm trying to animate a FAB button when it's clicked. I want it to open and fills up the screen - It's for a responsive webApp running in mobile devices.
The problem is: When I click to open the button, it gets the full width instantly and then animate up. And to close the button, it shorten instantly and then animate down.
The problem is I'm using a fixed position, so I don't know how to deal with it.
This is an code example:
html:
<div class="fab" ng-class="{'open': fabOpen}" ng-click="toggleFab()">
<span ng-show="!fabOpen">FAB</span>
<h4 ng-show="fabOpen">Just a test</h4>
</div>
scss:
$time: 400ms;
.fab {
-webkit-transition-duration: $time;
-moz-transition-duration: $time;
-o-transition-duration: $time;
transition-duration: $time;
border-radius:50%;
background:#358FE8;
display:inline-block;
height:80px;
line-height:80px;
width:80px;
position:fixed;
bottom:16px;
right:16px;
text-align:center;
cursor:pointer;
color:white;
&.open {
background:#fff;
color:black;
border:1px solid #eee;
border-radius:2px;
left: 16px;
width:auto;
height:90%;
}
}
And this is an live demo of the problem: http://jsfiddle.net/tfrxf0p5/
A workaround to fix the issue I had was to use a width:calc; and doesn't use the left property.
This way I can calculate the maximum width of the element based on the distance of the border. So, since I already have a position right of 16px I need to have a width of 100% minus 16px for each side.
Final code would be something like this:
&.open {
width:calc(100% - 32px);
/*left:16px;*/ //Doesn't need it
}
I can't fix the fiddle on my phone for some reason. you have transition-duration but you never set what to transition.

CSS Flipping Cube

I made some expriment with CSS3. I wanted to build a Flipping Cube with only 2 DIV.Like this:
http://cssdeck.com/labs/css3-flipping-cube
(I dont like this solution because the div must always be centered)
So I have tried to find my own solution.
My HTML structure looks like this:
<div class="outer">
<div class="face face1">Click here !</div>
<div class="face face2"></div>
</div>
My CSS file looks like this:
.outer { margin-left:52px; position:relative; width:400px; perspective:500px; }
.face { width:100%; height:50px; padding:0 10px; background-color:#E5E5E5; position:absolute; }
.face.face1 { height:50px; background-color:#E5E5E5; transform:rotateX(0deg); transform-origin:0 0 0; z-index:1; top:0; }
.face.face2 { height:50px; background-color:#007CC1; transform:rotateX(-90deg); transform-origin:0 50px 0; z-index:3; top:0; }
.face.face1.start { transform:rotateX(90deg); transition:transform 1s ease-out; }
.face.face2.start { transform:rotateX(0deg); transition:transform 1s ease-out; }
When I click on the face1 then javascript adds the class start to the divs for are the animation.
$(function(){
$('.outer').on('click', function(){
$('.face1').addClass('start');
$('.face2').addClass('start');
});
});
My solution looks currently not good. Do you have any tips or idea for me. You can see the whole code here:
http://jsfiddle.net/dAXRX/3/
(I didn't use the -webkit prefix. It currently only works with Firefox)

CSS multiple backgrounds scrolling at different speeds

I came across this website today and I was mystified: http://www.actionbutton.net/
Is he using some kind of known technique for his backgrounds that scroll at a different rate and overlap each other. I looked at the source but am pretty confused. Does anyone know what the technique is called and how to learn it?
Here is an approximation of the parallax effect that doesn't use JS (thus backgrounds are scrolling at constant speed). The jfiddle example: http://jsfiddle.net/MFC9B/2/
Key is that there is a 2-layer nested divs, the outer one to hold the background, the inner one to hold the content:
.section {
position:relative;
z-index:1;
height:500px;
width:100%;
background-attachment:fixed; /* this keeps the background in place */
background-size:100% 100%;
background-repeat:no-repeat;
}
.content {
position:relative;
z-index:2;
background-color:#fff;
border:2px solid #666;
height:50%; /* this height difference allows the bg to show through */
}
It's call parallax there's plenty of plugin for this e.g. http://www.ianlunn.co.uk/plugins/jquery-parallax/
You could also consider something like that (no javascript is required):
#keyframes backgroundscroller {
from {
background-position: 0% 0%;
}
to {
background-position: 500% 500%, 400% 400%, 300% 300%, 200% 200%, 100% 100%;
}
}
#yourdivid {
background-image: url('full/sprite1.png'), url('512/sprite2.png'), url('256/sprite3.png'), url('128/sprite4.png'), url('64/sprite5.png');
animation-name: backgroundscroller;
animation-duration: 300s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
Obviously you must be aware that this will work only with browsers that support CSS3 and you also want to consider including a very useful javascript that takes care of adding prefixes where and if needed: http://leaverou.github.com/prefixfree/

Animate line-through text with CSS

Is it possible to use Webkit animations/transitions to animate a strikethrough line going through a word from left to right? As far as I can tell, I can only make it fade in/out, not animate it striking the text out.
Any help would be appreciated. Thanks.
This works.. (I used hover, not sure what event you want it to trigger)
html:
<p>This is <span class='line_wrap'><span class='line'></span>weird</span></p>​
css:
span.line_wrap {
position:relative;
display:inline-block;
}
span.line {
display:inline-block;
position:absolute;
left:0;
top:50%;
width:0;
border-top:1px solid grey;
-webkit-transition: width 0.5s ease-in;
}
span.line_wrap:hover span.line {
width:100%;
}​
fiddle:
http://jsfiddle.net/bendog/LXKJU/
EDIT: This is really just to illustrate it's possible... makes horrible markup though. I wouldn't advise you to use it...
EDIT 2: Or triggered with Javascript: http://jsfiddle.net/bendog/Kdd7K/

Resources