I want to create an animation with css that simulate a wave movement.
I need to change a line-or div- to a curve for this...
The CSS rules that I'm familiar to, make the entire div to semicircular or change element border.
For example:
border-radius, or perspective or border-top-radius...
This image show you what I want:
Is this possible? If so, how can it be done?
You could use an asymmetrical border to make curves with CSS.
border-radius: 50%/100px 100px 0 0;
VIEW DEMO
.box {
width: 500px;
height: 100px;
border: solid 5px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
}
<div class="box"></div>
#Navaneeth and #Antfish, no need to transform you can do like this also because in above solution only top border is visible so for inside curve you can use bottom border.
.box {
width: 500px;
height: 100px;
border: solid 5px #000;
border-color: transparent transparent #000 transparent;
border-radius: 0 0 240px 50%/60px;
}
<div class="box"></div>
Related
I need to create a round frame around a transparent center. The frame has a radial gradient from inner to outer border.
The round div is easy with border-radius 50%.
The problem is adding a radial gradient to the border. I tried with border-image, border-color, box-shadow, radial-gradient without any success, while with background-image I didn't manage to have the transparent center.
Any suggestions?
Thanks,
Enrico
You can use box-shadow
.radial-thinggy {
width: 50px;
height: 50px;
margin: 80px;
background-color: transparent;
border-radius: 50%;
box-shadow: 0 0 10px 10px rgba(255,69,0,1),
0 0 20px 20px rgba(255,140,0,1),
0 0 30px 30px rgba(255,255,0,1);
}
body {
background-color: cornflowerblue;
}
<div class="radial-thinggy"></div>
I'm trying to make a triangular shaped background image overlay a full width image.
It is easy enough to make a triangular shaped background image using border-with, border-color and background-image, like so:
border-width: 350px 50vw 0px 0px;
border-color: white transparent transparent transparent;
background-image: url(/img/rainbow4.jpg);
But as there is white space you cannot overlay on top of another image, you get the following http://codepen.io/anon/pen/ENVWRz
If you set:
border-color: transparent transparent transparent transparent;
Then the image will appear square, so this doesn't work.
I've managed to make it work using clip-path, but this is very poorly supported across many browsers – so I am trying to avoid this approach.
you can also take a look at mix-blend-mode or background-blend-mode , but also tricky to use and not so much supported yet.
div.triangle_test {
width: 0;
height: 0;
border-style: solid;
border-width: 350px 50vw 0px 0px;
border-color: white transparent transparent transparent;
display: block;
position: absolute;
z-index: 0;
right: 0;
background-image: url('http://img06.deviantart.net/25de/i/2012/134/3/1/037_by_koko_stock-d4zq28i.jpg');
}
div.full_width {
mix-blend-mode: darken;
background-image: url('http://somebodymarketing.com/wp-content/uploads/2013/05/Stock-Dock-House.jpg');
width: 100%;
height: 350px
}
<div class="triangle_test"></div>
<div class="full_width"></div>
http://codepen.io/gc-nomade/pen/JRdEVO
I want an empty container to glow so I use this code:
box-shadow: 0 1px 20px 1px lightcyan;
The problem with this is that only the borders glow and there is a big hole in the center which is not the effect I want. I know I can move the position of the shadow so is not overlapped by the container itself but I don't want that because it would be out of place.
Is there any other alternative to achieve this effect with pure CSS?
Something like this, but without the background:
box-shadow can do it, just crank up the blur and the spread (the 3rd and 4th parameters).
For a circle, add border-radius: 50%; and give a small width and height.
div {
margin: 100px;
width: 1px;
height: 1px;
background-color: lime; /* for the 1px in the center */
border-radius: 50%;
box-shadow: 0 0 50px 70px lime;
}
<div></div>
I found this code snippets at http://www.css3shapes.com/, but I can't understand the logic behind it. I mean I know the before and after selector's function. What I'm confused with is why we have { height:0; width:40px; } in the code. If anyone could give a full explanation on this code, it will be greatly appreciated.
#octagon {
width: 100px;
height: 100px;
background: blue;
}
#octagon:before {
height: 0;
width: 40px;
content:"";
position: absolute;
border-bottom: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
}
#octagon:after {
height: 0;
width: 40px;
content:"";
position: absolute;
border-top: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
margin: 70px 0 0 0;
}
If you change a few of the colours you can see what's going on: the 'after' bit is like the top part of a bevelled picture frame:
The top of the frame is red, the sides are green & blue, but there's no bottom, and the size of the 'picture' in the frame is width 40, height zero (ie the line along the bottom edge of the red bit).
If you add the missing bottom, and make the height 40, you can see the entire frame:
It's a trick to force css to render a triangular shape. Check out #octagon:before { ... }
The border-bottom-width determines the height of the element. The borders on the sides add to the defined width giving the shape a width of 100px.
You can imagine the height: 0 acting like a vanishing point in the distance. Both of the sides move toward it but in this case never reach it since the width (100) is greater than the height 30.
The difference between the triangle and the octagon is the additional width:
width: 40px;
Play with his example: http://jsfiddle.net/mXTrG/
The gray is the side borders and the blue is the bottom border.
Does that make sense? Let me know if you have any questions!
Suppose I have the following CSS snippet:
div {
width: 200px;
padding: 10px;
border-width: 1px;
border-style: solid;
border-bottom-color: red;
border-left-color: blue;
}
The left border is blue-colored, the bottom border is red-colored. But the bottom left pixel, where the left and the bottom borders overlap, is red in my browser. Apparently the bottom border overlaps the left border on that pixel.
Can I either manually set the overlap order or accomplish in another way that the left-bottom pixel is blue-colored instead of red-colored?
The color of the bottom-left pixel belongs to your browser, you cannot override it.
However, you can use nested divs for this advanced situation. Try this:
div.parent {
width: 200px;
border-width: 1px;
border-style: solid;
border-left-color: blue;
}
div.child {
width: 200px;
padding: 10px;
border-width: 1px;
border-style: solid;
border-bottom-color: red;
}
And your HTML is:
<div class="parent">
<div class="child">
Your content will appear correctly.
</div>
</div>