Showing posts with label Firefox. Show all posts
Showing posts with label Firefox. Show all posts

16 October, 2010

Exploring Firefox Cache: A Bunch Of Really Cool Tips

firefox cacheThe browser cache temporarily stores images, scripts, and other parts of websites while you are browsing. This is normally a good thing because this enhances performance and load time.
The browser cache usually works behind the scene: you are unlikely to notice it even exists unless you feel like digging deeper.
But do you know that you can actually have quite a bit of fun viewing your browser cache? Do you know why and how you can clean it? Today’s tutorial is just about that: what you can do with your Firefox cache.

Viewing Your Firefox Cache

The cache statistics and directory location can be viewed in about:cache. Then:
  • about:cache?device=memory – Lists memory cache entries.
  • about:cache?device=disk – Lists disk cache entries.
It is really not easy to make sense of that interface but luckily we have an addon to make it easier.
CacheView is a GUI Front-end of “about:cache”. It allows searching and sorting memory and disk cache files. CacheView gives you a preview pane for any images, and makes it really easy to save MP3s and flash files from the sites you’ve visited.
After you have it installed, just go to Tools ->CacheView (or just use the shortcut Ctrl+Shift+C) and you will be presented with a nice table containing your cache files and a preview pane.
The table is sortable by column (key, size, MIME Type, storing device, Last Fetched date) and what’s more it has a search function which adds a lot of sense to your cache database:
firefox cache
You can also right-click on an entry and delete it. It won’t delete things if the page is still opened in one of your tabs.
firefox cache viewer
CacheSearch is another useful cache addon for FireFox which can search through the full-text of cache records:
firefox cache viewer

Clearing The Firefox Cache

There are a few reasons why you may want to clear the Firefox cache, including privacy concerns and technical problems. I usually do it when I have any issues with a website: problems on sign-up, incorrect interface loading, etc.

Clearing the Cache Manually

Official Guide:

  • Navigate: Tools -> Options -> Advanced panel -> Network tab
  • In the Offline Storage section, click Clear Now.
firefox cache viewer

FireFox Addons:

If you find yourself clearing the cache too often, you can find this little addon helpful. It adds a button to your browser toolbar – with it you can clear the cache with one click of a mouse.
firefox cache folder
Note: After installation, you will need to manually install the button to where you want it to be. For that, right-click on the sidebar and select “Customize“.
Here’s an alternative addon that can be used for that: Cache Status which will both monitor your cache statistics for both memory and disk devices and allow to clear it any time:
firefox cache folder

Clear The Cache Automatically:

  • Navigate: Tools -> Options -> Privacy panel
  • In the drop-down select “Use custom settings for history. “
  • Select the check box for Clear history when Firefox closes and in the Settings next to this check box select Cache:
FireFox cache
Courtesy: Make Use
Author: Ann Smarty

15 March, 2010

Difference Between Browsers - Just Humour

media httploldwellcom jobhs.jpg.scaled500 The Difference Between 
Firefox, Opera, Explorer & Safari
collegehumor.0bb19bc9ce8e7f6bf8715d01a13779f4 The Difference 
Between Firefox, Opera, Explorer & Safari
collegehumor.7dea5f12f61024453fe144d6e08fed68 The Difference 
Between Firefox, Opera, Explorer & Safari
collegehumor.d71ed23111a74a549c5d513c3f96234b The Difference 
Between Firefox, Opera, Explorer & Safari
via loldwell.com

17 February, 2010

Why Web Developers Should Switch to Google Chrome

Check out Chrome 4's great new features for developers, such as cross-platform support, awesome web inspector integration, and handy new extensions. It's becoming more and more difficult to deny Chrome the title as the new browser for web developers. If it's not quite there yet, it will be soon!

Howdy y'all. Brian Egan, web cowboy, here. I'm a designer & front end developer working for the University of Nevada, Las Vegas Libraries, where I get to build websites that house fascinating photographs of Mining Boomtowns, Howard Hughes, and more upcoming goodies! You can find me on Twitter or check out more of my work and writing at brianegan.com.

Introduction

