css

3 Ways to Center in CSS

Centering HTML elements using CSS can be a surprisingly difficult¬†task. Getting the horizontal alignment right is relatively straightforward, but getting the vertical alignment down can prove to be challenging. And getting an element to sit smack dab in the middle of its container? Forget about it! ūüôā I‚Äôm kidding, but how to center elements using […]

javascript-300x120

How to Make Circular/Curved Text with JavaScript

Creating circular text, or text on an curved path, in¬†webpages may seem¬†like somewhat of a intimidating¬†task. There isn’t really a straightforward way to achieve it with standard HTML and CSS. There is a JavaScript plugin or two¬†out there with some pretty decent¬†results, but using plugins¬†means extra dependency and load time associated tacked on to¬†your project. […]

css

CSS: Making the Switch from Static to Relative Units

CSS gives web developers plenty of options when it comes to defining lengths for HTML elements. In a broad sense, defining lengths in CSS can be broken down in to two categories: using¬†absolute¬†versus¬†relative units. Absolute units are probably most commonly done with¬†pixel lengths with the familiar px unit. Other absolute length units exist (e.g., mm, […]

css

CSS: Simple Sticky Footer

The sticky footer… The¬†oh-so-sought-after expanse¬†at the bottom of the¬†page that contains¬†contact information, site navigation, a call to action, or whatever else you might want to chuck¬†in there. It’s the¬†element that knows its place in the world (wide web) and embraces it¬†by staying in it’s place. A well executed¬†sticky¬†footer encourages your site visitors¬†to further engage; it […]

1024px-Flatirons_Winter_Sunrise_edit_2

CSS !important Rule: How to Use It Correctly

The CSS !important rule approaches us like a fake savior angel in our darkest times while we are trying to make something work in CSS. It is a great option to have for sure, but are we really using it in the correct way and only in cases where we have no other option? In […]

1024px-Flatirons_Winter_Sunrise_edit_2

CSS Class vs ID: Which One to Use

In this post, we will take a brief look at how classes and IDs are used in CSS, and we will try to help you better understand how to decide when to use CSS class vs id by providing some simple examples. In CSS, you can assign and control the style of HTML elements on […]

1024px-Flatirons_Winter_Sunrise_edit_2

5 Examples to Help You Understand How CSS Opacity Works

You can control the transparency of HTML elements on a web page such as text, images or backgrounds with the help of the opacity property in CSS. In this tutorial, we will talk about CSS opacity and we will provide some examples to demonstrate how it works. How CSS Opacity Works The word opaque is […]

css

Simple CSS z-index Tutorial for Beginners

In this tutorial, we will talk in detail about what CSS z-index property is, how it works, its default value and the values it can have by giving some examples. We will also mention some use cases to give you ideas about where you can apply z-index in your web layouts. What is CSS z-index? […]

css

How to change CSS using jQuery?

The¬†jQuery .css method is used to GET or SET DOM element CSS properties. The following tutorial will demonstrate 4 core concepts of jQuery’s .css method 1. GET a CSS property from a DOM element 2. GET multiple CSS properties from a DOM element 3. SET a CSS property on DOM elements 4. SET multiple CSS […]

1024px-Flatirons_Winter_Sunrise_edit_2

Off Canvas Navigation with CSS & a Checkbox

Off canvas layouts are a popular way of displaying content, especially navigation, hidden from the main viewport. There are quite a few JavaScript and jQuery off canvas plugins, but in the latest revision of my personal blog I decided to attempt the off canvas layout without any JavaScript at all. The solution I came up […]