### 1.
**CSS Text Shading (Text Shadow with Multiple Colors)**
```css
h1 {
font-size: 50px;
color: #333;
text-shadow: 2px 2px 3px #ff6347, 4px 4px 6px rgba(0, 0, 0, 0.1);
}
```
You can apply multiple text shadows to create a layered, vibrant effect.
---
### 2. **CSS Grid with Auto-Height Columns**
```css
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px;
}
```
This allows the columns to automatically adjust their size based on the container’s
width while keeping a consistent gap.
---
### 3. **Responsive Border Radius**
```css
div {
width: 100%;
height: 200px;
background: #3498db;
border-radius: 10vw;
}
```
By using `vw` units for `border-radius`, the element will dynamically adjust its
corner roundness as the viewport size changes.
---
### 4. **Hover Animation on Background with CSS Transition**
```css
div {
width: 300px;
height: 300px;
background: linear-gradient(45deg, #ff0000, #ffff00);
transition: background 0.5s ease;
}
div:hover {
background: linear-gradient(45deg, #0000ff, #00ff00);
}
```
Change the background gradient on hover with a smooth transition.
---
### 5. **Glow Effect with Box Shadow**
```css
button {
background-color: #3498db;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 0 10px rgba(52, 152, 219, 0.7);
transition: box-shadow 0.3s ease;
}
button:hover {
box-shadow: 0 0 30px rgba(52, 152, 219, 1);
}
```
A cool glow effect when hovering over buttons using `box-shadow`.
---
### 6. **Animated Text Stroke (Text Outline Effect)**
```css
h2 {
font-size: 60px;
color: transparent;
-webkit-text-stroke: 2px #ff6347;
animation: text-stroke 1s infinite alternate;
}
@keyframes text-stroke {
0% {
-webkit-text-stroke: 2px #ff6347;
}
100% {
-webkit-text-stroke: 2px #32cd32;
}
}
```
This gives your text a dynamic stroke color effect.
---
### 7. **Parallax Scrolling with CSS**
```css
.parallax {
background-image: url('your-image.jpg');
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
```
Create a parallax scrolling effect using the `background-attachment: fixed`
property.
---
### 8. **CSS Mask for Complex Shapes**
```css
div {
width: 300px;
height: 300px;
background-color: #3498db;
mask: radial-gradient(circle, transparent 40%, black 40%);
}
```
Using `mask`, you can apply more intricate shapes like gradients or patterns to
reveal parts of an element.
---
### 9. **CSS Starfield Animation**
```css
body {
background-color: black;
overflow: hidden;
height: 100vh;
}
.star {
position: absolute;
background-color: white;
width: 2px;
height: 2px;
animation: stars 50s linear infinite;
}
@keyframes stars {
0% { transform: translateX(0) translateY(0); }
100% { transform: translateX(100vw) translateY(100vh); }
}
.star:nth-child(even) {
animation-duration: 60s;
}
.star:nth-child(odd) {
animation-duration: 80s;
}
```
Creates a starry sky effect using randomly positioned dots (stars) that move at
different speeds.
---
### 10. **Text Ripple Effect on Hover**
```css
.text-ripple {
position: relative;
display: inline-block;
color: #fff;
font-size: 40px;
padding: 10px;
}
.text-ripple::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
background-color: #ff6347;
border-radius: 50%;
opacity: 0;
transform: translate(-50%, -50%);
animation: ripple 0.6s ease-out;
}
.text-ripple:hover::before {
opacity: 1;
animation: ripple 0.6s ease-out;
}
@keyframes ripple {
0% {
width: 20px;
height: 20px;
opacity: 0;
}
100% {
width: 100px;
height: 100px;
opacity: 1;
}
}
```
When hovering over the text, a ripple effect appears around the text.
---
### 11. **Text Gradient Animation**
```css
h3 {
background: linear-gradient(90deg, #f06, #f79);
background-size: 200% 200%;
color: transparent;
-webkit-background-clip: text;
animation: gradient 3s linear infinite;
}
@keyframes gradient {
0% {
background-position: 200% 0;
}
100% {
background-position: 0 0;
}
}
```
This creates an animated gradient background that moves across the text.
---
### 12. **CSS Triangle Button (Pure CSS)**
```css
.button {
position: relative;
background-color: #ff6347;
border: none;
color: white;
padding: 20px 40px;
cursor: pointer;
}
.button::after {
content: '';
position: absolute;
top: 50%;
right: -20px;
width: 0;
height: 0;
border-left: 20px solid #ff6347;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
transform: translateY(-50%);
}
```
A button with a triangle extension on the right side created purely with CSS.
---
