Category Archives: Free Scripts Ready Code

Various scripts and css effects that you can apply on your site

Preloader ready code without jQuery

Oh yay! You visited Old Pepper’s Blog Good day to all. The task is how to keep the visitor until the page is completely rendered. [blok] The visitor can be impatient and easily leave if the page loads for a … Continue reading

Posted in Free Scripts Ready Code | Leave a comment

CSS 3d Transform Rotating Cube

Do you want such a cube on your site? Take the.     [blok] Code: <!DOCTYPE html> <html lang=”ru”> <head> <meta charset=”utf-8″ /> <title>Rotating Cube</title> <style> .wrap { -webkit-perspective: 500px; -ms-perspective: 500px; perspective: 500px; -webkit-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; … Continue reading

Posted in Free Scripts Ready Code | Leave a comment

CSS Transition Turning Images

Try it, hover over my photo.

Posted in Free Scripts Ready Code | Leave a comment

Living Heart | Animate CSS

Here I will show a working heart. It consists of two blocks, and a triangle.       Код: [rec-blok] <!DOCTYPE html> <html lang=”ru”> <head> <meta charset=”utf-8″ /> <title>Living Heart</title> <style> @keyframes bounce { from, to { -webkit-transform: translateY(10vh) scaleY(.98); … Continue reading

Posted in Free Scripts Ready Code | Leave a comment

Text on Pictures | Hover

Five examples of the appearance of text in images. Ready code. Example 1 Text appears from the depth of the image. [blok] Code Example 2 Text appears from the depth of the image, rotating. Code Example 3 Text extends from … Continue reading

Posted in Free Scripts Ready Code | Leave a comment

How to Customize Button Styles With CSS Examples

This is not about design. Here is a ready-made code of various effects with detailed comments. In the future, these effects can be applied to any design idea and create an original button that no one else has on the … Continue reading

Posted in Free Scripts Ready Code | Leave a comment

CSS slider

Here is the simplest CSS slider in the world. Advantage – ease and safety. Disadvantage – it is difficult to repeat the cycle without rebooting. But it’s possible using the animation timing method. Code: <!DOCTYPE html> <html lang=”ru”> <head> <meta … Continue reading

Posted in Free Scripts Ready Code | Leave a comment

Animate CSS | Animation for the Site Header

Here are some ideas that you can use when creating a site header. You can use them completely, or take some parts and create your own header or banner design. [blok] Pop-up header and description of the site. Name of … Continue reading

Posted in Free Scripts Ready Code | Leave a comment

Menu Marker | Drawing CSS

How to make menu icons not pictures, but write in html + css. Very small picture, uploads 200 ms. code with html is loaded one order faste. [blok] @ mail Code   ✎ Write Code   ≡ Menu Code   … Continue reading

Posted in Free Scripts Ready Code | Leave a comment

List Marker we draw in CSS

The picture for the list marker is an inadmissible luxury, since it takes a very long time to load. So I’ll show you some examples of how to create a marker using html and css. [blok] Square Code List List … Continue reading

Posted in Free Scripts Ready Code | Leave a comment

Javascript Slider Carousel

The simplest javascript slider You can add as many pictures as you like. All of them will appear at a given interval. HTML <div id=”carousels”> <div class=”carousel demonstration”><img src=”images/1.jpg”></div> <div class=”carousel”><img src=”images/2.jpg”></div> <div class=”carousel”><img src=”images/3.jpg”></div> </div> [blok] Javascript <script> var … Continue reading

Posted in Free Scripts Ready Code | Leave a comment

Additional page without reloading

You have a page with your products. The visitor liked the product and wants to know where it can be obtained. If you place a map on the page with the indication of retail outlets, it will take up a … Continue reading

Posted in Free Scripts Ready Code | Leave a comment

Flame in title

Another decoration for the site Flaming Headline The idea from htmlweb.ru HTML <div class=”flame” id=”fire”>Flaming Headline</div> CSS .flame { font-size: 30px; padding: 20px 0 10px 20px; width: 350px; font-weight: bold; background: scroll 0% 0% rgb(0, 0, 0); color: rgb(50, 50, … Continue reading

Posted in Free Scripts Ready Code | Leave a comment

Cursor with effects Javascript

Code: HTML <div style=”z-index:1″> <!–z-index задаётся всему коду–> <div id=”adot0″ style=”position: absolute; visibility: hidden; left: 0px; top: 0px;”><hr style=”width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);”></div> <div id=”adot1″ style=”position: absolute; left: 892px; top: 340.011px;”><hr style=”width: 8px; height: … Continue reading

Posted in Free Scripts Ready Code | Leave a comment

HTML Hidden Help

Hidden help is opened by mouse click. To do this, you can make a button or select a word in the text 1. Selected text. Yada, Yada, Yada, Yada, Yada, Yada. Help Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, … Continue reading

Posted in Free Scripts Ready Code | Leave a comment