10 CSS Tricks to Elevate Your Web Design


Cascading Style Sheets (CSS) is a powerful tool for web designers, allowing them to control the layout, color, and overall look of their websites. But with so many options and properties to choose from, it can be overwhelming to know where to start. In this article, we'll take a look at 10 CSS tricks that you can use to elevate your web design and take your website to the next level.


developer creating some css effects

1.Use CSS Grid for Flexible Layouts

CSS Grid is a powerful layout tool that allows you to create flexible, responsive designs. With Grid, you can easily create complex, multi-column layouts, and control the size and position of elements on the page. One of the best things about Grid is that it makes it easy to create responsive designs that automatically adjust to different screen sizes.


To get started with CSS Grid, you'll need to create a container element and set the display property to "grid." Then, you can use the grid-template-columns and grid-template-rows properties to define the number of columns and rows in your grid. You can also use the grid-column and grid-row properties to position individual elements within the grid. Here's an example of a basic grid layout:



.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}
.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.item3 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.item4 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item5 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.item6 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

In this example, we have created a container with a grid of 3 columns and 2 rows. We've also used the grid-column and grid-row properties to position the individual items (item1, item2, etc.) within the grid. With this basic setup, we can easily create a variety of different layouts by adjusting the number of columns and rows, and positioning of items.


2.Use CSS Flexbox for Simple Layouts

Flexbox is a layout tool that makes it easy to create simple, one-dimensional layouts. It's perfect for creating navigation bars, lists, and other common web page elements. Flexbox is also great for creating responsive designs, and it works well with CSS Grid.


To get started with Flexbox, you'll need to create a container element and set the display property to "flex." Then, you can use the flex-direction, align-items, and justify-content properties to control the layout of the flex items.


Here's an example of a basic navigation bar using flexbox:



nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
nav a {
  padding: 10px;
}

In this example, we have created a nav container and set the display property to "flex". The flex-direction property is set to "row" which means that the flex items will be arranged in a row. The align-items property is set to "center" which means that the flex items will be aligned vertically at the center of the container. The justify-content property is set to "space-between" which means that the space between the flex items will be distributed evenly.


Additionally, padding has been added to the nav a element which will be the links inside the navbar, in order to give it some space and make it more readable.


3.Use CSS Transitions for Smooth Animations

CSS Transitions allow you to create smooth animations that transition between different states. They are easy to set up and can be used to create subtle animations that enhance the user experience.


To create a transition, you need to define the properties that you want to animate, and then specify the duration, delay and ease-in-out of the animation. You can also use the transition-property to target specific properties, and transition-timing-function to control the speed of the transition.


Here's an example of a hover effect using CSS Transitions:



button {
  background-color: blue;
  color: white;
  padding: 10px;
  transition: background-color 0.3s ease-in-out;
}
button:hover {
  background-color: red;
}

I

n this example, we have a button element with a blue background color and white text color. The transition property is added to the button element, targeting the background-color property with a duration of 0.3 seconds, and an ease-in-out effect. When the button is hovered over, the background color changes to red, which creates a smooth transition effect between the two states.


4.Use CSS Animations for Complex Animations

CSS Animations allow you to create more complex animations, such as keyframe animations. They are more powerful than transitions but require more setup.

To create an animation, you need to define the keyframes of the animation using the @keyframes rule, and then specify the animation properties such as duration, iteration count, and timing function on the element you want to animate.


Here's an example of a simple animation using CSS keyframe:



@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}
.box {
  animation: bounce 1s ease-in-out infinite;
}

In this example, we have defined a keyframe animation named "bounce" that animates the transform property of an element. The animation starts at the 0% mark with the element in its original position, at the 50% mark, the element will move up 30px, and at the 100% mark, it will return to its original position. The animation is set to run for 1 second, with an ease-in-out timing function, and will run indefinitely using the infinite value for the iteration count.


5.Use CSS Media Queries for Responsive Design

