css

css, 1 month ago to SEO

#SEO / #a11y #accessibility question:

Suppose I have a home page and its content is nothing but different blocks (image + text) that link to internal pages. Does that count as a navigation and I have to use the <nav> element or It counts as the main content and a simple <ul> listing is enough?

css, 1 month ago to CSS

In case you missed it, my CSS Generators website counts no less than 10 online generators. Section divider, gradient shadows, custom border, custom corners, and more!

👉 https://css-generators.com 👈

Get an optimized code with modern CSS in no time!

#CSS #HTML

Showing the banners of the different generator websites.

pixelambacht, 1 month ago to music

Please help me find this song!

I think it's a relatively new/modern song. It sounded funk/soul-y to me, but it's far out of my usual noisy music circle.

It's upbeat, heard it a few times in a hip hotel lounge. I googled it then, I think it was by a black artist.

Title is something with fire, or burning, or burning up?

#music

css, 1 month ago to CSS

💡 CSS Tip!

Use modern CSS to create a fancy Zig-Zag border around images using a few lines of code.
✅ Only one element (the image tag)
✅ No pseudo-element
✅ Optimized with CSS variables
⚠️ Not suitable for touch screen (the sharp edges may hurt you)

Demo: https://codepen.io/t_afif/full/OJGBvmp via :codepen: @codepen

Online Version: https://css-tip.com/zig-zag-box/

#CSS #HTML

Two images with zig-zag borders

css, 1 month ago to CSS

💡 CSS Tip!

Create a ⭐️ Star shape using clip-path and only 5 points (instead of 10).

Three different codes to create the same shape
1⃣ Precise version using math
2⃣ Calculated version without math
3⃣ Simplified version with easier coordinates values

Demo: https://codepen.io/t_afif/full/jORvmKG via :codepen: @codepen

Online Version: https://css-tip.com/star-shape/

#CSS #HTML

three star shapes

css, 1 month ago to CSS

Do you want to get started with creating CSS Shapes? Check my latest article @Verpex

https://verpex.com/blog/website-tips/css-tricks-to-master-the-clip-path-property

A beginner-friendly tutorial to start using the clip-path polygon() with a few tricks to help you create shapes faster and easier.

I should have written this since a while but it's never too later.

#CSS #HTML

GoOz, 1 month ago to CSS French

I tried to get my head around this for an hour but we still can't have in #CSS only a dynamic text with a dynamic font-size so that whatever the string I'm using the text will always be perfectly fitting its container’s width, right?

css, 1 month ago to CSS

Another article and another single element experimentation using images!

Check my latest article @smashingmag

https://smashingmagazine.com/2024/04/sliding-3d-image-frames-css/

A lot of cool CSS Tricks to create a fancy reveal animation 👇

#CSS #HTML

A fancy hover effect to reveal image inside a 3D box

css, 1 month ago to webdev

💡CSS Tip!

Use modern CSS to cut the corner of an image with a pixelated effect because why not!
✅ Only one element (the image tag)
✅ Only 4 properties
✅ Optimized with CSS variables

Demo: https://codepen.io/t_afif/full/NWmzxQj via :codepen: @codepen

Online Version: https://css-tip.com/pixelated-corner/

#HTML #CSS

Two image with cut corners

amber, 2 months ago to CSS

Dear #CSS gods,

please let us specify object-position x and y separately in future. This sucks:

simevidas, 2 months ago to random

How do I push the outline to the right so that it doesn’t go over the image? I know there exists a CSS declaration for this, but I forgot what it is.

https://jsbin.com/deyugur/edit?html,css,output

edit: Just to make sure that I don’t get any clear: left answers, the clear property pushes the list below the image. That’s not what I want.

Meyerweb, 2 months ago to CSS

A #CSS thing I did today:

--inset: transparent 0.67rem, black 0.5rem;  
mask:  
 linear-gradient(45deg, var(--inset)),  
 linear-gradient(135deg, var(--inset)),  
 linear-gradient(225deg, var(--inset)),  
 linear-gradient(315deg, var(--inset))  
;  
mask-composite: intersect;  

(Note: does not play particularly well with borders, outlines, or drop shadows.)

The reason I did this instead of clip-path is to angle-snip the corners off elements of any size or aspect ratio. A small thing, but I like it.

css, 2 months ago (edited 2 months ago) to CSS

💡 CSS Tip!

Use modern CSS to create those famous rounded tabs with inner curves.
✅ No extra element & No pseudo-element
✅ Less than 10 CSS declarations to get the three variations
✅ One variable to control the curvature
✅ Works with gradient coloration

Demo: https://codepen.io/t_afif/pen/JjVpPmr via :codepen: @codepen

Online Version: https://css-tip.com/rounded-tab/

#CSS #HTML

css, 2 months ago to CSS

💡 CSS Tip!

Use the round() function and create a fluid typography with a discrete function instead of a continuous one.

Define the step and get precise values within a specific range. Very useful if you have some calculation based on the font-size like using the em unit. No more rounding issue!

Demo: https://codepen.io/t_afif/pen/RwOxLNQ via :codepen: @codepen

Online Version: https://css-tip.com/fluid-typography/

#CSS #HTML

css, 4 months ago to CSS

The triangle🔺 is probably the most popular CSS shape and I still see old and obsolete methods to create it.

⚠️ STOP DOING THIS ⚠️

Here is a collection of CSS-only triangles made with modern CSS:

👉 https://css-generators.com/triangle-shapes/

✅ Only one element
✅ Optimized code with no magic numbers
✅ Border-only & rounded corners variations

#CSS #HTML

Showing the triangle shapes collection from the provided links