Auralinna.blog Tero Auralinna's blog about intriguing world of web development. Tweaking pixels since the '90s.

Blog posts related to CSS

Setting up webpack 4 for a project

December 2, 2018

This blog post shows how to setup webpack 4 module bundler for development. This webpack tutorial contains many common examples you might need to configure when doing JS application development with the webpack.

How to create Material Design like form text fields with floating label and animated underline bar

November 10, 2018

This post shows how to implement Material Design like form text fields with a floating label and an expanding underline bar animation. The post includes examples of how to style text fields with and without Javascript.

Crop and resize images with CSS

January 28, 2018

Sometimes you don't have an option to crop images on the server-side so you need to do the cropping in the browser instead. Here are a few examples of how to create cropped image thumbnails using CSS only. All the examples are responsive and work for most image aspect ratios. Cropped images are scaled and centered to maximize the visible area of the image.

Navigation wizard example with equal width steps and flexible width of the last step

January 1, 2018

This blog post explains how to create a navigation wizard in which all steps have equal width except the last one. The width of the last step is depended on the text width.

Code syntax highlighting with Angular and Prism.js

December 28, 2017

I implemented Prism.js based code syntax highlight feature for my blog. This blog post shows how to use Prism syntax highlighter with Angular.

How to make a CSS speech bubble with borders and drop shadow

December 22, 2017

This blog post demonstrates how to create a CSS speech bubble with borders and drop shadow.

Wrapping newlines via CSS

November 30, 2017

This is a simple tip on how to wrap newlines without converting newlines to br tags. This is quite handy if you have text without formatting and the only need is to wrap text paragraphs. You don't have to think about HTML sanitization or conversion.

How to customize Bootstrap styles and variables when using ng-bootstrap

November 28, 2017

Ng-bootstrap is a great project which integrates Bootstrap 4 components into Angular. The main benefit is that it’s not dependent on 3rd party Javascript libraries like jQuery or Bootstrap JS. Installation is easy, but instructions are missing important point how to make Bootstrap styles editable. Here are steps how to do it.

How to build a complete form with Vue.js

May 2, 2018

Lately I have experimented with Vue.js JavaScript Framework. In this post I will show how to build a functional form with Vue.js. Forms are essential part of almost every web application so I wanted to see how to build a basic form with the following specs.