CSS Media Queries allow you to create responsive designs that automatically adjust to different screen sizes. They allow you to apply different styles based on the screen size, resolution, and other characteristics of the device.


To create a media query, you use the @media rule, and specify the media type, and the conditions for which the styles will be applied, such as the width and height of the viewport.


Here's an example of a media query that changes the font size of a heading on a small screen:



h1 {
  font-size: 2em;
}
@media (max-width: 600px) {
  h1 {
    font-size: 1.5em;
  }
}

In this example, the default font size for the h1 heading is set to 2em. But when the width of the viewport is less than or equal to 600px, the media query will be triggered, and the font size will change to 1.5em, to better fit the smaller screen size.


6.Use CSS Variables for Consistent Design

CSS Variables allow you to store values, such as colors, font sizes, and other properties, in one place and reuse them throughout your stylesheet. This makes it easy to maintain consistent design and make changes quickly.


To create a CSS variable, you use the -- prefix, followed by the variable name and its value. The variable can be used by referencing it with the var() function.


Here's an example of using CSS variables for color scheme:



:root {
  --primary-color: blue;
  --secondary-color: green;
}
h1 {
  color: var(--primary-color);
}
button {
  background-color: var(--secondary-color);
  color: white;
}

In this example, we have defined two variables, --primary-color and --secondary-color, with values of blue and green respectively. These variables are then used to set the text color of h1 and the background color of the button element.


If in any point of the development you need to change the color scheme, you can easily do it by changing the values of the variables in one place, and it will be reflected throughout the stylesheet.


CSS Variables are a great way to maintain consistent design and make changes quickly. By creating variables for common values such as colors, font sizes, and other properties, you can store them in one place, and reuse them throughout your stylesheet. This ensures that your design is consistent and makes it easy to make changes to your style, as you only need to change the value of the variable.


7.Use CSS Pseudo-Classes for Additional Styling

CSS Pseudo-Classes allow you to apply styles to specific states of an element, such as when it's hovered over or active. They provide an easy way to add additional styling without having to use JavaScript.


There are several pseudo-classes available in CSS, some of the most commonly used include:


  • • :hover - applies styles when the user hovers over an element

  • • :active - applies styles when the element is in an active state, usually when it's being clicked

  • • :focus - applies styles when the element is in focus, usually when it's selected by the user

  • • :visited - applies styles to links that have been visited


Here's an example of using the :hover pseudo-class to change the background color of a button:



button {
  background-color: blue;
  color: white;
  padding: 10px;
}
button:hover {
  background-color: red;
}

In this example, the button element has a blue background color and white text color by default. When the user hovers over the button, the :hover pseudo-class is triggered and the background color changes to red. This creates a visual indication that the button is interactive and can be clicked.


CSS Pseudo-classes are a useful tool for adding additional styling without using JavaScript. They can be used to add visual indication of interactivity, such as hover effects, and to style visited links. With the variety of pseudo-classes available like :hover, :active, :focus, and :visited you can add different styles to different states of the element and enhance the user experience.


8.Use CSS Pseudo-Elements for Additional Content

CSS Pseudo-Elements allow you to add additional content to an element, such as before or after. They can be used to add icons, quotes, and other types of content without having to use HTML.


There are several pseudo-elements available in CSS, some of the most commonly used include:


  • • ::before - inserts content before an element

  • • ::after - inserts content after an element

  • • ::first-line - styles the first line of an element

  • • ::first-letter - styles the first letter of an element


Here's an example of using the ::before pseudo-element to add an icon before the text of a button:



button::before {
  content: ";
  padding-right: 10px;
}

In this example, we are using the ::before pseudo-element to add an icon content property is used to define the content to be inserted, and the padding-right property is used to give some space between the icon and the text.


CSS Pseudo-elements are a useful tool for adding additional content to an element without using HTML. They can be used to add icons, quotes, and other types of content, and style them as required. With the variety of pseudo-elements available like ::before, ::after, ::first-line and ::first-letter you can add different types of content to different parts of the element, and enhance the user experience.


9.Use CSS Shorthand Properties for Concise Code

CSS Shorthand Properties allow you to write CSS code in a more concise way by combining multiple properties into one. This can make your code easier to read and maintain.


There are several shorthand properties available in CSS, some of the most commonly used include:


  • • background - combines the background-color, background-image, background-repeat, background-attachment, and background-position properties

  • • font - combines the font-style, font-variant, font-weight, font-size, line-height, and font-family properties

  • • margin - combines the margin-top, margin-right, margin-bottom, and margin-left properties

  • • padding - combines the padding-top, padding-right, padding-bottom, and padding-left properties


Here's an example of using the background shorthand property:



.box {
  background: blue url("image.jpg") no-repeat center center;
}

In this example, we are using the background shorthand property to set the background color to blue, the background image to "image.jpg", the background repeat to "no-repeat" and the background position to "center center" all in one line. This is equivalent to writing the following CSS:



.box {
  background-color: blue;
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}

CSS shorthand properties are a great way to write CSS code in a more concise way by combining multiple properties into one. This can make your code easier to read and maintain. With shorthand properties such as background, font, margin and padding, you can write less code and achieve the same result.


10.Use CSS Specificity for Precise Styling

CSS Specificity is a mechanism that determines which styles will be applied to an element when there are multiple conflicting styles. It allows you to have precise control over the styling of your elements, and ensure that the styles you want to apply are being applied.


CSS Specificity is determined by the weight of the selector, where an ID selector has higher specificity than a class selector, which in turn has higher specificity than a tag selector. Additionally, inline styles have the highest specificity, and will always override any conflicting styles.


Here's an example of using specificity to override a style:



.container p {
  color: red;
}
#override p {
  color: blue !important;
}

In this example, all p elements inside a container with a class of container will have a red text color by default. However, if there's a specific p element inside an element with an ID of override, the color will be blue. The !important rule is used to give the second selector a higher specificity, making it override the first one.


CSS Specificity is a powerful tool that allows you to have precise control over the styling of your elements. By using the weight of selectors and the !important rule, you can ensure that the styles you want to apply are being applied, and override any conflicting styles.


In conclusion, CSS is a powerful tool that can help you create beautiful and functional websites. These 10 CSS tricks are a great starting point for taking your web design to the next level and creating a visually stunning website that will stand out from the rest.


11.BONUS:

As a bonus point, it's worth mentioning Bootstrap as a popular CSS framework that can help you quickly and easily create responsive, mobile-first websites. Bootstrap is a front-end development framework that provides a set of CSS and JavaScript components, such as forms, buttons, navigation bars, and more, that you can use to create a consistent design and improve the user experience.


Bootstrap 5 is the latest version of Bootstrap, which has been recently released in May 2021, and it comes with a lot of new features and improvements, such as a new utility API, improved form controls, and enhanced spacing and layout options.


Bootstrap 5 is built with Sass and it is fully compatible with CSS Grid and Flexbox, which means you can take advantage of these powerful layout tools to create responsive designs with ease. Additionally, Bootstrap 5 comes with a set of pre-designed UI components, such as forms, buttons, cards, and more, that you can use to quickly create a polished and professional-looking website.


Another great feature of Bootstrap 5 is that it is fully customizable, you can use the Sass variables and mixins to change the default styling, and also it has a wide range of responsive classes that allows you to adjust the design based on the screen size.


Bootstrap 5 is an excellent choice for anyone looking to create a responsive, mobile-first website quickly and easily. With its pre-designed UI components, powerful layout tools, and fully customizable Sass variables, Bootstrap 5 can help you create a polished and professional-looking website in no time. It's a great way to get up and running with responsive web design quickly, and have a solid foundation to build upon.


Admin

Read next: