Shapes allow you to wrap text around parts of an image or a predefined shape. Using these shapes we can change the way text looks on the screen Shape without image In its most simple way, we can wrap text around an invisible shape defined as we would a clip-path. The HTML defines an empty div element that will hold the shape we define in CSS. html Dark, lungo, café au lait in latte fair trade blue mountain strong, redeye sugar seasonal café au lait Turkish. Black mug variety, cappuccino, single-shot body sit grounds coffee whipped Turkish et, skinny, doppio...
Both Clipping and masking hide some parts of the elements and show other parts. But there are, of course, differences between the two. Differences in what they can do, differences in syntaxes, different technologies involved, the new and the deprecated, and browser support differences. clip-path and CSS The clip-path CSS property allows you to specify a specific region of an element to display, instead of the complete area. There used to be a clip property, but it has been deprecated. The common HTML for clipping with CSS This is the markup we'll use for the examples below. html Box 1...
One of the things you can do with CSS is to layer content and have the layers perform different tasks. Some of these techniques are inherited from and used together with, SVG and others are specific to CSS. CSS Background Images The first way I learned to layer content was using an image as the lowest item on the stack and then position text or other images on top of our 'base layer'. html Santiago, Chile The background image has to have a size, in this case, I chose to use viewport unitshttps://alligator.io/css/viewport-units/ to make sure that it'll work the...
As I learn how to be more flexible in working with art direction for web content, I'm documenting some of the cool things I've learned. Because I'm using flexbox, I'm relying on CSS Trick's A Complete Guide to Flexboxhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/ to reference the Flexbox aspects fo the elements. Figures as flex containers If we make a figurehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure into a flex container we gain a lot of flexibility in how we place captions around the image. This is the image that we'll play with. html Pablo Neruda Facts Pablo Neruda, original name Neftalí Ricardo Reyes Basoalto, born July 12, 1904, Parral, Chile...
For a long time I've seen icons attached to links to help users figure out what type of links they are. This was particularly important in the days of plugins because users haad to have the right plugins to view different types of content. Taking the following HTML fragment, html Stats We can use the following css to add an icon after the string Stats: css data-icon:after { font-family: icons; content: attrdata-icon; speak: none; } For modern browsers, we can use attribute selectors to change add the icon as a background image and then move it to where we need...
The idea is that using this tab we can check how our page loading and troubleshoot loading issues as they happen with a visual representation of the loading process 1. Make sure that you are running in Incognito Mode to prevent extensions from causing any problems 2. Open DevTools Command + Option + I on Macintosh or Control + Shift + I or F12 on Windows 3. Go to the Network tab The image below shows the result of running the Network tab in Chrome 78 Canary when the article was written. !Network Panel Showing Results of a runhttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/devtools-network-run The...
Material Designhttps://material.io/ is Google's Design System. It started as a Google-only system that you bought into the wholesale design system with little to no chance of customizing it. The new iteration of Material Design does several things that the original did not do well or at all, including framework integrations. The "new Material" also allows for easier customization and provides SASS/SCSS mixins and functions to do so. In this post, we'll look at the typography options available to Material Design, both standard and customized. Setting up There are two ways to set up a Material Design project. We'll talk about...
Developers who, like me, like Google Fonts have been frustrated by their not having Variable Fonts available. That has changed in the last few weeks. Google has released an experimental API, available at fonts.googleapis.com/css2. The API has a limited selection of fonts available and the syntax takes a little while to get used to it. Google font developers make the following assertion: This version of the API isn’t completely stable. It’s best for experimental work while we document the new endpoint. Syntax and Limitations The new API announced in this codepenhttps://codepen.io/nlwilliams/full/JjPJewp shows examples of how to use the new API...
Javascript does a lot of things decently enough but one of its biggest drawbacks is that it's single-threaded. All scripts that run on a page or application run in the same execution context. Web Workers provide one way to work around Javascript's single-threaded execution model. The idea is that we have two scripts. According to Surmahttps://dassur.ma/things/when-workers/: > Web Workers, also called “Dedicated Workers”, are JavaScript’s take on threads. JavaScript engines have been built with the assumption that there is a single thread, and consequently there is no concurrent access JavaScript object memory, which absolves the need for any synchronization mechanism....
Based on Andreas Bovens' article Responsive Images: Use Cases and Documented Code Snippets to Get You Startedhttps://dev.opera.com/articles/responsive-/images/ we will look at four use cases for responsive images: - Change image sizes based on responsive design rules the sizes use case - Optimize for high-dpi screens the dpi use case - Serve images in different image formats to browsers that support them the mime use case - Serve different art depending on certain contextual factors the art direction use case We'll look at some example native responsive images and how they apply to these use cases. Viewport Size Based The most...
