The realm of web development is continuously progressing, with designers constantly seeking innovative methods to captivate users and deliver remarkable online interactions.
Two innovative methods, named Askew and Blink, can be utilized to enhance the visual appeal of an HTML element on a webpage. This article will provide a detailed explanation of both effects along with illustrative examples.
Askew Effect
The Askew Effect involves applying a visual distortion to HTML elements, causing them to appear slanted or skewed.
To introduce a skew effect to an HTML element, you can utilize the CSS property "transform: skew".
The CSS property "transform" is utilized with the CSS function "skew" to apply transformations to elements on a webpage. The function "skew" is specified as the value for the "transform" property.
The skew function is capable of accepting a pair of values, specifically two angles, where one aligns with the x-axis and the other with the y-axis.
Syntax of skew Function
skewX(x-angle)
The skew syntax mentioned earlier includes a single parameter, specifically the x-angle, which denotes the angle on the horizontal or x-axis.
skewY(y-angle)
The skew syntax mentioned above consists of a single parameter, referred to as the y-angle, which denotes the angle along the vertical axis (y-axis).
skew(x-angle, y-angle)
The skew syntax shown above consists of two parameters. The x-angle indicates the angle on the x-axis, which is horizontal, while the y-angle indicates the angle on the y-axis, which is vertical.
Examples of the Askew Effect
Example 1:
In this instance, we'll demonstrate the application of the skew method to slant the <p> component by 20 degrees along the horizontal axis and by 10 degrees along the vertical axis.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-1 of using the askew effect</title>
<style>
body {
text-align: center;
font-family: 'Courier New', Courier, monospace;
}
p {
height: 100px;
width: 250px;
background-color: rgb(181, 234, 117);
border: 2px dotted rgb(235, 48, 48);
}
p#skew {
transform: skew(10deg,15deg);
}
</style>
</head>
<body>
<h1>Example-1 showing the askew effect on the <p> element</h1>
<p>
It is a normal <p> element when the skew() function is not applied.
</p> <br>
<p id="skew">
This <p> element is tilted 10 degrees on the X-axis and 15 degrees on the Y-axis.
</p>
</body>
</html>
Output:
Below, you can observe that the <p> element's appearance has been altered by utilizing the skew function.
Example 2:
In this instance, we will demonstrate the application of the skew method to slant the <h1> element at a 25-degree angle horizontally and a 20-degree angle vertically.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-2 of using the askew effect</title>
<style>
body {
text-align: center;
font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
}
.skew {
height: 150px;
width: 350px;
background-color: rgb(211, 222, 247);
color: blueviolet;
border: 2px solid rgb(127, 125, 198);
transform: skew(25deg,20deg);
}
</style>
</head>
<body>
<h1>Example-2 showing the askew effect on the <h2> element</h1>
<br>
<center>
<div>
<h2 class="skew">This element is <h2> which shows askew effect.</h2>
</div>
</center>
</body>
</html>
Output:
As illustrated in the example below, the <h2> element's appearance has been altered by utilizing the skew method.
Example 3:
In this instance, we'll demonstrate the application of the skew method to slant the navigation bar by 6 degrees horizontally and by -2 degrees vertically.
Code:
Output:
The navigation menu displayed below has been altered using the skew function.
Example 4:
In this instance, we'll employ the skew method to slant the table element by 30 degrees horizontally and 15 degrees vertically.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-4 of using the askew effect</title>
<style>
body {
text-align: center;
font-family: 'Times New Roman', Times, serif;
}
.table, th, td {
border: 2px solid rgb(197, 71, 145);
color: rgb(22, 22, 173);
}
.table {
transform: skew(-5deg, 25deg);
}
th {
padding: 12px;
background-color: #f5a0d9;
color: white;
}
td {
padding: 12px;
text-align: center;
}
</style>
<body>
<h1>Example-4 showing the askew effect on the <table> element</h1> <br>
<center>
<table class="table">
<caption>Student Details</caption>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Vihaan</td>
<td>A+</td>
</tr>
<tr>
<td>002</td>
<td>Aadhya</td>
<td>B</td>
</tr>
<tr>
<td>003</td>
<td>Jaya</td>
<td>B+</td>
</tr>
<tr>
<td>004</td>
<td>Ishaani</td>
<td>A</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Output:
Below, it is evident that the <table> element has been altered in its appearance by utilizing the skew function.
Blink Effect
The blinking effect generates a flashing element that alternately appears and vanishes, resulting in a flickering visual effect. In previous iterations of HTML, the blink effect was achieved using the <blink> tag. However, in more recent versions of HTML, the <blink> tag is no longer endorsed due to its negative impact on user experience. Although some browsers may still recognize the <blink> tag, it is advisable to avoid its usage.
One way to achieve a blinking effect on an HTML element is by utilizing CSS animations or JavaScript.
Examples of the Blink Effect
Example 1:
In this instance, we will leverage CSS animations to generate a blinking effect on the specified <p> element.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-1 of using the blink effect</title>
<style>
body {
text-align: center;
font-family:'Courier New', Courier, monospace;
}
p {
font-size: large;
color: rgb(193, 90, 15);
}
@keyframes blink-effect {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.blinking-text {
animation: blink-effect 1s infinite;
}
</style>
</head>
<body>
<h1>Example-1 showing the blink effect on the <p> element.</h1>
<p class="blinking-text">The text written in this paragraph blinks.</p>
</body>
</html>
Output:
The <p> element's animation continuously loops, resulting in a blinking visual effect.
Example 2:
In this instance, we'll demonstrate the utilization of CSS animations to generate a blinking effect on the specified <h1> element.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-2 of using the blink effect</title>
<style>
body {
text-align: center;
font-family:'Courier New', Courier, monospace;
background-color: #fadada;
}
h1 {
font-size: 28px;
font-weight: bold;
color: #de2a2a;
animation: blink 1s infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<h1>Welcome to our tutorial!</h1>
<p>It is an Example-2 showing the blinking text effect on the <h1> element using CSS animations.</p>
</div>
</body>
</html>
Output:
The animation set on the <h1> element loops endlessly, resulting in a continuous blinking effect.
Example 3:
In this instance, we'll utilize CSS animations to generate a blinking effect on the specified <table> element.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-3 of using the blink effect</title>
<style>
body {
text-align: center;
font-family:'Courier New', Courier, monospace;
background-color: #f5f7e1;
}
.table, th, td {
border: 2px solid rgb(149, 133, 245);
color: rgb(211, 52, 57);
}
.blinking-effect {
font-size: 24px;
animation: blink 1s 6 alternate;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<h1>Example-3 showing the blink effect on the <table> element</table></h1>
<div class="blinking-effect">
<center>
<table class="table">
<caption>Employee Details</caption>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>501</td>
<td>Anurag</td>
<td>Sales</td>
<td>30,000</td>
</tr>
<tr>
<td>502</td>
<td>Pragya</td>
<td>Sales</td>
<td>25,000</td>
</tr>
<tr>
<td>503</td>
<td>Kavya</td>
<td>Software Engineering</td>
<td>45,000</td>
</tr>
<tr>
<td>504</td>
<td>Sneha</td>
<td>Customer Service</td>
<td>35,000</td>
</tr>
</tbody>
</table>
</center>
</div>
</body>
</html>
Output:
The animation that is implemented on the <h1> element alternates six times, resulting in a blinking visual effect.
Example 4:
In this instance, we'll demonstrate the utilization of CSS animations to produce a blinking effect on an element.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example-4 of using the blink effect</title>
<style>
body {
text-align: center;
font-family:'Courier New', Courier, monospace;
background-color: #b4f5a2;
}
li {
font-size: 24px;
font-weight: bold;
color: maroon;
text-align: left;
}
.blinking-effect {
font-size: 24px;
animation: blink 1s 10 alternate;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<h1>Example-4 showing the blink effect on the list items</table></h1>
<div class="blinking-effect">
<h2>List of electronic devices</h2>
<ul>
<li>Washing machine</li>
<li>Television</li>
<li>Microwave</li>
<li>Washing machine</li>
<li>Personal Computer (PC)</li>
<li>Laptop</li>
<li>Clothing Iron</li>
<li>Earphones</li>
<li>Air Conditioner (AC)</li>
<li>Bluetooth Speaker</li>
</ul>
</div>
</body>
</html>
Output:
The animation effect is set to repeat 10 times in succession on the list of items, resulting in a blinking visual impact.
Browser support
Below are the browsers that support the "transform" property to apply the skew effect and blink effect to an HTML element:
- Microsoft Edge
- Google Chrome
- Internet Explorer
- Safari
- Firefox
- Opera
Conclusion
In this tutorial, we explored Askew and Blink Effects in HTML. The askew effect is applied to tilt the HTML element along the horizontal (x-axis) or vertical (y-axis) using the skew function. This function is assigned as a value to the "transform" CSS property.
The blink effect is achieved by CSS animations, causing text to alternately appear and disappear. This effect can be configured to repeat indefinitely or for a defined number of iterations.