With quick load times, a snappy JavaScript engine, solid WebKit foundation, and big-name backing, Google Chrome has been gaining a respectable market share, even surpassing Safari to become the 3rd most popular browser in December. For developers, however, Firefox has been the sweetheart of many due to its ability to run on any operating system and because of its rich offering of web development add-ons, such as Firebug and the Web Developer Toolbar. But it’s important to test JavaScript in all browsers, and having a robust set of tools in each (including Internet Explorer), is precisely what developers need to make the most of their code.
Lucky for us, the Google folks have been working hard to make Chrome cross-platform, integrate WebKit’s fantastic Web Inspector, and add extensions, making Chrome 4 an amazingly useful tool for web development. In this tutorial, I’ll demonstrate some of the features that make Chrome 4 a great addition to the web developer utility belt.

Downloading Chrome 4

As of January 25, Chrome 4 has been officially released as stable for Windows. Mac and Linux users, however, we have to be a bit more brave in order to experience all that Chrome 4 has to offer. Mac users need to download the "dev" version, and Linux users the "beta" version, and it's highly worth it! Check out the following links to get a copy of Chrome for your operating system that supports everything we'll discuss in this article:

Web Inspector (aka Developer Tools)

A screenshot of the Profile Panel of the Chrome Developer Tools
Now let's get into the nitty gritty! In Firefox, Firebug is a godsend for developers, providing a debugging console, HTML & CSS manipulation, JavaScript profiling, and a whole lot of other goodness. The WebKit folks took notice and over the last couple of years have been perfecting a set of tools called the Web Inspector, which offers a similar set of features to Firebug. Within Chrome 4, the Web Inspector is labeled “Developer Tools.”

Accessing the Web Inspector/Developer Tools

A demonstration of how to access the Developer Tools on Google 
Chrome for Mac
In addition to Chrome 4, the Web Inspector has been in action for a while from within previous versions of Chrome and Safari, although it’s a bit hidden. To access the Web Inspector in various browsers:

Safari 4

  • Select “Edit > Preferences” (Windows) or “Safari > Preferences” (Mac)
  • Select the “Advanced” tab
  • Check “Show Develop Menu in menu bar”
  • A new menu item, “Develop,” will appear
  • Select “Develop > Show Web Inspector”

Chrome 3 (Windows only)

  • Select the Wrench
  • Select Developer
  • Select JavaScript Console (the whole range of tools are hidden under this name)

Chrome 4

  • Windows / Linux: Select the Page Icon > Developer > Developer Tools
  • Mac: Select View > Developer > Developer Tools

JavaScript Console

A screenshot of the Console Panel within the Chrome Developer 
Tools
If you haven’t worked with the Firebug or Web Inspector console, then you’re missing out on a great way to help debug JavaScript. The JavaScript console serves several important functions, such as capturing errors and presenting them in a useful format, testing short bits of JavaScript, and as a convenient place to log useful information like variable values and execution times. Practically speaking, I use this tool regularly to evaluate the performance of my programs and to ensure that certain variables are being calculated correctly.

Elements Panel

A screenshot of the ELements Panel within the Chrome Developer 
Tools
In addition to the JavaScript console, it’s always nice to have a tool that allows you to quickly view the HTML and style information of particular elements on the page. The Web Inspector Elements panel gives a tree-structure view of the Document Object Model (DOM), allowing you to drill down into the document to select an item of interest. You can also access the information of a certain object by right clicking on an item within the browser and selecting “Inspect Element.”
Finally, I should note that the Elements panel allows for much more than simple inspection. You can modify and add styles, edit html, and in the latest versions, view event listeners attached to a selected DOM element. These features can all come in very handy when you’re dealing with little quirks that you can’t quite figure out.

Resources

A screenshot of the Resources Panel within the Chrome Developer 
Tools
The last feature I’d like to highlight within the Web Inspector/Developer Tools is the “Resources” tab. If you’ve worked with Firebug’s “Net” tab, then you’ll notice several similarities. Essentially, the Resources tab gives a breakdown of all the information that is exchanged between your browser and the server, from the images to the JavaScript to the document itself. It also shows a ton of handy information, such as:
  • A graph of the time it takes to download each component
  • A graph showing the size of the various components
  • A way to sort the requests by type, e.g. Documents, Stylesheets, Images, etc.
  • Image previews with dimensions, file size, and MIME type displayed below
  • Request and Response Headers
  • XML HTTP Request (XHR) information
An elegant tool that allows for easy inspection of page speed, the Resources tab can aid you in identifying and squashing performance bottlenecks. Give it a try and see where your page is too fat, then slim down your chunky images and code to provide a better experience for your users!

Further Reading

A complete overview of the Web Inspector/Developer Tools could easily be a tutorial on it’s own, but we have more ground to cover! I highly recommend checking out the following resources to learn more:

Extensions

Now, while I’ve always been blown away by the speed of Safari 4 and Chrome as compared to Firefox, they’ve both lacked a critical feature: add-ons. In Chrome 4, that all changes with the addition of “extensions.” You can add functionality to Chrome by downloading and installing extensions or by using the standard tools of the trade: HTML, CSS, and JavaScript, to write your own. Extensions can be downloaded from the Chrome Extensions Repository, and should be fairly simple to install. Already, a number of very compelling extensions have been created which aid web development, from quick validation to resolution testing. Let’s take a look at a few.
        

Speed Tracer

A screenshot of the Speed Tracer extension
A web developer can never really be obsessed enough with performance, and the more tools that identify sluggish performance the better. That’s just where Speed Tracer, a Chrome extension developed by Google, comes into play. Speed Tracer takes the “Resources” panel to the next level by providing a visualization of the time it takes to execute low-level tasks, such as rendering CSS or parsing HTML and JavaScript. I’d highly recommend taking a look at a video demonstration of Speed Tracer put together by the folks at Google to get a better idea of how it can help you improve the performance of your applications.

Pendule

A screenshot of the Pendule extension
Moving from Firefox to Chrome, one extension everyone is going to look for is a replacement of the fantastic Web Developer Toolbar. For those who don’t know, the Web Developer Toolbar deals with the tasks Firebug wasn’t meant to handle, such as quick validation of HTML and CSS, the ability to quickly disable JavaScript or images, and a tool for checking links. Those functions are all handled with style by Pendule, which offers much of the core functionality of the Web Developer Toolbar (not quite all), while offering a few goodies of it’s own, such as a color picker.

Resolution Test

A screenshot of the Resolution Test extension
Web Developers often need to ensure that their designs work at a variety of resolutions. Resolution Test allows developers to efficiently resize their browser window to a number of common resolutions for quick and easy testing. The latest version even allows you to open multiple windows at different resolutions with only a couple of clicks. Resolution Test is fantastic for making sure your target audience is seeing the page you want them to see.

Webpage ScreenShot

A screenshot of the Webpage ScreenShot extension
There are occasions when its necessary not only to grab a screenshot of the current visible portion of a website, but a screenshot of the whole page. For example, you may want to print a full page for peer critical review or to demonstrate in your portfolio. I formerly used a Desktop tool for this, but now Webpage ScreenShot does a nice job of capturing full-page screenshots in a few clicks.

Chrome Sniffer

A screenshot of the Chrome Sniffer extension
Do you ever stumble upon a fantastic page and wonder, “what are they using to build this?” I do, and often find myself digging through the source code trying to figure out who the man behind the curtain is. While it is a useful training exercise, and a necessary one if you really want to know what’s going on, Chrome Sniffer can usually give you a snapshot of which JavaScript and PHP frameworks are in use for a particular page. For example, navigate to NetTuts and Chrome Sniffer informs us that it’s run on Wordpress using Google Analytics and jQuery.

Conclusion

The future of web development continues to look brighter and brighter! While only a few years ago we had a limited set of tools for debugging JavaScript, tinkering with CSS, and viewing HTML, today we have a variety of powerful options. Now that Google Chrome has become cross platform, fully integrated the WebKit Web Inspector, and added extensions, it is a versatile tool for helping developers improve their own pages. I encourage all of you to download a copy for yourself and give it a shot to see if it can help you improve your pages, then come on back here and share your favorite plugins and tools with the rest of us!

Courtesy: Net Tuts+ 
Author: Brian Egan

31 January, 2010

Twitter Addons for Firefox Browser


Twitter is the most powerful microblogging service and so is Firefox among browser category. Without jumping to other sites, twitter extensions listed below allow you to post tweets, pictures, follow or unfollow friends, filter spam tweets, and much more.
Below is the list of 33 twitter addons for firefox browser that enhance twitter functionality for twitter addicts.
twitter-firefox

