Category Archives: WebMaster

fibank интеграция epos терминал , как да трансформираме JKS формат в PEM, за нуждите на PHP

Това кратко ръководство има за цел да ви запознае с информация “как да трансформираме JKS формат в PEM, за нуждите на PHP”.

Предполагаме, че работите на Windows (една от най-разпространените операционни системи)

Трябва да имате инсталирана Java Runtime Environment

От FiBank Получавате: imakstore.zip

1. Разархивирате с паролата, която са ви дали за zip.

НЕ ПРЕИМЕНУВАЙТЕ Разархивирания ФАЙЛ!!!

За демонстрационни цели нека кажем, че файлът, който сте разархивирали се казва ОРИГИНАЛНО: imakstore.VENCEDOR
Дългата парола за отключване на СЕРТИФИКАТА (не на архива) е: CERTPASS

2. Пуснете Command Prompt като администратор.
Run as Administrator

3. Чрез отворения терминал влезте в директорията на JRE / bin

cd C:\Program Files\Java\jre1.8.0_121\bin

директорията jre1.8.0_121 – може да варира спрямо текущата версия на JRE (Java Runtime Environment), която сте инсталирали.

Тук се намира keytool.exe , което е част от JRE.

Изписваме следната команда, която има за цел да конвертира файла в .p12

keytool.exe -importkeystore -srckeystore imakstore.VENCEDOR -destkeystore imakstore.VENCEDOR.p12 -srcstoretype JKS -deststoretype PKCS12 -srcstorepass CERTPASS -deststorepass CERTPASS -srcalias ima -destalias ima

На мястото на imakstore.VENCEDOR , слагате името на вашия файл.

На мястото на CERTPASS, слагате паролата, която ви е дадена от fibank (не паролата за архива, а паролата В архива, нещо от типа: KFb1bVv8xHDjcnYn1DNqSJe3qfdVogbg).

Ако не ви излезе някоя грешка, честито ! Имате файл
C:\Program Files\Java\jre1.8.0_121\bin\imakstore.VENCEDOR.p12

4. Трябва да конвертираме .p12 в .pem , за да можем да го ползваме с РНР спокойно.

Това действие се извършва на вашия сървър, с който ще работите като връзка към fibank.

4.1. Качвате файла imakstore.VENCEDOR.p12 в главната директория на сървъра си.

4.2. Хубаво е да имате ssh достъп до сървъра си, в противен случай трябва да изпратите на поддръжката на сървъра, да пусне командата вместо вас.

SSH:

openssl pkcs12 -in imakstore.VENCEDOR.p12 -out imakstore.VENCEDOR.pem -passin pass:CERTPASS -passout pass:CERTPASS

Хубаво е да ви излезе ред: “MAC verified OK”, ако не излезе, редно е да се свържете с fibank за повече инфо.
Вече имате файл : imakstore.VENCEDOR.pem , който се намира в главната директория на сървъра ви! /там където трябваше и да сте качили imakstore.VENCEDOR.p12/

 

icomoon.io – best way to make a custom web font

Like it says on the intro “Custom built and crisp icon fonts, done right”

Why IcoMoon? / icomoon.io /

Build Custom Fonts

Using the IcoMoon App, you can build your own custom fonts that only contain the icons that you need.

Pixel Perfect Results

Unlike similar services, the IcoMoon app takes grid sizes of icons into account and generates crisp, pixel perfect results. With a proper alignment, the font size you set would directly translate to the size of the icons.

Free Icons, Free App

The IcoMoon app is free. You don’t need to pay anything or give back any credit for using it. IcoMoon’s Library features many high quality icon sets. All of these icons are designed on a grid and they are optimized to be used with the IcoMoon app. Add any set you wish to easily browse and search its icons.

Awesome Iconography Tool

The IcoMoon app is an advanced iconography tool. It lets you sort your icons, manage your icon collections, or make your icons searchable by adding tags to them. In addition to fonts, you can generate PNGs, SVGs and CSS sprites in any size and color you wish.

Import Your Own Vectors

In the IcoMoon app, you can import your own vectors (SVG images or SVG fonts). Importing icons happens locally, in your browser. Your vectors won’t get uploaded to our servers when you import them. Some basic editing options such as moving, mirroring and rotating are available too.

Works Offline

Once loaded in your browser, the IcoMoon app works offline. When you import an icon or generate a font, everything happens locally, in your own browser. Your icons/fonts won’t be uploaded to our servers. You can even load the IcoMoon app when you have no connection if you install it from the Chrome Web Store.

Multiple Ligatures Per Glyph

Instead of assigning single characters to your glyphs, you could assign different tags to them (ligatures). This feature is especially useful for fallbacks or desktop usage of the fonts. Learn More…

25+ Free and Sought-After jQuery Plugins

With a quite promising slogan “Write Less, Do More,” jQuery has become the first choice among web developers, and is probably one of the most popular JavaScript libraries. It is not surprising since it fully justifies the motto and has an enormous potential that can be easily unlocked by any tech-savvy person. Here are a few free jQuery plugins that are considered to be the most popular, the most sought-after and the most effective.

There are tons of fast, versatile and feature-rich solutions that are powered by it on the wild. High value plugins are are universal, and can bring benefits to different projects and layouts. As a rule, we seek code snippets that were neatly and professionally converted into plugins that have documentation and intuitive manual.

These tiny and lightweight enhancements refine projects in terms of design, interactivity, user experience, readability and other significant and integral aspects.

List of Free jQuery Plugins

Datedropper

Free jQuery Plugins

Datedropper is a lightweight jQuery plugin for working with dates that populate forms. It presupposes settings for customizing color, animation effect, language, format, background, border color and some others. The official website includes demos and all the necessary documentation.

PhotoSwipe

PhotoSwipe

With two traditional gallery styles, full and minimal, PhotoSwipe is aimed to showcase a series of images in the best possible light. It is a perfect match for modern responsive websites that should provide an optimal experience for different devices. The plugin supports all standard touch gestures. The navigation is also available through keyboard and intuitive interface with pixel-perfect graphics

Chartist

jQuery Plugin

Chartist turns the display of boring statistics into a captivating, engaging and visually interesting spectacle. This small, responsive SVG-based library lets build vibrant and dynamic charts. The only drawback is that the plugin is supported by modern browsers such as IE9 and higher, Safari 7, Android 4.3, Firefox 3.1, Chrome 3.5.

Animsition

Animsition

The main goal of Animsition is to enhance the user experience by making the transition between pages a pleasant event. This tiny jQuery plugin allows creating smooth and eye-pleasing CSS-powered animations that accompany shifting. It offers almost 60 different effects including standard fade series, fade-up series, fade-down series, rotate series, flip x/y, zoom series and overlay.

FSVS

FSVS

FSVS, or Full Screen Vertical Scroll, enables you to deal with scrolling effects more efficiently and productively. It leverages CSS3 transition effects and has an optional yet vital jQuery fallback. Since it should provide an extra functionality for small devices such as tablets and cellphones, it supports touch gestures and swipes. What’s more, you can also use arrow keys, mouse wheel, click and drag.

Strip

Strip

Strip is a modern solution to add an elegant lightbox to your website. It is smooth, sleek and smart. Since it takes up not the whole browser screen, users are left with free space and some other parts of the layout for better and less intrusive interaction. Moreover, it is driven by jQuery, so that all the modern browsers handle it.

Sweet Alert

Sweet Alert

Sweet Alert enriches regular and dull pop-up windows that appear when something wrong happens or when you require some interaction from the visitors. The plugin automatically centers an alert box and provides a semi-transparent dark overlay accompanying screen thereby easily focusing the whole attention on the content. It is highly customizable in terms of design and complementary effects.

Midnight

Midnight

Midnight offers a simple yet viable solution for improving and enhancing fixed top bars that, as a rule, are used as primary navigation centers or advertisement/info panels in long or parallax-based websites. It lets switch between several variants while the user is moving down.

Block Scroll

Block Scroll

Block Scroll was created to improve readability and user experience. Content heavy and information overloaded projects will feel the whole potential of this product. It breaks the page into digestible portions that are displayed one at a time, giving readers freedom and time to enjoy data.

Paper Collapse

Paper Collapse

Paper Collapse is a regular accordion that has a beautiful, sleek appearance and a handful of features. Being inspired by Google’s Material Design, the component employs Font Awesome icons to make the interface look more intuitive and more harmonious and stylish.

FocusPoint

FocusPoint

