Interlocking Trapezoid CSS3 - css

I've been trying to use transform like CSS3 Transform to Trapezoid to achieve the look in my attached photo.
I am having trouble making them interlock cleanly as per my crappy wireframe. Also making the background of them a slightly opaque photo having the ability to adjust the images position easily.
Any help is much appreciated!
Current: http://cssdeck.com/labs/lrjtihdm
2
crappy wireframe

Related

Applying greyscale effects to images - Photoshop CC 2017

The image below has a kind of faded grey look with what seems to be some slight blurring and works quite well as a generic banner image.
Usually I am provided with these images or just find stock images but I'd be very interested in learning how to apply these effects with Photoshop or CSS. I have a feeling that Photoshop is a more appropriate tool.
The image I'm experimenting with is this:
It isn't the best image but for my testing purposes at least it's a similar shape and size.
I know I can use things like de-saturation or a coloured layer with a colour blend mode for this sort of thing. However, does the first image look like it has a specific effect or is it just a case of trial and error?
I appreciate this is similar to this question.
open your image in photoshop, add a new layer on top of the image, fill the layer with a color of your choice (in this case grey/black) then reduce the opacity of the layer. You will get something similar to what you want. This is a simple trick. It can be done in other ways too with more modifications.
Maybe you could get the effect by using css blur and overlaying the image with a gray layer with opacity.
You could also just create the effect in photoshop and use that

Only show group once while tiling with SVG

I'm designing a website which uses a SVG-document as background. I want this image to tile on the X-axis. Which works great, but I wanted to know if it is possible to show one group in the SVG only once, such that in subsequent tiles the group is hidden.
The above image visualizes what I want to achieve. The image having one group (in the image the red circle) that is invisible in the following tiles.
Now I am aware such things can be achieved using additional CSS backgrounds but I am really interested if such thing could be achieved using a single SVG background.
Thanks in advance!
The answer is no. If you are relying on CSS to tile the background - ie. with repeat-x, then no. there isn't any way to do what you want. When an SVG is used as a background like that, it becomes immutable - effectively the same as a PNG or a JPEG.
You will need to use a different method.

Website with a Increasing size background

I am new to web development. I designed an image and i want this image as background It is a curved one. When I put matter it should increase the background accordingly.
Please help me in this regard
Thanks
TeeKeyBee
You can use border-radius for some simple oval shaped divs, by combining multiple divs and multiple classes you can achieve something like that, but its quite hard.

CSS3 Navigation bar (responsive) or traditional background image

is it possible to create the following shape using pure CSS3 - in a single layer i.e.
<div class="nav-bg">...</div>
I'm currently using the traditional slice the curve apart and add it as a bg-image. I'm just curious and i couldn't find anything on the internet about a CSS only method of creating this.
I also gave this a shot, How do I combine a background-image and CSS3 gradient on the same element?, no bueno.
Raphael.js may help you in creating curve lines and straight lines and many other things w/o using an image.

Creating Linen texture with CSS?

Linen
Is it possible to create Apple's linen texture with CSS? Something like background gradient, to avoid the slow speed of an image.
Using the noise feature of CSS can get you a long way to creating a pure CSS texture. Play around with http://www.noisetexturegenerator.com/ to see the possibilities. If you put both opacity and density you can get a striped pattern that somewhat resembles cloth.
A special mention goes to this article, for using css gradients to give your noise texture that little extra something:
http://www.rd2inc.com/blog/2013/01/tips-and-tricks-css3-gradients-and-textures/
Be advised that the noise feature is pretty new and isn't supported in all browsers.
I think gradient is possible. follow the link:Speed Up with CSS3 Gradients

Resources