How I can create custom background shape with css something like this: https://imgur.com/a/1RQ70xr
<div class="cover">
</div>
Found this solution that is close to shape I want
.cover-ugodnosti {
margin: 0;
height: 100vh;
background-image: linear-gradient(#202020, #202020), linear-gradient(to top left, transparent 49.8%, #202020 50%);
background-repeat: no-repeat;
background-size: 50.1% 100%;
background-position: left, right;
}
With gradient:
.cover {
margin: 0;
height: 100vh;
width: 100vw;
background: linear-gradient(120deg, rgba(32,32,32,1) 0%, rgba(32,32,32,1) 51%, rgba(255,255,255,1) 51.05%, rgba(255,255,255,1) 100%);
}
<div class="cover"></div>
Or just use the image
.cover {
margin: 0;
height: 100vh;
background-image: url('https://i.imgur.com/E4sU3IS.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
skew transformation can help to get the small squares:
body {
margin:0;
height:100vh;
position:relative;
overflow:hidden;
}
body:before {
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
width:200%;
transform-origin:top;
transform:skew(-15deg);
background:
linear-gradient(#000,#000) left/25% 100%,
repeating-linear-gradient(to right, #000 0 20px,transparent 21px 30px) bottom/100% 20px;
background-repeat:no-repeat;
}
Related
I'm trying to get the header of my website to show a scrolling gradient (imagine the sun rising when scrolling down). Getting the gradient up is no problem;
#header {
height: 200px;
width: 100%;
left: 0;
right: 0;
top: 0;
background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
<div id="header"></div>
Getting it scrolling on moving the page however is a problem. I found several guides telling to add;
background-size: 400px;
background-attachment: fixed;
as;
#header {
height: 200px;
width: 100%;
left: 0;
right: 0;
top: 0;
background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
background-size: 400px;
background-attachment: fixed;
}
This however gets the header to turn totally dark. What am I missing?
You can simulate this by applying a background coloration on the body and keep the header transparent:
#header {
height: 100px;
position:fixed;
left:0;
right:0;
top: 0;
border:3px solid green;
box-sizing:border-box;
}
body {
min-height:200vh;
background:
linear-gradient(to bottom, transparent 100px,#fff 100px) fixed,
linear-gradient(to bottom, red, blue);
}
<div id="header"></div>
I'm trying to use CSS to make a scalloped border for an image using radial-gradients. Here is what I have so far: JS FIDDLE.
As you can see, the top edge of the image has pointy tips, while the bottom edge is rounded. How can I get the pointy tips at the bottom as well? (Like the bottom edge flipped upside down.)
I would appreciate your help!
HTML:
<body>
<div class="top-container">
<p>Top section.</p>
</div>
<div class="container">
<p>Image Section</p>
</div>
<div class="next-container">
<p>Bottom Section</p>
</div>
</body>
CSS:
body {
text-align:center;
background: white;
}
.top-container {
background: white;
}
.container {
position:relative;
background-image: url("http://placekitten.com/1280/120");
height: 100px;
padding-top:40px;
width: 100%;
left: -10px;
}
.container::before {
position:absolute;
bottom: -20px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, transparent 25%, #000 26%, white 0%);
background-color: transparent ;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -20px 0px;
}
.container::after {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
background-color: transparent;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -25px 0px;
}
.next-container {
background: white;
}
Use the same radial-gradient you have on the top, but here you just rotate it 180 degrees
body {
text-align:center;
background: white;
}
.top-container {
background: white;
}
.container {
position:relative;
background-image: url("http://www.rhapsodazzle.com/flowers.jpg");
height: 100px;
padding-top:40px;
width: 100%;
left: -10px;
}
.container::before {
position:absolute;
bottom: 0;/*-20px;*/
transform: rotate(180deg); /* added */
left: 0px;
width: 100%;
content:" ";
background: radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
/*
radial-gradient(circle at 50% 0%, transparent 25%, #000 26%, white 0%);*/
background-color: transparent ;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -20px 0px;
}
.container::after {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
background-color: transparent;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -25px 0px;
}
.next-container {
background: white;
}
<body>
<div class="top-container">
<p>Top section.</p>
</div>
<div class="container">
<p>Image Section</p>
</div>
<div class="next-container">
<p>Bottom Section</p>
</div>
</body>
JSfiddle link: jsfiddle.net/oq2ja51g/3/
I have a large photo, such as http://www.bestwallpapersfan.com/wp-content/uploads/2014/05/1755137.jpg. I want to overlay text near its bottom.
To ensure that the text is readable, I want to use the Floor Blur approach described here: https://medium.com/#erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96#dc39-765a9789c924
I've learned how to do a simple Floor Fade to Black or a simple blur (both described here: https://css-tricks.com/design-considerations-text-images/).
But how do I combine the effects such that it's a gradual / gradient / progressive blur?
Thanks!
This is pretty close to what I was looking for and now just needs to be cleaned up to fix the funkiness with the h1, etc.
.container {
width: 400px;
height: 300px;
position: relative;
}
.gradient {
position: absolute;
width: 400px;
height: 300px;
margin: 20px;
background: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
opacity: 0.99;
z-index: 2;
}
.module {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
background-attachment: fixed;
width: 400px;
height: 300px;
position: absolute;
overflow: hidden;
margin: 20px;
z-index: 1;
}
.module>header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
z-index: 3;
}
.module>header::before {
content: "";
position: absolute;
top: 0;
left: 30px;
width: 100%;
height: 100%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(12px);
filter: blur(12px);
transform: scale(2) translateY(20px);
}
.module>header>h1 {
margin: 0;
color: white;
position: relative;
z-index: 4;
}
.title {
margin: 0;
color: white;
position: absolute;
z-index: 4;
}
* {
box-sizing: border-box;
}
<div class="container">
<div class="gradient">
</div>
<div class="module">
<header>
<h1>
Skyscraper
</h1>
</header>
</div>
<div class="title">
Skyscraper
</div>
</div>
You could use html5 canvas to draw that progressive gradient
White text annotation without a progressive gradient:
Annotation with a progressive gradient:
Example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg";
function start(){
cw=canvas.width=img.width;
ch=canvas.height=img.height;
ctx.drawImage(img,0,0);
var g=ctx.createLinearGradient(0,ch-100,0,ch);
g.addColorStop(0.00,'rgba(0,0,0,.1)');
g.addColorStop(1.00,'rgba(0,0,0,.75)');
ctx.fillStyle=g;
ctx.fillRect(0,ch-100,cw,100);
ctx.fillStyle='white';
ctx.font='24px verdana';
ctx.textAlign='center';
ctx.textBaseline='bottom';
ctx.fillText('Natural Beauty',cw/2,ch-5);
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>
You've complicated a bit too much, try this JSFiddle
HTML:
<div class="container">
<div id="header">
<h1>Skyscraper</h1>
</div>
</div>
CSS:
* {
margin:0;
padding:0;
}
.container {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
}
.container,
#header {
width: 400px;
height: 300px;;
}
#header {
position:relative;
z-index:100;
}
h1 {
width:400px;
height:100px;
line-height:100px;
font-size:30px;
color:#ffffff;
position:absolute;
bottom:0;
left:0;
z-index:101;
text-align:center;
/* Gradient to h1 */
background: rgba(255,93,177,0);
background: -moz-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,93,177,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#000000', GradientType=0 );
}
I am trying to have jagged edges made in css3 on a div that is on an image and I need it to have a transparent bg, by bg I meant where the jagged edges are
See the following fiddle: http://jsfiddle.net/ovb597yq/
<div style="background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-
gradient(135deg, #ec173a 5px, #fff 0) 0 5px;
background-color: #ec173a;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;width:200px;height:200px;">test</div>
.
body{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
Where its white I am trying to make it transparent but its not currently happening
Any ideas?
You need to apply it on :after :pseudo-element and change #fff to transparent.
body {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
div {
position: relative;
background-color: #ec173a;
width: 200px;
height: 200px;
}
div:after {
content: '';
position: absolute;
background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-gradient(135deg, #ec173a 5px, transparent 0) 0 5px;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;
width: 10px;
height: 100%;
right: -10px;
}
<div>test</div>
Writing an app that uses CSS to define icons, avoiding dependency on external image files. This works fine for circles, squares, triangles, diamonds, which is almost enough.
I wonder if it's possible to create slightly more complex icons like the two grid shaped ones on the right using CSS? It need not support IE8.
.icon {
height: 20px;
width: 20px;
background-color: steelblue;
display: inline-block;
}
.icon-circle {
border-radius: 10px;
}
.icon-square {
border-radius: 0
}
<div class="icon icon-circle"></div>
If you use pseudo elements :before and :after, you can make those icons without images. And you can even make them responsive (see my fiddle).
I used the pseudo elements to create the "white lines" so you will be able to make both last icons like this:
div {
width: 20%;
padding-bottom: 20%;
margin: 5% 10%;
background-color: #6095C9;
position: relative;
float: left;
}
div:after,
div:before {
content: "";
position: absolute;
background-color: #fff;
}
.one:before,
.two:before {
margin: 0 48%;
width: 4%;
height: 100%;
}
.one:after,
.two:after {
margin: 48% 0;
height: 4%;
width: 100%;
}
.two:before {
height: 50%;
bottom: 0;
}
<div class="one"></div>
<div class="two"></div>
FIDDLE
Here is another method to achieve the shapes using gradients instead of pseudo-elements. You can play around with the background sizes to produce different effects (like in shape3).
The advantage of this over the pseudo-element method is that it doesn't require any extra real/pseudo-elements but the drawback is that the browser support for linear-gradients is still poor compared to pseudo-elements.
div {
margin: 10px;
height: 50px;
width: 50px;
background-color: steelblue;
transition: all 1s;
}
.shape1 {
background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
background-size: 100% 50%, 50% 100%;
}
.shape2 {
background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
background-size: 100% 50%, 50% 50%, 100%, 100%;
background-repeat: repeat-y, repeat-x;
}
.shape3{
background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
background-size: 100% 50%, 50% 50%, 100%, 100%;
background-position: 0% 0%, 0% 100%, 0% 0%;
background-repeat: repeat-y, repeat-x;
}
.shape4 {
background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
background-size: 100% 25%, 25% 100%;
background-position: 0% 100%, 100% 100%;
background-repeat: repeat-y, repeat-x;
}
.large {
height: 150px;
width: 150px;
}
/* Just for demo */
div {
float: left;
}
.small{
clear:both;
}
div:hover {
background-color: crimson;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="shape1 small"></div>
<div class="shape1 large"></div>
<div class="shape2 small"></div>
<div class="shape2 large"></div>
<div class="shape3 small"></div>
<div class="shape3 large"></div>
<div class="shape4 small"></div>
<div class="shape4 large"></div>
You may be able to use a single element here without actually using pseudo elements at all with the help of box-shadow's.
So, say you have a square div element:
div {
height: 20vw;
width: 20vw;
background: tomato;
}
<div></div>
You could then add a box shadow, without a spread, by using:
div {
height: 20vw;
width: 20vw;
background: tomato;
box-shadow: 21vw 0 tomato;
}
<div></div>
you can even use multiple box shadows by seperating them with a ,:
div {
height: 20vw;
width: 20vw;
background: tomato;
box-shadow: 21vw 0 tomato, 0 21vw tomato, 21vw 21vw tomato;
}
<div></div>
You would even be able to overlap them:
div {
height: 20vw;
width: 20vw;
background: tomato;
box-shadow: 21vw 0 tomato, 0vw 21vw tomato, 16vw 21vw tomato, 21vw 21vw tomato;
}
<div></div>
So creating such wouldn't be overly taxing on browser compatibility nor pseudo elements (which could be used for other purposes).
div {
height:20vw;
width:20vw;
background:tomato;
box-shadow:0 0 0 tomato;
-webkit-animation: boxshadowmult 8s infinite;
animation: boxshadowmult 8s infinite;
}
#-webkit-keyframes boxshadowmult {
0%, 24% {
box-shadow:0 0 0 tomato;
}
25%, 49% {
height:20vw;
width:10vw;
box-shadow:11vw 0 0 tomato;
}
50%, 74% {
height:10vw;
width:10vw;
box-shadow:11vw 0 0 tomato, 6vw 11vw 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
}
75%, 100% {
height:10vw;
width:10vw;
box-shadow:11vw 0 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
}
}
#keyframes boxshadowmult {
0%, 24% {
box-shadow:0 0 0 tomato;
}
25%, 49% {
height:20vw;
width:10vw;
box-shadow:11vw 0 0 tomato;
}
50%, 74% {
height:10vw;
width:10vw;
box-shadow:11vw 0 0 tomato, 6vw 11vw 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
}
75%, 100% {
height:10vw;
width:10vw;
box-shadow:11vw 0 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
}
}
/*demo only*/
html{height:100%;
background: rgb(79,79,79); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(79,79,79,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#222222',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
<div></div>
Using :before and :after, you can create two more "boxes" to play with.
JSFiddle Demo
.icon {
width: 200px;
height: 95px;
background: blue;
}
.triple-square {
position: relative;
margin: 0 0 105px 0;
border-radius: 5px;
}
.triple-square:before {
content: " ";
position: absolute;
bottom: -105px;
left: 0;
height: 95px;
width: 95px;
background: blue;
border-radius: 5px;
}
.triple-square:after {
content: " ";
position: absolute;
bottom: -105px;
right: 0;
height: 95px;
width: 95px;
background: blue;
border-radius: 5px;
}
Here's another example to create 3 circles in a triangle shape...
http://jsfiddle.net/RrhxN/1/