Background shapes in css

Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis

You can create stripes in CSS. That’s all I thought about in terms of CSS background patterns for a long time. There’s nothing wrong with stripes; stripes are cool. They can be customized into wide and narrow bands, criss-crossed into a checked pattern, and played with in other ways using the idea of hard stops. But stripes can be boring, too. Too conventional, out of fashion, and sometimes even unpleasant. Thankfully, we can conjure up far more background patterns than you can even imagine with CSS, with code that is similar in spirit to stripes. Background patterns are images repeated across a background. They can be done by referencing an external image, like a PNG file, or can be drawn with CSS, which is traditionally done using CSS gradients. Linear gradients (and repeating linear gradients) for instance, are typically used for stripes. But there are other ways to create cool background patterns. Let’s see how we can use gradients in other ways and toss in other things, like CSS shapes and emoji, to spice things up.

There are three types of CSS gradients.

1. linear-gradient() : Colors flow from left-to-right, top-to-bottom, or at any angle you choose in a single direction.
2. radial-gradient() : Colors start at a single point and emanate outward
3. conic-gradient() : Similar in concept to radial gradients, but the color stops are placed around the circle rather than emanating from the center point.

I recommend checking out the syntax for all the gradients to thoroughly understand how to start and end a color in a gradient.

Let’s look at radial gradients first because they give us very useful things: circles and ellipses. Both can be used for patterns that are very interesting and might unlock some ideas for you!

background: radial-gradient()

Here’s a pattern of repeating watermelons using this technique:

background: radial-gradient(circle at 25px 9px, black 2px, transparent 2px), radial-gradient(circle at 49px 28px, black 2px, transparent 2px), radial-gradient(circle at 38px 1px, black 2px, transparent 2px), radial-gradient(circle at 20px 4px, black 2px, transparent 2px), radial-gradient(circle at 80px 4px, black 2px, transparent 2px), radial-gradient(circle at 50px 10px, black 2px, transparent 2px), radial-gradient(circle at 60px 16px, black 2px, transparent 2px), radial-gradient(circle at 70px 16px, black 2px, transparent 2px), radial-gradient(ellipse at 50px 0, red 33px, lime 33px, lime 38px, transparent 38px) white; background-size: 100px 50px;

We start by providing a background size on the element then stack up the gradients inside it. An ellipse forms the green and red parts. Black circles are scattered across to represent the watermelon seeds.

The first two parameters for a radial gradient function determine whether the gradient shape is a circle or an ellipse and the starting position of the gradient. That’s followed by the gradient color values along with the start and ending positions within the gradient.

Conic gradients create ray-like shapes. Like linear and radial gradients, conic gradients can be used to create geometric patterns.

background: conic-gradient(yellow 40deg, blue 40deg, blue 45deg, transparent 45deg), conic-gradient(transparent 135deg, blue 135deg, blue 140deg, transparent 140deg) ; background-size: 60px 60px; background-color: white;

The rub with conic gradient is that it’s not supported in Firefox, at least at the time of writing. It’s always worth keeping an eye out for deeper support.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

Emoji icon patterns

This is where things begin to get interesting. Rather than just using geometric patterns (as in gradients), we now use the organic shapes of emojis to create background patterns. 🎉

It starts with emoji icons.

Solid-color emoji patterns

We can create emoji icons by giving emojis a transparent color and text shadow.

color: transparent; text-shadow: 0 0 black;

Those icons can then be turned into an image that can be used as a background, using SVG.

The SVG can then be referred by the background property using data URL.

background: url("data:image/svg+xml, ");

And, voilá! We get something like this:

background: url("data:image/svg+xml,"), white; background-size: 60px 60px; 

Other than emojis, it’s also possible to draw CSS shapes and use them as patterns. Emojis are less work, though. Just saying.

Gradient-colored emoji patterns

Instead of using plain emoji icons, we can use gradient emoji icons. To do that, skip the text shadow on the emojis. Add a gradient background behind them and use background-clip to trim the gradient background to the shape of the emojis.

color: transparent; background: linear-gradient(45deg, blue 20%, fuchsia); background-clip: text; /* Safari requires -webkit prefix */

Then, just as before, use the combination of SVG and data URL to create the background pattern.

Translucent-colored emoji patterns

This is same as using block colored emoji icons. This time, however, we take away the opaqueness of the colors by using rgba() or hsla() values for the text shadow.

color: transparent; text-shadow: 20px 10px rgba(0, 255, 0, .3), 0 0 red;

We’ve already looked at all the working methods I could think of to create background patterns, but I feel like I should also mention this other technique I tried, which is not as widely supported as I’d hoped.

I tried placing the emoji in an SVG element instead of the HTML added using . But I wasn’t able to create a solid shadow behind it in all the browsers.

background: url("data:image/svg+xml,") 

Just in case, I tried using CSS and SVG filters for the shadow as well, thinking that might work. It didn’t. I also tried using the stroke attribute, to at least create an outline for the emoji, but that didn’t work, either.

I didn’t think of SVG when I first thought of converting emoji icons or CSS shapes into background images. I tried CSS element() . It’s a function that directly converts an HTML element into an image that can be referenced and used. I really like this approach, but browser support is a huge caveat, which is why I’m mentioning it here at the end.

Basically, we can drop an element in the HTML like this:

…then pass it into the element() function to use like an image on other elements, like this:

background: -moz-element(#snake), /* Firefox only */ linear-gradient(45deg, transparent 20px, blue 20px, blue 30px, transparent 30px) white; background-size: 60px 60px; background-color: white;

Now that snake emoji is technically an image that we get to include in the pattern.

Again, browser support is spotty, making this approach super experimental.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

In this method, the original emoji (or any CSS shape for that matter) used for the background pattern needs to render on screen for it to appear in the background pattern as well. To hide that original emoji, I used mix-blend-mode — it sort of masks out the original emoji in the HTML so it doesn’t show up on the page.

I hope you find the methods in this post useful in one way or another and learned something new in the process! Give them a try. Experiment with different emojis and CSS shapes because gradients, while cool and all, aren’t the only way to make patterns.. The background property takes multiple values, allowing us to think of creative ways to stack things.

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

The good news Firefox 75+ supports conic gradients behind a flag. They can be enabled by going to to about:config and setting the layout.css.conic-gradient.enabled flag to true . Also, the gradients can be simplified with the double position syntax, which is even better supported these days. For example, the conic pattern could be reduced to:

background: conic-gradient(yellow 40deg, blue 0% 45deg, transparent 0% 135deg, blue 0% 140deg, transparent 0%) 

Источник

Forming Background Shapes in HTML/CSS with CSS

Code snippets are an effective means of providing concise and lucid explanations. Consider these three solutions for incorporating code snippets in your work: the first involves utilizing pseudo elements :before and :after; the second involves utilizing CSS and can be viewed at the following link: http://jsfiddle.net/2G3zf/; the third solution is yet to be presented.

CSS: creating background with shapes?

CSS alone may not suffice to accomplish this, however, an online tool is available that allows you to save an SVG or PNG for usage on your website. In case you wish to make changes to the code, you can refer to the repository on Github.

In addition to the solutions provided using JS and Canvas, it is worth mentioning that accomplishing this task through CSS is also possible, albeit requiring a significant amount of effort.

By employing background-gradients, it is possible to generate multiple superimposed images without any limit. For instance, you can refer to the Japanese cube pattern available at http://lea.verou.me/css3patterns/#japanese-cube.

One could potentially fill a div with several divs and subsequently modify them via transform . Later, the «background» div could serve as the foundation for adding the desired content.

It appears that there is a resource available that includes a detailed explanation and a functional demonstration.

On the other hand, opting for this approach would not be feasible, given that creating the background using image editing software would be a more convenient option.

How To Create Different Shapes with CSS, Website. Create a Free Website Make a Website Make a Static Website Host a Static Website Make a Website (W3.CSS) Make a Website (BS3) Make a Website (BS4) Make a Website (BS5) Create and View a Website Create a Link Tree Website Create a Portfolio Create a Resume Make a Restaurant Website Make a …

How To Create Modern Skew Background Shapes using

Welcome, How to Create Modern Background Shapes using CSS . CSS Border Radius to create modern background shapes . Advanced Border radius is used nowadays to c

How can i create complex background shape using CSS and HTML ( Example image added in the description )

This constitutes a series of inquiries.

1. How can I layer multiple elements over each other.
2. How can I change the shape of an html element.

Alexandre Beaudet’s answer, which has been removed, was actually a clear and concise response to your second question, despite your comment that it was «Not really close to what I wanted.» It seems that your focus on specific details prevented you from recognizing the applicable principle conveyed in that answer.

Considering the simplicity of these components in terms of investigation, I am disinclined to present sample code. However, I can provide an illustration as follows:

.wrapper < width: 100%; height: 300px; background: gray; position: relative; >.background-shape < background: orange; width: 100%; height: 200px; -ms-transform: skewY(-20deg); -webkit-transform: skewY(-20deg); transform: skewY(-20deg); border-radius: 30px; position: absolute; top: 0px; left: 50px; >.content

The code provided serves as an example. Remember that SO is not a website for copy-pasting solutions, but rather a platform designed to teach you specific mechanisms to solve problems you may not have been aware of before. Code snippets are an effective way to explain things in a concise and straightforward manner.

In order to achieve a visually appealing appearance on all devices, a significant amount of effort is required to properly position and shape the elements on your website.

After seeking help on StackOverflow, I finally found a solution for the problem. The comments of the individuals who assisted me were greatly appreciated. To create this shape, I utilized a CSS pseudo element.

// Header Shape .has-header-shape < position: relative; &::before < position: absolute; width: 1350px; height: 550px; content: ""; background: #0cebeb; /* fallback for old browsers */ background: -webkit-linear-gradient( to right, #8cbf86, #66b4a6, #408ca3 ); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient( to right, #8cbf86, #66b4a6, #408ca3 ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ z-index: -1; top: 0px; border-radius: 60px; -webkit-transform: skew(0deg, -15deg); transform: skew(0deg, -15deg); left: auto; right: 0; >>

Html — create shapes with css, We have two following shapes in jpg format. But on certain condition background and border color needs to change to some different color. So idea is to create those images with CSS transform Property (if possible). < width: 200px; height: 50px; background-color: green; border-radius: 10px 10px 0 30px; …

Css: Menu hover create custom shape background image?(parallelogram shape using css)

Employ the pseudo elements :before and :after.

.testClass:hover:before < content: ''; position: absolute; top:0; left:-15px; width: 0px; height: 0px; border-style: solid; border-width: 0 0 30px 15px; border-color: transparent transparent beige transparent; >.testClass:hover:after

Verify the provided link at http://jsfiddle.net/2G3zf/.

Here is a functional fiddle that I previously created for a link button, building upon the feedback provided by slash197 in their comment.

The CSS Hover and gradient property are showcased in this example, which is applied to a DIV.

 
HOME
 
ABOUT US
 
CONTACT
 
LOGIN
 
SERVICES
 

div < float:left; background-color:#fff; >.testClass < margin-top: 0px; margin-left: 0px; width: 100px; height: 63px; zoom: 1; display: block; background-repeat: no-repeat; background: #fff; >.testClass:hover < background: #eaebea; -webkit-transform: skew(-20deg); /* Old browsers */ background: -moz-linear-gradient(top, #eaebea 0%, #d6d7d5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaebea), color-stop(100%, #d6d7d5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eaebea 0%, #d6d7d5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eaebea 0%, #d6d7d5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #eaebea 0%, #d6d7d5 100%); /* IE10+ */ background: linear-gradient(to bottom, #eaebea 0%, #d6d7d5 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaebea', endColorstr='#d6d7d5', GradientType=0); /* IE6-9 */ >

CSS Backgrounds, The CSS background properties are used to add background effects for elements. In these chapters, you will learn about the following CSS background properties: background-color. background-image. background-repeat. background-attachment. background-position.

Источник