Best of CSSApril 2023

  1. 1
    Article
    Avatar of devtoDEV·3y

    10 Cool CodePen Demos (March 23)

    This post features various CodePen demos including 3D camera icons, a pure CSS landscape, a radial menu with CSS trig functions, VR gravity manipulation, text effects, a 3D text library, spiral circles, a random planetary system, a cool hover effect using one element, and a neumorphic liquid slider using CSS and animation.

  2. 2
    Article
    Avatar of tshThe Software House·3y

    Frontend interview questions – developers tips in 2023

    As the high demand for frontend development continues, technologies come and go and requirements change. As many as 25.96% of all programmers on Stack Overflow consider themselves frontend developers. Frontend development is an essential and obligatory part of any web-based and many mobile-based projects.

  3. 3
    Article
    Avatar of communityCommunity Picks·3y

    CSS Blend Modes

    CSS Blend Modes blend modes allow you to blend overlapping pixels. Using a color, noise image, shadow & gradient can blend to produce a paper effect. A duotone image is an image made up of two colors. Made by converting an image to grayscale then replacing the darks with one color & the lights with another.

  4. 4
    Article
    Avatar of dnetcurryDotNetCurry·3y

    React.js Application Structure - Best Practices

    A well-structured application helps you maintain the codebase, onboard new developers, and easily scale the project. In this article, we will discuss various approaches to structuring your React.js application. There are several ways to organize the files and components in a React application. These approaches can be categorized into three main types.

  5. 5
    Article
    Avatar of tilThis is Learning·3y

    CSS Tip: learn CSS the easy way!

    Css-tip.com is a micro-blog where I am sharing simple tips that you can read in less than one minute. There are already more than 60 CSS Tips ready for you! To not miss the new Tips use the RSS feed link with your favorite RSS reader.

  6. 6
    Article
    Avatar of infoqInfoQ·3y

    Real-Time Messaging Architecture at Slack

    Slack provides a comprehensive insight into its Pub/Sub architecture, designed to manage real-time messages at scale. Slack's engineers say the company plans to enhance its architecture to serve a more significant customer base. The system's backend is composed of several services, including stateful, in-memory servers.

  7. 7
    Article
    Avatar of ishadeedAhmad Shadeed·3y

    CSS Text balancing with text-wrap:balance

    CSS Text balancing with text-wrap:balance - Ahmad Shadeed. The browser will automatically calculate the number of words and divide them equally between two lines. With text balancing, the title content will be balanced and we won’t have a single word in its line.

  8. 8
    Article
    Avatar of asayerasayer·3y

    How to Customize Checkboxes with CSS

    Checkboxes are a common element of web design that allows users to select from a list of options. This article explores the importance of customizing and improving the accessibility of checkboxes. We’ll discuss styling, the size and shape of the checkboxes, and some pointers for making your checkboxes more accessible to all users.

  9. 9
    Article
    Avatar of slackSlack engineering·3y

    Real-time Messaging

    Slack Engineering describes the architecture that we use to send real-time messages at this scale. Slack sends millions of messages every day across millions of channels in real time all around the world. We have a draining mechanism for region failures that seamlessly switches the users in a bad region to the nearest good region.

  10. 10
    Article
    Avatar of communityCommunity Picks·3y

    Tailwind CSS prototyping: create landing page

    Explore the benefits of using Tailwind CSS for rapid web development and discover how it can streamline your workflow, save time and effort, and help you create beautiful and functional designs with ease.

  11. 11
    Article
    Avatar of gcgitconnected·3y

    Costly CSS Properties and How to Optimize Them

    Learn how to optimize costly CSS properties like box-shadow, background-image, border-radius, transforms, and filters to improve webpage performance.

  12. 12
    Article
    Avatar of css-irlCSS {IRL}·3y

    Exploring :has() Again

    CSS allows us to select a parent or sibling of an element by taking a relative selector list as its argument. In practice, we can select any element in the DOM relative to another, as long as they share a common ancestor. This makes it pretty powerful. Hiding and revealing content is often something that should be done with JS.

  13. 13
    Article
    Avatar of communityCommunity Picks·3y

    Scoped CSS is Back

    Scoped CSS allows for more control over selectors targeting specific elements and the ability for one set of styles to override another based on proximity in the DOM.

  14. 14
    Article
    Avatar of communityCommunity Picks·3y

    CSS text-wrap: balance

    Learn how the 'balance' value for 'text-wrap' in CSS Text Level 4 can massively improve text layouts. Discover the alternatives to 'text-wrap: balance' and the limitations of this technique.

  15. 15
    Article
    Avatar of communityCommunity Picks·3y

    Windows 10 like Hover Effect: A Step By Step Tutorial

    Learn how to achieve a Windows 10 calendar-like hover effect for your website using HTML, CSS, and JavaScript. Create a gradient effect, make it follow the mouse, cover it up, and make the border lighter on hover.