FocusPoint offers simple yet useful instruments for cropping of flexible image containers, making this process more intelligent and hassle-free. It is well-suited for full-screen images. It easily deals with different dimensions and two modes, such as portrait and landscape, in order to maintain consistency in style and provide better experience on smaller devices.

TextTailor

TextTailor

TextTailor is intended to work with text more efficiently. The plugin makes the content to be more responsive and mobile-friendly. Its primary function is to force the text to fill the height of the container thereby contributing to the general formatting and design aesthetics.

BootGrid

BootGrid

BootGrid is a small and powerful enhancement for Bootstrap-driven websites. It has an intuitive interface that improves work with one of the basic components. It easily transforms a primitive table into refined data table with extra controls and options.

PrettyEmbed

PrettyEmbed

PrettyEmbed allows populating projects with YouTube-hosted videos without delays and problems. It comes with such features as fetch the preview image that won’t look distorted on a huge or vice versa small screens, extra customization options, and native support for FitVids.

Waves

Waves

Waves was also inspired by the Google Material Design concept. It offers a tiny accompanying effect that enriches clicking. You can apply it to buttons, icons, DIVs and images. What’s more, it perfectly works with event handlers inherent to jQuery and JavaScript.

jsPDF

jsPDF

jsPDF is HTML5-based client-side solution for dynamically generating PDF files. The library is quite powerful in what it can do so that in order to feel its enormous potential you should visit the official website. It ships with numerous built-in functions and uses jQuery. As for browser compatibility, it works well in Firefox 3+, Chrome, Safari 3+, Opera and even IE 6 (with some tricks).

fontFlex

fontFlex

fontFlex is aimed to make the primary font of the website responsive and fully adaptive. The extension dynamically selects the right size that should make the content look more appropriate within a container or browser screen, improving readability.

Vide

Vide

Video backgrounds made easy with this super lightweight and smart plugin. Vide helps to enrich the website with lavish and dynamic visuals. It is supported by the latest browser versions; with one exception, as usual, IE8 and lower are left behind. Some versions of Android and iOS can also experience problems. For the rest, everything is fine.

Trianglify

Trianglify

Trianglify is all about fascinating, eye-catching and stylish polygonal art that beautifies an appearance of any website giving the backdrop a cutting-edge feel. The online tool automatically generates the vibrant and geometric style SVG background images that are constructed from triangles. You can specify the amount of objects, their size, color and even set the output format.

TitleNotifier

TitleNotifier

TitleNotifier is a miniature dependency-free JavaScript library with a set of instruments for thorough customization. It shows the number of unread notifications in your web page title, just as Gmail does it when it comes to unopened messages.

jBox

jBox

jBox is a small yet powerful and advanced plugin that deals with pop-up windows, tool tips, notices and images. Each one has its series of assigned effects that contribute to general aesthetics and user experience. It meets standards for retina screens and works great, even in IE8.

CrossFade

CrossFade

CrossFade is a minified jQuery plugin that weighs only 3kb. It is an excellent enhancement for long-page websites where images play the first fiddle. It preloads images as to not annoy users with a boring loading process.

Scrolling Progress

Scrolling Progress

Scrolling Progress provides your online visitors with visual indicator while they are moving down and exploring your long-page website. Designed with the help of HTML and CSS and charged with extra dynamic feel by jQuery, this framed code snippet can contribute to general experience and benefit any project.

Select or Die

Select or Die

Select or Die is a plugin which aims to bring elegance and refinement to plain select inputs. With it, drop-down components look nifty and stylish much like ghost buttons. However, it will be useful for tech-savvy people since it does not have a friendly interface.

tableExport

tableExport

tableExport works with various sorts of tables. You can export HTML table into such popular file formats as JSON, XML, PNG, CSV, TXT, SQL, MS Word/Excel/PowerPoint and even PDFs in several clicks.

Scroll Up Bar

Scroll up bar

Scroll Up Bar is particularly useful for mobile and tablet user interfaces that are suffering from a lack of free space. The plugin hides the navigation bar that as a rule sits on the top when the user starts to scroll down and shows it when a user is ready to go up thereby providing an extra space and not distracting from the design.

CoverVid

CoverVid

CoverVid is another viable and efficient solution to work videos into a project and set them as a basic background. It cooperates mainly with HTML5 videos. There are several settings that allow getting the most out of it.

Conclusion

When it comes to enhancements and improvements, it is hard to find something better than a pack of tried-and-true and approved by dev community jQuery plugins. They are proved to be the most viable, easy, cost-effective and time-saving solutions.

You can solve a bunch of common problems with the help of them, starting from making more eye-catching calls to action to enriching user experience in long-page websites with extra informative indicators or captivating effects. Some of them have a great informative background, others should be perceived on an intuitive level, yet all of them deserve your attention.

 

source: designmodo.com/free-jquery-plugins/

Tools for Structuring & Optimizing Your CSS Code

css_code_thumb

Frontend development has become more streamlined and quicker than ever before. Modern standards allow developers to create magnificent effects with just a few lines of code. But even beyond W3C specs are many online tools & webapps that make development a relatively painless procedure.

The following tools have been made by developers, for developers, with the intention of expediting the development process. They’re sturdy, prudent, and best of all completely free! Try adding these tools into your daily workflow to gain more traction while building complex web projects.


1. CSS Beautifier

Here’s a great example of simple and practical rolled into one neat web application. CSS Beautifier will automatically rearrange CSS code with custom settings for spaces and tabs.

This is perfect for unifying your own stylesheets and for de-compressing minified CSS into a readable format.

css beautifier webapp


2. CSS Inliner Tool

E-mail newsletters are still going strong and prove to be a useful method of mass communication. Web designers have to pay careful attention to newsletters since they’re much more fickle compared to browser-based websites.

For example, some e-mail clients strip CSS styles from the heading of a newsletter. This means the safest way to build a newsletter is actually with inline styles. Obviously this would be annoying to code by hand, so MailChimp’s CSS Inliner Tool is a welcome addition to this article. Anyone who builds newsletters should keep the CSS Inliner bookmarked, stickied, and showered with love.

css inliner email editor


3. SASS/SCSS

SASS is a CSS preprocessor meant for saving time during CSS development. While this seems like an odd tool for organizing code, it can actually prove tremendously useful to frontend developers.

SASS and the more recent SCSS are based on the same underlying engine. You can write SASS/SCSS code that holds variables and imports code snippets like a programming language. CSS3 prefixes can be auto-generated and there’s even a free SASS extension for Dreamweaver.

sass scss tool editor


4. RECESS

Developers that are familiar with LESS may know a bit about RECESS. This is a code tool made by Twitter for checking LESS/CSS code for syntax errors. It can also be used as a direct compiler for LESS code.

If you’re a fan of LESS it may be worth learning how to use RECESS. It can be installed through the command line and runs in a similar fashion. You’ll be able to check for code errors, reorganize spacing, and compile LESS code all with one program.

recess open source editor scss


5. ProCSSor

Neat freaks and code lovers will simply adore ProCSSor. It’s an optimization tool created by MaxCDN for automating the optimization of CSS code.

You can change how indents/spaces work, how to close curly braces, and how to organize selectors. And ProCSSor supports copied CSS code, uploaded stylesheets, or direct URLs to files already online.

procssor editor tool


6. CSScomb

For a desktop alternative to optimization take a look at CSS Comb. This can be installed via the command line and offers extensions for many development programs. The features are run via the terminal or command prompt, so it does have a small learning curve but offers a lot in return.

For those who would rather avoid writing shell scripts you can try CSS Comb’s online webapp to perform many of the same features.

css comb online editor optimize


7. Styleneat

Styleneat is a very cool CSS webapp for organization. You can either copy CSS code, upload a CSS file, or link to one on the web. Then you choose how to organize the code and even how to sort properties.

This little tool can’t do everything but it does offer a unique toolset for CSS devs.

styleneat reformat styles css


8. CSS Compressor

Here’s a quick & dirty compression engine without any frills. You paste in some code, choose how you want it compressed, then let it run.

CSS Compressor is best used right after you’ve finished coding a project to make the stylesheet smaller before uploading onto a server.

css compressor webapp


9. Minifier

Code minification is quite popular on the world wide web, and Minify is one of many apps to automate the process.

Minify works as both a CSS and JavaScript compression webapp. Plus it can handle copy/pasted code along with external files through a direct HTTP address.

minify webapp tool css


10. CSS Lint

In programming terms, linting is the process of using a program to check for errors in source code. Traditionally this was applied to programming languages but nowadays it can also be used for web development, too.

CSS Lint is a free tool that checks for errors, compatibility issues, and even performance blocks in your code. It’s perfect for an objective review of your work to weed out those pesky syntax mistakes.

