Blog IT
How to Add a Vertical Line in HTML
In this snippet, you can see how to add a vertical line in HTML. But you need to use CSS, as well. Add a vertical line on the left or right side by using the border-left or border-right properties, respectively. See also how to center a vertical line and how to add a vertical line before a text.
How to Add an Onclick Effect with HTML and CSS
The most common way of creating a click event with CSS is using the checkbox hack. This method has broad browser support. You need to add a for attribute to the <label> element and an id attribute to the <input> element.
Disable a block for a specific page drupal
Drupal offers a mechanism in the backoffice to control the display of blocks, but it is sometimes necessary to set up a little more complex logic.
Here we are going to hide the "id_block" block from the "header" region when we are on an "article" type node via the HOOK_preprocess_page hook:
How to Open Hyperlink in a New Window
Hyperlinks are used to jump from one page to another. A hyperlink commonly opens in the same page by default. But it is possible to open hyperlinks in a separate window.
How to Animate the Background of the Progress Bar
In this snippet, we’re going to animate the progress bar created with the HTML <progress> tag. In our example, we style Shadow DOM elements, but one thing that may cause difficulties is animating the background which is represented as a repeating linear-gradient.
How to Create an Animation with a Delay in CSS
To delay an animation, we use the CSS animation-delay property, which specifies the time between an element being loaded and the start of an animation. But there can be some difficulties when delaying the animation, such as the problem when an element disappears after the animation. Let’s see the solution to this.
Which is Better to Use in CSS: px, em, or rem
First of all, we must understand that there isn’t any best option of measurement unit for all cases, and that’s why this question is mostly opinion-based. But let’s discuss each of the units.
Using px
CSS defines a reference pixel that measures the pixel size on a 96dpi display. On display with a dpi significantly different from 96dpi, the user agent will rescale the px unit so that its size will match the one of a reference pixel.
How to Disable Form Fields with CSS
You can disable form fields by using some CSS. To disable form fields, use the CSS pointer-events property set to “none”.
<!DOCTYPE html>
<html>
<head>
<title>How to Disable Form Fields with CSS</title>
<style>
input[name=yourName] {
pointer-events: none;
}
</style>
</head>
<body>
<input type="text" name="yourName" value="blog it">
</body>
</html>
How to create HTML <iframe> Tag
The <iframe> tag creates an inline frame for embedding third-party content (media, applets, etc.). Although the content of the frame and the web page are independent, they can interact through JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>HTML <iframe> Tag</title>
</head>
<body>
<iframe src="http://blog-it.tn/"></iframe>
</body>
</html>
How to Make the Middle Item Stay Centered
It is possible to center the middle item regardless of the widths of siblings by using Flexbox. You need to use nested flex containers and auto margins. Below, you can see how it can be done.