Automatic changing background color loop using CSS

By // No comments:

Automatic changing background color using Pure CSS3

We've seen this feature in a couple of Wordpress themes where the background of for example the footer slowly changes its color, and maybe you have always wondered if there is a simple trick to do this. (This is probably done with jquery? Or can it be done with pure css?)


Automatic changing background color loop using CSS


Basically, the background color gradually transitions from one color to another (for example red to blue, blue to pink, pink to blue) and stays in an infinite loop. It doesn't require any action such as hover or click, it just does its thing. simply using @keyframes Feature from CSS3. 

About @keyframes

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

and For best browser support, you should always define both the 0% and the 100% selectors.

For more Refrence Visit : https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

Now Back to our Main Topic and Actual Coding.

HTML CODE:

<body style="color:#E0F2F1;">
<div class="block">
<center><br/><br/><br/><br/><br/>
<h1>Hello my backgroud is changing in infinite loop </h1>
</center>
</div>
</body>

CSS CODE:

@keyframes color-animation {
   0% {
      background: #ad1457;
   }
   50% {
      background: #6a1b9a;
   }
   100% {
      background: #0288D1
   }
  }
.block {
  width: 100%;
  height: 100%;
  animation: color-animation 3s infinite linear alternate;
}

Share this !!
Need Help? Comment Down !

Add Custom Hosted Font To Your Website

By // No comments:

Add Custom Hosted Font To Your Website

Hi Coders, we will talk about a very basic yet not known by many designers and website developers out there, thing is how you can add custom hosted font to your website, that is not installed on your visitor Machine yet, they can see your custom font while loading up your website.

Add Custom Hosted Font To Your Website

So How the heck that can be done? We its easy first of you need to understand about hosting. If you do not know what is hosting then google it.

Add Custom Hosted Font To Your Website

Now to add Custom Hosted font to your website that show up to everyone on every device/machine, what you need to do is add Link of your hosted font file to header of html or in <head> Tag.

For Example,

i want to add one Font called “Oswald” so what i will do is i will upload font file to my hosting and then add link like given below to internal or external CSS.

Now what will done is, when ever user open/visit your site with this Custom Hosted font font will download automatically from link and then it will load up in user's browser easy right ! Lets see How.


There are Two Ways for, Add Custom Hosted Font To Your Website

1. Standard :
You Have to add this link of style sheet in your html file and you good to go.

<head>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<!-- other content for head -->
</head>


then you can use this Oswald font in your style normally.
Like:

p {
font-family: 'Oswald';
}


or like <p style="
font-family: 'Oswald';">Some Text</p>


2. @import css/font files

you can add this in your html file as internal CSS or you can use direct @import without <style> and </style> in your External CSS.

<style>
@import url('https://fonts.googleapis.com/css?family=Oswald');
</style>

and then you can use it Normally like:

p {
font-family: 'Oswald';
}

or like <p style="font-family: 'Oswald';">Some Text</p>


Well now. You do not want to do complex things and don't have hosting space to host fonts ? Don't worry you can use Google Fonts from here : https://fonts.google.com/?selection.family=Oswald

On Google Font, you will find tons of cool fonts that you can use for your website just simple pick one and add it using two methods we discussed above.


Well That's it. Hope you liked it? If you do then please share with your designer and developer friends and don't forget to comment what's your fav. Fonts are?

How to Enable gzip compression

By // No comments:

How to Enable gzip compression

Enable gzip compression

What is Gzip compression?


  • Gzip is a method of compressing files (making them smaller) for faster network transfers.
  • It is also a file format.

Compression allows your web server to provide smaller file sizes which load faster for your website users.

Enabling gzip compression is a standard practice. If you are not using it for some reason, your webpages are likely slower than your competitors.

How to enable Gzip compression


  1. Compression is enabled via webserver configuration
  2. Different web servers have different instructions (explained below)

Here are the most common ways to enable compression including .htaccess, Apache, Nginx, and Litespeed webservers.

Enable compression via .htaccess

For most people reading this, compression is enabled by adding some code to a file called .htaccess on their web host/server. This means going to the file manager (or wherever you go to add or upload files) on your webhost.