css lint syntax checking


11. CSS Validator

Code validation is slightly different than linting because it doesn’t exactly deal with syntax, but rather standards. W3C is the agency putting out official specifications that browser engines follow. CSS Portal’s validator is a useful tool if you want to ensure that your CSS code follows W3C specifications.

The CSS Portal design is easier to read than alternatives, but if you’re a stickler for official platforms then try W3C’s validator instead. They both offer similar options for validation but have different interfaces for sifting through the results.

css validator online w3c


12. Refresh-SF

Code compression is a huge aspect of minimizing project files. CSS stylesheets and JavaScript files can grow large rather quickly and without warning.

Refresh SF is a free tool hosted on GitHub for minifying CSS and JS code. You can choose from many options for customizing the compression process to obtain your preferred output.

refresh sf webapp css optimizer


13. Pleeease Play

Pleeease is a Node.js web application with a fun CSS editor. It actually proves quite useful to developers with capabilities to auto-generate CSS3 prefixes and convert rems to pixels.

The app is built like a code IDE where your syntax is auto-converted based on specified options. It’s not the greatest IDE for writing code but it is very useful for optimization.

pleeease play webapp css editor


14. UnCSS

If you catch yourself writing duplicate properties and re-declaring selectors then you need to try UnCSS. It’s an open source tool built to optimize CSS code by removing extraneous properties and selectors.

This is another command line tool but if you’re interested to learn then it’s worth the effort. UnCSS’s GitHub page includes a full rundown of each command option and how it works.

uncss syntax js css webapp


15. CSSCSS

An alternative to UnCSS is the CSSCSS tool built by Harvest. You’ll find this for free on GitHub and it’s also installed via command line. CSSCSS can handle pre-compiled assets like SASS/SCSS files and works great with Compass.

Both UnCSS and CSSCSS are perfect for removing duplicate codes from your stylesheet. Which one you choose ultimately boils down to personal preference.

csscss open source webapp editor


Collection of Free Page-Loading Effects (Tiny User-Friendly Animations)

The golden rule of creating great web-based projects that provide online audiences with good user experiences is to not let them wait. It seems like a really simple task, however it just sounds so. Completely upload your content-intensive website that is populated with high-quality, heavy multimedia data in the blink of an eye is simply impossible due to imperfections inherent to modern technologies. All that remains to do is find a way of forcing people to stay while they are waiting. And making use of page-loading effects is an optimal solution here.

Spinners, loading bars, basic counters can do the job perfectly well. They give a notion that something happens in a pleasant, entertaining and enticing manner. With just a bit of imagination, you can transform a plain loading indicator into a real masterpiece that will amuse users by diverting their attention from idle process as well as enrich your website design aesthetics.

Page-loading effects are not just whimsy; they are a must-have for any complex, content-heavy or dynamic project. If your project falls into one of these categories then you should definitely take a look at our varied and fresh collection of free page-loading effects; we hope you will definitely find a perfect match for your website here.

Free Page-Loading Effects

Inspiration for Article Intro Effects

Inspiration for Article Intro Effects

The team speculates about various intro animations that should accompany page appearance thereby enriching user experience. The collection includes:

  • Pushing techniques
  • Fade out effect
  • Slice effect
  • Grid-based solutions
  • Imitation of an effect seen on Jam3

You will be able to freely grab a source file; however it can only serve as a starting point.

Page Loading Effects

Page Loading Effects

The team gives you hints how to transform a boring loading time into an enjoyable and visually-appealing pastime by equipping your website with some fantastic SVG animations based on Snap.svg. The article covers a bunch of different effects, namely:

  • Lazy stretching
  • Windscreen wiper
  • Tunnel vision
  • Basic effects such as tilt, wave, and curtain

Page Preloading Effect

Page Preloading Effect

Unlike the previous two examples, this team has concentrated on producing only one solution that should brighten up an appearance of the page with a help of a simple, small yet fancy animation based on an effective collaboration of CSS3 3D transforms and SVGs. You will be also able to insert your logo into it thereby showing off your trademark from the first second.

Creative Loading Effects

Creative Loading Effects

The project is created in order to provide developers with a sheer inspiration, yet, you can still freely grab several valid code snippets that will enhance your page with some alluring loading effects. The range covers 13 solutions including popular YouTube loading bar, standard expanding box, circular indicators and others.

