One thing hidden somewhere in the CSS specifications is the fact that you can use four or eight digits to represent a hexadecimal color, three or six to represent the color and one or two to represent the alpha transparency. For clarity's sake, the post will only cover the eight-digit version. What is this? If you're familiar with the RGB/RGBA color space in CSS you will see two different types of color, one solid color and one with some level of transparency. RGB colors use values from 0 to 255 or 1 to 100% to represent color and values from...
As I was working on a side project, the same one where I was using buttons I saw examples using display: inline-block used in the button styles. Why should I use inline-block instead of inline styles? What difference does it make? Difference between inline-block and inline display: inline-block respect top and bottom margins & paddings. display: inline, doesn't. In the example below, we use both inline and inline-block elements in the same paragraph to illustrate the process. html Cheese and wine ricotta danish fontina. Brie cheesy grin paneer squirty cheese taleggio cheesecake goat taleggio goat taleggio. Bavarian bergkase emmental fromage...
I was working on a side project where I have a series of buttons but when I tried to style them the CSS did nothing. In doing research, I discovered several things you can do and that I wasn't doing and things that I was doing wrong. I'm working with SCSS/SASS because it's easier for me to nest rules and figure out associations between elements. It will be converted to CSS at build time. Quick Reset The example I'll use in the rest of the post uses a reset. This could be used in addition to normalize.csshttps://necolas.github.io/normalize.css/ or Eric Meyer's...
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...
