TypeTheAlphabet.Online

I just created a fun and simple web app called TypeTheAlphabet! 🎉 The challenge is simple: type A to Z as fast as you can, record your best time, and see if your friends can beat it! 🕒🔥.

Give it a try and let me know your best time! 🖱️⌨️

Feedback are always welcome!🫡

P.S. App Idea Inspired from Matt Ramos

Hi everyone! I'm looking for a school that offers Grade 11 CSS. Currently enrolled in GJCSHS and their teacher for this subject SUCKS, so I'm looking for a school that is known for great teaching preferably public school. Thankyou!

Hello! I made a section of pictures and text in a column so that the picture was on top, but the text climbed onto another section, it should have just made an indent, possibly beyond the position, but it is necessary.

https://preview.redd.it/awk2gturqq4e1.png?width=1919&format=png&auto=webp&s=df0fd34dfdb7dd6600eeac7e5d1f5206cc4dae94

but i want it so when i hover over a box the color doesnt dissapear and so that the left over space gets filled with background color of the box i hover over.

body {

margin: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: #f4f4f4;

}

.container {

display: flex;

width: 1000px;

height: 300px;

position: relative;

}

.box {

flex: 1;

position: relative;

background: #ddd;

transition: all 0.3s ease;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

color: white;

font-size: 24px;

font-weight: bold;

opacity: 1;

z-index: 0;

}

/* Box-specific colors */

.box1 { background: #3498db; }

.box2 { background: #2ecc71; }

.box3 { background: #e74c3c; }

.box4 { background: #f1c40f; }

.box5 { background: #8e44ad; }

/* Hover effect: The hovered box fills out the space */

.box:hover {

flex-grow: 3;

z-index: 1;

opacity: 1;

background-color: inherit;

}

/* The boxes before the hovered box will disappear */

.box:hover ~ .box,

.box:hover ~ .box ~ .box,

.box:hover ~ .box ~ .box ~ .box {

opacity: 0;

}

/* The boxes to the left of the hovered box disappear,

and the hovered box will show its background color */

.box:hover {

background-color: inherit;

color: white;

}

/* Add a small gap between the boxes */

.box + .box {

margin-left: -1px;

}

/* Dynamic behavior for the last box */

.container .box:last-child:hover {

opacity: 1;

}

At this purposely ugly website, we're using graphics for the vertical tabs which are 83px wide. However, the tabs are cutting out the bevel on the closed tabs. When a tab is open you can see the bevel. All graphics are background images except the 2nd home button/tab. Any ideas how to make the bevel show on all tabs regardless of open/close state?

Edit: JS Fiddle: https://jsfiddle.net/qut3b9ks/

Hi!
I have a container element with overflow-y: auto that I continuously fill with message elements (like a log).
But currently user have to manually scroll down every time the new entry is added. How do you implement autoscroll to the bottom?

I want to achieve the following:

https://preview.redd.it/7d14oplhtm4e1.png?width=524&format=png&auto=webp&s=8c754f13a7aa63f7f56d3f122bb4bb211a461989

I have a popup with information about a profile. In this popup, a banner graphic will appear at the top. This can be changed by the user, so different banners are displayed. Now I want this profile popup to have a notch at the top and ideally a part of the banner graphic can be seen in this notch or alternatively the notch at this point has a color that matches the color of the banner in the area. How can something like this be realized? Or is that not possible?

Hello, I am trying to create a page where I would like four images per row. When I try to create this it keeps bringing a single column of pictures that are quite large on the screen. This is my code below

html

	<div class="item">

		<img src="../images/cb/cb0.avif" alt="Item 1"

	</div>

	<div class="item">

		<img src="../images/cb/cb1.avif" alt="Item 2"

	</div>

	<div class="item">

		<img src="../images/cb/cb2.avif" alt="Item 3"

	</div>

	<div class="item">

		<img src="../images/cb/cb3.avif" alt="Item 4"

	</div>

	<div class="item">

		<img src="../images/cb/cb4.avif" alt="Item 5"

	</div>

	<div class="item">

		<img src="../images/cb/cb5.avif" alt="Item 6"

	</div>

	<div class="item">

		<img src="../images/cb/cb6.avif" alt="Item 7"

	</div>

	<div class="item">

		<img src="../images/cb/cb7.avif" alt="Item 8"

	</div>

css

/* Flexbox Layout for New Arrivals Content */

#new-arrivals-content {

display: flex;

align-items: center;

gap: 10px;

justify-content: center;

padding: 20px;

margin-top: 120px;

}

.item img {

max-width: 100%;

height: auto;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

transition: transform 0.3s ease;

}

.item img:hover {

transform: scale(1.05);

transition: transform 0.3s ease;

}

/* Responsive Design */

u/media screen and (max-width: 768px) {

.item {

width: 100%; /* 2 items per row on medium-sized screens */

}

}

u/media (max-width: 480px) {

.item {

width: 48%; /* 1 item per row on smaller screens */

}

}

so im trying to make an color wheel, but i seem to have issues with the smooth color change. the wheel consists of 5 72deg parts. i like how each part has a noticable "wall" between them, but i wish the rainbow and black-red one could transition smoothly between theire own distinct colours

was thinking of maybe using linear-gradient for rainbow and black-red one, but found out that u cant put linear within conic. i dont know what to do there. this is how it currently looks like, and its ugly.

https://preview.redd.it/6vsrpo3bqk4e1.png?width=277&format=png&auto=webp&s=32fdd95c97d3bfe1ccf2b38ff603df5966f83401

#color-wheel {
    width: 250px;
    height: 250px;
    background: conic-gradient(
        #f7a8b8 0deg 72deg,           /* Spirit Blossom Pink */

        /* Black and Red Gradient (72deg to 144deg) */
        #2f2f2f 72deg 80deg,          /* Black */
        #4b0082 80deg 90deg,          /* Voided Purple to ease the transition */
        #8b0000 90deg 144deg,         /* Deep Red */

        /* Rainbow Gradient (144deg to 216deg) */
        #4b0082 144deg 150deg,        /* Start of Rainbow: Voided Purple */
        #ff6347 150deg 160deg,        /* Rainbow Orange */
        #ffeb3b 160deg 170deg,        /* Rainbow Yellow */
        #32cd32 170deg 180deg,        /* Rainbow Green */
        #00bcd4 180deg 190deg,        /* Rainbow Blue */
        #ff6347 190deg 200deg,        /* Rainbow Orange transition */
        #ffeb3b 200deg 210deg,        /* Rainbow Yellow transition */
        #32cd32 210deg 216deg,        /* Rainbow Green transition */
        
        /* Normal Gradient (216deg to 360deg) */
        #d1e7f2 216deg 288deg,        /* Light Blue */
        #4b0082 288deg 360deg         /* Voided Purple */
    );
    border-radius: 50%;
    transition: transform 0.5s ease;
}

im trying to make a simmple wave go from one corner of the screen to the other, and i wanted to add randomness to the keyframe speed, but no matter what i do, it just wont change its speed.

const randomSpeeds = [ 
    Math.random() * (18 - 4) + 4, 
    Math.random() * (18 - 4) + 4, 
    Math.random() * (18 - 4) + 4, 
    Math.random() * (18 - 4) + 4, 
    Math.random() * (18 - 4) + 4 
];

const keyframes = `
    keyframes wave-flow { 
        0% { background-position: 0% 0%; animation-duration: ${randomSpeeds[0]}s; } 
        25% { background-position: 100% 100%; animation-duration: ${randomSpeeds[1]}s; } 
        50% { background-position: 0% 100%; animation-duration: ${randomSpeeds[2]}s; } 
        75% { background-position: 100% 0%; animation-duration: ${randomSpeeds[3]}s; } 
        100% { background-position: 0% 0%; animation-duration: ${randomSpeeds[4]}s; } } 
`;

Hi all, I'm trying to make a sidebar on a variable height div with 2 elements inside that have rotated text in them, 1 at the top of the div and 1 at the bottom. Here's a fiddle of it almost working:

https://jsfiddle.net/subL9ed0/

The containers are all variable height so I just put some random heights inline to show when it works or not. I think the main issue is there doesn't seem to be a way to fill the .inner div to the height of the .container, if I do width:100%; it gets smaller than it is now so I just set it to a height that works for the first div, but not the second (I won't know the height of each box in css during run time anyway, so technically the first is wrong too). I was thinking of just adding javascript to set the width of the each .inner div to the height of the parent but it seems like a really bad solution. Does anyone know how to do this in css only?

heres what i have:

style

#div: hover img { transition: 0.50s; opacity: 0.3; }

#div img:hover { opacity: 1; }

HOWEVER i would like bird1 to be a lower opacity, but only after it has switched to bird2. Does that make sense? any help is appreciated <3

I'm trying to do a modification to FireFox although there is one issue; when I enable compact mode since my address bar is at the bottom of the browser it breaks ?

I am not a new dev but new to the field of web dev. So I was creating a new app and I started using primeVue ( vue js lib ) for components. Is this a good idea? Or should I create things like toast and dialogs from scratch? Do real world projects use all these?

Thanks for taking your time to reply

scroll-driven animations. Similar to how time-based animations work on the platform, you can now use a scroller's scroll progress to start, pause, and reverse an animation. So as you scroll forward, you'll see that animation progress, and when scrolling backward it'll go the other way around. This

https://developer.chrome.com/blog/new-in-web-ui-io-2024#scroll-driven-animation-visual

https://codepen.io/simeydotme/pen/abYWJdX

I have a neocities I've been making for school (granted, I am not going to school for web dev and have very little experience in it), and it seems like the website works great on my singular instance of Brave Browser. The issue seems to be with literally any other browser, even a separate instance of Brave on my laptop doesn't display the same.

What I'm attempting to do is have a music player at the top of my screen that doesn't use the standard webkit or moz appearances--hence why I'm styling it with CSS. It looks great on my instance and is exactly what I want it to be, but it seems like every other instance is being replaced with "user agent stylesheet" because the ::webkit pseudo-elements aren't functioning properly. I will provide all the relevant code and screenshots if someone is willing to help out.

Here's what I've tried:
- Using a CSS reset
- Using a CSS normalize
- Using the !important tag to make sure it takes precedent
- Using specificity like body, html, and #musicplayer
- Overwriting the default stylings through developer tools
- Checked for overwritten lines using dev tools (which has shown very different results across browsers)

Please, I've hit a brick wall and I'm really not sure where to go with it.

Here is what it looks like when it's working properly, I know it's not the prettiest thing but I like it.

Here is what it looks like in all other instances. All the things requiring webkit don't work now (controls, range slider, range thumb).

https://preview.redd.it/b5avvre1rc4e1.png?width=1914&format=png&auto=webp&s=3247f86e8be10d938ca8f9d08f4b87a7556539cb

https://preview.redd.it/t69m04d8rc4e1.png?width=643&format=png&auto=webp&s=0f970ba25549f9f0268aa37d144a9895a1ae3cd6

The application loading section is not centered, what I showed in blue for some reason is not the full width, I need the section to be centered on the screen, it is centered on the HTML file, but the HTML file does not take up the full width of the screen.

I have started a YT series on front end web development for beginners and i uploaded a video on how you can create animations using pure css (vanilla). For creating animations you basically use keyframes rule. Inside this keyframes rule you can again use from{}to{} or you can use % to select a particular slot of time and apply styling at that point of time. In the video I have created a simple loading animation where a circle will rotate endlessly. If you a beginner and just getting started in front-end maybe watch the video. The series will be helpful.
Here is the link for it (for the video):
https://youtu.be/tiX0J6OfNvY

Hello folks,

I thought I'm trying something very easy, but I feel somehow stuck. My layout has 4 box elements header, nav, main, footer. My goal is to have header and main below each other and nav right besides header and nav and below the nav the footer. The nav box has to be bigger than the header and footer can take the rest space but should not be longer than main.

You can find my approach further blow. It looks okay but when the layout becomes smaller the text in the footer pushes itself out of the footer box. How could I make this layout better that the layout can be contained, but the height of each box is more responsive?

Cheers!

My HTML starts like this:

<div class="holder">
<header>
    <h1>Header1</h1>
</header>

<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</nav>

<main>
    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil, minima repellat qui minus iure 
        accusamus delectus veniam eligendi cumque ea aperiam, doloribus, modi perspiciatis in?
    </p>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aperiam quos voluptate neque 
        molestias dolores!
    </p>
</main>

<footer>
<p>
    orem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur similique neque atque quisquam? 
    Inventore, tempore illo. Ratione eos incidunt, voluptatum fugiat quam accusantium quia soluta, quasi 
    aperiam nesciunt temporibus nam.
</p>
</footer>

</div>

My css approach:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: lightgray;

}

.holder {
    display: flex;
    flex-flow: column wrap;
    min-width: 20rem;
    max-width: 60rem;
    height: 22rem;

    
}

.holder > header, nav, main, footer{
   padding: 0.5rem;

}

header {
    order: 0;
    background-color: lightgreen;
    height: 15%;
    width: 75%;


}

nav {
    order: 2;
    background-color: lightblue;
    height: 35%;
    width: 25%;

}

nav ul {
    list-style-type: none;
}

nav a {
    text-decoration: none;
}

main {
    order: 1;
    background-color: lightgreen;
    height: 85%;
    width: 75%;

}

main p {
    padding-bottom: 0.8rem;
}

footer {
    order: 2;
    background-color: yellow;
    height: 65%;
    width: 25%;
}

I texted my friend abt learning flex and his reply made me chuckle

Hi. I'm trying to get my details element to have a different list icon when expanded, but it's not working, I still get the default icon.

Here's my code:

details[open] > summary {list-style-image:url('close-button.svg');}

What am I doing wrong? Thanks for your help.

UPDATE: So, after trying the above, I tried

details[open] > summary::marker {list-style-image: url("close.gif");}

& it still doesn't work. For reference, I'm using the safari browser on iPhone SE 2nd Gen in the latest version of iOS 18.

Can someone help me with this? Thank you

hey guys,

i want to know how to do this kind of card i have tried clip-path css but not what i wanted since i cant round the clip-path

edit : added an exemple ^^

https://preview.redd.it/bi9jwt7xy74e1.png?width=1486&format=png&auto=webp&s=ab38d64b124597a10f411a229daadcddf4d61e22

Context: I'm making some tampermonkey userscripts for my personal use. (Nothing complicated, just a few helpers and hotkeys.) Today I wanted to add an overlay with some custom UI to the page (again, nothing complicated, just a few inputs and buttons for a few custom settings).

So I thought "hey, there should be some minimalist CSS framework out there, to give me some basic styling for inputs and switches and buttons out of the box, that I could load from a CDN". One important restriction though: it should not apply any global styles, and all its classes should have prefixes to avoid interfering with the page I'm trying to modify.

I thought I'll find something relatively quickly, but everything I've tried so far, even the most lightweight frameworks like Pico CSS, add some reset styles to the global namespace (using selectors like `*, ::after, ::before`). At this point I'm ready to give up - it's easier to just go without any styling for my controls. (I know I could probably customize Tailwind to do what I need, but honestly it's just too much effort for my purpose.)

But maybe somebody knows of a framework that does what I need?