SVG and CSS3 Snowflake

SVG, or Scalable Vector Graphics, are not as well-known as other web image formats such as JPEGs, gifs, and PNGs. SVG is a vector format that offers the advantage of being able to scale without losing detail. JPEGs have compression built with a trade-off between file size and image quality. Saving and resaving JPEGS can give some undesirable results such as images breaking down to jagged blocks of color. Creating SVG files of graphics like logos, arrows, and buttons avoids this issue, and the result is files that look great at all screen resolutions.

Two ways to add the SVG image to a web page are with the image tag < img src="snowflake.svg" /> and to add as XML. The course You, Me and SVG teaches how to write the XML, eXtensible Markup Language. The lines, geometric shapes, and blocks are written as points of coordinates. This language can look quite complicated very quickly. The hexagon points in the snowflake example are written this way.

points="300,150 225,280 75,280 0,150 75,20 225,20"

The big plus for doing it this way is that you can style the SVG code with CSS—cascading style sheets. In my example, I used the same set of points for the six snowflake arms. The CSS rotates them into position, changes the color, and can also change the stroke (line) size and opacity. If you roll over the image in Google Chrome, the rotation is also made with CSS3 transform rotate property. I experimented and decided to set the transition-duration to 4s, or 4 seconds, and the origin point to 230% to give the gentle drifting effect of a snowflake.

I used one my favorite Adobe Apps, Illustrator, to create the XML or points of coordinates for the snowflake arm. First, I drew one side of the arm and then rotated and joined the sides. At that point, I did a “save as” and chose SVG. The dialog box gives you options to save as a graphic or XML code. The code is then displayed in a text document. I only used the path information, pasted that into an HTML page, and then created my own styles.

There are other SVG generators available. I am an Illustrator fan and enjoy finding new ways to use the application. In the past, I have used it to export vector images into Flash in order to animate or to create graphics and charts. Years ago, fabric designs were done with an opaque watercolor named gouache. Gouache is a lovely paint. I have often heard other artists talk about a set they got from France or Italy that was magical and had colors they had never seen before or since. Getting the color flat and even for fabric designs was a tricky task that required lots of patience and skill. Illustrator vector graphics can create files with the similar color look that can be more easily changed and updated. However, if you find that magical brand of gouache please let me know!

View the example here»

View the example on Codepen

See the Pen Snowflake -SVG and CSS3 by Carol Hicks (@C_Hicks) on CodePen.

Resources for this article:


CSS3- Web Animations and Modal Windows

CSS has come a long way from being a more consistent way to style webpages. I recently completed a Code school course entitled Adventures in Web Animation. One of the items the course demonstrated was animating the modal window. I enjoy trying out what I have learned and seeing how I can modify the samples. The modal window is a cousin of the “bad boy,” the pop-up window. It is often used for logging into web sites and collecting user data, although use for mobile phones has been discouraged. One way to create them is by using Javascript window.open method. Frameworks like Bootstrap and Foundation include modal windows that are easy to add. But you can also create a modal window with CSS using target attribute and opacity settings. It then occurred to me that modal windows don’t have to be rectangles anymore.

Sample One»

See the Pen CSS Modal Window by Carol Hicks (@C_Hicks) on CodePen.

Sample Two»

Resources for this article:

Thanks!