Hacker News·4yYes, I can connect to a DB in CSS
A new set of APIs give your browser the power to control CSS via its own Object Model in Javascript. This means that you can make custom CSS styles, add custom properties, and so on. The CSS Paint Worklet5 allows you to 'paint' on an element, and have the browser treat it as an image in CSS.
DevDojo·4yThis is how you make images Responsive in CSS
SnowBit is a young passionate and self-taught frontend web developer. He has an intention to become a successful developer. Today, he shows you how to make responsive images with CSS. He also shows how to use the max-width and independent height properties.
Product Hunt·4yTailGrids - Tailwind CSS Component Library and UI Kit
Handcrafted Library of Tailwind CSS UI Components, Blocks, Sections, UI Kit and Templates to Speed up Your Development Workflow. 300+ Free and Premium Tailwind Components, Copy-paste Interface, Figma Source Files with High-quality Clean Design, and Much More.
DevDojo·4y200+ Design resources you must know right now!
Website Description Figma Online graphic design tool (Free & paid options) Vectr Free vector graphics software Taler Create social media banner designs in minutes from hundreds of customizable templates. Visme Create presentations, infographics and more Infogram Create infograms ChartGo Create charts and graphs online Cartoon Photo Turn photos into cartoons Whimsical Wireframes, diagrams and more (4 free)
CSS-Tricks·4y6 Creative Ideas for CSS Link Hover Effects | CSS-Tricks
Creating CSS link hover effects can add a bit of flair to an otherwise bland webpage. If you’ve ever found yourself stumped trying to make a slick hover effect, then I have six CSS effects for you to take and use for your next project. The Sliding Highlight Link Hover Effect applies a box shadow to the inline link, altering the color of the link text in the process.
DZone·4yCSS Glass Morphism Generator
The glass morphism effect is popping up all over the web at the minute. I've created a generator so you can make your own CSS glass Morphism effects and add them to your applications and websites. Note, that although widely supported, this will not currently work in Firefox as expected. You can change the options, and generate your own glassmorphism along with code.
Medium·4y13 Free Resources I Use As A Self-Taught Web Developer
I’m a self-taught web developer who has over 6.5+ years of experience working on HTML, CSS, JavaScript, Sass, Styled Components. Here are 13 resources I keep using all the time. W3Schools is optimized for learning, testing, and training. GeeksforGeeks is a Computer Science portal for geeks.
Changelog·4ysoheilpro/mailwind: Use Tailwind CSS to design HTML emails.
Use Tailwind CSS to design HTML emails. Mailwind is a free, open-source, web-designing tool. Use Tailwind to design your HTML emails using the Tailwind utility classes like you normally would for the web. Tailwind is licensed under the The MIT License (the "License")
DevDojo·4ySmooth CSS Gradient Transitions
All modern browsers do not natively transition colours in gradients smoothly. If we try to hover or interact with an element which transitions from one gradient to another, we end up with a sudden change. In this article, we'll cover how to smoothly animate a gradient transition with Javascript. That means creating a function which will be able to transition between two colors.
CSS {IRL}·4yAspect Ratio is Great
Aspect-ratio is a new CSS property that works in all major browsers. It’s been supported in browsers for going on a year now, but with Safari finally catching up in September 2021, we can finally feel confident using it with aplomb. The custom property helps us cut down on repetition if we need more than one ratio.
Flavio Copes·4yRoadmap to become a Web Developer in 2022
Web Development is always evolving and every year in January I like to take a step back and re-evaluate and observe the ecosystem. The question is: where should beginner Web Developers start in 2022, so they will learn skills they’ll find jobs for? Is there anything new you should absolutely learn? Let’s get into it.
DevDojo·4yMaking 3D CSS Flippable Cards
3d flippable cards with CSS and Javascript. A while back, I wrote an article on 3d interactive CSS buttons. Using a similar technique, I decided to design some 3D interactive user cards. These also work great for lots of different things - for example, a bank card UI, a playing card UI or just a teams page.
Scott Helme·4yCan you get pwned with CSS?
Security Headers is a free HTTP response header analysis tool. To get an A+ grade on Security Headers, you had to use a CSP without unsafe- inline anywhere in the policy. Because of this incredibly strict requirement, not even my own sites score an A+. I wanted to make a change that would result in more sites achieving the highest possible grade.
Hashnode·4yWord Portrait using CSS
In this article, I'll introduce you with the background-clip property of CSS, with the help of which, we will make our Word portrait. Even if you are beginner to CSS and HTML, you'll be able to that. Before we go, we first need to know about the Background Clip property in CSS.
DevDojo·4yCSS Only Masonry Layouts with Grid
Masonry refers to the type of layout which is most famously used on Pinterest. It differs quite a lot from flex or grid, which have fixed row width. Masonry usually does a few things:Fill in the gaps Adjust automtically to CSS changes Create a container of the correct height. There is no support for CSS masonry in any modern browser.
DZone·4yA Complete, Interactive Guide to CSS Flex Box
Flexbox lets us align content in columns or rows, while automatically adjusting its size based on how we set it up. Below, you can view the complete guide to CSS flexbox, along with a generator to let you generate the layout style you want for your container elements. For your reference, here are the individual properties and the effects they have on a flexbox configuration.
Web Tools Weekly·4yCSS Tools, Testing, Jamstack, CMS's
This week's newsletter includes a selection of coding-related articles. These are topics similar to what I might cover here, but are much better in a longer format. Instead of covering a single coding tip like I often do in this newsletter's intro, I thought I would link to a small handful of articles that I thought you would enjoy.
