tixie , to Random stuff
@tixie@guerilla.studio avatar
cobweb , to Random stuff
@cobweb@corteximplant.com avatar

How are ya'll users doing images? I kind of want to add that to my daily thing but hmm. Surely there's a plugin for that?

secupriv ,
@secupriv@mastodon.nl avatar

@cobweb I am curious too. By default you can set a size like this ![[image.png|pixels]]

Aligning an can be done using a like below and embed it like this ![[image.png#center|300]] but it’s a hassle to edit text along side the image when not in source mode.

divsrc$="["] {
text-align:left;
}

divsrc$="["] {
text-align:center;
}

divsrc$="["] {
float:right;
}

A better solution would be great!

@obsidianmd

spaceninja , to Random stuff
@spaceninja@mastodon.cloud avatar

isn’t real, they have played us for absolute fools https://cssisntreal.com

css , to Random stuff
@css@front-end.social avatar

💡 CSS Tip!

How much code is needed to create a Sparkle shape? ✨
Only one gradient and you can easily get the border-only variation.

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

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

Two sparkle shapes. The second one is a border-only variation.

pawelgrzybek , to Random stuff
@pawelgrzybek@mastodon.social avatar

This is absolutely nuts! Great article that I learned tons from.


https://vis.social/@yuanchuan/112386578533795188

css , to Random stuff
@css@front-end.social avatar

💡CSS Tip!

Using the new relative color syntax, you can easily extract the R,G,B channels of any color and use them as separate colors.

Useful when you want to do some color manipulation.

Online Version: https://css-tip.com/rgb-channels/

#CSS #HTML

youronlyone , to Asia
@youronlyone@c.im avatar

I. HTML Ruby

II. CSS Ruby

J12t , to Random stuff
@J12t@social.coop avatar
phillip , to Random stuff
@phillip@social.tchncs.de avatar

With the popover API available in all browsers for a while now, we can easily build entirely accessible, even animated popovers for all use cases just with HTML and CSS. As an example I have created a codepen with a simple search button that opens a search field.
https://codepen.io/philliproth/pen/OJYLyMp

OddBird , to Random stuff
@OddBird@front-end.social avatar

3 days until the @eleventy's International Symposium on Making Web Sites Real Good!

@mia will be there doing a quick dive into the origins of the web, and in particular—the design constraints, and the range of strange proposals, and how we got where we are.

https://conf.11ty.dev/

vantablack , to Random stuff
@vantablack@cyberpunk.lol avatar

FUN FACT: you can use emojis as favicons!!!

just do this

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🖤</text></svg>"><br></br>

phranck , to Random stuff German
@phranck@chaos.social avatar

Hat hier jemand Ahnung von ? Weil, ich bin zu bloed dafuer... 🙄

Ich baue mir mit grad was Neues, und hab da schon etwas dran herumgefingert, aber es will nicht so, wie ich das will.

Originalzustand ist, dass die beiden Haelften gleich breit sind. Ausser auf Mobile-Devices, da gibt es nur eine Spalte.

Ich will aber, dass die bei breitem Viewport immer 35%/65% haben.

Wie geht dem?
Zu Hülf... 🙏

https://layered.work

scottjenson , to Random stuff
@scottjenson@social.coop avatar

challenge!

<body>
<div class="container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item hidden">item 4</div>
</div>
</body>

where .hidden { display: none }

Question: Can I use item:last-child {} to stylize item 3?

Apparently :last-child targets the last child in the DOM, not the last visible child. (this means hidden item 4 is styled.

Is there any way to do this using only CSS?

aeischeid , to Random stuff
@aeischeid@mastodon.social avatar

Over the weekend I applied this neat little CSS trick for implementing color change effect on the pagination component of my blog. One little CSS rule solves it for both light and dark themes!

pagination component screenshot - light theme
CSS code li:hover { filter: hue-rotate(90deg); }

css , to Random stuff
@css@front-end.social avatar

💡 CSS Tip!

Use modern CSS to add a status indicator to your avatar using less than 10 CSS declarations and without extra elements.
✅ Only the image element
✅ No pseudo-element
✅ Transparent gap
✅ Optimized with CSS variables

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

Online Version: https://css-tip.com/status-indicator/

three rounded images with a status indicator at the bottom right

css OP ,
@css@front-end.social avatar

We can easily change the position of the indicator by rearranging the margin/padding values.

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

four images with status indicator

collinsworth , to Random stuff
@collinsworth@hachyderm.io avatar

The question of whether CSS is a programming language serves only one purpose: to demote those who write it.

There is no confusion that needs to be clarified, and no other purpose in asking, beyond the most trivial kind of pedantry.

The debate itself is an act of gatekeeping, whether intentional or not. Its only significant effect is to elevate some work over other work, despite their essentially identical nature.

The only meaningful function of the question is segregation.

hastur , to Random stuff Swedish
@hastur@hackers.town avatar

Some webpages don't do the whole "Firefox readable" thing, is there a way to overlay pages with a local .css/js solution?

EU_Commission , (edited ) to Random stuff
@EU_Commission@social.network.europa.eu avatar

We are a Union of 27 countries and 450 million people sharing one future.

Diversity is what defines, unites us.
Diversity is also what makes us love the fediverse.

As we mark two years on Mastodon, thank you for enlivening the conversation with insightful comments and content.

Love does not increase after the first day, but it deepens.

Let's make this journey even more engaging!

What topics did you like the most and would like to see more often 👇

helma ,
@helma@mastodon.social avatar

@EU_Commission Well, the topic I disliked the most is your plan to compromise the online safety, security and privacy of all 450 million Europeans with the plans to scan their devices. In addition, you are not open and transparent enough about these plans, as most of those 450 million do not know you are working on this. You know it does not work and that is in violation with human rights, yet you keep pushing. Why?

CSSence , to Random stuff
@CSSence@mas.to avatar

Launching two blog posts on the same day is not what I usually do. Yesterday has been an exception, but at least I delayed the announcement of this one: For those who haven’t read it already, …

… this is level 8 of
»Six levels of dark mode«
https://cssence.com/2024/color-scheme-switcher/

css , to Random stuff
@css@front-end.social avatar

💡 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/

three star shapes

css OP ,
@css@front-end.social avatar

The difference between the versions is that the first and second ones consider the inscribed circle of a square to draw the different points while the third one considers the smallest rectangle that can contain the star shape.

nachtfunke , to Random stuff
@nachtfunke@indieweb.social avatar

I'm sorry for saying this, but I am so disappointed in working with non-inline-size container queries. I have not had a single instance in which they behave as expected.

I understand why it is, but let's say for example, you have a footer-type thing, an action bar with buttons, that you want to position fixed when an element exceeds a certain height. If I slap on container-type: size; it will immediately collapse the entire thing, making all of it entirely useless.

vanilla , to Random stuff
@vanilla@social.spicyweb.dev avatar

Unpopular (maybe?) opinion:

The way to get better at & isn't to build complex web applications with frontend frameworks. The way to get better at HTML & CSS is to write content with HTML & CSS.

  • Build a blog.
  • Build a landing page.
  • Build a report.
  • Build a portfolio.
  • Build lists.

Most web applications are simply content + forms in a fancy UI trench coat. 😅 They just tend to be far more "componetized" — making it much harder to grok the underlying semantics at first.

css , to Random stuff
@css@front-end.social avatar

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.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • Mordhau
  • WatchParties
  • Rutgers
  • loren
  • Lexington
  • cragsand
  • mead
  • RetroGamingNetwork
  • mauerstrassenwetten
  • MidnightClan
  • xyz
  • PowerRangers
  • AnarchoCapitalism
  • kamenrider
  • supersentai
  • itdept
  • neondivide
  • AgeRegression
  • Teensy
  • WarhammerFantasy
  • space_engine
  • learnviet
  • bjj
  • electropalaeography
  • steinbach
  • khanate
  • jeremy
  • fandic
  • All magazines