CSS tricks to become a web magician

CSS magic could be any number of quirks and features of the language.

We’re going to go a bit further than just a couple tips and tricks though. We’ll explain several unique and effective ways to add functionality and flexibility to everything from your single-page applications to more involved web projects. There is an enormous well of CSS knowledge online; this is just a small sliver of what is possible.

• millimeters (mm)
• centimeters (cm)
• inches (in)
• pixels (px)

While these are handy for being precise and deliberate in your measurements of layouts and web page elements, we need something with a little more flexibility. We can turn to relative lengths to rectify this. Relative lengths rely on percentages or fractions of other values in order to scale certain elements appropriately. Some of these lengths are:

• %, relative to a parent element
• em, relative to the font-size of the element
• rem, relative to the font-size of the root element
• vmin, relative to 1% of the viewport’s smaller dimension
• vmax, relative to 1% of the viewport’s larger dimension

The viewport is the dimension of the screen that the webpage is being displayed on.

Below is an interactive widget to allow you to experiment with different units.

The power of the block model lies in the ability to use multiple units when assigning dimension values. box-sizing is a property that can constrain content boxes based on the parameters of their parent containers. There are two values that can define this property:

• content-box: the default value. The padding and border are added on to the content box
• border-box: the padding and border are incorporated and can be sized deliberately.

The magical part of all this is that border-box allows us to set certain values for the block while still facilitating percentage-based scaling. Instead of manually resizing the padding area of a box for each default box we can mixed-unit to set the border and padding dimensions without running into sizing edge cases.

We can use any valid absolute or relative length to specify padding and a percentage value for width using border-box.

Positioning#

The term ‘layout’ generally refers to the structure of a web page and how it displays its content. Layouts in CSS describe certain properties of web page content. These values belong to the display property.

The flexbox model simplifies syntax for layouts by removing the need for floats or table display workarounds.

In CSS, layouts refer to the positioning of multiple boxes, like the ones mentioned in the previous section. The act of placing these boxes around the web page is called positioning. An element can be positioned by referring to the top, bottom, left, and right edges of a page or parent element.

In CSS, elements have a position property that can be set to several different values. These values are:

• static: a value used to describe an unpositioned element
• relative: creates a reference point for any child elements contained within
• absolute: the element will be moved to the appropriate position relative to the parent element

In CSS, any element that does not have the value position: static is considered positioned.

Take the example from earlier with the white box located at the top left corner of the blue parent element. By changing the value of the position property and specifying the coordinates of the new position, we can move the white box.

What if we want to position a child element outside of a parent element? We can position boxes tangent to the parent element by using the same initial method described above, relative and absolute values. Getting the child element outside of the parent may seem tricky at first, but just requires a bit of thinking outside the box. If we use percentages instead of specifying specific values.

As a general rule, it is better to avoid specific values as they can make your web applications less flexible and more prone to bugs.

Using the previous example, let’s say we want the child box to be positioned on the right edge of the blue box just at the upper right corner.

Try changing the left property to 100% and see where the white div goes.

It may not be readily apparent, but the white div is off the right side of the window. Since the value is set to 100%, we need to assign it to the property opposite the edge to which we want the element to be repositioned.

CSS variables or cascading variables, also called custom properties, are the key to establishing a theme. More specifically, the fact that CSS variables are inherited is the key. Inheritance means that we can attribute some variables to certain sections of our app and even override them in child components if necessary.

We can easily create, customize, and implement consistent themes throughout your web projects with the css-theming package. CSS-Theming is an npm package that will need to be installed and then imported using the JavaScript modules and SCSS src files.

Once css-theming is installed and set up, we can begin to customize it. The default settings for the package enable light and dark mode options, but there are plenty more CSS properties that can be changed.

The default theme inside the package looks like this:

Breakpoints are markers that tell the webpage to change its layout or load a different stylesheet at a specific width (usually in pixels).

Media queries are simple test expressions that are combined with logical and, or operators. They can be added to the @media and @import at-rules and can be used in the media attribute of <link> tags.

Some of the main CSS properties for animations are as follows.

• animation-name: determines the name of animation
• animation-delay: creates a delay for the beginning of the animation
• animation-iteration-count: defines the number of times the animation will run
• animation-timing-function: defines the speed curve of the animation
  • linear: same speed from start to finish
  • ease: slow beginning and end
  • ease-in: slow beginning
  • ease-out: slow end
• animation-duration: defines how long the animation will take to complete. The default for this value is 0, so if it is left unchanged then the animation will not occur.
• animation direction: determines if the animation will play forwards or backwards
• animation-fill-mode: determines the style of a target element when the animation is not playing. This property ensures that animations do not alter an element until we play the first keyframe.
  • none: animation will not apply styles until executed
  • forwards: element will retain style values set by the last keyframe
  • backwards: element will receive the style values set by the first keyframe
  • both: the animation properties will follow rules for both forward and backward

Thankfully, we don’t have to build every animation we want to implement in our web applications from scratch. There are open-source resources for you to download and incorporate into your own web sites. Thanks to a few benevolent and talented developers sharing their creations, anyone can create websites that are full of life. Two online databases that we encourage you to check out are:

• Animate.css
• Animista