The Photoshop Layers panel contains a feature to extract CSS markup from an existing design comp automatically. Copy CSS allows you to scrape styles, colors, positioning, border effects, CSS3 gradients, and even CSS3 animation positions from your designs. Chris Converse shows you how to extract the CSS necessary to render the same effects shown in your comp in a web browser, and incorporate the markup into an HTML file. Speed up your CSS workflow with this fast and easy feature.

Note: If you don't have any HTML files of your own, Chris has provided free files to all members of the library, so you can get hands-on experience integrating the CSS.

The Design the Web series was created and produced by Chris Converse. We are honored to host this content in our library.

About the Author

Chris Converse applies design and UX principles to technology, from motion graphics to CSS-driven websites.

Chris Converse graduated from Rochester Institute of Technology with a degree in graphic design. He began his career in print, designing and preparing digital files for commercial offset printing. Chris has spent the last 22 years studying and applying design and interface principles to technology. His work spans various distribution media (CD-ROMs, web sites, and interactive DVDs) and applies many authoring media and techniques (HTML, CSS, JavaScript, AJAX, image optimization, motion graphics, Flash, Director, Shockwave, sound engineering, digital video compression, PHP, and ASP). Chris has a passion for and a commitment to conceiving, creating, and delivering the best possible user experience, regardless of the medium.

Product Details

• Full Video Tutorials
• Video File Format: MP4
• Skill Level: Beginner
• Video Duration: 24m 4s
• Instructor: Chris Converse

The post Design the Web: Getting CSS from Photoshop appeared first on EASY Digital Pro.

Did you know you can add dropdown menus to your webpage with nothing more than HTML and CSS? Typically interactive menus are accomplished with jQuery or another JavaScript framework. But the truth is, with CSS you can create the same rich experience, including full support for iOS and touch-screen Windows devices. In this installment of Design the Web, Chris Converse teaches us how to nest lists, style and position menus, add in ARIA markup for cross-compatibility, and make the menus fully responsive.

The exercise files are free to all members! Download them today to start creating your own multilevel dropdown menus.

About the Author

Chris Converse applies design and UX principles to technology, from motion graphics to CSS-driven websites.

Chris Converse graduated from Rochester Institute of Technology with a degree in graphic design. He began his career in print, designing and preparing digital files for commercial offset printing. Chris has spent the last 22 years studying and applying design and interface principles to technology. His work spans various distribution media (CD-ROMs, web sites, and interactive DVDs) and applies many authoring media and techniques (HTML, CSS, JavaScript, AJAX, image optimization, motion graphics, Flash, Director, Shockwave, sound engineering, digital video compression, PHP, and ASP). Chris has a passion for and a commitment to conceiving, creating, and delivering the best possible user experience, regardless of the medium.

Product Details

• Full Video Tutorials
• Video File Format: MP4
• Skill Level: Intermediate
• Video Duration: 29m 40s
• Instructor: Chris Converse

The post Design the Web: Creating CSS-Only Navigation Menus appeared first on EASY Digital Pro.

The CSS counter properties support the automatic numbering of HTML elements—much like an unordered list, but on any HTML element. There is no impact on the underlying code and when you move content around, the numbers automatically update. Learn how to use counters in your web designs in this episode of Design the Web. Chris Converse shows how to apply counters to different elements, including headings and captions, and combine, reuse, and reset counters on a webpage.

About the Author

Chris Converse applies design and UX principles to technology, from motion graphics to CSS-driven websites.

Chris Converse graduated from Rochester Institute of Technology with a degree in graphic design. He began his career in print, designing and preparing digital files for commercial offset printing. Chris has spent the last 22 years studying and applying design and interface principles to technology. His work spans various distribution media (CD-ROMs, web sites, and interactive DVDs) and applies many authoring media and techniques (HTML, CSS, JavaScript, AJAX, image optimization, motion graphics, Flash, Director, Shockwave, sound engineering, digital video compression, PHP, and ASP). Chris has a passion for and a commitment to conceiving, creating, and delivering the best possible user experience, regardless of the medium.

Product Details

• Full Video Tutorials
• Video File Format: MP4
• Skill Level: Intermediate
• Video Duration: 16m 38s
• Instructor: Chris Converse

The post Design the Web: Using Counters and Resets in CSS appeared first on EASY Digital Pro.

