CSS Position: Relative vs Position Absolute

The CSS position property defines, as the name says, how the element is positioned on the web page. There are several types of positioning: static, relative, absolute, fixed, sticky, initial, and inherit. First of all, let’s explain what all of these types mean.

Static – this is the default value, all elements are in order as they appear in the document.
Relative – the element is positioned relative to its normal position.
Absolute – the element is positioned absolutely to its first positioned parent.
Fixed – the element is positioned related to the browser window.
Sticky – the element is positioned based on the user’s scroll position.

Now that we have explained the basics, we will talk more about the two most commonly used position values – relative and absolute.

Link: https://dzone.com/articles/css-position-relative-vs-position-absolute?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

CSS Columns

The text breaking option has not been the most popular text option ever since the advent of magazine layout. Just like in print design, there are columns in web design too. The best and clearest way to use it is the column option in CSS.
It is boring, content and design-wise, for text content to be extended over the full web page, so this is rare to see.

Link: https://dzone.com/articles/css-columns?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

CSS Basics: The Second “S” in CSS

CSS is an abbreviation for Cascading Style Sheets.
While most of the discussion about CSS on the web (or even here on CSS-Tricks) is centered around writing styles and how the cascade affects them, what we don’t talk a whole lot about is the sheet part of the language. So let’s give that lonely second “S" a little bit of the spotlight and understand what we mean when we say CSS is a style sheet.

The Sheet Contains the…

CSS Basics: The Second “S” in CSS is a post from CSS-Tricks

Link: https://css-tricks.com/css-basics-second-s-css/

Getting Bootstrap Tabs to Play Nice with Masonry

On the Masonry website, we read that Masonry is …

a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

Bootstrap is one of the most widely adopted, open-source, front-end frameworks. Include Bootstrap in your project, and you’ll be able to whip up responsive web pages in no time.
If you tried using Masonry together with the Tabs widget, one of the many JavaScript components Bootstrap has to offer, chances are you’ve stumbled on some kind of annoying behavior.
I did, and this article highlights what the issue is and what you can do to solve it.
Bootstrap Tabs Explained
Bootstrap’s Tabs component includes two key, related pieces: a tabbed navigation element and a number of content panels. On page load, the first panel has the class .active applied to it. This enables the panel to be visible by default. This class is used via JavaScript to toggle the panel’s visibility via the events triggered by the tabbed navigation links: if .active is present the panel is visible, otherwise the panel is hidden.
If you have some web content that’s best presented in individual chunks, rather than crammed all in one spot, this kind of tabs component might come in handy.
Why Masonry?
In some cases, the content inside each panel is suited to being displayed in a responsive grid layout. For instance, a range of products, services, and portfolio items are types of content that can be displayed in grid format.
However, if grid cells are not of the same height, something like what you see below can happen.

A wide gap separates the two rows of content and the layout appears broken.
Nowadays, Bootstrap solves the equal-width issue with the brand new card component, which is based on Flexbox. Just adding the card-deck class to a group of card components is sufficient to achieve equal-width columns.
If you like your cards to be of uneven length, you could use CSS3 Multi Column Layout. (After all, even though there are some browser support bugs, overall it’s quite good.) This underlies the new card columns option that comes packaged with the card component. However, if you still love the nice animation that the Masonry JavaScript library provides out of the box, and its wide browser compatibility, JavaScript is still a viable option in this case.
Setting Up a Demo Page
Getting a demo page up and running helps to show how integrating Bootstrap’s Tabs with Masonry is not as straightforward as one might expect.
This article’s demo page is based on the starter template, available on the Bootstrap website.
Below is the skeleton of the markup for the tabs component:

Benefits of Using CSS Preprocessors Like SASS

In web development, it is impossible to implement professional mockups without the use of HTML and CSS. If the markup language allows us to make the template from the required elements, CSS will convert this template to the desired form, as in the original mockup.
It would seem, with the help of pure CSS, you can make the page the way your customer wanted to see it. However, if someone opens your only CSS file and tries to correct something, are you sure that the code will be readable, editable, structured, and understandable? If your project is huge and consists of many parts, are you sure that you can easily support it in the future? If you use a CSS preprocessor, then the answer is yes. Why? Let’s find out.

Link: https://dzone.com/articles/benefits-of-using-css-preprocessors-like-sas?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Fade in Lazy Loaded Images With React and CSS: A Quick Guide

Say you want to lazy load some images on your website. You don’t want them to just pop into existence and scare the user. A nice fade in effect works much better.

Here’s the problem: There’s no good pre-built React component for this. Or I suck at finding it.

Link: https://dzone.com/articles/fade-in-lazy-loaded-images-with-react-and-css-a-qu?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Experimental CSS Pseudo-Classes and Pseudo-Elements

In my previous article, I’ve showcased new HTML and CSS features to look forward to in 2018. In this post, I’m digging a bit deeper and showing some experimental CSS pseudo-classes and pseudo-elements that will soon provide lots of new possibilities for developers.
Please note that features described in this article are experimental and therefore aren’t working in all browsers, or require the use of vendor prefixes. Make sure to visit the compatibility links to know in which situation a particular pseudo-class or pseudo-element can be used.

Link: https://dzone.com/articles/experimental-css-pseudo-classes-and-pseudo-element?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

5 Exciting New HTML and CSS Features to Look Forward to in 2018

HTML and CSS are always evolving, offering front-end devs and web designers a lot of new possibilities. Today, let’s have a look at 5 really exciting new HTML and CSS features for creating better websites in 2018.

Released along with the new HTML 5.2 spec in December 2017, the <dialog> element offers the possibility to create native dialogs in pure HTML.

Link: https://dzone.com/articles/5-exciting-new-html-and-css-features-to-look-forwa?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev