CSS Secrets: Underrated Tricks for Stunning UI

CSS Secrets: Underrated Tricks for Stunning UI

CSS Secrets: Underrated Tricks for Stunning UI

CSS is a powerful tool for creating stunning user interfaces, but some of its most impressive features are often overlooked. In this blog post, I’ll share **5 underrated CSS tricks** that can take your UI design to the next level. Each trick comes with a live example and code snippet so you can easily implement it in your projects.

1. Gradient Text

Add a gradient effect to your text for a modern and eye-catching look.

Live Example:

Gradient Text

CSS Code:

.gradient-text {
  background: linear-gradient(45deg, #ff6f61, #3498db);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 2.5rem;
  font-weight: bold;
}

2. Custom Checkbox

Replace the default checkbox with a custom-designed one.

Live Example:

CSS Code:

.custom-checkbox {
  display: none;
}

.custom-checkbox + label {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #3498db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.custom-checkbox:checked + label::after {
  content: '✔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #3498db;
  font-size: 14px;
}

3. Hover Zoom Effect

Add a subtle zoom effect to images on hover.

Live Example:

Placeholder Image

CSS Code:

.hover-zoom {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 10px;
}

.hover-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.hover-zoom:hover img {
  transform: scale(1.1);
}

4. Neumorphism Button

Create a soft, 3D button using the neumorphism design trend.

Live Example:

CSS Code:

.neumorphism-button {
  padding: 10px 20px;
  background: #f0f0f0;
  border: none;
  border-radius: 10px;
  box-shadow: 5px 5px 10px #c9c9c9, -5px -5px 10px #ffffff;
  font-size: 1rem;
  color: #333;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.neumorphism-button:hover {
  box-shadow: inset 5px 5px 10px #c9c9c9, inset -5px -5px 10px #ffffff;
}

5. Animated Underline

Add a smooth underline animation to your links.

Live Example:

Hover Over Me

CSS Code:

.animated-underline {
  display: inline-block;
  position: relative;
  color: #3498db;
  text-decoration: none;
}

.animated-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: #3498db;
  bottom: -5px;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}

.animated-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

These are just a few of the many underrated CSS tricks you can use to create stunning user interfaces. Experiment with these techniques and combine them to create unique designs that stand out. Happy coding!

Comments

Post a Comment

Popular posts from this blog

LeetCode Problem #10: Regular Expression Matching - Explanation and Solutions in Python and JavaScript

LeetCode Problem #10: Regular Expression Matching - Explanation and Solutions in Python and JavaScript LeetCode Problem #10: Regular Expression Matching - Explanation and Solutions in Python and JavaScript Introduction The Regular Expression Matching problem is a challenging problem that tests your understanding of dynamic programming and string manipulation. It is frequently asked in coding interviews to assess your problem-solving skills. In this post, we'll break down the problem, explain the optimal approach, and provide solutions in both Python and JavaScript. Problem Statement Given an input string s and a pattern p , implement regular expression matching with support for '.' and '*' where: '.' matches any single character. '*' matches zero or more of the preceding element. The matching should cover the en...
Read more

LeetCode Problem #1: Two Sum - Explanation and Solutions in Python and JavaScript

LeetCode Problem #1: Two Sum - Explanation and Solutions in Python and JavaScript LeetCode Problem #1: Two Sum - Explanation and Solutions in Python and JavaScript Introduction The Two Sum problem is one of the most popular coding interview questions and is often used to test a candidate's problem-solving and coding skills. In this post, we'll break down the problem, explain the optimal approach, and provide solutions in both Python and JavaScript. Problem Statement Given an array of integers nums and an integer target , return the indices of the two numbers such that they add up to target . You may assume that each input would have exactly one solution, and you may not use the same element twice. Example: Input: nums = [2, 7, 11, 15], target = 9 Output: [0, 1] Explanation: nums[0] + nums[1] = 2 + 7 = 9. Approach The brute force approach invo...
Read more

LeetCode Problem #2: Add Two Numbers - Explanation and Solutions in Python and JavaScript

LeetCode Problem #2: Add Two Numbers - Explanation and Solutions in Python and JavaScript LeetCode Problem #2: Add Two Numbers - Explanation and Solutions in Python and JavaScript Introduction The Add Two Numbers problem is a classic linked list problem frequently asked in coding interviews. It tests your understanding of linked lists, pointer manipulation, and edge cases. In this post, we'll break down the problem, explain the optimal approach, and provide solutions in both Python and JavaScript. Problem Statement You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list. Example: Input: l1 = [2, 4, 3], l2 = [5, 6, 4] Output: [7, 0, 8] Explanation: 342 + 465 = 807. Approach The pro...
Read more