Found 8895 Articles for Front End Technology

How to scroll to a specific element using jQuery?

Tarun Singh
Updated on 02-May-2023 13:43:25

18K+ Views

jQuery- a popular JavaScript library that is used in manipulating HTML documents, handling events, creating animations, and performing other common web development tasks. jQuery is famous for its ability to simplify JavaScript programming by providing a simple and concise syntax for selecting and manipulating DOM elements. Like using jQuery, instead of writing complex JavaScript code to traverse the DOM and manipulate elements, we can use jQuery to do it with just some lines of code. We sometimes encounter large content pages on websites and to go to a specific section, we want to perform the scrolling in the page ... Read More

How to create a Share Button with different Social Handles using HTML and CSS?

Riya Kumari
Updated on 28-Apr-2023 17:26:33

8K+ Views

In today's digital age, social media has become an essential part of our lives. Whether it's for personal or professional use, we all want to share our content with the world. That's where social sharing buttons come in handy, allowing users to quickly and easily share content on their favorite social media platforms. In this article, we will explore how to create a share button with different social handles using HTML and CSS. Create a Share Button With Different Social Handles We will walk through step-by-step instructions on how to create a share button with multiple social media options, including ... Read More

4 Different Ways to Center an Element Using CSS

Riya Kumari
Updated on 28-Apr-2023 17:34:24

106 Views

When designing a webpage or document, it's important to ensure that elements are visually balanced and positioned correctly. One common task in web development is to center an element within its container. While it may seem like a simple task, there are multiple ways to achieve this using CSS. In this article, we will explore four different methods for centering elements using CSS. We'll cover techniques using text-align, margin, Flexbox, and CSS Grid, and discuss the pros and cons of each method. Whether you're new to web development or looking to improve your skills, mastering these techniques will help you ... Read More

How to drop fill color to change the image color using HTML and CSS?

Riya Kumari
Updated on 20-Nov-2023 11:50:46

1K+ Views

In the world of web development, it's essential to have knowledge about the latest CSS and HTML techniques to add stunning visual effects to a website. One such effect is the "color drop effect, " which allows you to change the color of an image on hover by dropping a fill color on it. With this effect, you can make your website more interactive and engaging for the visitors. In this article, we will guide you through the process of creating a color drop effect using HTML and CSS. So, whether you are a beginner or an experienced web developer, ... Read More

Bottom Half Hidden Text Revealer on Mouse Over in CSS

Riya Kumari
Updated on 28-Apr-2023 17:18:28

333 Views

Typography is used in web design to engage people, convey a message, and make a visual effect. Compared to print typography, digital typography allows web designers more fluidity and versatility. It's a crucial element in user interface design. It aids in building a strong visual hierarchy, establishing the website's general tone, and striking a solid aesthetic balance. In addition to improving readability and accessibility, typography should be utilized to enlighten people. In this article, we will discuss about how to create an effect in which the bottom half of the text will be hidden and it will appear when the ... Read More

How to design a modern sidebar menu using HTML and CSS?

Riya Kumari
Updated on 28-Apr-2023 17:15:30

2K+ Views

When you think about the layout of a typical website, it is likely that you include a column of important links (navigation links for various sections in the webpage) to the right or left of the main content area. This component is known as ‘sidebar’ and is commonly used as menu across the web. Although it is commonly used, the developers generally add this element to the website for navigating from one page to other, even to different sections of a webpage. Let’s understand this feature and try to create a modern sidebar by only using HTML and CSS. What ... Read More

How to Create Image Stack Illusion by using HTML and CSS?

Riya Kumari
Updated on 28-Apr-2023 16:43:25

1K+ Views

Visual illusions are quite fascinating when it comes to web development. Using visual illusions in our websites attracts users since it can play with their minds. It tricks our brains into believing something which is actually not present. These illusions can be created using various techniques in CSS. One of most commonly used illusion is image stack illusion, which simply a delusion of depth. In this article, we will discuss steps involved in creating an image stack illusion by only using HTML and CSS. Let’s get started. What is Image Stack Illusion? Image stack illusion is a visual delusion which ... Read More

Primer CSS Truncate Expand on Hover or Focus

Riya Kumari
Updated on 28-Apr-2023 16:41:40

307 Views

Text display is an essential factor in web designing which affects the user experience and the readability of your website. If your text is displayed properly in an organized manner, the users will easily understand it and hence, will be attracted to your website. However, sometimes, the text may be too long for a specified space in the webpage. To properly display that text, we use the truncate method. This method is offered by Primer CSS in which you can not only truncate your text but also expand it on hover or focus effect. In this article, we will discuss ... Read More

Primer CSS Truncate Custom Max Widths

Riya Kumari
Updated on 28-Apr-2023 16:39:27

73 Views

In web development projects, developers face situations where they need to display the text within specified amount of space due to several reasons like client’s demand, overall appearance, limited resources etc., The truncate property is an efficient feature in CSS which resolves this issue. It enables the developers to display a single line text and truncate the overflowed text with an ellipsis. However, depending upon the situation the need of customizing the maximum width of the truncated text might arise. In this article, we will discuss how we can customize the maximum width using Primer CSS, a popular open-source CSS ... Read More

How to create an ember handlebars template?

Tarun Singh
Updated on 02-May-2023 13:11:52

134 Views

Ember.js is a framework based on javascript that is widely used in building complex web applications. The framework allows developers to create single-page web applications that are scalable just by using some common idioms, best practices, and patterns from other single-page-app ecosystem patterns in the framework. Handlebars templating system is one of its key features that provides a simple and powerful way to create dynamic web pages. In this article, we will see how to create an ember handlebars template. What is Template in Ember? Templates in ember are used in defining the user interface (UI) of a ... Read More

Advertisements