Tag: CSS

Center a Website using CSS

The following tutorial is simple and will show you how to center your website using CSS.

Linting HTML using CSS

You can use the following CSS to lint your HTML.

Disable Text Selection with CSS

[codepenembed height=”300″ themeid=”16787″ slughash=”ygEjby” defaulttab=”result” user=”brandonhimpfen”]See the Pen Disable Text Selection with CSS by Brandon Himpfen (@brandonhimpfen) on CodePen.[/codepen_embed] You can use CSS if you wish to disable…

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…

Cursor CSS Property

In this tutorial, I’m going to show you how-to customize the cursor CSS property. The cursor CSS property controls what the mouse cursor will look like when the…

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…

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…

Blur Images Using CSS

In this tutorial, I’m going to show you how-to blur your image using CSS3 filter property’s blur function. The blur function applies a Gaussian blur to the image….

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…

Invert Image Colours Using CSS

In this tutorial, I’m going to show you how-to invert colours of an image using CSS3 filter property’s invert function.Inverting the colours of an image leaves a nice…

GitHub Buttons

.github-grey{background-color:#eaeaea;background-image:-webkit-gradient(linear,left 0,left 100%,from(#f9f9f9),to(#eaeaea));background-image:-webkit-linear-gradient(top,#f9f9f9,0,#eaeaea,100%);background-image:-moz-linear-gradient(top,#f9f9f9 0,#eaeaea 100%);background-image:linear-gradient(to bottom,#f9f9f9 0,#eaeaea 100%);background-repeat:repeat-x;border-top:1px solid #ddd;border-left:1px solid #ddd;border-bottom:1px solid #c5c5c5;border-right:1px solid #ddd;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff9f9f9′, endColorstr=’#ffeaeaea’, GradientType=0);border-radius:2px;text-align:center;color:#333;font-weight:700}.github-red{background-color:#eaeaea;background-image:-webkit-gradient(linear,left 0,left 100%,from(#f9f9f9),to(#eaeaea));background-image:-webkit-linear-gradient(top,#f9f9f9,0,#eaeaea,100%);background-image:-moz-linear-gradient(top,#f9f9f9 0,#eaeaea 100%);background-image:linear-gradient(to bottom,#f9f9f9 0,#eaeaea 100%);background-repeat:repeat-x;border-top:1px solid #ddd;border-left:1px solid…

Facebook Buttons

The following is a Bootstrap code snippet that hooks onto the .btn CSS class to create Facebook styled buttons. There are three different colors that the Facebook buttons…