CSS Shorts is a series covering all aspects of CSS, including properties, preprocessors, positioning, floats, and the most up-to-date styling techniques. Instructor Chris Converse returns every Tuesday, bringing you short and timely tips that will help new and experienced web developers alike create more beautiful websites and more efficient code. Tune in and learn how to take more control over the style, layout, and even the user experience of your web designs.

About the Author

Chris Converse applies design and UX principles to technology, from motion graphics to CSS-driven websites.

Chris Converse graduated from Rochester Institute of Technology with a degree in graphic design. He began his career in print, designing and preparing digital files for commercial offset printing. Chris has spent the last 22 years studying and applying design and interface principles to technology. His work spans various distribution media (CD-ROMs, web sites, and interactive DVDs) and applies many authoring media and techniques (HTML, CSS, JavaScript, AJAX, image optimization, motion graphics, Flash, Director, Shockwave, sound engineering, digital video compression, PHP, and ASP). Chris has a passion for and a commitment to conceiving, creating, and delivering the best possible user experience, regardless of the medium.

Product Details

• Full Video Tutorials
• Video File Format: MP4
• Skill Level: Intermediate
• Video Duration: 9h 52m
• Instructor: Chris Converse

The post CSS Shorts Weekly (2018) appeared first on EASY Digital Pro.

Designing HTML emails can be challenging, considering the limited capabilities of desktop and web email readers, combined with the small screen sizes of mobile devices. Enter responsive HTML email. Let Chris Converse show you how to design an elegant email that will adapt to varying screen sizes and render correctly in over 30 different mail clients, including Gmail, Yahoo, AOL, and multiple versions of Outlook, as well as Android, iOS, and Windows phones. Learn to add complex features like background graphics, rounded corners, and shadows that don't break your email when they can't be displayed. Then create call-to-action buttons, add animation, and style the whole thing with CSS. Plus, explore tools and services that will help you test your campaigns. Start now and learn what is possible with HTML email. This course was created and produced by Chris Converse. We are honored to host this content in our library.

Topics include:

• Creating the graphics
• Setting up the base layout structure
• Styling the table rows for the headline, banner, etc.
• Creating buttons
• Adding CSS media queries
• Styling the content
• Incorporating animation and web fonts
• Validating your code
• Testing in various email clients

About the Author

Chris Converse applies design and UX principles to technology, from motion graphics to CSS-driven websites. Chris Converse graduated from Rochester Institute of Technology with a degree in graphic design. He began his career in print, designing and preparing digital files for commercial offset printing. Chris has spent the last 22 years studying and applying design and interface principles to technology. His work spans various distribution media (CD-ROMs, web sites, and interactive DVDs) and applies many authoring media and techniques (HTML, CSS, JavaScript, AJAX, image optimization, motion graphics, Flash, Director, Shockwave, sound engineering, digital video compression, PHP, and ASP). Chris has a passion for and a commitment to conceiving, creating, and delivering the best possible user experience, regardless of the medium.

Video Details

• Full Video Tutorials
• Video File Format: MP4
• Skill Level: Beginner
• Video Duration: 1h 43m
• Instructor: Chris Converse

The post Creating a Responsive HTML Email appeared first on EASY Digital Pro.

Learn to create a web animation from a simple Illustrator file, with Ai2Canvas—a free plugin that works with nearly every version of Illustrator, from CS3 to CC. In this short Design the Web project, Chris Converse shows how to achieve complex animations with Ai2Canvas, simply by naming your layers with different animation properties.

He also demonstrates how to combine properties like rotation and origin, for more interesting motion designs, and compress project files for web delivery. The exercise files for this course are free to all lynda.com members, so download them today.

About the Author

Chris Converse applies design and UX principles to technology, from motion graphics to CSS-driven websites.

Chris Converse graduated from Rochester Institute of Technology with a degree in graphic design. He began his career in print, designing and preparing digital files for commercial offset printing. Chris has spent the last 22 years studying and applying design and interface principles to technology. His work spans various distribution media (CD-ROMs, web sites, and interactive DVDs) and applies many authoring media and techniques (HTML, CSS, JavaScript, AJAX, image optimization, motion graphics, Flash, Director, Shockwave, sound engineering, digital video compression, PHP, and ASP). Chris has a passion for and a commitment to conceiving, creating, and delivering the best possible user experience, regardless of the medium.

Product Details

• Full Video Tutorials
• Full Exercise File Included
• Video File Format: MP4
• Skill Level: Beginner
• Video Duration: 48m 25s
• Instructor: Chris Converse

The post Design the Web: Illustrator to Animated HTML5 Canvas appeared first on EASY Digital Pro.