Using clip paths

Clip paths are useful if you have images that need to be a particular shape. They can be circles, ellipses, polygons, and insets. They are not only restricted to images though, they can be applied to other elements as well. A clip path can be done using the clip-path property.

clip-path: circle(50%);
clip-path: ellipse(30px 140px);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: inset(5% 20% 15% 10% round 50% 5% 10% 20%);

The circle value can take a few parameters, the first being the radius. The other parameters are optional, it is the position the circle should…


For the class Digital Design Practicum (DGM270R) we are working in a group as a team composed of designers and developers. I am on the development side of things. The project that we are working on for the semester is a high end golf club web store. Because of the requirements, the site has to be on a content management system. WordPress was what was already being used and that is what our client preferred. We are working under a time constraint in that the class is 1 credit hour and we need to take the project from start to…


This article is for my portfolio and highlights some of the work I have done throughout the past several semesters at UVU in the Web Design and Development program.

Practical Knowledge and Skills Articles

For better Less, structure more

Mojave Stacks and Windows Tiles

Tips on web accessibility development for screen reader users (Written in DGM1240)

Web Image Types and Compression

Sometimes you don’t always end up coding

Clip paths, the basics

Work Showcase

DGM2250 — In this class we learned how to create design guides for websites. Here is mine: Design Guide

DGM2780 — Bootstrap was used to create…


For a class at UVU were I am studying Web Design and Development we covered file types and compression. Here are some things I learned about image file types. I will cover raster based images that work on the web like GIF, PNG, and JPEG.

There are two different types of image compression with these types namely lossless compression and lossy compression.

Lossy

Lossy compression is where data is lost when compressing the image. Lossy substitutes a close representation of the data for the real thing in order to reduce file size. Elements are removed that are thought to be…


To start off, I am a student at UVU studying Web Design and Development with an emphasis in Web and App Development. I have some experience already developing for the web from previous jobs. I have some technical background having studied for a while in electrical engineering, but switched to Web Development.

My aim is to get a bachelors degree in Web Design and Development and also pick up relevant web development skills that will make me marketable as a web developer. …


Less is meant to make styling more elegant. Coding in it is very straight forward however it is more easily read when there is a structure to the code. I am a student at UVU studying web development, here are some things I learned in my DGM2780 class about less and good techniques for its use.

Variables are best used were there are a lot of instances of the same value that show up in the code. It can become confusing to have each variable defined at some point in the code itself. Try keeping variables at the top of…


As part of the DGM 2271 class at UVU in groups we investigated Stacks in the new Mojave update for the Mac. Stacks is a new tool for organizing the desktop, it is off by default but there are many ways to activate it. The problem with many desktops is clutter.

Many people use the desktop as a general dumping ground for files and this can get very messy very fast. Stacks helps to declutter the desktop by automatically sorting the files into groupings called stacks. …


If you are building a web page and wondering how to make it more accessible for screen reader users than you are in the right place. Web accessibility is a large topic and it can be confusing to know were to begin. Provided in this article are tips of things to do and things not to do in making a site more accessible. You have probably heard of some of the basics like using alt text for images, there is a lot more than that and more than is covered in this article. …

Ryan Manwill

Developing for the web

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store