Photo Credit [katsurada]

List of Twitter Tools for Firefox Browser

1) Power Twitter 1.38It is a powerful firefox addon that allows you to share pictures on twitter via TwitPic. You can also view the original link behind the short URL, which makes you identify the content. If anybody shares only short link URL with you, then Power Twitter firefox plugin automatically translate the link into page titles. Also allow @mentions of friends on profile pages, link shrinking, facebook status updates and more.

2) YoonoIt is all-in-one firefox addon for Twitter, Facebook, LinkedIn, Friendfeed, MySpace, Flickr, AIM, MSN and GTalk that makes your online social life very simple. Yoono  plugin one installed can be accessed on the sidebar of your firefox browser window allowing you to get all your friend updates, update your status and share links, images and video across Facebook, MySpace, Twitter, and more. With its ‘Discovery’ widget, you can discover new websites, products, and videos and then share them with your friends online.

3) TwitrPix Express- Allows you to upload and share photo or images from any web site on Twitter without leaving the site you are on. All you have to do is just right-click on the image you want to share and select “Share using TwitrPix.” Enter your Twitter credentials and click Share. A link to the image and your tweet (status message) will be posted on Twitter. A “view image” button will appear if you want to see the photo you just tweeted. TwitrPix Express also provides you with an option to tag images.

4) TwitterBar- Allows you to post to Twitter from Firefox’s address bar. Just type your tweet in the address bar and click the TwitterBar icon to send it to Twitter. The URL of any webpage can be sent directly just by clicking the TwitterBar icon in the address bar. If you want to know how many characters are left for the tweet, the simply hover your mouse over the TwitterBar icon.

5) ShareaholicA favorite firefox plugin for social networking addicts. Shareaholic allows you to share links, e-mail, tweet, videos, blogs, and images with Facebook, Twitter, LinkedIn, Gmail, WordPress, and more.

6) Echofon- Powerful firefox addon that notifies you of your friend tweets on Twitter and allow you to view updates in a timeline and post your own tweets. Echofon allow you to access multiple Twitter accounts, get unread count in Firefox status bar, handles all the standard Twitter tasks such as direct messages and mentions, Syncs unread tweets with your iPhone and combine sequence tweets easily.

7) monkeyflyOnce you finished installing MonkeyFly, go to your Twitter page and click on the red plus sign next to “Home.” You’ll be able to add the following columns to your Twitter page: Mentions of @You, direct messages to you, your favorites, your tweets, your lists, and if you click on your “Saved Searches” you’ll be able to monitor the latest from Twitter. Apart from this you have following functionalities available which otherwise is not available with native twitter service.
  • Profile – By hovering the cursor over a twitter’s profile photo, you can view the latest tweets and profile information. 
  • Photo – Using your TwitPic account, you can easily tweet a photo to your followers. The photo will then be displayed as a shortened URL in your status field.
  • TinyText – Using MonkeyFly’s URL shortener, you will have more room (more than 140 character limit) to write tweet.
8) Search CloudletTag cloud allows you to find relevant content quickly by showing you all the keywords. The most important websites are shown with bigger font. Search Cloudlet inserts smart tag clouds into Twitter interface to help you search faster. Just click keywords on the cloud to narrow down your tweet search. Once you install Search Cloudlet, you can view tag clouds on your Twitter home-page, search page, profile page, favorites and even into public timeline. Context-sensitive clouds like Author Clouds, Recipient Clouds and Hashtag Clouds also gets added. The plugin also provide tag cloud for Google and Yahoo.

9) Friendbar – Displays stream of text and photo updates from Facebook and Twitter right on the firefox browser toolbar and allows you to post status updates and reply from the browser toolbar itself. Friendbar allows you to automatically create a tiny URL for current web page you are viewing, post updates, retweets, direct messages, and replies, right from the Friendbar toolbar. This firefox extension also provides number of options for facebook too.

10) Twitter GlossaryWhile tweeting, most of the times we use some common words (slang). With Twitter Glossary you can define those words and terms that you regularly use in tweets. Once you add such words to your personal glossary, your twitter followers will be able to view the definition of those words as floating ‘tooltip’ text over the word when you use it in a tweet. So, newer ‘followers’ will not have hard time to understand everything in every tweet.

