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
Creating a Responsive Logo with CSS min() Function (No Media Query Involved)
Using the CSS min() function, we can create a responsive logo in our webpages. It allows us to specify a minimum value to a CSS attribute.
Syntax
The syntax of CSS min() property is as follows −
Selector {
attribute: min(/*value*/,/*value*/);
}Example
The following examples illustrate CSS min() property.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
height: min(40vw, 384px);
margin: 3%;
}
</style>
</head>
<body>
<div>
<img src="https://images.unsplash.com/photo-1610672777263-9bab3d7947f0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=384&ixlib=rb-1.2.1&q=80&w=384" alt="bride-logo" />
<h3>Responsive LOGO!</h3>
<p>Donec consectetur, magna nec rhoncus sodales, erat dui suscipit est, sit amet aliquam justo metus eu est. Praesent eleifend sodales orci, vel ornare sapien porta id. Pellentesque ipsum sem, aliquam vitae venenatis quis, lobortis vitae est. Proin a semper lectus. Nam rhoncus ipsum quis nisl porta pretium. Fusce pharetra sem in tortor aliquet fermentum. Ut facilisis luctus ipsum eu mattis.</p>
<p>
Vivamus quis velit diam. Curabitur tempus diam nec enim tincidunt posuere. Nulla nec nunc in dui aliquam congue. Nulla commodo tincidunt iaculis. Nulla egestas odio et arcu elementum euismod.
</p>
</div>
</body>
</html>This gives the following output
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 2%;
float: left;
box-shadow: inset 0 0 22px green;
}
img {
width: min(45vw, 512px);
margin: 3%;
}
</style>
</head>
<body>
<div>
<img src="https://images.unsplash.com/photo-1611589694870-377ee3903be0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=512&ixlib=rb-1.2.1&q=80&w=512" alt="home" />
</div>
<h3>Another Responsive LOGO!</h3>
<p>Donec consectetur, magna nec rhoncus sodales, erat dui suscipit est, sit amet aliquam justo metus eu est. Fusce pharetra sem in tortor aliquet fermentum. Ut facilisis luctus ipsum eu mattis.</p>
</body>
</html>This gives the following output
Updated on: 10-Feb-2021
203 Views
Advertisements