Disable Text Selection with CSS

You can use CSS if you wish to disable / disallow text selection. Firstly, add the following to your CSS file: .disable-selection { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } Once you’ve added the above code snippet to your CSS file, you can use it in your HTML code by adding the disable-selection … Continue reading Disable Text Selection with CSS

Display Back to Top Link Only on Small Devices

In this tutorial I’m going to show you how-to display a “back to top” link only on small devices. HTML The HTML for the “back to top” link is: <a href=”#top” title=”Back To Top” class=”backtotop” rel=”nofollow”>Back To Top</a> You can of course change the link text and even change the link text to an icon. … Continue reading Display Back to Top Link Only on Small Devices

Apply Transparency to Images Using CSS

In this tutorial, I’m going to show you how-to apply transparency to your images using CSS3 filter property’s opacity function.Making your images transparent can be useful for hero / jumbotron headers where you want to put text over or where you want an image to be transparent until an event happens, like being hovered on … Continue reading Apply Transparency to Images Using CSS

Sepia Images Using CSS

In this tutorial, I’m going to show you how-to convert images to sepia using CSS3 filter property’s sepia function.Converting the image to sepia leaves your image with an effect similar to the aging of old photographs and of older photographs chemically treated either for visual effect or for archival purposes. The Results Not sepia: Sepia: … Continue reading Sepia Images Using CSS

Grayscale Image Using CSS

In this tutorial, I’m going to show you how-to convert your image to grayscale using CSS3 filter property’s grayscale function.Converting your image into grayscale will leave your image with a nice black and white image effect. The Results Normal: Grayscale: The HTML and CSS The grayscale function uses a percentage, from 0% to 100%; where … Continue reading Grayscale Image Using CSS