File save gif in CSS

Developer
Jaflo
Size
3,134 Kb
Views
44,528
  1. File save gif in CSS Previews
  2. File save gif in CSS HTML Codes
  3. File save gif in CSS CSS Codes
  4. File save gif in CSS JS Codes

How do I make an file save gif in css?

Inspired by Dribbble (http://dribbble.com/shots/1092480-Save-GIF). What is a file save gif in css? How do you make a file save gif in css? This script and codes were developed by Jaflo on 22 September 2022, Thursday.

File save gif in CSS Previews
IQ Test

File save gif in CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>File save gif in CSS</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #282828; color: white; text-align: center; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
a { color: white;
}
#file { font-size: 100px; width: 1em; height: .9em; background: #fff; border-radius: 0.05em; padding-top: 0.3em; position: absolute; top: 50%; right: 50%; margin-top: -0.45em; margin-right: -0.5em;
}
#file > i { width: 0; height: 0; margin-top: -0.3em; display: block; border: 0.15em solid #ddd; border-top-color: #282828; border-right-color: #282828; border-radius: 0 0 0 0.05em; float: right; box-shadow: -1px 2px 2px rgba(0,0,0,0.5);
}
#file > div { height: 0.1em; width: 0.8em; background: #d8d8d8; margin: 0.1em; no-box-shadow: inset 0 0.01em 0.03em rgba(0,0,0,0.2); transition: opacity 0.3s;
}
#file.done > div { opacity: 0;
}
#file > div > div { height: 0.1em; width: 100%; background: #111; transition: width 0.5s 0 linear;
}
#file > div.b > div { transition-delay: 0.5s;
}
#file > div.c > div { transition-delay: 1s;
}
#file > b { width: 0.15em; height: 0.36em; border: 0 solid #1dae2a; border-width: 0 0.15em 0.15em 0; transform: rotate(45deg) scale(0); position: absolute; margin: -0.6em -0.15em; transition: transform 0.3s ease-out;
}
#file.done > b { transform: rotate(45deg) scale(1);
}
span { display: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="file"> <i></i> <div><div></div></div> <div class="b"><div></div></div> <div class="c"><div></div></div> <b></b>
</div>
Change <code>font-size</code> to change file icon size. <br />
Inspired by <a href="http://dribbble.com/shots/1092480-Save-GIF">Dribbble</a><br />
<span>You missed the animation</span><br />
<div id="slider"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

File save gif in CSS - Script Codes CSS Codes

body { background: #282828; color: white; text-align: center; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
a { color: white;
}
#file { font-size: 100px; width: 1em; height: .9em; background: #fff; border-radius: 0.05em; padding-top: 0.3em; position: absolute; top: 50%; right: 50%; margin-top: -0.45em; margin-right: -0.5em;
}
#file > i { width: 0; height: 0; margin-top: -0.3em; display: block; border: 0.15em solid #ddd; border-top-color: #282828; border-right-color: #282828; border-radius: 0 0 0 0.05em; float: right; box-shadow: -1px 2px 2px rgba(0,0,0,0.5);
}
#file > div { height: 0.1em; width: 0.8em; background: #d8d8d8; margin: 0.1em; no-box-shadow: inset 0 0.01em 0.03em rgba(0,0,0,0.2); transition: opacity 0.3s;
}
#file.done > div { opacity: 0;
}
#file > div > div { height: 0.1em; width: 100%; background: #111; transition: width 0.5s 0 linear;
}
#file > div.b > div { transition-delay: 0.5s;
}
#file > div.c > div { transition-delay: 1s;
}
#file > b { width: 0.15em; height: 0.36em; border: 0 solid #1dae2a; border-width: 0 0.15em 0.15em 0; transform: rotate(45deg) scale(0); position: absolute; margin: -0.6em -0.15em; transition: transform 0.3s ease-out;
}
#file.done > b { transform: rotate(45deg) scale(1);
}
span { display: none;
}

File save gif in CSS - Script Codes JS Codes

setTimeout(function() { $("#file").addClass("done");
}, 1500);
setTimeout(function() { $("span").css("display", "block");
}, 2000);
/*$("#slider").slider({ min: 10, max: 700, values: [200], slide: function( event, ui ) { $("#file").css("font-size",ui.value+"px"); }
});*/
File save gif in CSS - Script Codes
File save gif in CSS - Script Codes
Home Page Home
Developer Jaflo
Username jaflo
Uploaded September 22, 2022
Rating 3
Size 3,134 Kb
Views 44,528
Do you need developer help for File save gif in CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jaflo (jaflo) Script Codes
Name
A note
Pokemon-like dialogue box
Comment image widget
SimpleGroove bookmarklet
Little loader
Shopping cart
Icon wiggle animation
Resizable mail icon
Nice flat icon
Dialogue boxes
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!