This content originally appeared on DEV Community and was authored by Akshaya Venkatesh
What to expect?
This blog explains why creating single div art is a popular trend and how to build the React JS logo with just one div and pure CSS.
What is the "Single Div" hubbub all about?
Let us consider a basic example - creating a series of different colored dots. I could just create an array of elements and assign different colors to them but if I am given a condition that I may use only one div element - I will choose to use the background property (among other ways) to achieve the same. This is the main reason for the popularity of this trend. It challenges the developer to harness or exploit many CSS properties that would not be used otherwise.
Breaking down the React logo
The logo is pretty straightforward - there are three elliptical orbits with a nucleus at their center in what I like to call "React Blue" (hex code - #61dafb).
HTML
As promised, HTML will have nothing but a <div /> tag.
CSS
Orbit shape
For the orbit's elliptical shape, we first create a class that can style all three orbits. It simply uses the border properties to define the shape.
.logo-orbit {
height: 100px;
width: 300px;
border-radius: 50%;
border: 10px solid $react-blue;
}
This can style any div to look something like this ?
The 3 orbits
For the central orbit, select the div tag and apply the .logo-orbit class. I have used Scss and extended the class name in the styles.
div{
@extend .logo-orbit;
}
For those not familiar with Scss, please replace @extend .logo-orbit with styles in the .logo-orbit class.
Next, we use the :before and :after pseudo-selectors. These are conventionally used for inserting content but here we use them for the other two orbits as follows.
:before, :after {.
@extend .logo-orbit;
content: "";
position: absolute;
top: -10px;
left: -10px;
box-sizing: inherit;
}
It is worth noting that although box-sizing is an inherited property, the pseudo-elements do not inherit them and require an explicit inheritance.
Next, we position the logo with rotation as follows.
&:before {
transform: rotate(60deg);
}
&:after {
transform: rotate(-60deg);
}
Now we are only left with the nucleus.
Nucleus
We use radial-gradient with the background property applied to the div for creating the nucleus as follows.
background: radial-gradient(circle, $react-blue 24px, transparent 25px);
With that the logo is done. The complete code along with the turn animation can be found in the following Codepen.
There is so much that can be done with just a single div. Let me know about your single-div creations in the comments or reach me on Twitter. Thank you for reading!
This content originally appeared on DEV Community and was authored by Akshaya Venkatesh
Akshaya Venkatesh | Sciencx (2021-02-08T14:13:21+00:00) The Single Div trend & Making the React Logo.. Retrieved from https://www.scien.cx/2021/02/08/the-single-div-trend-making-the-react-logo/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.