Tag: patterns

How to Make Angled HTML Containers With CSS

Angled HTML containers are a great way to add interest and lead the eye on a website. It’s a simple tool to make a website stand out from the crowd. This fast and easy tutorial can be used on any HTML block element. It is done by creating a pseudo container after and behind the original. Then aligning, matching and transforming it to create the illusion of a continuous container.

First select the element you wish to angle. Style it as you wish and set position to relative.

header{
position: relative;
width: 100%;
height: 10em;
background-color: #FF3300;
}

Next target the element and use the pseudo selector “after”. Then add the following styles.

header::after{
position: absolute;
width: 100%;
height: 100%;
content: '';
background-color: inherit;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
transform-origin: top left;
transform: skewY(6deg);
}

How the Code Works

This code creates a pseudo element after the header. The content of this pseudo element is empty which is determined by the content property having a value of empty single quotes. The width and height property has it completely fill its parent. The position property along with the top, right, left and bottom, sets its position and prohibits it from moving within inside of its parent. The background inherit makes sure the slant automatically matches its parent’s background color. The z-index places the pseudo element behind the original element. The transform origin and transform sets the placement and quantity of the angle.

Change the “transform-origin” and “transform” property to adjust the effect.

Best Free Stock: Images, Vectors, Patterns, Textures and Videos

In marketing and design good quality stock can mean the difference between success and failure. With this said stock is expensive! However it does not need to be. There are countless sources for free stock available. With the sea of free resources it is hard to sort out the garbage. Furthermore keeping track of licenses is a lot of work and if you make a mistake this could bring you legal problems. I have decided to do this work for you. I have compiled a list of my best free open source stock: images, vector graphics, patterns,textures and video. Please share you favorite sources for free open sources stock in the comments.

Free Open Source Stock Images

Unsplash

Unsplash Pro

Unsplash is a curated free stock image site created by Crew. Every 10 days they hand select 10 images to be added to Unsplash. All the images are breath taking high quality. Unsplash offers a basic search and the ability to create an account and get email notifications of new images. Lastly Unsplash offers APIs to easily and dynamically incorporate Unsplash into your web and software projects.

Unsplash Cons

Unsplash is one of the smaller options out there. With only adding 10 new images every 10 days there are less photos then many of their competitors. Also Unsplash search options are limited.

Unsplash License

All images at Unsplash are distributed under the Creative Commons Zero license(CC0). Their images can be used for personal or commercial use without attribution. Photos can be used, edited and redistributed at will.

Pixabay

Pixabay Pros

Pixabay offers free stock: photos, illustrations, vector graphics, and videos. They offer the ability to search based on these types along with: orientation, category, size and color.

Pixabay Cons

To download full resolution photos you must create an account. The account is free and can be created by signing up with Facebook, Google+ or a Microsoft account. Also the items on Pixabay are of assorted quality expect to find non professional work.

Pixabay License

On Pixabay: You can copy, modify, distribute, and use the images, even for commercial purposes, all without asking for permission or giving credits to the artist. However, depicted content may still be protected by trademarks, publicity or privacy rights.

Pexels

Pexels Pros

Pexels offers free high quality open source stock images. The Pexels website contains a really handy search with the ability to search by: keyword, tag, subject matter and colors. Pexels also does a very good job at making suggested searches. This is wonderful when looking for inspiration. If you have an account with Pexels they offer the ability to favorite images. This is great for re finding photos later.

Pexels Cons

The Pexels website contains a lot of ads and other forms of spam. For the quality of the service it is worth dealing with.

Pexels License

All images at Pexels are distributed under the Creative Commons Zero license(CC0). Their images can be used for personal or commercial use without attribution. Photos can be used, edited and redistributed at will. Their only restriction is any identifiable people in photographs can not be represented in a bad light without their permission.

StockSnap.io

StockSnap.io Pros

StockSnap.io is a source for free stock photos created by Snappa. StockSnap.io features a simple and easy to use interface. They offer the option to sign up for their newsletter and create an account to keep track of images you have viewed and downloaded.

StockSnap.io Cons

StockSnap.io lacks a lot of advanced functionalities found on other free stock photo websites.

StockSnap.io License

Photos on StockSnap.io are under the Creative Commons Zero License (CC0). This means they can be copied, modified and distributed without asking permission for both personal and commercial purposes.

Free Open Source Stock Vector Graphics

Pixabay

Pixabay Pros

Pixabay offers free photos, illustrations, vector graphics, and videos. They offer the ability to search based on these types along with: orientation, category, size and color.

Pixabay Cons

To download full resolution photos you must create an account. The account is free and can be created by signing up with Facebook, Google+ or a Microsoft account. Also the items on Pixabay are of assorted quality expect to find non professional work.

Pixabay License

On Pixabay: You can copy, modify, distribute, and use the images, even for commercial purposes, all without asking for permission or giving credits to the artist. However, depicted content may still be protected by trademarks, publicity or privacy rights.

Flaticon

Flaticon Pros

Flaticon is a database of over offer 200k icons. Flaticon adds over 4000 icons every month. Flaticon Icons are available in vector and raster based formats, currently including SVG, EPS, PSD and PNG. Flaticon icons are organized into sets. This makes keeping a consistent style within a project’s iconography easy. Flaticon also provides a tool to generate @font-face so you can easily use Flaticon icons in all of your web projects. Lastly Flaticon has a Mac OSX app and an extension for the Adobe Creative Suite which is compatible with CS6 and CC. This makes it easy to drag and drop high quality icons into all your design projects.

Flaticon Cons

Flaticon requires attribution to the author if you are using a free plan. Free users are also limited with their amount of collections.

Flaticon License

Free users can use Flaticon openly but must credit the author. Subscription users are free to use Flaticon without attribution.

Vecteezy

Vecteezy Pros

Vecteezy offers an array of stock vectors. Vecteezy offers great suggested searches to help find specifically what your looking for easier.

Vecteezy Cons

Only some of Vecteezy vectors are free. Anything labeled premium is not free. Also each free vector has it’s own individual license so be sure to check the individual license to make sure it fits your project.

Vecteezy License

Vecteezy does not have a specific license each upload has it’s own license.

Vectorstash

Vectorstash Pros

Vectorstash offers a variety of unique custom vectors.

Vectorstash Cons

Vectorstash offers a limited number of vectors it currently offers 147. Also the navigation of the site is confusing at times.

Vectorstash License

Vectorstash provides open rights vectors that can be used openly without attribution for personal and commercial use. The only clause to Vectorstash vectors is they can not be sold or redistributed.

Free Open Source Patterns

Subtle Patterns

Subtle Patterns Pros

Subtle Patterns offers free tillable web patterns. All patterns are super lower file size and seamlessly tile out of the box providing an easy way to add depth to your web projects. Subtle Patterns also provide a plugin for Photoshop and Sketch to use their patterns in your web mock ups for $17.99.

Subtle Patterns Cons

The Subtle Patterns plugin is not free. This makes it difficult to incorporate subtle patterns in to your mock ups without paying the $17.99.

Subtle Patterns License

Patterns from Subtle Patterns can be used openly for personal or commercial use, they just ask you credit them with a comment in your code. Example: /* Background pattern from subtlepatterns.com */

Free Open Source Textures

Texturemate

Texturemate Pros

Texturemate offers a huge range of free open source textures. They are easily browsable by category and are great quality.

Texturemate Cons

The navigation of the site is confusing at times.

Texturemate License

Texturemate provides open rights textures that can be used openly without attribution for personal and commercial use. The only clause to Texturemate’s textures is they can not be sold or redistributed.

Free Open Source Stock Videos

Pexels

Pexels Pros

Pexels offers free high quality open source stock videos. The Pexels website contains a really handy search with the ability to search by: keyword, tag, subject matter and colors. Pexels also does a very good job at making suggested searches. This is wonderful when looking for inspiration. If you have an account with Pexels they offer the ability to favorite videos. This is great for re finding videos later.

Pexels Cons

The Pexels website contains a lot of ads and other forms of spam. For the quality of the service it is worth dealing with.

Pexels License

All videos at Pexels are distributed under the Creative Commons Zero license(CC0). Their videos can be used for personal or commercial use without attribution. Videos can be used, edited and redistributed at will. Their only restriction is any identifiable people in videos can not be represented in a bad light without their permission.

Pixabay

Pixabay Pros

Pixabay offers free photos, illustrations, vector graphics, and videos. They offer the ability to search based on these types along with: orientation, category, size and color.

Pixabay Cons

To download full resolution videos you must create an account. The account is free and can be created by signing up with Facebook, Google+ or a Microsoft account. Also the items on Pixabay are of assorted quality expect to find non professional work.

Pixabay License

On Pixabay: You can copy, modify, distribute, and use the images, even for commercial purposes, all without asking for permission or giving credits to the artist. However, depicted content may still be protected by trademarks, publicity or privacy rights.

I hope you found this list helpful. I personally have used every site listed on here at least once. Be sure to comment your sources for open source photos, vectors, patterns, textures, videos and anything else you use.