Display Animation While Page Loading Using jQuery

Display Animation While Page Loading Using jQuery

The tutorial regards a really simple but fundamental solution of how to properly implement a loading indicator in order to engage users. The author offers two ways of resolving this problem:

  • Using loading image in CSS and a HTML div element with jQuery bind function
  • Using loading image inline in HTML with jQuery load function

jQuery Full Page Loading Animation

jQuery Full Page Loading Animation

The developer shows a simple and easy-to-reproduce solution for creating a full page loading animation. You can modify it according to your wishes without hustle and bustle thanks to a really clean code and intuitive technique.

CSS Load

CSS Load

This is a small yet really useful online generator that will assist you with creating visually-appealing preloaders based on new CSS3 features. Thanks to several basic customization options you will be able to:

  • Choose an animation template
  • Set colors
  • Set size
  • Specify animation speed
  • Turn on reverse animation

Page Loading Effects

Page Loading Effects

Rik Roots gives you an opportunity to not only contemplate some interesting and original loading effects but also lets you use this piece of code. Here you will find enticing animations that include:

  • Fog
  • Rolling rectangle
  • Spinning star
  • “Chop from top” technique
  • “Clear with circles” approach

Preloaders

Preloaders

This is another helpful and feature-rich online generator that allows building your own preloading effect. The customization choices will surprise even a sophisticated user; the service offers plenty of categories, where you can find pre-made elements starting from standard loading bars and ending up with zodiac signs. Each category includes its own range of options, opening to you almost endless possibilities.

Display Loading Animation While an External Page is Loading in a RadPane

Display a loading animation while an external page is loading in a RadPane

Those who adore ASP.Net Ajax will definitely recognize the real worth of this short yet useful tutorial that features a basic technique of creating and displaying a loading animation. It is based on several steps that involve working with RadSplitter control, global variables and JavaScript functions.

The script is connected to RadPane that is used for loading external pages, so take it into account.

Loading Overlay

Loading Overlay

This is a tiny, lightweight and pretty helpful jQuery plugin that lets you both add and remove a loading overlay to a selected element. You can use it with any component you like. Available options allow:

  • Adding icons
  • Specifying text
  • Altering appearance through CSS styling

jQuery Loading Animation

jQuery Loading Animation

The author explains how to properly use jQuery in order to create a loading animation with your message. The technique is simple, the code is clean and styling is straight-forward, so you can easily adapt this code snippet to your needs as well as modify it. The solution looks good whether the user has disabled JavaScript or not.

Page Loading

Page Loading

Want to load your homepage gradually line by line or simply make the presentation of your images interesting? Then leverage this effect.

The animation was created by Pedro Ivo Hudson, who has implemented a CSS transitional changing effect based on Bezier Curve that allows controlling the timing function in order to set the required speed.

YouTube Page Load Effect

YouTube Page Load Effect

The developer has quite successfully imitated an elegant page load effect seen on YouTube. Though the solution is based on a quite complex linear interpolation function, yet it works like a Swiss watch: i.e., reliably and accurately. The code snippet is really clean and apprehensible, so even if you are only a newbie you will be able to put it to work.

Animation on “load”

Animation on "load"

The aim of this small project is demonstrate how to correctly initiate an animation when a page loads. Of course, you can add text, set a background color and change timing and duration.

CSS3 Spin Loader

CSS3 Spin Loader

Ricardo Zanutta created a subtle vibrant flat style CSS3 spin loader that will look wonderful on any web page whether it has dark or light coloring. The snippet includes a function for displaying a preload page as well.

Here, almost everything is done with a help of CSS, so you will be able to set your own parameters through the styles file.

PACE

PACE

Pace is a tiny, intelligent plugin that monitors various elements of your page including Ajax requests and event loop lag in order to decide the progress and switch on a nicely animated progress bar just in time.

It is easy to install with a help of Eager that sorts out all issues. As for modification, the development team has blessed you with dozens of neatly-crafted flat style themes.

Full CSS Ball Loader

Full CSS Ball Loader

This bouncing vibrant ball loader is well-suited for projects with an entertaining atmosphere. The effect is accomplished only with a help of CSS3, so it won’t work correctly on old browsers and on those that do not support new, advanced features.

Source: http://designmodo.com/free-page-loading-effects/