DEV·5y8 JavaScript Animation Libraries You should "MUST TRY"
Animations on web applications are appealing and grab the user’s attention. JavaScript is the preferred tool of use because it handles more complex and advanced effects. Using mo.js on your site will enhance the user experience, enrich your content visually and create delightful animations precisely.
Smashing Magazine·5yThings You Can Do With CSS Today
The present and future of CSS are very bright indeed and if you take a pragmatic, progressive approach to your CSS, then things will continue to get better and better on your projects. In this article, we’ll look into masonry layout, :is selector, clamp() , ch and ex units, updated text decoration, and a few other useful CSS properties.
DevDojo·5yTailwind CSS — all you need to know to get started
Tailwind encourages and facilitates a utility-first approach where you write as few custom styles as possible. For this reason, Tailwind CSS isn't really a CSS framework such as Bootstrap or Bulma. The most important part of learning how to use Tailwind is actually using its classes.
CSS-Tricks·5yA DRY Approach to Color Themes in CSS
The goal of DRY (Don’t Repeat Yourself) programming is to avoid redefining custom properties when switching between light and dark modes. Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations. I remembered Lea Verou’s trick using --var: ; , and found a way to make it work.
Product Hunt·5yReseter.css — A futuristic CSS reset and normalize
Reseter.css is an awesome CSS boilerplate for a website. It resets all the premade styles by the browser. It normalizes the browser's stylesheet for a better cross-browser experience. It is a great tool for any web designer. For more information, visit Reseter.com.
freeCodeCamp·5y10 CSS Hacks Every Web Developer Should Know
10 CSS Hacks Every Web Developer Should Know - Gert Svaiko. Gert is the author of the book "Web Design for Women" and co-hosts the blog "Women in Web Design" Gert's blog, Women in Web Development, is also available on Amazon.com and other sites.
freeCodeCamp·5yLearn Flexbox with These 8 Most Common Use Cases
Learn Flexbox with These 8 Most Common Use Cases. Learn Flexbox for the first time with these 8 most common use cases. Use Flexbox to help you get the most out of your mobile device. Learn more at Flexbox.com and follow them on Twitter @flexbox and @Flexbox.
DEV·5yGrid vs. Flexbox
Flex and grid share the same common features which makes it so confusing when to use flex and when to using grid. In this article, we will explain what is the difference between these two properties. We use flex in a one-dimensional layout (row or column) while grid using in two- dimensional layout (rows and columns)
DZone·5yHow to Master Web Development
Learn one programming language (JavaScript), the markup language HTML, and the styling language CSS. You’ll also learn the JavaScript framework React and the principles of UX and UI design. If you take a while to land your first web development job, these design skills can help you make pretty good money.
Product Hunt·5yGlassmorphism CSS Generator — Generate the CSS for frosted glass effect for free.
The "frosted glass" effect has been with us for quite some time with each company having its own name for it. In Nov 2020 Mike Malewicz wrote a medium article trying to unify it under one name. Then we created this handy CSS generator. Enjoy!
CSS-Tricks·5yUse CSS Variables instead of React Context
In this article, we'll look at a simple example of "Dark Mode" and compare differences in API (developer experience) and performance (user experience) We'll be using emotion's styled utility. Keep in mind that with the Theme Provider you can consume the values using the useTheme hook, or with the css prop.
daily.dev·5yCSS Hacks, JavaScript Animation Libraries - Picks #167
GitHub Surf is a new product that will let you edit the code of a repo via your browser. Learn the basics terms and components of a microservices architecture. The Dark Side of Becoming a Self-Taught Developer gives a glimpse of what it takes to be a developer.
CSS-Tricks·5yAnimating a CSS Gradient Border
Stephanie Eckles has revived the use of CSS border-image to create Gradient Borders in CSS. The most simple usage is to set some type of CSS gradient as the border. To animate the border gradient you’ll need to add an angle in there — using a Custom Property.
Bits and Pieces·5y12 Mistakes Newbie Web Developers Make
Do you still make these mistakes? Manusha Chethiyawardhana shares 12 common mistakes newbie web developers make. Always do both Client-side and Server-side Input Validation. Not thinking about the responsive design of their web app at the beginning of development is crucial.
Tuts+·5y30 CSS Best Practices for Beginners
CSS is a language that is used by nearly every developer at some point. Great readability of your CSS makes it much easier to maintain in the future. You should start to develop your own "sub-language" of CSS to quickly name things. Use a reset to eliminate browser inconsistencies such as heights, font sizes, margins, and headings.
Smashing Magazine·5yCreate Responsive Image Effects With CSS Gradients And `aspect-ratio`
A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported aspect-ratio property in combination with object-fit provides a remedy to this headache of the past. Let’s learn to use these properties, in addition to creating a responsive gradient image effect for extra flair.
Changelog·5yAn interactive guide to CSS transitions
This tutorial is meant to be accessible to developers of all experience levels. The main ingredient we need to create an animation is some CSS that changes. We can instruct the browser to interpolate from one state to another with the aptly-named transition property. A smooth animation should run at 60-second duration over a 1-second window.
CSS-Tricks·5yThe Things I Add to Tailwind CSS Right Out of the Box
In every project where I use Tailwind CSS, I end up adding something to it. Some of these things I add in every single project. What do you add to Tailwind in your projects? Is there something you can’t do without? Let me know in the comments! I’d love ideas to start incorporating into other projects.
Hashnode·5y🔥 Ultimate Cheatsheet Compilation
I hope you will find this blog post useful and keep it handy for a quick reference. If you want to learn more HTML, CSS, JavaScript and web development tips & tricks, then please subscribe to YouTube. Back to Mail Online home. Back To the page you came from.
daily.dev·5yCreate Chrome Extension with HTML, CSS, and JavaScript
Google Chrome is one of the most loved browsers for developers as well as general users. Today, we are going to look into how you can create your very first Google Chrome extension with the use of HTML, CSS, and JavaScript. The tutorial will be easy for you. You only need to know "How to setup the extension?"
JavaScript in Plain English·5y6 Quirky JavaScript and CSS Tricks You Should Know
Akash Thakur has compiled a list of 6 JavaScript and CSS tricks. Optionally add JS property in objects that are dynamic in nature. Reading browser URL JavaScript can access the current URL in parts. Text-overflow property can be clipped, display an ellipsis or display a custom string.
CSS-Tricks·5yIs CSS float deprecated?
Before flexbox and grid, we had to use the CSS float property to make grids and layouts. The property was really designed to do one thing: let text wrap around images. Now, with grid and flexbox, we have wonderful powers that can do all the heavy lifting for real layouts.
daily.dev·5y🔥 What's Hot in Web Development? — Weekly Picks #165
Every week we gather the best articles on daily.dev. And this week seems to be all about web performance and CSS Grid. Of course, there is more than that so be sure to check out this fantastic list.So, let's get it started. How to use HTTPS for local development. Learn the newest perks of CSS.