0% found this document useful (0 votes)
7 views

css-tricks

The document provides various CSS techniques for enhancing web design, including text shading, grid layouts, responsive border radius, and hover animations. It covers effects such as glow, parallax scrolling, complex shapes with masks, starfield animations, text ripple effects, and animated gradients. Each technique is accompanied by code snippets demonstrating its implementation.

Uploaded by

johntaichiqigong
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
7 views

css-tricks

The document provides various CSS techniques for enhancing web design, including text shading, grid layouts, responsive border radius, and hover animations. It covers effects such as glow, parallax scrolling, complex shapes with masks, starfield animations, text ripple effects, and animated gradients. Each technique is accompanied by code snippets demonstrating its implementation.

Uploaded by

johntaichiqigong
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

### 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.

---

You might also like