CSS3 Gradients for Web Designers

Learn CSS3 Gradients to create beautiful backgrounds & patterns without any real images
4.7 (9 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,205 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 21
  • Length 1.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 8/2016 English

Course Description

This is the course which covers css3 background gradient property. It covering the best practices for creating different types of css background using gradient property. By taking this course any HTML CSS lover can create beautiful backgrounds using CSS3 Gradients easily. This is only 1 hour course means you don't need to wait 6 to 10 long hours to get-started.

This course covering topics like
Definition of CSS3 Gradient
Who is and where using this property.
What is and how to create Linear Gradient.
Specify colors using types of methods.
declaring prefixes and fallback
Specify directions, angles, positions and color stops
We will also cover how to use transparency and solid colors.
What is repeating linear gradients and how to create it.
Creating Radial Gradient, with repeating gradient.
How to set shapes and positioning the gradient center.

What are the requirements?

  • Intermediate or basic knowledge of HTML and CSS
  • HTML CSS editor any free or paid

What am I going to get from this course?

  • By the end of this course you will be able to understand and create Linear Gradients and Radial Gradients
  • You will understand color stops and how to add them.
  • You will understand how to use transparency
  • Using fallbacks, prefixes for web browsers.

What is the target audience?

  • This course is for web designers and front-end developers who want to learn about the latest generation of browser-based technologies.
  • You should take this course if you want to update your css skill
  • This course is for Entrepreneurs who want to start their web design and development business.
  • Students

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
00:51

A brief introduction about the author and the course.

01:49

In this lecture we will see what is css3 gradients, what is the use of css3 gradients and benefits of using gradients.

Prerequisites
Preview
01:08
06:07

In this lecture we will see who is using gradients on their websites and where they are using .

02:01

Small introduction about browsers support to css3 gradients property.

Section 2: Linear Gradient
06:30

In this lecture we will learn about linear gradient. What is mean by linear gradient, What syntax used to create. And we will see practically how to create it.

02:42

This lecture will demonstrate types of methods used to specify color stops in gradients. 

05:59

If you are targeting older browsers this lecture will show you how to do that. it will show you fallback colors and prefixed gradient declarations for those browsers.

05:29

By default gradient starts from top side and goes to bottom direction. but we can specify the direction for the gradient with  predefined directional keywords. This video tutorial will show you how to do that.

03:52

If you want more control over the direction of the gradient,  you can define an angle, instead of the predefined directional keywords (to right, to left, to bottom, to top, to top right, top top left etc). In this lecture we will learn to define angles for CSS3 gradients.

Using Color Stops
07:09
Solid Colors Using Color Stops
05:16
Using Transparency
03:41
Repeating Linear Gradient
03:20
Section 3: CSS3 Radial Gradients
CSS3 Radial Gradients
02:41
Set Shapes in Raidal Gradients
01:46
Positioning the gradient center
02:43
Size Keywords
05:01
Repeating Radial Gradient
03:26
Section 4: Exercise Examples
exercise example 1
02:33
Thank You
00:40

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ajin Nikam, Freelancer Web Developer

My name is Ajin Nikam. A freelancer, Web designer and
developer from Pune, Maharashtra, India. I am a graduate working as
a freelancer since 2007.

I've 8 years of practical experience in web designing & development web applications. I have also experience in online marketing, SEO (Search Engine Optimization), SMO (Social Media Optimization), SMM (Social Media Marketing) etc. I design websites and web applications for my clients using HTML5, CSS3, JavaScript, Ruby on Rails, Joomla, Drupal WordPress.

I love to learn and implement new things. It will be my pleasure to share my knowledge with Udemy students.

Ready to start learning?
Take This Course