Found 8895 Articles for Front End Technology

How to underline all words of a text using jQuery?

Tarun Singh
Updated on 04-May-2023 16:02:08

638 Views

Underlining text is a common requirement in web development, and it can be done easily with the help of jQuery. In this article, we will see how to underline all words of a text using jQuery and learn the different methods to perform this. Before we dive into the different methods, let's first understand the basic concept of jQuery. jQuery is a fast and concise JavaScript library that simplifies HTML document traversing, event handling, and animation. It is designed to make things easier for web developers, and it does so by providing a simple syntax that is easy to read ... Read More

How to translate an image or icon by hovering over it?

Tarun Singh
Updated on 04-May-2023 16:00:30

2K+ Views

In web development, interactivity is key to providing a memorable user experience. One common technique used to add interactivity is hovering over images or icons to reveal more information or change the appearance. Translating an image or icon by hovering over it is a great way to add some movement and interest to your website. In this article, we will learn how to translate an image or icon on hover. To perform this task, we will learn different approaches using only HTML and CSS. Different Methods to Translate an Image or Icon on Hover Method 1: CSS Transitions The first ... Read More

How to transform child elements preserve the 3D transformations?

Tarun Singh
Updated on 04-May-2023 15:53:27

121 Views

Being a web developer, it's important to have a solid understanding of 3D transformations and how to apply them to child elements. Transforming child elements can be a bit tricky, as we'll need to make sure that the transformations of the parent element are preserved. CSS 3D transforms create depth and visually interesting elements on the web page using perspective. In this article, we will learn how to transform child elements and preserve 3D transformations. We will learn different methods to transform the child elements in HTML. Different Methods to Transform Child Elements Preserve the 3D Transformations To transform the ... Read More

How to test CSS property of an element using Protractor?

Tarun Singh
Updated on 04-May-2023 08:34:09

220 Views

Testing CSS properties is crucial in ensuring the quality of a web application. CSS properties determine how elements are displayed on a webpage, such as font size, color, and layout. Testing CSS properties can help detect bugs and ensure that the application looks and functions as intended. A tool known as a protractor provides developers with different methods to test CSS properties. Protractor is a popular end-to-end testing framework that uses WebDriver to automate interactions between a web application and a browser. It is widely used to test Angular applications, but can also be used to test other web applications. ... Read More

How to submit a form on Enter button using jQuery?

Tarun Singh
Updated on 04-May-2023 08:29:35

4K+ Views

jQuery- a very popular JavaScript library that simplifies the process of HTML document manipulation, event handling, and animation. It consists of a set of functions that are used to traverse, manipulate, and modify HTML elements on the page. It is also cross-browser compatible and works seamlessly with most modern browsers. We always used forms on our websites whether in the form of the login page, contact us section, etc. There we always have to submit the form by clicking the button but how it can be possible to submit a form using the Enter key? Submitting a form is a ... Read More

How to style scrollbar thumb for the webkit browsers and what are components of scrollbar?

Tarun Singh
Updated on 03-May-2023 18:02:22

636 Views

Scrollbars are an essential part of web browsing, allowing users to navigate through long pages of content. Webkit-based browsers such as Safari and Google Chrome offer several ways to style scrollbar thumbs, which are the draggable handles that move up and down the scrollbar track. Scroll bars are an essential feature for any window that displays content extending beyond its borders. The inclusion of a scroll bar provides users with a means of navigating through the content of the client area. A scroll bar's orientation is responsible for determining the direction in which scrolling occurs when the user interacts with ... Read More

How to style label associated with selected radio input and checked checkboxes using CSS?

Tarun Singh
Updated on 03-May-2023 17:56:12

3K+ Views

Labels associated with radio buttons and checkboxes are a crucial component in creating user-friendly web forms. Styling them can not only make the form look better but also enhance the user experience by providing visual cues about selected options. Labels in HTML are used to associate a description with an input element, such as a text input, checkbox, radio button, or dropdown list. This element usually appears before the input element and provides a clear and concise description of what the input element is for. Input elements in HTML are used to collect user input data in a form. ... Read More

How to style icon color, size, and shadow by using CSS

Tarun Singh
Updated on 03-May-2023 17:54:10

2K+ Views

Icons are an essential part of any website or application, as they give us a quick and easy way for users to understand and interact with the content. However, using default icons can make a website look generic and unappealing. Using CSS, we can style icon color, size, and shadow to create a unique and visually appealing user experience. In this article, we will learn how to style icon color, size, and shadow using CSS. We will learn the different methods to style the icons in CSS. Different Methods to Style Icons in CSS Method 1: Using Font Awesome Icons ... Read More

What is the use of Mixins in LESS?

Mohit Panchasara
Updated on 03-May-2023 17:52:33

127 Views

IN LESS, mixins provide a way to group a set of CSS properties and reuse them across different rule sets in our stylesheet. When we include a mixin in a rule set, all of the CSS properties defined in the mixin are added to the rule set where the mixin is included. By defining a mixin, developers can group related styles together and apply them to multiple selectors, making it easier to maintain consistent styles across a website or application. Let’s understand it via the examples below. So you can get more clearance about Mixins. Syntax Users can follow ... Read More

What is the use of Escaping in LESS?

Mohit Panchasara
Updated on 03-May-2023 17:50:07

408 Views

In LESS, the "escaping" allows us to use any arbitrary string as a property or variable value. Sometimes, we may use special characters or symbols in our LESS code that can cause problems when the code is compiled. Escaping is a technique that helps prevent such issues by enclosing these special characters and symbols within a special container. In this tutorial, we'll explore why escaping is necessary for LESS and how it works. Syntax Users can follow the syntax below to use “escaping” in LESS. @property_name: ~"anything"; In the above syntax, we have used the tilde symbol (~) before ... Read More

Advertisements