Here we've got the elements selector P, and it selects all P's, all paragraphs in HTML document. First one is the element selector which selects element based on the element name in HTML. So, for instance font size, color, margin-top, and text-align are properties, and they have their value defined. Every declaration consists of property and its value. The declaration block consists of one or more declarations, and they are separated by semicolons. P here, and P as a selector in styles sheet. So, in this case we want to style P, which stands for paragraphs and in our HTML, it's on the left side. The selector, actually selects the content you want to style, it pines to the HTML element. A CSS rule set consists of a selector and a declaration block. So, what about CSS syntax? On the right side, you got the CSS file. We can also animate the elements, which is the thing that we'll focus on during these classes. CSS describes how elements should be placed, how they should look like, et cetera. ![]() Is a style sheet language used for styling the elements on your website, which are placed thanks to HTML. So, let's start with the question, what is CSS? CSS is Cascading Style Sheets. If you're already familiar with styling the elements in the website, you can skip this part of the classes. Intro to CSS (only for non-coders): This lesson of the course is focused on people who haven't had the experience coding in CSS. So, summing up the key SVG features are SVG is scalable, it scales up and down without losing quality, SVG is vector graphics, SVG is crystal clear, SVG is controlled by CSS, which makes easy for us to have fun and implement some simple but eye catching effects.Ħ. You can change its height and width, and it won't affect its quality. It means it's crisp and beautiful no matter what the resolutions are. SVG can be controlled by CSS what we are going to take advantage of in our classes. From logos, icons, iconographics to animated content. Intro to SVG: Before we started dabbling in code, let's find out more about SVG. You've got also eye-exercise and the exercise that I'm explaining in the video including happy-face, you got the solution to the eye-exercise and you can check out other fun SVG animations for inspirations.ĥ. We've got money, eye, and some other things. You can also see SVG files, so different SVG graphics I've prepared especially for you. You've got HTML template, which is basically a simple HTML template where you can paste your SVG code. We're under your project section and on the right you can see attached files. Materials: Remember to download the package with all the materials like HTML files, the solutions to my challenges, and SVG files. You'll find the SVG files in the package that I'm sharing with you.Ĥ. It's free editor you can download from atom.io and is available for all the systems. If you haven't already used any of them, I'd recommend Atom or Sublime Text. Dev tools are part of every web browser and helps you to debug your code. First one, your favorite browser and its dev tools. Tools: For these classes, we're going to use a couple of tools. The code is destined for people who likes coding, designers who'd like to animate, do vector projects with the code, everyone who likes to create things on the computer and Web.ģ. The end result of the course will be animated graphics coded by yourself. ![]() You don't have to be experienced developer or designer to make use of it and take the greatest advantage. Goals of the classes: The goal of the course is to show everyone interested in graphic design encoding that SVG and CSS combined together are great tools to make fun animated elements on the Web. If you don't have experience in coding don't worry I try to explain everything step by step, so you can follow the classes.Ģ. I can't wait to show you the magic that comes from combined SVG and CSS. I love to show you something very exciting. Welcome! Intro to the classes: Have you ever wanted to make your designs alive or maybe you heard about creative coding, but didn't have a chance to dig deeper.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |