#CSS Snippets

[zerafinacss]

hello! the previews of your neo site skin is so pretty!! but i was wondering, if its okay to ask, how did you manage to combine the Archive of our Own, the nav bar and user nav bar into one? im trying to make my own site skin and i wanna combine those three together :cs_sad:

Hi!

Here is one way to get everything in the header in one line. It will look a bit odd on narrower screens though.

header { padding: 5px 0; border-bottom: 1px solid #c8c8c8; } /* smaller logo */ header .logo { height: 1em; margin-right: 5px; } header .heading a { line-height: unset; } header .primary { float: unset; padding: 0.25em 0; background: transparent; border: none; box-shadow: none; } header .navigation a { color: inherit; } header .search { float: left; }

I have coded it differently for the neos skin and there will also be tablet and mobile versions. But that code is not quite ready for sharing yet (too messy and buggy).

[codenewbies]

Responsive Service Section

[divinector]

Glassmorphism User Profile Card

[codingflicks]

CSS Slider with thumbnails

[floatright]

Плавная прокрутка к якорю с помощью CSS

Плавная прокрутка на веб-страницах — это не только удобно, но и улучшает пользовательский опыт, особенно на сайтах с длинным содержимым. Вместо того чтобы использовать громоздкие JavaScript-скрипты, можно задействовать всего одну строку CSS-кода.

Простой код CSS для плавной прокрутки: html { scroll-behavior: smooth; }

Почему стоит использовать этот подход?

Простота: В отличие от решений на JavaScript, CSS-реализация не требует дополнительных библиотек или написания функций.

Производительность: Нет необходимости загружать и выполнять JavaScript, что делает сайт быстрее.

Кроссбраузерность: Свойство scroll-behavior поддерживается большинством современных браузеров.

Для тех, кто раньше использовал JavaScript

Вместо громоздкого кода вроде:

$('.scrollto a').on('click', function() { let href = $(this).attr('href'); $('html, body').animate({ scrollTop: $(href).offset().top }, { duration: 370, easing: "linear" }); return false; });

Достаточно вспомнить о scroll-behavior и добавить его в стили.

На заметку

Я часто заб��ваю о полезности этого свойства, особенно когда верстаю страницы с якорными ссылками. Поэтому решил написать эту заметку, чтобы напомнить себе и другим: используйте CSS для плавной прокрутки и забудьте о сложных скриптах!

[pyrriax]

hey tumblr i got completely distracted by something i will likely never think about again but i'm discovering things so it counts for. something?

obsidian vault stuff is a lot more work than you think it'll be when you're trying to work in things using css alone and all of the usual caption displaying methods don't play nicely with inline images </3

[sleepymarmot]

A couple of my own gifsets I downloaded back from Tumblr and displayed through Obsidian + the Minimal theme. Source mode on the left, reading mode on the right. That's all it took to replicate the layout: putting an extra empty line between the links to the images. Crazy!

[inertia-m]

Me after spending 8 hrs on 3 React Components. Add in Redux, and that's 15 hrs xD

feel like i've finally gotten to the point where the answer to "will i be able to figure out how to do the thing" is almost always yes, and then the operative question becomes "will i be able to figure out how to do the thing quickly". and unfortunately the answer there is usually no

[zerafinacss]

Your neos skin looks so cool! And I wanted to ask you, if it's okay, how did you the

[fanfic name] by [author]

[fandom(s)]

[rating—relationships—warnings—work status]

going just like that, in three rows? I'm very new to css but I want to patch my own skin from different pieces

Hi! I'm glad you like the previews!

The code to position these elements as shown in the following picture is below the cut.

Edit (23 March 2025): Altered the code slightly so it doesn't mess up blurbs for mystery works.

/* remove the space for the icons on the right side */ .blurb:not(.picture.blurb, .mystery.blurb) .header .heading { margin-left: 0; } /* the following part changes the position of the content icons */ .blurb .header ul.required-tags { display: flex; flex-wrap: wrap; column-gap: 4px; position: unset; width: auto; margin-block: 0.375em; } .blurb .header ul.required-tags li { position: unset; }

[codenewbies]

Dark Neumorphism Button UI

[divinector]

Responsive Web Layout

[codingflicks]

Glow Animation on hover

[jcmarchi]

Weekly News for Designers № 727 - Fixing CLS Problems, CSS One-Line Upgrades, Future Roles for Designers

New Post has been published on https://thedigitalinsider.com/weekly-news-for-designers-%e2%84%96-727-fixing-cls-problems-css-one-line-upgrades-future-roles-for-designers/

Weekly News for Designers № 727 - Fixing CLS Problems, CSS One-Line Upgrades, Future Roles for Designers

Happy Birthday, Macintosh Forty years ago, Apple introduced the world to the Macintosh computer.

Free Instagram Story Templates A collection of Instagram Story templates for Photoshop, Figma, Sketch, After Effects, Premiere Pro, and Final Cut Pro.

12 Modern CSS One-Line Upgrades Learn about the CSS properties to enhance your projects, reduce technical debt, eliminate JavaScript, and improve the UX.

The Diagram that Shows the Value of Great UX

Fading Content Using Transparent Gradients in CSS Here are two methods for achieving text content fading with CSS. One uses mask-image and the other background-clip.

Top Logo Stinger Premiere Pro Templates We share a collection of logo stinger templates for Premiere Pro that stand out with their style, functionality, and ease of use.

Five Future Roles for Designers Jorge Arango shares five possible future careers for designers in our now AI-driven world.

CSS Blurry Shimmer Effect Learn how to create a CSS blurring effect, but not with box-shadow.

The CSS Snippets Every Developer Should Know Discover the CSS snippets that every front-end developer should know about in 2024.

What’s the Environmental Impact of Your Website? Eric examines the relationship between the web and the planet and shows how to measure your website’s impact.

Git and GitHub Essentials If you’re new to Git or GitHub, this extensive beginner’s guide of the most common commands is for you.

Fixing Cumulative Layout Shift Problems

The Most Underused CSS Media Queries: hover & any-hover Learn how to use the hover and any-hover media queries for responsive design and better experiences on all devices.

Improve Your Logo Design Skills Melinda Livsey shares how she improved her logo design skills by studying the work of Paul Rand and Saul Bass.

[fribly]

Pure CSS Text Wave

Here’s another nice text effect, a pure CSS text wave effect that you can customize and use in your next web project. Continue reading Untitled