On a website, in the bottom-right, you must have seen a popup chat windows. Can be mostly seen on a website hosting website. This allows a user to directly ask sales questions before buying the product. Such popup chat window can be easily created on a web page with CSS. Let us see how. Create the chat button First, create a button using the element − Chat Position the chat button To position the chat button, use the position property with the value fixed. The right and bottom properties are used to position and place the button on bottom-right − .openChatBtn { background-color: ... Read More

To create a chat message with CSS, the code is as follows −Example Live Demo    body {       margin: 0 auto;       max-width: 800px;       padding: 0 20px;       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    .message {       font-size: 18px;       font-weight:500;       border: 2px solid #dedede;       background-color: #55e4a8;       color:rgb(0, 0, 0);       border-radius: 12px;       padding: 10px;       margin: 10px 0;    }    .darker ... Read More

We will create a coming soon page with a timer. The timer is set using the setInterval() function. The time is fetched using the getTime() function. Set the div We have set the image as a div class. Rest, the coming soon text and the timer is placed within it − COMING SOON Place the Image The image is now placed using the background-image property. The position is set using the background-position property” .bgimg { background-image: url("https://images.pexels.com/photos/117602/pexels-photo-117602.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); height: ... Read More

A divider on a web page is separate styled for dividing sections. These sections appear horizontally on a web page. A dotted, dashed, double, etc. dividers can be easily created. It works like borders and the color of such dividers can easily change. To create a divider, use the element and style it with border properties on a web page. Let us see how to create dividers with CSS. Create a dashed divider Create an element for the divider − Style the to create a dashed divider − .dashed { ... Read More

We can easily create a vertical line on a web page using the border-left property. The border width, style and color needs to be also set for the line to be visible on the web page. Create a div First, create a container for the line to appear − Create a line To let the line to appear, use the border-left property − .vLine { border-left: 6px solid rgb(128, 0, 128); height: 500px; margin-left: 5%; } Create a vertical line To create a vertical line with ... Read More

To change bullet colors for lists, use the ::before selector. Also, to allow adding a color, you need to set the list-style to none. Set an Unordered List For our example, we have set a element − Cricket Football Tennis Archery Basketball Hockey Set List Style The list-style property is set to none − ul { list-style: none; } Change the Bullet Color Use the ::before selector and set the bullet color. To display the bullet, use the content: \2022 unicode. The color is changed using the color property − ul li::before { ... Read More

CSS3 provides a layout mode Flexible Box, commonly called as Flexbox. Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily create layouts for complex applications and web pages. It includes the container, flex items, etc. The container has the following properties − flex-direction flex-wrap flex-flow justify-content align-items align-content Set a Parent div First, set a parent div and style the container with display flex. The flex container becomes flexible with display flex. Wrap the flex item with the flex-wrap: wrap − .container { display: flex; ... Read More

To change the column width based on screen size, use media queries. Media Queries is used when you need to set a style to different devices such as tablet, mobile, desktop, etc. First, set the div − Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod, maiores! Set the Initial Width To set the width of the above div, use the width property in CSS − .sample { width: 50%; background-color: lightblue; height: 200px; font-size: 18px; } Change the Column Width Now, to change ... Read More

To create linear gradient, use the linear-gradient() method of the background-image property. Syntax The following is the syntax − background-image: linear-gradient(angle, color-stop1, color-stop2); The location at color stops can be set as a percentage or absolute length. For example, for linear gradient. The color stops are the colors you want to set for the smooth transitions − background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% ); The gradient can also be set on an image using the url() with linear-gradient() − ... Read More

The property opacity is the modern solution and works for Firefox , Safari, Opera, and every version of chrome. The -moz-opacity property is the opacity property for Firefox versions older than 0.9 while the –khtml-opacity property is for safari versions starting with 1. Using all these values together as a fallback for modern opacity allows us to use opacity in all browsers − .transparent { filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } Opacity That Works on all Browsers For image opacity that works in ... Read More