How Do We Make Striped Background Designs with CSS?

Today, CSS is one of the easiest and most powerful techniques in website development to speeding up a website with attractive and trendy background designs.

Today we are going to see about “How Do We Make Striped Backgrounds with CSS?

/* Normal Colored Diagonal Stripes */


#stripstyle {background: repeating-linear-gradient(45deg, #29d929, #29d929 10px, #2fc91a 10px, #2fc91a 15px);

width:1000px; height:100px; color:white;}


<div id=“stripstyle”><center><b><br><br>Normal Colored Diagonal Stripes</b></center></div>


Normal Colored Diagonal Stripes

/* Gradient Diagonal Stripes */


#stripstyle {background:

/* On “top” */

repeating-linear-gradient(45deg, transparent, transparent 10px, #f53beb 10px, #f53beb 20px),

/* on “bottom” */

linear-gradient(to bottom, #c4bbc4, #ffffff);

width:1000px; height:100px; color:white;}


<div id=“stripstyle”><center><b><br><br>Gradient Diagonal Stripes</b></center></div>


Gradient Diagonal Stripes

/* Stripes Over Image */


#stripstyle {background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 10px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.3) 20px),

url(Image URL);

width:1000px; height:100px; color:white;}


<div id=”stripstyle”><center><b><br><br>Stripes Over Image</b></center></div>


Stripes Over Image

/* Any Direction, Any Angle */


#stripstyle {background: repeating-linear-gradient(130deg, #222, #222 10px, #e87979 10px, #e87979 20px);

width:1000px; height:100px; color:white;}


<div id=“stripstyle”><center><b><br><br>Any Direction, Any Angle</b></center></div>


Any Direction, Any Angle

/* Straight Stripes */


#stripstyle {background: linear-gradient(to bottom, #dc73ff, #dc73ff 50%, #a536c9 50%, #a536c9);

/* The rectangle in which to repeat.

It can be fully wide in this case */

background-size: 100% 20px;

width:1000px; height:100px; color:white;}


<div id=“stripstyle”><center><b><br><br>Straight Stripes</b></center></div>


Straight Stripes

/* Vertical Stripes */


#stripstyle {background: repeating-linear-gradient(to right, #f6ba52, #f6ba52 10px, #ffd180 10px, #ffd180 20px);

width:1000px; height:100px; color:white;}


<div id=“stripstyle”><center><b><br><br>Vertical Stripes</b></center></div>


Vertical Stripes

/* Radial Stripes */


#stripstyle {background: repeating-radial-gradient(circle, Green, Green 5px, #ffec19 5px, #ffec19 10px);

width:1000px; height:100px; color:Black;}


<div id=“stripstyle”><center><b><br><br>Radial Stripes</b></center></div>


Radial Stripes


How to Create Transform Effect on Social Icons for Your Website?

Adding something creative to your website is always engage visitors to stay in your website and let them enjoy with your content and graphics.

How to Create Spinning Social Icons?


It is very simple to achieve. Just place the following code wherever you want in the websites.

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id=”social”> <!–Start Facebook Icon–> <a rel=”nofollow” title=”Like Our Facebook Page” href=”Your-Facebook-Page-URL” target=”_blank”><img border=”0″ src=”Your-Facebook-Icon-Image-Location” style=”margin-right:1px;” alt=”Icon”/></a> <!–End Facebook Icon–> <!–Start Twitter Icon–> <a rel=”nofollow” title=”Follow Our Updates On Twitter” href=”Your-Twitter-Page-URL” target=”_blank”><img border=”0″ src=”Your-Twitter-Icon-Image-Location” style=”margin-right:1px;” alt=”Icon”/></a> <!–End Twitter Icon–> <!–Start Linkedin Icon–> <a title=”Follow Us On Linkedin” rel=”nofollow” href=”Your-LinkedIn-Page-URL” target=”_blank”><img style=”margin-right:1px;” src=”Your-LinkedIn-Icon-Image-Location” alt=”Follow Us On Linkedin”/></a> <!–End Linkedin Icon–>

In the same way you can apply the following 2d transform methods,

  • translate()

translate(x,y) – Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n) – Defines a 2D translation, moving the element along the X-axis
translateY(n) – Defines a 2D translation, moving the element along the Y-axis

  • rotate()

rotate(angle) – Defines a 2D rotation, the angle is specified in the parameter

  • scale()

scale(x,y) – Defines a 2D scale transformation, changing the elements width and height
scaleX(n) – Defines a 2D scale transformation, changing the element’s width
scaleY(n) – Defines a 2D scale transformation, changing the element’s height

  • skew()

skew(x-angle,y-angle) – Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle) – Defines a 2D skew transformation along the X-axis
skewY(angle) – Defines a 2D skew transformation along the Y-axis

  • matrix()

matrix(n,n,n,n,n,n) – Defines a 2D transformation, using a matrix of six values

Ref: Htmltutsplus, w3schools

Top 10 Tools for Creating Infographics

Here are the amazing tools for creating infographics

1. Vizualize – The start of how ‪resumes will be portrayed in the future
2. Google Developers – Display real live data with Google Developers
3. – Offers a dozen free templates to start you off
4. Piktochart – The Piktochart’s customizable editor lets you modify colour schemes and fonts
5. – Customising the data that makes up the infographic takes place in an Excel style spreadsheet
6. – is both a tool and a community for infographics creators
7. InFoto Free – Build infographics based on your photo taking habits
8. Venngage – Looking for an easy-to-use tool? Venngage is your best bet!
9. Dipity – Upgrade to the Premium plan for custom branding
10. Get About – Monitor your social media activity and generate infographics

How Can You Know If Your Site Is Affected By A Particular Algorithm?

Today many of us having and searching answer for “How can I know that my site is affected by a particular algorithm?”

Google Analytics is the best way to find whether your site is affected by a particular algorithm such as Panda or Penguin. If suppose your site is affected by Panda or Penguin update, check with Google Analytics to see if you had sudden drop in traffic on a specific day.

Matt describes in his video three reasons why a ranking drop might occur:

1. Manual Actions: Manual actions show a notification in Google Webmaster Tools, so it is clear cut, Matt said.

2. Crawling Errors or Issues: Crawl errors also are likely to show in Google Webmaster Tools, often clear cut also.

3. Algorithmic Penalty: Algorithmic penalties are not thought of as a penalty, they are algorithms for ranking. General quality and algorithms will determine rankings. So it is hard to tell if an algorithm is hurting you. But Google will communicate large scale algorithm changes, such as Panda or Penguin. They will tell you on what date they run, this way you can check the date and see if that algorithm had an impact on your site.