11) Twitter SearchThis twitter search plugin gives you quick access to the real-time Twitter search.

12) TwitGleeSearch Twitter and Google together. Get Real Time Twitter as well as General Google results in a single webpage.

13) TwitzerAllows you to post tweets of more than the 140 character on Twitter. The short or tiny URLs can be expanded to actual links so that you are sure you are clicking on safe links. It also help you in identifying the content of the webpage.

14) TwitJobSearchIf you want to search jobs TwitJobSearch.com then the plugin can help you.

15) TwitthatAllows you to post current page to twitter via twitthat.com

16) TwitterEyesTwitterEyes keeps track of your character usage when posting a status update and makes replacements for you if you want to tweet more than 140 characters.

17) Tweetlol  - This extension provides you with a full-featured Twitter client as a Firefox sidebar pane. You can send status updates, follow or unfollow friend, and everything which is possible in native twitter service.

18) TwitalyzerThis add-on inserts Twitalyzer influence scores collected at www.twitalyzer.com to the Twitter web site (www.twitter.com).

19) TwittyTunesAllows you to submit the songs to twitter you are currently playing. TwittyTunes only requires FoxyTunes in order to submit currently playing music, but if you only want to submit websites and regular updates FoxyTunes is not required.

20) TwitbinIt keeps all of your Twitter conversations on browser sidebar. Twitbin allows you to send tweets, receive messages, status updates, share links, and more.

21) Kutano  - It allows users to discover other twitterers who are interested in the same web pages you are viewing and help you to connect with them instantly, either through @ replies or through easy-to-follow group discussions that can also be found directly beside the web page. Kutano also displays preview of videos and images that your followers have tweeted about, your twitter timeline, @replies, direct messages and follow/un-follow notifications directly into your browser.

22) Tweecious It can be used as twitter backup or to archive your tweets online. Tweecious find tweets with links and post them to your delicious account. This way you’ll never lose the links you posted on Twitter.
23) Clean TweetsSometime Tweets will land you up to malware or porn sites. In order to get rid of such tweets, use Clean Tweets firefox extension that eliminates spam and completely removes such spam tweets from your screen. It automatically deletes any tweets from accounts that are less than 24hrs old and anyone tweet that mentions 3 or more (or what you decide) trending topics in it will not show up.

24) TinyTweetAllow you to quickly tweet by simply highlighting any text in a web page. Once you highlight any text you want to tweet, just hit the “tweet this” button to sent the tweet. The addon uses bit.ly service to shorten the URL.

25) TwitKit TwitKit is a Twitter sidebar for Firefox. TwitKit has a 6-section interface, using tabs to separate content. You can view the Twitter public timeline, your user timeline, a list of your friends and their latest tweets, a list of your followers and their latest tweets, @replies made to you, and stats about your account.

26) InstantTweetsThis firefox extension lets you send tweets directly from your address bar by simply clicking the blue bird icon. The bird icon will display BLUE if someone is following you and RED if they are not. Just right click on any Image or site to tweet a link to it on Twitter. InstantTweets also shows you “Characters Remaining Countdown” and shorten the Long URLs automatically.

27) Twitter Line - Twitter lines shows your friend’s time line Twitter on your browser tool bar. The addon also allows you to update your status and add/remove favorites.

28) Read All Tweets It displays only unread tweets in the order beginning from oldest.  If you are atwitter addict and do not want to miss out a single tweet on Twitter time-line, then this extension is the best. It also show replies from users you don’t follow and notifies about new DMs.

29) Bccth.is - Use the Bccth.is button to easily tweet from any page you’re on. Your tweet will be automatically populated with the title and URL of the page you are currently viewing. Also select followers and send them a private message in addition to your tweet.

30) Twitter ToolBar Allow you to tweet the same message more than once on Twitter, so it is easy to re-tweet your own content again and again. Menu offers links to important Twitter pages, replies to you, and its search page.

31) Twiference Sidebar - Twiference Sidebar searches Twitter every time page changed with the keys extracted from the url. It assembles the results then displays the number of detected pages in the status bar and the tweets in the sidebar.

32) CloudBerry TweetFox - CloudBerry Twitter plug-in for Firefox lets you post excerpts from the websites you visit with a click of the button and attach a short URL to the source page.

