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

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 تومان
    بیش از یک محصول به صورت دانلودی میخواهید؟ محصول را به سبد خرید اضافه کنید.
    افزودن به سبد خرید
    خرید دانلودی فوری

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

    ایمیل شما:
    تولید کننده:
    مدرس:
    شناسه: 40920
    حجم: 8684 مگابایت
    مدت زمان: 1325 دقیقه
    تاریخ انتشار: ۲ آبان ۱۴۰۳
    طراحی سایت و خدمات سئو

    139,000 تومان
    افزودن به سبد خرید