<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #111;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
overflow: hidden;
}
.container {
width: 600px;
height: 400px;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 10px;
position: absolute;
top: 150px;
left: 250px;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #007bff;
position: absolute;
top: 50px;
left: 50px;
}
.text {
position: absolute;
color: #fff;
font-size: 24px;
font-weight: 600;
opacity: 0;
top: 300px;
left: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="circle"></div>
<div class="text">GSAP </div>
</div>
<script>
const tl = gsap.timeline({ repeat: -1, yoyo: true });
tl.from(".box", {
x: -200,
opacity: 0,
duration: 1,
ease: "power2.out"
})
.to(".box", {
y: -100,
duration: 1,
ease: "bounce.out"
})
.to(".box", {
scale: 1.2,
duration: 0.5,
ease: "power1.inOut"
})
.to(".box", {
rotation: 360,
duration: 1,
ease: "elastic.out(1, 0.3)"
}, "+=0.5")
.from(".circle", {
x: 200,
opacity: 0,
duration: 1,
ease: "power2.out"
}, "<")
.to(".circle", {
y: 100,
duration: 1,
ease: "bounce.out"
}, "<+0.2")
.to(".circle", {
scale: 0.8,
duration: 0.5,
ease: "power1.inOut"
}, "<")
.to(".circle", {
x: 300,
duration: 1,
ease: "elastic.out(1, 0.3)"
}, "<+0.5")
.fromTo(".text",
{ opacity: 0, y: 20 },
{ opacity: 1, y: 0, duration: 1, ease: "power3.out" },
"<0.5"
);
</script>
</body>
</html>
Which CSS framework do you prefer for your projects?
Anonymous Poll
100%
Tailwind css
0%
Bootstrap
0%
Other
CodePen Blog
Chris’ Corner: CSS Powered Componentry
New CSS features help us in all sorts of different ways, but here we’re going to look at them when they power a specific type of component, or make a type of component newly possible with less or no JavaScript.
* A single element CSS donut timer/countdown timer by Ben Frain — The surely least-used gradient type,
* Sliding 3D Image Frames In CSS by Temani Afif — This one isn’t rife with new CSS features, but that almost makes it more mind blowing to me. In the HTML is only an but the end result is a sliding-door on a 3D box that slides up to reveal the photo. This requires multiple backgrounds including a
* ⭐️ Carousel Configurator by the Chrome Gang — This one is wild. It only works in Google Chrome Canary because of experimental features. Scrolling snapping is there of course, and that’s neat and fundamental to carousels, but the other three features are, as I said, wild. (1) a
* Hide a header when scrolling down, show it again when scrolling up by Bramus Van Damme — With scroll-driven animations, you can “detect” if a page is being scrolled up or down, and in this case set the value of custom properties based on that information. Then with
* Center Items in First Row with CSS Grid by Ryan Mulligan — When you’re using CSS Grid, for the most part, you set up grid lines and place items exactly along those grid lines. That’s why it’s weird to see “staggered” looking layouts, which is what it looks like when one row of items doesn’t line up exactly with the one below it. But if you just make twice as many columns as you need and offset by one when you need to, you’ve got this kind of control. The trick is figuring out when.
Chris’ Corner: CSS Powered Componentry
New CSS features help us in all sorts of different ways, but here we’re going to look at them when they power a specific type of component, or make a type of component newly possible with less or no JavaScript.
* A single element CSS donut timer/countdown timer by Ben Frain — The surely least-used gradient type,
conic-gradient() is used here to make donut (I’d call them charts) which when animated behave like a timer. This kind of thing changes the web in that we don’t need to reach for weightier or more complex technology to do something like this, which is actually visually pretty simple. * Sliding 3D Image Frames In CSS by Temani Afif — This one isn’t rife with new CSS features, but that almost makes it more mind blowing to me. In the HTML is only an but the end result is a sliding-door on a 3D box that slides up to reveal the photo. This requires multiple backgrounds including a
conic-gradient, a box-shadow and very exotic clip-path, not to mention a transition for the movement.* ⭐️ Carousel Configurator by the Chrome Gang — This one is wild. It only works in Google Chrome Canary because of experimental features. Scrolling snapping is there of course, and that’s neat and fundamental to carousels, but the other three features are, as I said, wild. (1) a
::scroll-button which appends, apparently, a fully interactive button that advances scroll by one page. (2) a ::scroll-marker and group pseudo element which are apparently a replacement for a scrollbar and are instead fully interactive stated buttons that represent how many pages a scrolling container has. (3) an interactivity: inert; declaration which you can apply within an animation-timeline such that off-screen parts of the carousel are not interactive. All this seems extremely experimental but I’m here for it.* Hide a header when scrolling down, show it again when scrolling up by Bramus Van Damme — With scroll-driven animations, you can “detect” if a page is being scrolled up or down, and in this case set the value of custom properties based on that information. Then with
style() queries, set other styles, like hiding or showing a header. The big trick here is persisting the styles even when not scrolling, which involves an infinite transition-delay. This is the magic that keeps the header hidden until you scroll back up.* Center Items in First Row with CSS Grid by Ryan Mulligan — When you’re using CSS Grid, for the most part, you set up grid lines and place items exactly along those grid lines. That’s why it’s weird to see “staggered” looking layouts, which is what it looks like when one row of items doesn’t line up exactly with the one below it. But if you just make twice as many columns as you need and offset by one when you need to, you’ve got this kind of control. The trick is figuring out when.
📚 New Code
🔖 Features:
✅ Glowing Neon Effect
✅ Smooth Color Transition
✅ Customizable Text & Colors
✅ Pure CSS Animation
🔖 Code:
🔥 Experience the magic!
Subscribe to @Html_codee for more amazing web effects! 🚀
🔖 Features:
✅ Glowing Neon Effect
✅ Smooth Color Transition
✅ Customizable Text & Colors
✅ Pure CSS Animation
🔖 Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Text Effect</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: black;
overflow: hidden;
}
h1 {
font-size: 4rem;
font-weight: bold;
color: #fff;
text-transform: uppercase;
position: relative;
animation: glow 3s infinite alternate;
}
@keyframes glow {
0% {
text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff4500;
}
50% {
text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 40px #00ff99;
}
100% {
text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 40px #0099ff;
}
}
</style>
</head>
<body>
<h1>Html_codee</h1>
</body>
</html>
🔥 Experience the magic!
Subscribe to @Html_codee for more amazing web effects! 🚀
Which tag is used to create a list with bullets?
Anonymous Quiz
40%
<ul>
40%
<ol>
20%
<li>
0%
<list>
👍2
Wrote this code last night like a genius…
Reading it today like: 'Who wrote this garbage?'
#ProgrammerLife #CodeStruggles #Relatable
Reading it today like: 'Who wrote this garbage?'
#ProgrammerLife #CodeStruggles #Relatable
When it comes to using colors in code, there are several contexts in which you might need to define or manipulate colors. Below are a few common areas where colors are often utilized:
📚 1. HTML/CSS Colors
In web development, you can use colors in your CSS styles. Colors can be defined in multiple formats:
⦁ Hexadecimal:
⦁ RGB:
⦁ HSL:
⦁ Named colors:
📚 2. Python (using matplotlib)
In Python, you can define colors using libraries like
📚 3. Java (using AWT/Swing)
In Java, you can create colors using the
📚 4. JavaScript
In JavaScript, you can manipulate the DOM or draw on a canvas with colors.
📚 5. Color Libraries
⦁ Python: Libraries like
⦁ JavaScript:
📚 6. Color Converters
Using libraries can also help you manipulate colors:
⦁ Python Example: Using
⦁ JavaScript Example: Using
📚 7. Attribute Colors in UI Frameworks
⦁ React Native allows you to set color properties on components:
📚 1. HTML/CSS Colors
In web development, you can use colors in your CSS styles. Colors can be defined in multiple formats:
⦁ Hexadecimal:
#RRGGBB .example {
background-color: #FF5733; /* bright red */
}
⦁ RGB:
rgb(R, G, B) .example {
color: rgb(255, 87, 51); /* bright red */
}
⦁ HSL:
hsl(H, S%, L%) .example {
border-color: hsl(12, 100%, 60%); /* bright red */
}
⦁ Named colors:
.example {
color: red; /* named color */
}
📚 2. Python (using matplotlib)
In Python, you can define colors using libraries like
matplotlib.import matplotlib.pyplot as plt
# Using RGB tuples
plt.plot([1, 2, 3], [1, 4, 9], color=(1, 0, 0)) # Red
# Using named colors
plt.plot([1, 2, 3], [1, 2, 3], color='blue') # Blue
plt.show()
📚 3. Java (using AWT/Swing)
In Java, you can create colors using the
Color class.import java.awt.Color;
Color red = new Color(255, 0, 0); // RGB
Color blue = Color.BLUE; // Named constant
📚 4. JavaScript
In JavaScript, you can manipulate the DOM or draw on a canvas with colors.
// Changing the background color of an element
document.body.style.backgroundColor = "#FF5733";
// Canvas example
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = 'rgba(255, 87, 51, 0.5)'; // RGBA
context.fillRect(10, 10, 150, 100);
📚 5. Color Libraries
⦁ Python: Libraries like
Pillow for image processing allows colors to be defined in different formats.⦁ JavaScript:
Chroma.js or Color.js libraries allow for advanced color manipulations.📚 6. Color Converters
Using libraries can also help you manipulate colors:
⦁ Python Example: Using
colorsysimport colorsys
# Convert RGB to HLS
r, g, b = 1.0, 0.5, 0.0 # example RGB
h, l, s = colorsys.rgb_to_hls(r, g, b)
⦁ JavaScript Example: Using
TinyColor const color = tinycolor("red");
console.log(color.toHexString()); // Outputs #ff0000
📚 7. Attribute Colors in UI Frameworks
⦁ React Native allows you to set color properties on components:
<View style={{ backgroundColor: 'skyblue' }} />