33) Twicsy - Realtime Twitter Picture Search Engine – Real time image search of Twitpic, yFrog, flickr photos and more

Courtesy: Binary Head 

25 January, 2010

Five alternatives to Internet Explorer

Google Chrome, Opera, Firefox, Safari and Flock: five alternatives to Internet Explorer
There are plenty of alternatives to Internet Explorer, but be warned -- no web browser is 100 per cent secure

Mozilla Firefox

Firefox 3.6 is the latest version of the increasingly popular web browser. Mozilla claims it's 20 per cent faster than its predecessor, and features a "plug-in updater" – a tool that detects out-of-date programs that run in your browser (such as Flash, which is used for displaying some animated web pages or watching online videos).

Flock

Flock is a "social web browser" – it acts as a portal for people who want to integrate their Facebook and Flickr accounts, blogs, YouTube page and favourite websites into a single window.

Chrome

Google's web browser handles media-rich websites with ease, and because it treats individual "tabs" – open web pages – as separate programs, meaning that if one tab crashes, the whole browsing session isn't affected. The "incognito window" means you visit sites without saving your browsing history.

Opera

Opera is used on the Nintendo Wii, and Opera Mini is also an incredibly popular browser for mobile phones. Opera has all the usual features (it pioneered tabbed browsing in 2000), and can restore browsing sessions at the click of a mouse.

Safari

The Apple equivalent of Internet Explorer has a similar look and feel to the iTunes music store. Along with tabbed browsing and a built-in RSS feed reader, it also has Top Sites, a window that shows your most frequently-visited web pages.

Courtesy: Telegraph
Author: Claudine Beaumont

24 January, 2010

Firefox 3.6 Released: With New CSS Gradient Feature

Mozilla has finally released Firefox 3.6, the newest version of its popular browser after months of testing. New Firefox is 20% faster than Firefox 3.5, according to Mozilla. It uses Gecko 1.9.2 web-rendering, which improves its load times, startup speed and stability. Javascript execution is faster and smoother as well. There’s also autocomplete form functionality and full HTML5 support. New feature called Personas has been added in Firefox 3.6 which lets you customize your Firefox with a single click and without a restart.

My Favourite feature is the addition of new CSS Gradient API. You can define Gradient effect on any element by specifying simple CSS styles. Thus now you can have CSS Gradient Effect without Images!
Note: All the below examples are Images. In order to view the gradient effect one must use Firefox 3.6

Liner Gradient

To create a linear gradient, you’ll need to set a starting point and a direction (or angle) for the gradient and to define the color stops.

1-moz-linear-gradient( [ || ,]? , [, ]* )

Starting Point: The starting point works just like background position. You can set the horizontal and the vertical positions as a percentage, in pixels, or using left/center/right for horizontal, and top/center/bottom for vertical. Positions start from the top left corner. If you don’t specify the horizontal or the vertical position, it will default to center.
Example

1.linear_gradient_square {
2 width: 100px;
3 height: 100px;
4 border: 1px solid #333;
5 background: -moz-linear-gradient(top, blue, white);
6 }

One that starts left (horizontal) and center (vertical):

1background: -moz-linear-gradient(left, blue, white);

Here’s a simple example with three color stops. Because no point is specified for the first and last colors, they will default to 0% and 100%.

1background: -moz-linear-gradient(top, blue, white 80%, orange);

Colors will be evenly spaced if no position is specified.

1background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

Radial Gradients

The syntax for radial gradients is very similar to that of linear gradients:

1-moz-radial-gradient([ || ,]? [ || ,]? , [, ]*);

Color stops: Just like with linear gradients, you should define color stops along the gradient line. The following circles have the same color stops, but the gradient on the left defaults to evenly spaced colors, while the one on the right has a specific position for each color.

1background: -moz-radial-gradient(red, yellow, #1E90FF);
2background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

1.radial_gradient_circle {
2 background: -moz-radial-gradient(bottom left, circle, red, yellow, #1E90FF);
3}
4 .radial_gradient_ellipse {
5 background: -moz-radial-gradient(bottom left, ellipse, red, yellow, #1E90FF);
6}

1background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
2background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

1.repeating_radial_gradient_example {
2 background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
3}
4 .repeating_linear_gradient_example {
5 background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
6}

Courtesy: ViralPatel
Author: Viral Patel