Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create Paradoxical effect using CSS?
The Paradoxical effect is a visual effect which is used to create optical illusion of any object, element or text that appears to move in a contradictory way. This effect can be used to add interesting and unique element to your web page.
This can be easily created using HTML and CSS. In this article, we will discuss about the techniques and properties which is required for creating Paradoxical effect using CSS. We will start creating simple paradoxes using combination of two CSS properties simultaneously, and then dive into more advanced techniques which enables us to create complex paradoxical effects using CSS animations.
By the end of this article, you will have the knowledge and skills to create stunning and visually engaging paradoxical effects on your own web pages.
Creating Paradoxical Effect
A paradoxical effect using CSS can be achieved by using CSS properties that contradict each other, resulting in a visual contradiction or unexpected behavior. Here are few examples.
Example
Here, we have created few paradoxical effects using combination of CSS properties like float and clear, text-align and vertical-align, transform and transition, and so on. Following are the steps to be followed −
Create a div, span and button element.
Style them using CSS.
For the div element, use float and clear properties. For span element, use text-align and vertical-align properties. For button, use transform and transition.
<html>
<head>
<style>
div {
float: left;
clear: both;
background-color: yellow;
padding: 20px;
margin: 15px;
border: 1px solid black;
}
span {
text-align: center;
vertical-align: top;
background-color: lightblue;
padding: 20px;
margin: 10px;
display: inline-block;
border: 1px solid black;
}
button {
transform: rotate(180deg);
transition: transform 1s;
background-color: pink;
color: white;
border: none;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
button:hover {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div> This is a div element </div>
<span> This is a span element </span>
<br>
<br>
<button> Click me </button>
</body>
</html>
The div element is floated to the left, but then cleared on both sides, resulting in it not floating at all. This can be achieved using float and clear property. Keep the value for float as left and for clear as both simultaneously for any element. This makes the element float to the left, but then cleared both sides, resulting in the element not floating at all.
Using the text-align and vertical-align can also create paradoxical effect. The span element has text centered horizontally, but aligned to the top vertically, resulting in text that appears off-center.
Using transform and transition properties. The button element is initially rotated 180 degrees, but when hovered over, it rotates back to 0 degrees using the transition property to create a smooth animation between the two states.
Example
Moving background, stationary content: This effect can be achieved by animating the background-position property of an element while keeping its content stationary. Following are the steps to be followed −
Create a container div element for the background image. Within it, create another div element which contains the content or the text.
Specify the dimensions of the background image. Also, keep background-size as cover and overflow to be hidden.
Align the content to the center of the background.
Now, use CSS animation to animate the background-position of the background. The background-position is from (0 0) to (100% 0) so that the background moves along the X-axis.
<html>
<head>
<style>
.paradox {
background: url('https://images.ctfassets.net/hrltx12pl8hq/4f6DfV5DbqaQUSw0uo0mWi/6fbcf889bdef65c5b92ffee86b13fc44/shutterstock_376532611.jpg?fit=fill&w=800&h=300');
background-size: cover;
height: 500px;
width: 100%;
overflow: hidden;
}
.paradox .content {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
color: white;
font-size: 2em;
}
@keyframes background-slide {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
.paradox {
animation: background-slide 10s infinite linear;
}
</style>
</head>
<body>
<div class="paradox">
<div class="content">
<h1> Static Content </h1>
<p> This content remains stationary while the background moves. </p>
</div>
</div>
</body>
</html>
Example
Stationary content, moving border: We can create this effect by animating the border property, while the content remains stationary. Following are the steps to be followed −
Create a container div element for the background image. Within it, create another div element which contains the content or the text.
Specify the dimensions of the background image. Also, keep position as relative and overflow to be hidden.
Align the content to the center of the background.
Now, use CSS animation to animate the border of the background. On hovering, the size of the border increases from 0px to 20px and then returns to 0.
<html>
<head>
<style>
.paradox {
background: url('https://images.ctfassets.net/hrltx12pl8hq/4f6DfV5DbqaQUSw0uo0mWi/6fbcf889bdef65c5b92ffee86b13fc44/shutterstock_376532611.jpg?fit=fill&w=800&h=300');
height: 300px;
width: 430px;
margin: 10px;
position: relative;
overflow: hidden;
}
.paradox .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.paradox:hover {
animation: border 2s infinite linear;
}
@keyframes border {
0% {
border: 1px solid green;
}
50% {
border: 20px solid green;
}
100% {
border: 1px solid green;
}
}
</style>
</head>
<body>
<div class="paradox">
<div class="content">
<h1> Static Content </h1>
<p> This content remains stationary while the border moves. </p>
</div>
</div>
</body>
</html>
In the above example, the content and the background remains stationary while the border moves.
Conclusion
Using various CSS properties, you can create unique paradoxical effects on your web pages which will make your website user-friendly as well as it will increase its popularity. Creating such visual effects attracts users’ attention and helps you to create dynamic websites.
214 Views
