22 practical CSS tips to make your website unique

Want to make your website stand out from the competition? Using the power of CSS can help you achieve this. This article will share 22 practical CSS tips to help you improve the appearance and user experience of your website. Whether you're a newbie or an experienced developer, these tips will inject fresh design elements and movement into your website.

1. Custom fonts: By using the @font-face rule, you can apply custom fonts to your website to add uniqueness and brand recognition. Choose fonts that fit the style of your website and make sure they load and display correctly.
2. Gradient background color: Use CSS gradient background color to add a gorgeous look to your website. Try different types of gradients, such as linear, radial, or repeating gradients. You can create colorful background effects by specifying the start and end colors.

css
复制代码
.background {
  background: linear-gradient(to right, #ff9900, #ff5500);
}

3. Animation effects: Use CSS transition and animation properties to add dynamic effects to your website. Create smooth transitions, fade effects, or eye-catching animation sequences. You can control how your animation behaves by defining its duration, delay, and number of repetitions.

css
复制代码
.box {
  transition: background-color 0.3s ease-in-out;
}

.box:hover {
  background-color: #ff5500;
}

4. Responsive layout: Use CSS media queries to create responsive layouts so that your website can present a good user experience on different devices. Adjust the size, position, and style of elements based on screen size and orientation. Use Flexbox or Grid Layout to achieve flexible adaptive design.

css
复制代码
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .sidebar {
    order: 2;
  }
  
  .main-content {
    order: 1;
  }
}

5. Smooth scrolling effect: By using the scroll-behavior property of CSS, you can add a smooth scrolling effect to the web page, making the page smoother and more comfortable when scrolling. Apply it to html or body elements to enable a smooth scrolling effect.

css
复制代码
html {
  scroll-behavior: smooth;
}

6. Grid layout: Use CSS grid layout to easily create complex grid structures and achieve flexible page layout. By defining grid containers and grid items, you can precisely control the position and size of elements.

css
复制代码
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  grid-column: span 2;
  grid-row: span 1;
}

7. Custom scroll bar style: By using CSS's ::-webkit-scrollbar pseudo-class selector, you can customize the scroll bar style. Adjust the width, color, and shape of the scroll bar to fit your design needs.

ruby
复制代码
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #ff5500;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

8. Responsive font sizes: Responsive font sizes can be created using CSS’s vw unit (a percentage of the viewport width). By setting the font size of the root element to vw units, the font adapts as the screen size changes.

css
复制代码
html {
  font-size: 4vw;
}

9. Shadow effects: By using the CSS box-shadow property, you can add a shadow effect to add dimension and depth to elements. Adjust the shadow's color, blur, and offset to achieve different effects.

css
复制代码
.box {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

10. Custom scroll bar style: By using CSS's ::-webkit-scrollbar pseudo-class selector, you can customize the scroll bar style. Adjust the width, color, and shape of the scroll bar to fit your design needs.

css
复制代码
/* Webkit浏览器（Chrome等） */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

11. Text overflow ellipsis: When the text content exceeds the width of the container, you can use the text-overflow property of CSS to achieve the effect of ellipses to better handle long text.

css
复制代码
.container {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

12. Border animation effect: By using the CSS transition attribute and the :hover pseudo-class, you can add a border animation effect to an element to produce a transition effect when the mouse hovers.

css
复制代码
.box {
  border: 1px solid #ccc;
  transition: border-color 0.3s ease-in-out;
}

.box:hover {
  border-color: #ff5500;
}

13. Image blur effect: You can add a blur effect to an image by using the blur function in the CSS filter attribute. Adjust the blur level to give your image a softer look.

css
复制代码
.image {
  filter: blur(5px);
}

14. Gradient background color: Using CSS’s linear-gradient function, you can create a gradient background color for an element. Define the color values ​​of the starting point and end point, as well as the direction of the gradient, to achieve various dazzling background effects.

css
复制代码
.container {
  background: linear-gradient(to right, #ff5500, #ffd200);
}

15. Text shadow effect: By using the text-shadow property of CSS, you can add a shadow effect to the text to increase the readability and visual effect of the text. You can adjust the color, position, and blur of the shadow.

arduino
复制代码
.text {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

16. Gradient border style: Using the CSS border-image property, you can create a border style with a gradient effect. Define the gradient image or gradient color as the source of the border, as well as how the border is sliced ​​and how wide it is.

css
复制代码
.border {
  border: 10px solid;
  border-image: linear-gradient(to right, #ff5500, #ffd200) 1;
}

17. Rotation animation effect: By using the CSS transform property, you can create a rotation animation effect for an element. Specify the rotation angle and transition time to achieve various rotation effects on the page.

css
复制代码
.box {
  transform: rotate(45deg);
  transition: transform 0.3s ease-in-out;
}

.box:hover {
  transform: rotate(90deg);
}

18. Gradient text effect: Using the CSS background-clip property and a gradient background color, you can create a gradient effect for text. Apply a gradient to the background area of ​​text to create a unique gradient text effect.

css
复制代码
.text {
  background: linear-gradient(to right, #ff5500, #ffd200);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

19. Transparency animation effects: By using the CSS opacity property and transition property, you can create transparency animation effects for elements. Control the transparency of an element so it smoothly fades in or out during transitions.

css
复制代码
.box {
  opacity: 0;
  transition: opacity 0.3s ease-in-out; 
} 
.box:hover { 
  opacity: 1; 
}

20. Hover effect: By using CSS's :hover pseudo-class and transform attribute, you can create various hover effects for elements, such as magnification, rotation, tilt, etc.

css
复制代码
.box {
  transition: transform 0.3s ease-in-out;
}

.box:hover {
  transform: scale(1.2);
}

21. Gradient shadow effect: Using the CSS box-shadow property, you can create a gradient shadow effect for elements. Define the color and offset of the shadow to make the element appear three-dimensional.

css
复制代码
.box {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 0 8px rgba(255, 255, 255, 0.5);
}

22. Text animation effects: By using CSS @keyframes rules and animation properties, you can create animation effects for text. Define keyframes and animation properties to create dynamic text effects on the page.

css
复制代码
.text {
  animation: rainbow 5s infinite;
}

@keyframes rainbow {
  0% { color: red; }
  20% { color: orange; }
  40% { color: yellow; }
  60% { color: green; }
  80% { color: blue; }
  100% { color: purple; }
}

To learn more about CSS, please pay attention to the CRMEB open source mall project