Recently, a Redditor asked whether it was possible to create a background that looked like this UI mockup by Mike from Creative Mints.
In fact, it's quite easy to do so using multiple background images in CSS. The following solution requires no images, though it does require a browser to support multiple background images and radial CSS gradients.
div.gradient{
width: 100%;
height: 100%;
background: #FFF;
background-image:
-webkit-radial-gradient(80% 10%, circle, #BF7667, transparent),
-webkit-radial-gradient(80% 50%, circle, #EFDDB7, transparent),
-webkit-radial-gradient(20% 80%, 40em 40em, #977351, transparent),
-webkit-radial-gradient(10% 10%, circle, #E1C3B9, transparent);
}
The above code does not include vendor prefixes for browsers other than WebKit, though it is trivial to do so.
Essentially, all we do is create several radial gradients that fade from each specified color to transparent. Together, they all blend together to form what looks like the result of using a gaussian blur on a photograph.
The past week I've been busy with a small project of mine that I've been planning on getting off the ground since March of last year-- Jekyll Themes. Jekyll Themes is a repository for authors to list themes and pre-built templates for the Jekyll static site generator.
While I've previously written about how to create a Jekyll website from scratch, a lot of developers or bloggers don't necessarily want to spend the time designing or creating a website from a blank canvas. Thankfully, there are a lot of great themes out there, but many of theme are spread throughout individual GitHub pages and projects. Hopefully, with Jekyll Themes, the themes scattered across the internet can be consolidated into a single listing where they are tagged by their color scheme, responsive-ness, or other attributes.
One thing I ran across when building my website with Jekyll, a static website generator, was that it restricted my ability to have dynamic content, such an HTML form and blog comments.
Disqus, a popular service that manages comments, alleviated the latter pain, however, the inability to have a simple contact form was huge. There are a couple third-party services that allow you to build forms, but many of them (such as Google Forms) are unnecessarily complex. They often embedded in iFrames or take you to their own domain to submit the form, meaning that they present visitors with a form that doesn't match the rest of the website stylistically, or are taken away from your website altogether.
To fix this, I built Formingo. Formingo is a new service that allows you to easily create HTML forms that get sent directly to your email address. It's completely free to use for up to 500 submissions a month, and there are a ton of new features coming. In fact, just today, I launched pre-verified email addresses and domains.
You can literally start using Formingo in seconds. If you have an existing HTML form, simply point it to POST at the Formingo service URL and change the example email address to your own.
<form method="POST"
action="https://www.formingo.co/submit/[email protected]">
<input name="name" type="text" />
...
</form>
That's it. Once you change the action URL for your form, it'll immediately start working. You'll get all the fields in the form submitted directly to your email address.
I have several new features coming soon, including:
Let me know what you think about Formingo, and be sure to get in contact with me if you have a feature you'd like to see.