Sunday, September 27FreeJQuery

Tag: CSS

How to Print background image or color in PHP or HTML
CSS, HTML5, PHP, WordPress

How to Print background image or color in PHP or HTML

Print background image or color in PHP or HTML In this article, we discuss about Print background image or color in PHP or HTML. It’s very helpful for developers in web development. Everyone familiar with print() in PHP and HTML. But nobody tries to print background images or colors on the HTML page. Print particular div in print screen is very easy. But nobody knows how to implement background image in print screen using HTML or PHP. All are familiar @media print in CSS. The @media print in CSS helps to specify the style in print screen. Print Example :1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47<!doctype html> <html> ...
How To Change or Restore Your CSS Using jQuery
2019, jQuery, TUTORIALS

How To Change or Restore Your CSS Using jQuery

Change or Restore Your CSS Using jQuery This Article Is About Change or Restore Your CSS Using jQuery The jQuery .css() method is an easy way to change the CSS of any HTML element, class, or ID without actually having to edit any of your stylesheets. The syntax for the .css() method is actually quite simple and somewhat similar to how your styles would appear in your stylesheets.If you’re using the .css() method to only add one new style rule to your HTML, the syntax should be like this:$("element").css("property name", "property value");If you’re trying to change the styling of more to one element, the syntax will differ slightly:$("element").css({"property name":"property value", "property name":"property value", "property name":"property value"});In the example belo...
How To Convert Image to Black and White
2019, jQuery

How To Convert Image to Black and White

Convert Images to Black and White using jQuery Convert Images to Black and White using jQuery is no longer a manual event. As client side technologies becoming more powerful, conversion processes can be automated and be done in real-time. Read on to learn different ways of converting images to black and white using CSS3, HTML5 with jQuery and various other jQuery plugins. There are jQuery plugins available which can do this job, but first we look at how to do it with simple CSS. Then we will move on to using jQuery code, and finally jQuery plugins. It is best to avoid jQuery plugins until they are absolutely necessary.CSS CSS3 supports various filters and filter properties providing graphical effects like blurring, sharpening, or color shifting an element. Filters are commonly used ...
How To Change images in a loop on hover using jQuery
2019, jQuery, RESOURCES, TUTORIALS

How To Change images in a loop on hover using jQuery

Change images in a loop on hover In This Article You find How To Change images in a loop on hover is a very common functionality that you’ll often find on e-commerce websites or portfolio websites. As an example, on the product list page, when you mouse over any product thumbnail, all the other images associated with that product start showing on top of the thumbnail after a specific interval. Many websites only have 2 images looping, which can be easily achieved via CSS only. But when there are more than 2 images to loop, you’ll need the help of a client side library. In this post, we’ll learn how to start the image loop on mouse over and then stop and reset the first image again on mouse out. HTML Markup  To get started, create a couple of div elements which contain the images. Each d...
Diagonal Slideshow with JavaScript & CSS
Animation, Core Java Script, CSS2 / CSS3.0, Slider

Diagonal Slideshow with JavaScript & CSS

Diagonal Slideshow with JavaScript & CSSA Diagonal Slideshow look and three visible slides. A decorative background element expands to fullscreen when opening the content preview. A slideshow with a "diagonal" look and three visible slides. A decorative background element expands to fullscreen when opening the content preview. There's another slideshow which will surely impress you,  This time we have a diagonal type of look where the current slide is in the center of the page and the previous and next images can be seen laterally, one in the top left corner and one in the bottom right corner of the page.Also Check: Design & AnimationsAfter open, the content preview looks like this.Here you can enjoy this flashing series of diagnonal slideshow,...
CSS Glitch Effect jQuery
CSS, jQuery Effects, jQuery Plugins

CSS Glitch Effect jQuery

  CSS Glitch Effect CSS Glitch Effect Today we’d like to highlight you how to create a little experimental glitch-like effect on an image. The effect will be powered by CSS animations and the clip-path property. The technique involves using several layers of images where each one will has a clip-path, a blend mode and a translation applied to it.Lucas Bebber's Glitch is a super cool effect. It's like you're looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space.It's bonafide CSS trick if there ever was one! It took me a bit to figure out how it was working, so I thought I'd explain. Then I ended up making it work for other kinds...
5+ Responsive Calculators For the Basic Financial Websites
Application, Bootstrap, Browser, CSS2 / CSS3.0, CSS2 / CSS3.0, Responsive

5+ Responsive Calculators For the Basic Financial Websites

Calculators For the Basic Financial Websites:There are thousand of online calculators to calculate million of sums easily, but teh thing which is usually notable is teh Interface & look of a Calculator. Everyone is seeking an calculator wif best interface to use and calculate easily. If You're running a financial site which is related wif bonds, Pricing, charts, & sums so you must try these calculators for you're website.Things You May Know:Teh original compact calculator was teh abacus, developed in China in teh ninth century. Teh young French mathematician Blaise Pascal (1623-1662) invented teh first adding machine in 1642, a clever device driven by gears and capable of performing mechanical addition and subtraction.  Visual Type Scale Calculat...
Mobile Menu Hamburger with jQuery & CSS
CSS2 / CSS3.0, Menus

Mobile Menu Hamburger with jQuery & CSS

A hamburger menu for mobile websites. A demo how to create an up-to-date menu for a mobile website in a typical hamburger style.This Template is using only CSS and javascript (jQuery), Very Smart & Sharp.      Read More | Demo | Download -----------------------
Lengthy : MicroLibrary for SVG Shape Length in a CSS Var
Animation, Core Java Script, SVG Tutorial

Lengthy : MicroLibrary for SVG Shape Length in a CSS Var

Lengthy is a JavaScript microlibrary (1.2kb min, 0.7kb gzipped) to get teh length of SVG shapes. Teh length will automatically be added to teh element as a CSS Var to make it easy to do CSS animations of SVG stroke-dashoffset for teh wonderful line drawing SVG technique and other interesting animations. Usage: Simply call Lengthy on a specific element, list of elements or a selector. Teh affected elements will receive a CSS var in their style and teh lengthy class added. Read More | Demo | Download -----------------------
Awesome Shop : Premium WordPress Catalog Grid
Animation, CSS2 / CSS3.0, Plugins, premium, Responsive, WordPress

Awesome Shop : Premium WordPress Catalog Grid

Awesome Shop is a premium multi-purpose slider for creating content sliders with must-see effects. It has a beautiful and easy-to-use admin interface with supporting modern features like drag n’drop WYSIWYG slider builder, real-time previews and Google Fonts. It’s device friendly by supporting responsive mode, multiple layouts.Features:Responsive Layout Parallax Effect Animated Layers Google Fonts – over +600 fonts Easy setup – Drag&Drop No extra coding Best for eCommerceRead More | Demo | Download  
Circular Navigation Menu Adding Java Script & CSS
Core Java Script

Circular Navigation Menu Adding Java Script & CSS

Circular Navigation Menu This tutorial helps you to show how you can create a circular navigation menu adding CSS transforms. It's all about some mathematical tricks, tips, and techniques which are not difficult but you need to focus on a good result. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique.Read More | Demo | Download-----------------------