CSS and SVG Gradients 2024: Hands-on No-nonsense Guide
Requirements
- Fundamentals of HTML and CSS
Description
This all-levels course will guide you through the process of learning and practicing creation of modern CSS gradients on your site. Learn how to use CSS and SVG gradients. Multiple ideas how to obtain gradient backgrounds with CSS linear-gradient(), radial-gradient(), conic-gradient() functions, as well as SVG <linearGradient> and <radialGradient> tags.
My name is Dr. Artur Karczmarczyk. I am a Full-Stack Web Developer and Software Engineer with over 16 years of commercial experience. I am also an Associate Professor at a well-known Technical University in Poland. I have taught IT and web development to hundreds of students.
By the time you finish this course, you'll be able to create basic and advanced gradients and patterns in both CSS and SVGs. We will compare how CSS gradients differ from SVG gradients and which are better for your use case!
CSS linear-gradient() and repeating-linear-gradient() functions allow to compute amazing gradients without the need to use external graphics software. On the other hand, SVG provides similar capabilities, are rendered inside browser the same as CSS gradients, yet you can create and customize the gradients in an external graphic tool such as Adobe Illustrator, Affinity Designer or free Inkscape, Figma, Canva etc.
In the next hour I will guide you through all the modern and legacy ways how to create and use a gradients on your site. We will start by creating linear gradients using CSS linear-gradient() function. Then we will produce more fancy gradients with the use of radial- and conic-gradient() CSS functions.
In the second section, we will use SVG - scalable vector graphics - and try to reproduce the effects from the CSS section. This will allow you to compare pros and cons of both technologies.
Finally, we will have some fun going legacy and seeing how the world looked when CSS did not have gradient creation capabilities, and when SVGs were barely supported.
This course is for you if you want to learn modern up-to-date CSS3 and SVG gradient skills in an agile, hands-on, no-nonsense manner. So don't hesitate and enroll to this course for free!
Who this course is for:
- Web developers wishing to deepy explore the topic of gradients in HTML using CSS and SVG.
Instructor
- 4.7 Instructor Rating
- 118 Reviews
- 3,317 Students
- 4 Courses
Hi! My name is Artur. I am a Doctor of Engineering in Computer Science. I have been commercially creating web systems and applications since 2008. First working at various levels of a corporate software house, and then managing my own company IdeaSpot, I have learnt in depth how to be a Full-Stack Web Developer and Software Engineer.
In 2017, my extensive commercial experience allowed me to become an Assistant Professor, and currently Associate Professor at a well-known technical university in Poland. I teach here some very popular courses on web development, project management, design patterns.
I love programming and I love teaching people how simple programming is. Therefore, I have decided to start creating online MOOC courses, so that more people can join me in finding joy in web and software development.