Best of CSS — July 2021
- 1
- 2
Red Stapler·5y
CSS 3D Card Design with RGB Effect Tutorial
In this tutorial, we’re going to show you how to design and create CSS card with animating RGB and 3D tilt effect in just a few minutes. The first tutorial is how to setup the card layout from scratch using CSS. The second tutorial isHow to add 3d tilt effect using tilt.js. You can download the code of this project here.
- 3
DEV·5y
Internet Explorer finally dies
Internet Explorer 11 will be retired and go out of support on June 15, 2022. Popular JavaScript frameworks have already dropped support, including Vue 3 and Preact 11. The list of companies that have dropped support is growing by the day, and includes Adobe, Dailymotion, Skillshare, LinkedIn, Twitter, SAP, among many others.
- 4
Product Hunt·5y
Glass UI Generator - CSS generator from glassmorphism
Free CSS generator based on the glassmorphism design specifications. Get started with this free CSS generator. Embed this code into your site or create your own using the code generator below. The code generator is free to use and there is no cost to you. Use the CSS generator to help you with your site.
- 5
Toolb.dev - A set of 50+ free interactive CSS, HTML and JS webtools
Toolb.dev provides a set of 50+ and expanding free CSS, HTML and JS webtools for daily usage. Embed Collect is one of the most popular ways to collect data from your web browser. Use this data to help people with reading comprehension and vocabulary. Use the weekly Newsquiz to test your knowledge of stories you saw on this site.
- 6
- 7
gitconnected·5y
10 CSS things I wish I knew when I was a beginner
Many programmers under-appreciate the role of CSS in a website. Here are a few things I wish I knew when I began developing websites. The list is sorted considering learning curve and adaptability in mind — the easier stuff will come first. The tag might seem very useful at a new developer, but it is NOT important whenever I use it.
- 8
Hashnode·5y
Project-Based Learning Approach
Project-Based Learning is an instructional approach designed to allow students to develop knowledge and skills through engaging projects set around challenges and problems they may face in the real world. Bridge the gap between theory and real-world code by working on projects. We'll come across a number of projects ranging from ( Beginner to advanced level ) for you.
- 9
daily.dev·5y
Tailwind CSS from Zero to Hero - Dark Mode, JIT & More!
Using with Preprocessors: Adding a dark mode and directives.Configuring styles based on a design system: New JIT mode. Extending default breakpoints: Adding accessibility support. Using Less: Using the core Stylus features won’t work. Using PostCSS: If you are interested in using PostCSS, then check out the previous articles.
- 10
CSS Structure
One of the struggles developers encounters while writing CSS is the fact that the property you are looking for can be in any line inside a class selector. To help to solve that problem I thought about a structure to organize the styles so you can know where to write and search the properties you need. Write CSS that is easy to read and everyone can understand.
- 11
CSS-Tricks·5y
Demystifying styled-components
styled-components is a tool that takes arbitrary CSS and assigns it to a React component. By demystifying it, we'll be able to diagnose and fix weird CSS issues with way less frustration. This article is written for experienced React developers. It may surprise you to learn that styled-Components doesn't do anything with the CSS we added to it.
- 12
DevDojo·5y
Create a Video Landing Page with HTML and CSS
A landing page is a standalone web page that a person "lands" on after clicking through from an email, ad, or other digital location. This article will give you insights on how to create and include a video into a landing page using HTML and CSS with JavaScript for interactivity on the nav menu on mobile.
- 13
Bits and Pieces·5y
Why Developers Love Bulma CSS
Bulma is an open-source, responsive, and lightweight CSS framework based on the Flexbox layout. It is a fully modular framework where you can import only what you need. Every element in Bulma is mobile-first and optimized for vertical reading. It provides a large variety of customizable components with 100+ functional helper classes.
- 14
Smashing Magazine·5y
There Is No Such Thing As A CSS Absolute Unit — Smashing Magazine
absolute units are rooted in physical units, such as pixels, centimeters, and inches. Over the years, all absolute units in CSS have lost their connection to the physical world. Relative units are sized according to other style definitions defined by parent elements or are affected by the size of a parent container.
- 15
- 16
Best Tailwind CSS components and template collections
Tail-kit gives you access to over 250 free components and free templates, based on Tailwind CSS 2.0. It's all compatible with React, VueJS and Angular applications. Mamba UI is a free, open-source collection of beautiful UI elements. Salvia-Kit is fully customizable and without external dependencies.
- 17
- 18
Color Tools And Resources — Smashing Magazine
We’re shining the spotlight on color tools and resources for all kinds of projects, from all types of color palettes and generators to getting contrast and gradients just right for your projects. This collection is by no means complete, but rather a selection of things that the team at Smashing found useful.
- 19
- 20
Free TailwindCSS components to build UI faster
Tail-kit gives you access to over 250 free components and free templates, based on Tailwind CSS 2.0. It's all compatible with React, VueJS and Angular applications. Mamba UI is a free, open-source collection of beautiful UI elements that make it easy for anyone to build a website in minutes.
- 21
CSS + BEM Methodology = 🤘
BEM stands for Block Element Modifier. It is a Methodology that every web developer should follow. This makes development easy and enforces re-usability. Let's understand this by an example. We can say,Form = Block(An Independent meaningful entity) Link, Button = Element(Part of Black, Which has no standalone meaning) Button types (primary/secondary) = Modifier(Represent state of Block or Element.)