The .htaccess file controls many important things for your site. If you are not familiar with the .htaccess file, please read my working with .htaccess article to get some know how before changing it.

The code below should be added to your .htaccess file...
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
Save the .htaccess file and then refresh your webpage.

Check to see if your compression is working using the Gzip compression tool.

Enable compression on Apache webservers

The instructions and code above will work on Apache. If they are not working there is another way that may work for you. If the above code did not seem to work, remove it from your .htaccess file and try this one instead...

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Enable compression on NGINX webservers

To enable compression in NGINX you will need to add the following code to your config file
gzip on;gzip_comp_level 2;gzip_http_version 1.0;gzip_proxied any;gzip_min_length 1100;gzip_buffers 16 8k;gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;# Disable for IE < 6 because there are some known problemsgzip_disable "MSIE [1-6].(?!.*SV1)";# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6gzip_vary on;

Enable compression on Litespeed webservers

The ideal way to enable compression in Litespeed is to do it through the configuration under "tuning". Just go down to "enable compression" and check to see if it is on, if not click "edit" then choose to turn it on. While you are there, look over the several Gzip options that are nearby.

How effective is gzip compression?

Compression of your HTML and CSS files with gzip typically saves around fifty to seventy percent of the file size. This means that it takes less time to load your pages, and less bandwidth is used over all.

How compressed files work on the web

browser and server compression communication
When a request is made by a browser for a page from your site your webserver returns the smaller compressed file if the browser indicates that it understands the compression. All modern browsers understand and accept compressed files.

Testing compression

To see if gzip compression is working use our gzip compression tool.


Full Credit Goes to: varvy.com

Thank You ! Share !

Fibonacci Series in Java without using recursion

By // No comments:

Fibonacci Series in Java without using recursion

Fibonacci Series in Java without using recursion.

Fibonacci Series in Java without using recursion is very simple only logic behind it is:
  • The next number is found by adding up the two numbers before it.
  • The 2 is found by adding the two numbers before it (1+1)
  • The 3 is found by adding the two numbers before it (1+2),
  • And the 5 is (2+3),
  • and so on!

Java Code for Fibonacci Series in without using recursion:

class FibonacciExample1{
public static void main(String args[])
{  
int n1=0,n2=1,n3,i,count=10;  
System.out.print(n1+" "+n2); //printing 0 and 1  
 
for(i=2;i<count;++i) //loop starts from 2 because 0 and 1 are already printed  
{  
 n3=n1+n2;  
 System.out.print(" "+n3);  
 n1=n2;  
 n2=n3;  
}  

}
}

Flow Chart with explanation:

Fibonacci Series without using recursion Flow chart
Flow chart start with initial values of x is zero,y is one and is zero, after that we used while loop for how many step of Fibonacci series we want in this case we taken 11 (zero to eleven total ten) then we printed X which is zero now in next step we assigned Y value to X and Added Y to X and assigned it to Y and incremented Our I counter this will give us total 11 steps of Fibonacci Series.

Thanks ! Liked it ? Please Share with your Friends !

Protect Your Eyes From Strain With Redshift in Linux

By // No comments:

Protect Your Eyes From Strain With Redshift in Linux


Protect Your Eyes From Strain With Redshift in Linuxs
Did you ever have problems falling asleep after staying up late with a computer or smartphone? Most computer screens emit a blueish light by default to imitate daylight so that they appear more natural to look at. While it probably has an aesthetic advantage, it also has an unwanted side-effect.

Your sleep cycles are regulated by a hormone called melatonin which is secreted into your system in the absence of daylight. As soon as you see the sun (or rather the blue sky) in the morning, the production of the hormone stops until it gets dark again. Think about it like nature’s own sleeping draught built right into your system. Unfortunately the blue light of the screen blocks melatonin production, keeping you awake long after you have turned your screen off.

The solution would be to have the screen’s colours adjusted so there is less blue in it. Redshift is a simple tool that is capable of just that: It automatically adjusts the screen’s colour temperature according to your location and the time of day. It works much like f.lux on Windows or Mac. Redshift was in fact inspired by f.lux and is available free of charge for anyone wishing to use it.

Installing redshift on your system


Most major Linux distributions have packages built for easy installation. You would usually have two packages, “redshift” and “redshift-gtk.” The former is the basic package while the latter includes a system-tray indicator icon. To install both on a Debian-based system is as simple as  looking it up in the built-in software centre of your OS or typing
sudo apt-get install redshift redshift-gtk
into a terminal.

Finding the right colour temperature


Before configuring redshift you should play around with the colour temperature settings until you find the one most suitable, unless you want to end up with a screen looking like you have a video cable problem. To achieve this, you can use the “one shot” option, with the -O switch.

For example, typing
redshift -O 3500
will set the screen colour temperature to 3500K (that is °Kelvin). (The neutral screen colour is 6500K; anything lower than that will turn your screen towards a more reddish hue.)

Redshift addjusted colour.

To reset to neutral, you can use the -x switch:
redshift -x
Of course 3500K is quite extreme. Play around with colour temperatures until you find a setting that still feels natural. It helps to have a few applications open, preferably those that have a light background, as these will show the greatest difference.

You would need to find the right settings for both daytime and night-time hours. The default values for redshift are 5500K/3500K respectively. Chances are that you will find the default daytime colour still “too red” as it is 1000K below “neutral.” If you do not want to change your usual display setting for the daytime, you can stick with 6500K and just find the ideal “redness” for the night.

You can find more options like screen brightness or geolocation etc. using command:
redshift -h

Conclusion


Redshift is a great tool to prevent eye strain and insomnia. Of course, first you will need to get used to the slightly reddish hue of your screen at night, but that would come naturally after a few days of active use.

Have a Good night oh, i mean Have Good Day ! ;)

Creating a link without an underline in HTML

By // No comments:

Creating a link without an underline in HTML

All browsers that support style's that allow all underlines to be removed from a web page. Below are different examples of how you can remove the underline links on your site.

a tag link with no underline

Steps and information about how to create links in HTML or on a web page without underlines.

Steps and information about how to create links in HTML or on a web page without underlines.


First, if you want all of your links to have no underlines add the below CSS code within the <head></head> tags of your pages HTML code.
<style type="text/css">a {text-decoration: none}</style>
If you just want one link not underlined on your page creating a link similar to the below code anywhere within the <body></body> tags make the link not have an underline.
<p><a href="http://www.coding101.in" style="text-decoration: none">Coding101</a></p>

Example

Tip:  Although this is possible, we advice all users to not create links with no underlines. Every user browsing the Internet understands the concept of links being underlined and will assume any text not underlined is just text and not a link. Also, doing this to trick search engines into following links but not users is deceptive and could result in your site being delisted.

CSS3 Flip Animation

By // No comments:

CSS3 Flip Animation

CSS Animations have a lot of fun.I had also used it in my WordPress template.You can see the demo on Home Page.In this tutorial i will tell you how you can add the flip effect in your Website.

CSS3 Flip Animation

CSS3 Flip Animation

Let’s Go.

Step 1: Place the CSS code in your CSS File.
.flip-container {
    perspective: 1000px;
    padding: 0;
    overflow: hidden !important;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
    width: 300px;
    height: 300px;
    overflow-y: auto;
}

/* flip speed goes here */
.flip-container .flipper {
    transition: .6s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.flip-container .front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.flip-container .front {
    z-index: 2;
    width: 100%;
/* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.flip-container .back {
    transform: rotateY(180deg);
    background: white;
    width: 100%;
}

.flip-container .flip_back_title {
    color: #fff;
    font-family: Bree serif;
    font-size: 33px;
    padding: 10px;
}

.flip-container .flip_front_title {
    color: #fff;
    font-family: Bree serif;
    font-size: 82px;
    padding: 10px;
    margin: 30% auto;
    text-align: center;
}
Step 2: Here is the HTML Code
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <p class="flip_front_title">Wordpress</p>
        </div>
        <div class="back nicescroll">
            <!-- back content -->
            <p class="flip_back_title">Wordpress Tutorials</p>
        </div>
    </div>
</div>

That's it
Thanks ! And Share this if you find it useful !