In this article, I will show how to display short text on a web page that can expand to longer text on hover. The trick is to use two spans inside of a div. The first span contains the shorter text and the second span contains the longer text. For example: <div class=”expanded-text”> <p class=”text”> … Continue reading HTML & CSS: How to expand text on hover
HTML & CSS
HTML & CSS: How to stack Font Awesome icons
In order to stack Font Awesome ions, someone wrote a custom CSS solution that features a class called “icons-stack”, which looks like: .icon-stack { position: relative; display: inline-block; width: 150px; height: 150px; line-height: 80px; vertical-align: middle; } .icon-stack-1x, .icon-stack-2x, .icon-stack-3x { position: absolute; left: 0; width: 100%; text-align: center; } .icon-stack-1x { line-height: inherit; } … Continue reading HTML & CSS: How to stack Font Awesome icons
HTML & CSS: How to create a progress bar with stacked divs
In web design, there are lots of cases where you will need to stack <div> elements on top of each other in order to achieve certain effects or layouts. One example of this is a progress bar, where you have a background color, a foreground color (to mark the progress), and maybe a label. The … Continue reading HTML & CSS: How to create a progress bar with stacked divs
HTML & CSS: How to create a square grid using CSS grid
In order to create a game of tic-tac-toe using React.js, I first needed to figure out how to create a 3×3 grid of squares using HTML and CSS. Turns out, with CSS grid it is fairly straightforward. All we need is three CSS classes: container: This is the highest level div that will contain the … Continue reading HTML & CSS: How to create a square grid using CSS grid
HTML & CSS: How to get text to appear over an image on hover
I have an image on a web page that I want to display a text message whenever the mouse pointer hovers over the image. For example, I want to display the text “Placeholder Image” whenever the mouse pointer hovers over the image. The image itself is round with a blue border. This was styled with … Continue reading HTML & CSS: How to get text to appear over an image on hover
HTML: How to get vector icon images into your web page using Font Awesome
FontAwesome is a website where you can get free vector Icon images for your website. As described on their “get-started” page, they offer a CDN (Content Delivery Network) URL that you can place into your web page and the SVG icons will be loaded asynchronously into the page: https://fontawesome.com/get-started Here is what the CDN would … Continue reading HTML: How to get vector icon images into your web page using Font Awesome
HTML: How to get random stock images on your web page using unsplash.com
The website https://unsplash.com provides a free service that allows web developers to use random images of any size on their websites. All you have to do is place a URL like this in your HTML img tag, with the size of the image listed at the end of the URL. For example, this will produce … Continue reading HTML: How to get random stock images on your web page using unsplash.com
CSS: How to use the display property
Here is what w3schools.com says about the CSS display property: The display property specifies the display behavior of an element. Note: Every element on a web page is a rectangular box. The CSS display property determines how that rectangular box behaves. There are multiple settings that can be used with the CSS display property. Here … Continue reading CSS: How to use the display property
CSS: How to define and use variables
CSS has a mechanism that allows you to set up custom properties and then use them in CSS definitions as if they are variables. For example: /* CSS Variables */ :root { –primary: #fff; –dark: #333; –light: #fff; –shadow: 0 1px 5px rgba(104, 104, 104, 0.8); } When defining CSS variables, there are two syntactical … Continue reading CSS: How to define and use variables