Category: Code
-
Dynamic CSS
The fundamentals of CSS transforms, transitions, and animation are the basics that allow front-end developers to kick it up a notch and add a bit more pizazz and interactivity to websites. What are the basic building blocks that make up these capabilities? What is the difference between a transition and a transform? What does browser…
-
HTML Basics: Elements, Tags, and Document Structure
HTML stands for HyperText Markup Language and is the basic structural element that is used to create webpages. HTML is a markup language, which means that it is used to “mark up” the content within a document, in this case a webpage, with structural and semantic information that tells a browser how to display a…
-
Making Responsive Rectangles and Squares with CSS
The basic conceptual and literal building block of most responsive CSS shapes is the rectangle. In terms of geometry, a rectangle is a parallelogram where each corner is a right angle. This means that once you know how to make a responsive CSS rectangle, you’ll automatically know how to make a responsive CSS square. Always…
-
CSS Transitions: The Basics
The standard linguistic definition of a transition is a “movement, passage, or change from one position, state, stage, subject, concept, etc., to another.” Within CSS, transitions do exactly what you’d expect: they allow for elements to change from one state to another over time. My favorite short explanation of what the CSS transition property does…
-
CSS Transform Origin Property
The CSS transform origin property defines the point from which a CSS transform is applied to an element. Transform Origin Syntax The syntax for identifying the value of the transform-origin property takes into account the x-offset and y-offset of the point of origin. The x-offset is a length or percentage from the left edge of…
-
CSS Transforms: The Basics
Linguistically speaking, a transform is a “change in form, appearance, or structure,” at least according to the folks over at Dictionary.com. When it comes to CSS, the Mozilla Developer Network describes a transform this way: “The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can…
-
Styling Bulleted Lists with an Icon Font
Though the classic bulleted list is perfectly utilitarian in many circumstances, sometimes we need to present bullets that are a little more graphically variant than the list styles disc, circle, and square. In this tutorial, I’ll walk you through styling bulleted lists using an icon font and CSS to create custom bullets. Step 1: Install…