Suppose we have a design with a component that contains an image and text, with responsive dimensions and a fixed height to width ratio. The font size scales too, so the text wraps the same for each width. This is what the HTML structure of the component might look like: The height of the tile […]
How can we style SVG images on a web page? For instance to define a transition on hovering. Using the <img> tag will not work. Neither will the CSS property background-image. We must put the SVG element inline in the HTML code. Now we can style the SVG elements using CSS selectors. Include external file […]
When a CSS transform is applied to an element, like it seems that element’s position property is forced to relative. This side effect introduces quirky behaviour, when you depend on the position being static. Here’s an explanation of what happens. Luckily there’s also a simple solution to this problem. A child outgrown its parent Suppose […]
The order of definition of pseudo-classes for the anchor tag is crucial. In Firefox I noted that if you define :visited after :hover, you may not get the style you expect when hovering over an <a> element. That’s logical, if you think of it. But it can be confusing because the Inspector seems to ignore […]
Just a note on the way I currently like to set up development of a Gutenberg block. Basically these are the steps mentioned in the WordPress block editor handbook, that uses the @wordpress/package to work with the webpack and Babel libraries, without too much hassle. Alternative: Advanced Custom Fields Pro A month after I wrote […]
With the WordPress Gutenberg editor it is easy to create full-width blocks. We can use them to create rows that span the whole width of a page. Then we can set a background colour or image for that row, while its content aligns with the content of regular (normal width) blocks. This is often used […]
Windows 10 Windows 10 has a built-in checksum utitily, CertUtil. For instance to find the md5 checksum of a file: Browser tool Alternatively, generate and verify the MD5/SHA1/SHA256 checksum of a file on line. You won’t have to upload the file, the work is done in the browser.
How to create a smooth looking object that also has sharp edges like this disc in Blender 2.8: To do that, apply smoothing to both the geometry of the model and the appearance of the surface. In both cases prevent the smoothing to occur at the edges that must remain sharp as explained below. Smooth […]