As a front-end developer sometimes you need to layout HTML elements is a particular layout by each other. The difficulty of this depends on the imagination of your UI designer but in general, the layouting items in HTML without knowing the concepts and tricks is plenty challenging.
You can read the updated version on bhnmzm.com
Figure1: example arch arranging made with ellipsis-html
The most common unusual layout that I dealt with in my projects and I have seen it in many UI designs is arranging items on an arch. For example, laying in the border of a semicircle or a full circle, or arranging in the border of a semi-ellipse. To make these you need to encounter math formula and complex concepts.
The good news is that I developed a mini tool exactly for this purpose, I mean for the arranging HTML elements along ellipse subset shapes. I named it ellipsis-html.
Using ellipsis-html you can layout child items of an element along a circle, semicircle, ellipse or any subset shape of it. You can see samples made with ellipsis-html in the below figure.
Figure2: ellipsis-html sample layouts
It’s only 2KB and easy to use. I explained what you need in the GitHub readme, so you could read the readme too.
Check demo here 😎
You can arrange your elements in any subset shape of an ellipse with changing the options and put it in any position of your parent element.
Here is the code was written to make the result that you saw in Figure 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ellipsis-html Sample with avatars</title>
<!-- adding library -->
<script src="http://unpkg.com/ellipsis-html/lib/ellipsis-html.min.js"></script>
<style>
body {
background-color: #efefef;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin-top: 5rem;
}
.title {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.title h1 {
margin-bottom: 0;
}
.title p {
font-size: 16px;
opacity: 0.7;
margin-top: 0.5rem;
}
#avatars {
width: 80%;
margin: 0 auto;
height: 80px;
max-width: 700px;
}
#avatars img {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 1px 1px 7px 4px rgb(0 0 0 / 0.16);
}
</style>
</head>
<body>
<div class="title">
<h1>My Friends</h1>
<p>with ellipsis-html</p>
</div>
<div id="avatars">
<img src="https://randomuser.me/api/portraits/women/2.jpg" />
<img src="https://randomuser.me/api/portraits/men/6.jpg" />
<img src="https://randomuser.me/api/portraits/women/12.jpg" />
<img src="https://randomuser.me/api/portraits/women/5.jpg" />
<img src="https://randomuser.me/api/portraits/women/60.jpg" />
<img src="https://randomuser.me/api/portraits/men/11.jpg" />
<img src="https://randomuser.me/api/portraits/women/50.jpg" />
</div>
<script>
const elm = document.getElementById("avatars");
const options = {
type: "equal",
size: 0.5,
reflection: 1.5,
rotateY: 157,
reverse: true,
shiftX: 0,
shiftY: 0
};
const htmlArc = new EllipsisHTML(elm, options);
</script>
</body>
</html>
If you encounter any problem, bring it up as an issue or contribute to the project and fix it yourself.
Do not forget to star the repo. Like other developers, star motivates me too. 🙃😉
Top comments (0)