CSS Art: Creatively Craft illustrations With CSS

سرفصل های دوره

Express your artistic creativity in drawing of objects using CSS. Use CSS to open up a world of artistic possibilities.

1. Introduction

1. Introduction to the projects to be created

2. The resources are all available for download

2. Valuable CSS Properties For This Course

1.1 CSS Art Intro.zip

1. Position Relative

2. Position Absolute - Part 1

3. Position Absolute - Part 2

4. Selectors - Part 1

5. Selectors - Part 2

6. Creating Variables locally and globally.

7. CSS units - px rem em

8. CSS units - em %

9. CSS units - vmin vmax vh vw

10. Creating a triangle with border and absolute position

11. Using FLEX to centre an element vertically and horizontally

12. Positioning an element to the centre using margin and absolute position

13. CSS Transform

3. Box-shadow and Gradient Art

1. The Art of box-shadow

2. The Art of linear-gradient and box-shadow

3. Circular pattern with radial gradient

4. Android Art

1.1 Android.zip

1. Basic Structure of the Android Art

2. Styling the head and eyes of the android

3. Styling the antenna and the body

4. Styling the legs and arms

5. Stairs Art

1.1 Stairs Art.zip

1. Basic Structure of the Stairs Art

2. Styling the first 4 stairs

3. Styling the last 3 stairs

6. Bear face Art

1.1 bear-face.zip

1. Basic Structure of the bear face Art

2. Styling the head, ears and eyes

3. Styling the nose and smile

4. Styling the top hair

7. Pot Plant Art

1.1 pot-plant.zip

1. Basic Structure of the pot plant Art

2. Styling the leaves

3. Styling the vase

8. Instagram Logo

1.1 instagram.zip

1. Basic Structure of the Instagram logo

2. Styling the inner white parts

9. Bottle Art

1.1 bottle.zip

1. Basic Structure of the bottle Art

2. Styling the upper part and the shade color

10. Captain America Shield

1.1 captain-america.zip

1. Basic Structure of the captain America shield

2. 2. Styling the 2 other circles and one triangle

3. Finishing up the star

11. Dribbble logo

1.1 dribbble.zip

1. Basic Structure of the Dribbble logo

2. Finishing up the other 2 lines

12. Orange drink with orange fruit

1.1 orange-drink-fruit.zip

1. Basic Structure of the Art

2. Styling the leaves

3. Styling the orange

4. Styling the glass cup

5. Styling the liquid and the shiny part

13. Aeroplane Art

1.1 aeroplane.zip

1. Basic Structure of the aeroplane Art

2. Styling the wings of the plane

3. Styling the plane body, nose and screen

4. Styling the turbines and tail

5. Styling the tyres

14. Netflix logo

1.1 Netflix.zip

1. Basic Structure of the Netflix logo

2. Styling the parts of the N

15. Car Art

1.1 car.zip

1. Basic Structure of the car

2. Styling the screen and head rest

3. Styling the side mirror and front view

4. Styling the bumper and the tyres

16. Heart

1.1 heart.zip

1. Basic Structure of the heart

2. The curved shapes to complete the heart

17. Iron Man Mask Art

1.1 iron-man-mask.zip

1. Basic Structure of the Iron man mask Art

2. Understanding Clip-path polygon - Part 1

3. Understanding Clip-path polygon - Part 2

4. Red outer part of the mask

5. Red curved top on the mask

6. Yellow inner part of the mask

7. Red front layer of the mask

8. The segment of the mask

9. The eyes of the mask

18. Apple fruit Art

1.1 apple.zip

1. Basic Structure of the apple

2. Styling the apple and the inner circles

3. 2. Styling the leaf and the wood

19. Sublime Text logo

1.1 sublime.zip

1. Styling the Sublime Text logo

20. Cat face

1.1 cat-face.zip

1.2 reset.txt

1. Basic Structure of the cat face

2. ears of the cat

3. eyes and nose of the cat

4. whiskers of the cat

21. Mickey Mouse Face

1.1 mickey-mouse.zip

1.2 reset.txt

1. Basic Structure of the mickey mouse

2. Styling the face

3. Styling the cheeks and black eyes

4. Styling the inner white eyes and nose

22. Figma logo

1.1 figma.zip

1.2 reset.txt

1. Basic Structure of the Figma logo

2. Adding the other 2 elements of the logo

23. Piano art

1.1 piano.zip

1. Styling the body and keys of the piano

24. React Logo

1.1 react.zip

1.2 reset.txt

1. Styling the React Logo

25. Anchor art

1.1 anchor.zip

1.2 reset.txt

1. Styling the anchor head and shank

2. Styling the hooks

26. Nike logo

1.1 Nike.zip

1. Basic Structure of the Nike logo

27. Santa Art

1.1 reset.txt

1.2 santa.zip

1. Basic Structure of the santas head and eyes

2. Styling the ears and moustache

3. Styling the beard

4. Styling the mouth and hair

5. Styling all the parts of the cap

28. Ice cream with Cone Art

1.1 Ice-cream-cone.zip

1. Basic Structure of the Ice cream cone Art

2. Styling the diagonal lines on the cone and styling the white border

3. Styling the top of the cone and the orange ice cream

4. Styling the stick

5. Styling the strawberry

6. Styling the pink ice cream and the cookie

139,000 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy