Introduction
2 years ago, wandering through the expanses of Behance, I came across an interesting work from the studio FlΓΆra. And in it I saw interesting geometric objects that reminded me of trees. I really liked the style of these illustrations and decided to try to implement them using CSS.
DEMO
You can also download the project from my
GitHub repository
. (There is also a demo onGitHub Pages
).
Kerthin / trees-templateSait
The geometric representation of trees
Description
This site is an example of work created specifically for the portfolio. If you want to take a look at it, then you can follow the link given below.
Use technology.
The following technologies were used to create this project:
Task-Manager
Software platform
Preprocessors
Libraries
Package manager
Plugins
To develop the project through gulp, I used the following types of NPM plugins:
β¦
Plugin Status Description gulp-sourcemaps Intended for generation of css source maps
which will be necessary at debugging of a code.gulp-imagemin Minify PNG
,JPEG
,GIF
andSVG
images withimagemin
gulp-autoprefixer Prefix CSS
withAutoprefixer
imagemin-pngquant Pngquant imagemin
plugingulp-uglify Minify JavaScript
withUglifyJS3
.gulp-rigger Rigger
is a build time include engine forJavascript
,CSS
,CoffeeScript
.gulp-minify-css Gulp
plugin to minifyCSS
rimraf The UNIX
commandrm
-rf
for node.gulp-watch File watcher that uses super-fast chokidar and emits vinyl
Full Page Demo (GitHub Pages)
01. Seedling
Creating this tree took the most time because of the need to create the lower oval dotted lines. Since to create such lines, I needed to create 16 hemispheres, each of which had a different size.
02. Sepal
A very simple tree. There are no complicated shapes or lines.
03. Linden
04. Pine
To create winding lines with two or more corners, it is enough just to use several blocks with rounded corners that need to be connected in the necessary sequence.
05. Palm
To create winding lines, the same method was used here as in the fourth tree.
06. Fir
To create the moon, I used a round invisible block, which had the box-shadow
property set with the value 20px 20px 0 0 #000
.
I used the same method in my other works with illustrations
In order to create curved lines, you just need to set the properties for rounding individual corners. For example: border-bottom-left-radius
or border-bottom-right-radius
.
07. Rose
08. Willow
09. Sunflower
To create such petals, you just need to use the border-radius
property and set it to 50% 100px 0 80px
or 100px 50% 80px 0
. Depending on which way you need a slope.
10. Bell
To create winding lines, the same method was used here as in the fourth tree.
11. Poplar
THE END
Well, that's it. I just wanted to share my old work and nothing more. Thanks for attention.
Top comments (8)
These look amazing! ^o^
Thanks
Well done!
Thanks
Wow. This is on another level... Thumbs up
Thanks π
Nice job with the CSS implementation. Also just wondering, how did you do the squirrel icon for your Github page? Love that little guy
the post pattern is just a photo of an open menu in which you can select a tree.