Skip to main content

Search

Items tagged with: Web

RE: mastodon.social/@anatudor/1106…

Nowadays, we can do better:

```
box-shadow: 0 1px 2px
rgb(from currentcolor r g b/ .65)
```

Cross-browser since September 2024.

#tinyCSStip #CSS #code #coding #frontend #web #dev #webDev #webDevelopment


Ana Tudor 🐯 (@anatudor@mastodon.social)

Attached: 1 image #tinyCSStip Want the shadow of an element or some other visual to be a semitransparent version of the `currentColor`? Use `color-mix()`! Cross-browser, btw. 😼 #css #coding #frontend #webDev #webDevelopment
Ana Tudor 🐯 (Mastodon)
#dev #web #webdev #code #css #coding #frontend #webdevelopment #tinyCSStip

I am begging you, please don't split your heading into two separate `h2` elements with an `img` in between just to have the image in between your heading words.

This is what subgrid was made for!

#CSS #layout #cssLayout #code #coding #web #dev #webDev #webDevelopment

HTML: ``` <!-- ❌ DON'T DO THIS 🚫 --> <section> <h2>Classic</h2> <img src='classic-bar.png' alt=''/> <h2>Flavour</h2> </section> <!-- ✅ DO THIS ✅ --> <section> <h2> <span>Classic</span> <span>Flavour</span> </h2> <img src='classic-bar.png' alt='the classic chocolate bar'/> </section> ``` CSS: ``` section, h2 { display: grid } section { grid-template-rows: repeat(3, auto) } h2 { grid-area: 1/ 1/ span 3; grid-template-rows: subgrid; span:last-child { grid-row: 3 } } img { grid-area: 2/ 1 } ```
#dev #web #webdev #code #css #coding #webdevelopment #csslayout #layout

I tried a few and they all sounded like alt-rock band names 😄

#css #color #html #web

#web #html #css #color

⇧