Line25

Learn About Current Web Design Trends From Line25. Weekly Tweets Include Best Web Design & Graphic Design Tips, Software & Top Design Tools.

[World of Engineering @engineers_feed]

I just found my Christmas present. Thanks 😊

[Line25 @line25blog]

Using AI to Create Content: For Web Designers & Bloggers
https://t.co/nuO1yyIzSj

[Line25 @line25blog]

20+ Free Icon Sets for Websites and Apps
https://t.co/GRN2yEygPD

[jhey ʕ•ᴥ•ʔ @jh3yy]

Future CSS Tip! 🔮

You can create sweet scroll-driven micro-interactions using CSS scroll-driven animations 😎

.avatar {
animation: scale-down;
animation-timeline: scroll();
animation-range: var(--header-range);
}

@ keyframes scale-down {
to {
scale: 0.3;
}
}

What's happening in this one? 👀

1. Avatar moves and scales down as the header sticks
2. Name changes color and slides over
3. Header darkens to give the text contrast
4. Header gets a shadow
5. Notice the avatar scrub too! 👀 It's scroll-driving the sprite animation technique we went over earlier in the week ✨

So much fun! ✨ Could even tie in the new easings from earlier too!

@CodePen link below! 👇

[the Design Museum @DesignMuseum]

#ArchitectureFriday | The stunning Eastern Columbia Building in Los Angeles is considered the greatest surviving example of Art Deco architecture in the city.

Designed by architect Claud Beelman, the Building is distinguished for its many Art Deco motifs.

📸 Elizabeth Daniels

[Mark Busch @Markbuschn]

How I as a graphic designer with 8 years design experience use textures in my work.

See how below ↓

[jhey ʕ•ᴥ•ʔ @jh3yy]

Future CSS Tip! 🔮 (This one's close 🤏)

You can use "subgrid" to give child elements access to a parent's grid tracks 👀

This is great when you want to make sure content lines up 🙌 Check those cards 👇

article {
grid-row: span 4;
display: grid;
grid-template-rows: subgrid; 👈
}

In this example, article uses grid but makes use of the tracks defined by the parent layout container. That makes it easier to line up content within the cards 🙏

Cool thing is, we don't even need to define the rows in the parent. We use the implicit ones from the parent.

main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
}

This might be easier to understand with the video below that shows the grid tracks using DevTools and toggles subgrid on and off 🤙

@CodePen link below! 👇

[Line25 @line25blog]

SEO Metrics That All Web Designers Should Know
https://t.co/IGBw6ZoH3h

[Line25 @line25blog]

Free Stock Video Websites for Top Quality Footage
https://t.co/fuc20VROVQ

[Ken Synopsis @TeslaSynopsis]

How do you like this X?

[Syed Balkhi @syedbalkhi]

Want to analyze any website's SEO strategy?

My team @aioseopack built a free SEO Analyzer Chrome extension that you'll love ❤️

It helps you see on-page SEO details of any page that you're visiting.

You can use it to:

- Analyze competitor's SEO schema settings

- See all internal links & keywords on a specific page

- Highlight Nofollow links on any page (great for writers)

... and so much more.

You can try it here:
https://t.co/Z6Xw30jn7z

Our goal is to make SEO easy and affordable for everyone ... so this is 100% free for everyone.

Let me know your ideas on how we can improve it 🚀

Many thanks for pressing 🔁 and ❤️!

[Line25 @line25blog]

Are you concerned that ... Ai ... will eliminate the need for web developers? ↓

[The Figen @TheFigen_]

This is the real invisibility cloak. 😂

[Line25 @line25blog]

Free Stock Video Websites for Top Quality Footage
https://t.co/fuc20VROVQ

[Kass 🦈 @KassandraSanch]

🌟Pencil made out of a single <div></div> in CSS & HTML.

View code here: https://t.co/ExxJQzF5BR

[Massimo @Rainmaker1973]

How these 3D backlit Hwang Seontae inspired artworks are made

[📹 https://t.co/iazYubYigP: https://t.co/ogsLTjAtSl]

[WebDesignDev @WebDesignDev]

30+ Best Editor X Website Templates
https://t.co/cpNPNTvicS

[WebDesignDev @WebDesignDev]

Best Resume Templates for Graphic Designers (15 Free Options)
https://t.co/pJfP4bnUgV

[WebDesignDev @WebDesignDev]

14 Best Web Designer Resume Templates for 2023
https://t.co/D7iYYOn07u

[WebDesignDev @WebDesignDev]

30 Best Geometric Patterns for Designers
https://t.co/lXcXjRSK7o