Categories
WordPress WordPress beginner

Best CSS Code Generators

Web designers are always looking for shortcuts to save time in their routine. Many great dev tools ease the process, and it’s now easier than ever to jump in and get a finished product quickly. Free online code generators will help you iterate and build onto your code quickly. Once you know what code you need to generate, it’s just a matter of finding the right tool for the job. These are my 10 favorite tools for generating CSS, and they’re all completely free to use.

I have gathered in one place the best free online code generators that will help build faster the design you need. Once you know what code you need to generate, it’s just a matter of finding the right tool for the job.

uiGradients

uigradients

More than 100 developers contributed to create uigradients.com, it’s a handpicked collection of beautiful colour gradients for design and code. You can even add your own gradient from a single gradients.json file.

Once you choose a gradient you like you can get the CSS code

Play with color hereuigradients.com

WAIT! Animate

wait-animate

One more great animate tool that is generating CSS  for your icons. It is based on the great Font Awesome Animation library by Louis LIN

With WAIT! Animate you can repeat animations indefinitely with a custom pause between each repetition. It’s truly a unique CSS code generator, and it offers a viable way to build animated effects without writing code from scratch.

WAIT! Animate

Color CSS Gradient Background Generator

colorful-css-gradient-background-generator

This Color CSS Gradient Background Generator makes it easy to create complex backgrounds gradients using CSS. Forget about simple two color gradients, and instead create gradients with up to four different layers!

Color CSS Gradient Background Generator

 

the-ultimate-css-generator

It generates most commonly used CSS codes , like animation, backgrounds, layouts transitions and much more. A really useful tool to create a quick page stylesheet

 

CSS GRADIENT ANIMATOR

css-gradient-animator

The CSS Gradient Animator created by a wed designer and developer Ian Forrest . The Gradient Animator is a CSS generator used to create animated backgrounds, with the option to export as a GitHub gist and the inspiration came from the MailChimp’s Email Design Guide.

CSS Gradient Animator

 

CSS3 Factory

css-gradient-generator

Currently it under development but it looks promising. Right now you will find only the CSS Gradient Generator.

CSS3 Factory

How to Center in CSS

how-to-center-in-css

How to Center in CSS makes it super easy to generate the code you need to center your content according to parameters you set. It provides many options to center the content type, div or text. It calculates the container size, width and height and a big plus it is providing CSS code for the minimum version of Internet Explorer. You can also generate code to align the content horizontally and vertical

How to Center in CSS

 

There are a lot more CSS generators if you know any other cool CSS generators feel free to share in the comments below.

 

Categories
WordPress WordPress beginner

How to embed videos to your WordPress Site

With video, there are so menu thing that you can explain to your visitors. You can upload your videos on Youtube, Vimeo, depending on your preference and how long your video is.

You should never upload videos to your WordPress site. But this will be analysed in another article. In this article I explain how to use the  standard method, embedding to place videos in WordPress

Once you create an account, upload a video to Youtube or Vimeo sites, let’s see how to embed it into your WordPress page or post

 

Simply paste the link URL

WordPress now supports oEmbed to make embedding videos into your blog post even easier. oEmbed is a format which allows URLs to point to embedded content automatically. It will take a standard link, extract media from it, and embed it on a webpage. This has been integrated into WordPress fully for several versions.

All you need is to copy the video link URL from the browser, place its URL into the content area. Switch to “Text” tab before pasting the Youtube URL.

Your post editor will render a preview of the video. That way, you can see what it looks like without having to preview the post.

Let me know if you have any questions.