4 Pro CSS Tricks Will Blow Your Mind

CSS (Cascading style sheets) is one of the most popular technologies in web design, allowing developers to create visual and responsive designs. As a web developer, mastering CSS is crucial for bringing your design vision to life and ensuring a good user experience across all devices. Here are some tips you might not know in CSS:

1. Neumorphsime:

Neumorphsime referred to soft UI design, is a popular design trend combining skeuomorphism and flat design. this style uses shadows and highlights to create a smooth look. here is how it works:

First, we create a subtle background: to start with Neumotphsime, choose a soft background color like light gray,

body {
  background-color: #eee;
  display: grid;
  place-content: center;
  height: 100vh;
}

then we create an element with these styles

.element {
  height: 100px;
  width: 100px;
  transition: all 0.2s linear;
  border-radius: 16px;
}

finally, we add a box-shadow to the element when hovering

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1), -10px -10px 10px white;
}

so we get this nice look

and you can make this too

just add an inset to the box shadow like this

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white inset;
}

2. Min() & Max() and clamp():

these tools are making websites and apps more dynamic and responsive. you can use these functions to control element sizing and resizing. and creating flexible typography here how:

the min() function lets you set the smallest value from a list here how

before

.container {
  width:800px;
  max-width:90%;
}

after

.container{
  width: min(800px,90%);
}

the max() function works the same as the min() function but takes the bigger value from a list here is how:

.container{
  width: max(800px,90%);
}

sometimes you you set the width and min and max-width in one container there is another function named clamp() here is how it works

before

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

After

.container {
  width: clamp(400px,50vw,800px);
}

3. The :Has() and :Not() selector:

the :not() selector represents elements that do not match a list of selectors

.container:not(:first-child) {
  background-color: blue;
}

the :has() selector represents an element if any of the relative selectors that are passed to as an argument match

.container:has(svg) {
  padding: 20px;
}

4. Text gradient:

for this trick, we can't add a gradient to the text color directly like this

.text{
  color: linear-gradient(to right, red,blue);
}

what we do instead

.text{
  background: linear-gradient(to right, red,blue);
  background-clip:text;
  color:transparent;
}

and voila we get this awesome effect

Conclusion:

By mastering one of these CSS techniques, you are going to elevate your web design skills to new heights. with only small adjustments with those techniques, you can lead to visually stunning results, and make your design more beautiful and user-friendly.

you can check more in: https://designobit.com/