Programador e pescador
São Paulo - SP
Joined March 2014
- Tweets561
- Following164
- Followers24
- Likes723
Rafael Almeida retweeted
2025 ultimate UI/UX typeface cheat sheet:
Boska
Switzer
Satoshi
Cabinet
Supreme
General Sans
Space Grotesk
Inter
Manrope
Mulish
Poppins
Mont
Lato
Nunito
Rubik
Work Sans
Quicksand
Fira Sans
Source Sans Pro
Raleway
Roboto
Oswald
Exo 2
Encode Sans
Neue Haas Grotesk
Avenir Next
Proxima Nova
Open Sans
Muli
Merriweather Sans
Akkurat
DIN Next Pro
Gotham
Museo Sans
Univers
Brandon Grotesque
Gibson
Klavika
Montserrat
Clear Sans
Dosis
Bree Serif
Jost
Barlow
Libre Franklin
Hind
Ubuntu
Titillium Web
Playfair Display
Varela Round
Rafael Almeida retweeted
14. Listmonk - Email Marketing
Open Source Alternative to: Mailchimp
Listmonk is a self-hosted newsletter and email campaign manager designed for high-performance and bulk email marketing.
It enhances productivity by providing a fast and scalable email marketing solution with rich analytics and segmentation features.
👩💻 Github link: github.com/knadh/listmonk
⭐ Github stars: 14.9K
💻 Website link: listmonk.app
Rafael Almeida retweeted
Here's the blueprint for high-converting Shopify Product Pages
Bookmark this...
Rafael Almeida retweeted
High-Converting Homepage for Shopify Brands
Steal this and watch your conversions soar...
Rafael Almeida retweeted
CSS custom props and scroll animation for staggered effects 🤙
h2 {
animation: show;
animation-timeline: view();
}
.char {
translate: 0 calc((1 - var(--s)) * 1lh);
transition: translate 0.5s
calc(sin(var(--i) / var(--t) * 45deg) * 0.5s);
}
@keyframes show { to { --s: 1; }}
Rafael Almeida retweeted
Use CSS View Transitions for progressively enhanced theme-switching 😎
::view-transition-new(root) {
animation: reveal;
clip-path: inset(0 0 0 0);
}
keyframes reveal {0% { clip-path: inset(100% 0 0 0);}}
Can even scrub/debug with DevTools 👇
Safari 18.0 is here!! Lots of new web technology, including CSS View Transitions, Style Queries, immersive WebXR, plus updates for Web Apps, JavaScript, Web API, Media, Web Inspector, Passkeys and more — 53 features, 25 deprecations & 209 resolved issues.
webkit.org/blog/15865/webkit…
Rafael Almeida retweeted
🔗 Alternatives to Using Pure Black (#000000) for Text and Backgrounds
uxplanet.org/alternatives-to…
#a11y #design
ALT A grid of colors provided as alternatives for using pure black (#000000) on websites. HEX values for colors are provided in the article.
Rafael Almeida retweeted
Or use this CSS:
```
.log {
scroll-snap-type: y proximity;
align-content: end;
}
.log::after {
display: block;
content: "";
scroll-snap-align: end;
}
```
“… remains snapped to the bottom …unless the user has scrolled away from that edge” — drafts.csswg.org/css-scroll-…
Rafael Almeida retweeted
CSS Tip 💡
Do you know we can easily change the number representation of an ordered list? 🤩👇
ALT <ol> has an implicit counter named list-item, which automatically gets incremented for each <li> element.. By using ::marker pseudo-selector and list-item counter, we can change the style of the number representation of an ordered list. CSS Code: ol li::marker { content: "(" counter(list-item) ")"; color: deeppink; }
Rafael Almeida retweeted
You can create CSS-only scroll indicators without new APIs 🤙
.scroller {
background: var(--cover) local, var(--shadow) scroll;
}
background-attachment: local makes a background scroll with its content. Use that to cover a shadow ⭐️
Neat little trick! 🫶
CSS Tip! ✨
You can use background-attachment to fix backgrounds to the viewport 🤙
card {
background:radial-gradient(circle at var(--x) var(--y), ...);
background-attachment:fixed;
}
JS to get the cursor position but use the same bg for a spotlight 🔦
@CodePen link below 👇
Rafael Almeida retweeted
¿Quieres aplicar un efecto de neón a tus textos?
→ Solo necesitas HTML para agregar `data-text` y CSS para dar estilo al efecto.
→ Este atributo permite añadir contenido adicional al elemento, ideal para efectos visuales.
codepen.io/carmenansio/pen/X…
Rafael Almeida retweeted
CSS scroll to unblur text ✨
.word {
--start: calc(var(--i) * var(--pxPerWord));
--end: calc((var(--i) + 1) * var(--pxPerWord));
animation: fx;
animation-timeline: --section;
animation-range: var(--start) var(--end);
}
@keyframes fx { 0% { filter: blur(20px); opacity: 0; }}
Rafael Almeida retweeted
Million Dots... but only 10 divs 😉
(Pure #CSS)
Live demo and full code on @CodePen: codepen.io/amit_sheen/full/Y…
Rafael Almeida retweeted
CSS excitement: relative color syntax is now supported across all browsers. 👇 The last browser joining the party was Firefox with releasing v128 last week.
stefanjudis.com/notes/new-in…
RT @jh3yy: Scroll-driven mask with only CSS using SVG pathLength trick & mix-blend-mode 🤙
Sandwich content with 2 SVG. Animate path.
path…
This quoted post is unavailable.