12

How create Geometric objects - 11 Trees ? Pure CSS

 4 years ago
source link: https://dev.to/kerthin/11-geometric-objects-trees-pure-css-p8l
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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.

You can also download the project from my GitHub repository. (There is also a demo on GitHub Pages).

GitHub logo 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

gulp.svg

Software platform

nodejs-1.svg

Preprocessors

pug.svg sass-1.svg

Libraries

Package manager

npm.svg

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 and SVG images with imagemin

gulp-autoprefixer

Prefix CSS with Autoprefixer

imagemin-pngquant

Pngquant imagemin plugin gulp-uglify

Minify JavaScript with UglifyJS3. gulp-rigger

Rigger is a build time include engine for Javascript, CSS, CoffeeScript. gulp-minify-css

Gulp plugin to minify CSS

rimraf

The UNIX command rm -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.

Goodbye


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK