Curled corner effect using only CSS. Does anyone know how to make concave corners like in the picture using pure CSS?
Curved Shadow or Shadow simulating upward curved corners, looks very impressive on the site. At the same time, objects or images stand out from plain text.
And such three-dimensional effect,
can only be achieved using CSS3 And HTML.
First, some general but important basics for creating a curved or concave shadow.
Block with shadow
By using CSS3 a shadow of any object can be created HTML, with any direction, size and blur. For this it is used, CSS3 parameter “box-shadow: 2px 2px 2px 2px #000 inset”. It's important to know that shadow adapts to the size and shape of the object. A round corner of an object casts a round shadow.
For one object, several different shadows can be specified simultaneously, separated by a comma.
The meaning of information" box-shadow: 2px 2px 2px 2px #000 inset“:
- First value displacement in the horizontal direction.
A higher value moves the shadow more to the right, while a negative value moves the shadow to the left. - The second value is displacement in the vertical direction.
With positive values the shadow moves down and with negative values it moves up. - The third value determines the degree shadow blur.
The higher the value, the greater the blur. - Fourth additional parameter defines shadow radius.
The higher the value, the larger the shadow. - Then follows shadow color.
This data also influences the perception of blur. - “inset“: This optional information is inner shadow
This color designation “# 000”, can be replaced by “RGBA” (red, green, blue, alpha channel), For example, “box-shadow: 4px 4px 4px rgba(0, 0, 0, .6)”, which makes the object's shadow translucent and thus looks more natural against a textured background.
Arched and curved shadows
Basic markup HTML unchanged in all following examples. Therefore, only what is needed will be added CSS3. Instead of an image, a second “ Div-container” for text, but it is ultimately the same thing.
To determine the position of the shadow, the container “ DIV” must have a parameter “position: relative” and with the help “z-index:1” move to the foreground. Thus, this container serves as a reference point for the absolutely positioned shadow.
#schatten ( position: relative; height: 34.4em; width: 50em; margin: -2.5em auto 1.8em; left: -5px; z-index: 1; )
Now the properties of either the second container “ DIV” or image properties.
Size both width and height are 100% of the parent container “#schatten”, and also gets a white frame "border" 5 pixels.
To make the white frame different from background image, another shadow will be added. This results in additional separation of the subject from the background, thereby enhancing 3D effect.
#schatten img ( position: relative; width: 100%; height: 100%; border: 5px solid #fff; box-shadow: 0 -3px 5px -2px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0, .3), 0 0 20px rgba(0, 0, 0, .1) inset; )
Thanks to pseudo-elements “:before” And “:after” a curved shadow is defined and added to the container “ DIV“.class=”notranslate”> Elements “:before” And “:after”, are usually interpreted as built-in objects and placed on HTML element, in other words, is placed before or after the element. Thanks to “ position: absolute“, the shadow is independent of real object and can be positioned individually.
First, the size of the shadow is determined, and thus obtained, using two pseudo-elements, two rectangles with a width of 50% and a height of 30% of the parent container “# schatten“. We then move the two rectangles by 2 pixels and get a shadow at a distance of 15 pixels and a blur of 10 pixels.
Pseudo-element “:before” is intended to represent the shadow at the bottom left and therefore receives a 3° counterclockwise rotation. The element on the right side is responsible “:after”.
#schatten:before, #schatten:after ( position: absolute; content: ""; width: 50%; height: 30%; bottom: 2px; left: 10px; box-shadow: 0 15px 10px rgba(0, 0, 0, .7); transform: rotate(-3deg); z-index: -2; ) #schatten:after ( right: 0; left: auto; transform: rotate(3deg); )
Now let's look at other examples of arched and curved shadows.
And, as already described above, we will insert an additional container “ DIV” instead of an image.
Main code CSS3 for all subsequent examples:
Box ( position: relative; height: 12em; width: 31em; margin: 0 auto; z-index: 1; ) .schatten ( position: relative; color: #777; width: 80%; height: 80%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset; ) .schatten:before ( position: absolute; content: ""; z-index: -2; box-shadow: 0 0 15px rgba(0, 0, 0, .6); border-radius: 100px / 20px; )
Horizontally curved shadow
.schatten1:before ( top: 0; bottom: 0; left: 10px; right: 10px; )Vertically curved shadow
.schatten2:before ( top: 10px; bottom: 10px; left: 0; right: 0; )Curled corners
.schatten3:before, .schatten3:after ( position: absolute; content: ""; width: 50%; height: 30%; bottom: 2px; left: 10px; box-shadow: 0 15px 10px rgba(0, 0, 0, .6); transform: rotate(-3deg); z-index: -1; ) .schatten3:after ( right: 0; left: auto; transform: rotate(3deg); )Shadow in perspective
.schatten4:before, .schatten4:after ( position: absolute; content: ""; z-index: -2; bottom: 5px; width: 80%; height: 3.1em; ) .schatten4:before ( left: 50px; box-shadow: -80px 0 8px rgba(0, 0, 0, .4); transform: skew(45deg); ) .schatten4:after ( left: 40px; box-shadow: 80px 0 8px rgba(0, 0, 0, .4); transform: skew(-45deg); )hanging shadow
.schatten5 ( position: relative; color: #777; width: 80%; height: 9.5em; top: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 -30px 40px rgba(0, 0, 0, .1) inset; transition: 1s ease-in-out; transform-style: preserve-3d; ) .schatten5:after ( content: ""; display: block; height : 80%; width: 75%; transform: rotateX(80deg) translate3d(0, 0, -44px); box-shadow: 50px 200px 25px 10px rgba(0, 0, 0, .3); transition: 1s ease- in-out; ) .schatten5:hover ( top: 35px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset; ) .schatten5:hover:after ( transform: rotateX(94deg) translate3d(0, 0, -70px); box-shadow: 50px 200px 25px 10px rgba(0, 0, 0, .4); )Raised shadow
.schatten6:before ( position: absolute; content: ""; z-index: -2; box-shadow: 0 0 15px rgba(0, 0, 0, .6); border-radius: 100px / 20px; ) . schatten6 ( top: 0; box-shadow: 0 25px 10px -10px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0, .3), 0 -30px 40px rgba(0, 0, 0, .1) inset; ) .schatten6:hover ( top: 15px; box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0 , .3), 0 0 40px rgba(0, 0, 0, .1) inset; )The box-shadow property adds one or more shadows to an element. The shadow is a copy of the element offset by the specified distance. Shadows can be external or internal, blurry or flat, and can follow the outlines of blocks with rounded corners. By using keyword inset creates shadows inside the element, making the element visually voluminous or depressed.
How to make a box shadow using the box-shadow property
Browser support
IE: 9.0
Edge: 12.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Android Browser: 4.0, 2.1 -webkit-
1. Box-shadow property syntax
Each shadow takes from one to five parameters: horizontal offset, vertical offset, blur radius (optional), spread radius (optional), and shadow color. Shadows do not affect the layout and may overlap adjacent elements or their shadows. The property is not inherited.
Rice. 1. Box-shadow property syntax | Values: | |
| x-offset | Required value. The horizontal offset of the shadow relative to the block. It can take both positive and negative values, a positive one shifts the shadow to the right of the block, a negative one – to the left. |
| y-offset | Required value. The vertical offset of the shadow relative to the block. Can take both positive and negative values, positive moves the shadow down, negative moves the shadow up. |
| blur | Optional value. Determines the blur radius of the shadow. The larger the radius, the more blurred the shadow is. Only positive values can be used. |
| stretching | Optional, expands the shadow, thickening the solid portion between the blurred edges. Accepts both positive and negative values, specified in length units - px, etc. |
| color | Optional value. By default the shadow is black. To set the value, you can use the following color recording formats: #RRGGBB , rgb(red, green, blue) , rgba(red, green, blue, alpha) . For Safari color Shadows must be indicated. |
| inset | Creates a shadow inside the block. |
| none | The default value means no shadow. |
| initial | Sets the property value to the default value. |
| inherit | Inherits the property value from the parent element. |
2. Block shadow examples
2.1. Inner shadow
.example-shadow-1 ( background: #e6e3df; text-align: center; ) .example-shadow-1 span ( margin: 50px; height: 100px; width: 200px; display: inline-block; box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1); )
2.2. Flat shadow on one side
flat
flat
.example-shadow-2 ( background: beige; text-align: center; ) .example-shadow-2 a ( display: inline-block; border-radius: 5px; padding: 15px 35px; font-size: 22px; margin : 20px; color: white; background: #55acee; box-shadow: 0 5px 0 #3C93D5; ) .example-shadow-2 a:hover ( background: #6FC6FF; )In this tutorial we will create the effect of curled corners without using images or additional markings. It works great in all modern browsers and is well suited for website designs with simple color schemes.
This effect was used in the demo for the lesson "Multiple backgrounds and strokes using CSS2". In addition, the use of curled corners in the design of a real website can be seen in the example of Yiibu. But the Yiibu site uses images, and we use pseudo-elements and CSS.
Start
Nothing complicated. Any element will do and no additional marking will be required. It all starts with a simple painted rectangle. Browsers that don't support pseudo-elements (IE6 and IE7) will output it too.
Adding the position:relative property makes it possible absolute positioning pseudo-elements.
Note ( position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; )
A folded corner is created using a pseudo-element that is positioned in top corner rectangle. The pseudo element has no width or height, but it has a thick stroke. By changing the thickness of the stroke, we will change the size of the folded corner.
IN in this example The top and right parts of the stroke have colors that match the background color of the parent rectangle. The left and bottom parts of the stroke are a darker or lighter color than the background color of the rectangle.
Note:before ( content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#658E15 #fff; )
That's all you need to create simple effect folded corner, similar to the one used on the Yiibu site.
Firefox 3.0 does not allow pseudo-elements to be positioned. You can use a couple of properties to fix this in this browser.
Note:before ( ... display:block; width:0; )
Adding a light shadow
The appearance of the corner can be slightly improved by adding a box-shadow property (for those browsers that support it) to the pseudo-element. Setting the overflow:hidden property on the element class hides part of the shadow, which breaks the curl effect.
Note:before ( ... -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); )
Rounded corners
It's also relatively easy to use this technique in conjunction with rounded corners. Unfortunately, everyone modern browser has some kind of bug related to the border-radius property (including those using the property without a prefix). This situation means the need for additional work.
Only Webkit browsers can make rounded corners for pseudo-elements if they only have 2 stroke parts. Opera 11 and Firefox 3.6 create an eye-watering mess. Moreover, Opera 11 has maximum error in this process.
Using all four sides eliminates problems in Opera 11 and Firefox 3.6. But this method solution results in an error in Safari 5 that results in a jagged diagonal line. Bypass this problem You can set the color for at least one part of the stroke to transparent .
The background color will be visible through the transparent outline. Ideally, this approach will generate an effect and contain a minimum of code. But Opera 11 only shows the background color through the transparent border if the border-radius property is set.
Note-rounded:before ( content:""; position:absolute; top:0; right:0; border-width:8px; border-color:#fff #fff transparent transparent; background:#658E15; -webkit-border- bottom-left-radius:5px; -moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px; display:block; width:0; )
The CSS file for the demo page contains comments that are useful for working with. Each browser has its own characteristics when used border-radius properties or outline elements without width and height.
Final code
Below is all the CSS code needed to create a curled corner effect with subtle shadows using just one HTML element.
Position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; overflow:hidden; ) .note:before ( content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15 ; background:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Overcoming Firefox 3.0 limitations */ ) .note.rounded ( -webkit-border-radius:5px; -moz-border-radius:5px ; border-radius:5px; ) .note.rounded:before ( border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border- radius:0 0 0 5px; border-radius:0 0 0 5px; )
Conclusion
The demo page contains examples using different colors to make sure the effect is easy to use.
Keep in mind that this technique works worse when using an image as a background for an element than when using plain color. But other methods of organizing bent corners also have such limitations.
Question: Shape + smooth corners
Good day, dear forum users. Please help me with this question: using pure CSS you need to create the following hexagon shape, but with smoothed corners.
I would be grateful for any help, especially prompt ones.
Answer:
Message from InTheDark
Spirt Tesla, Thanks for your response, but there are no problems in constructing the figure itself, I’ve already figured it out, but smoothing the corners is already a problem. Please tell me - in your code, what parameters are responsible for this characteristic of the figure?
In general, border-radius is responsible for anti-aliasing
Question: Right angles
Help me make right angles,Here is the code
/rs- account reset;
where is /rs I have this text in a rounded frame, but how can I make the frame have right corners?
Answer:
Help me make right angles
I think that even if you search on Google for three days, you won’t find anything. Try searching in reverse, look for how to make round corners, if you succeed, you will learn how to make square ones.
Question: How to make such corners for a div
Good afternoon
How to make such corners for a div.
Example:
Thank you!
Answer: A pseudo-element with given dimensions, for example, but it’s easier to play with shadows if you want to do all 4 corners this way.
box-shadow: X Y 0 -S #fff; - the first two parameters are offsets in x and y, respectively, the third blur, it should be at zero here, and the fourth parameter is responsible for compressing the shadow when with a minus (so that it becomes small). The last one is the shadow color.
Although, if your div itself is rectangular, and the shadow is square, then, apparently, it makes sense to make a transparent pseudo-element with dimensions like the shadow, and offsets in X and Y to scatter its 4 shadows in the corners of the div. In this case, the fourth parameter of the box-shadow property will also be 0, change only the first two.
Question: (JS) Find out the real angle of rotation of the div
Greetings, forum members.
I know about matrix(bla-bla) sines and cosines.
Postulate: The browser “knows” the number of rotations of an element if the angle is greater than 360 degrees - obviously from experience.
Question: Is it possible to extract this real rotation angle?
Answer: I asked a specific question:
How to use a script to extract the full value of the div's rotation angle while the page is running.
The same 390 degrees specified in css.
Question: superimpose one picture on another at a certain angle
a task similar to that of fiddle. you need to superimpose one picture on another, despite the fact that the bottom picture is tilted. I just can’t get it to line up smoothly. I tried using perspective in CSS, matrix and other transformations, but the corners of the pictures always don’t move. in this case, only one angle may not coincide. are there any simple ways, or can my version be corrected?
| HTML5 | ||
|
||
| CSS | ||
|
||
Answer: I used to do it as you showed, and I also see that it works in the fiddle, but no matter how much I try on the site, nothing works. the top corners remain at the same level, is there anything you can recommend?
Added after 15 minutes
thanks, figured it out
img
{
position:absolute;
}
that was the problem
Question: Does the Multiscroll plugin, the menu button in the upper left corner have animation only in Firefox?
website wsfox.ru
Multiscroll plugin
Why does the menu button in the top left corner only have animation in Firefox?
Answer:
Message from Mashka_mulashka
Can you also tell me why the menu button in the upper left corner has animation only in Firefox?
Maybe I’ll give you a hint, but it animates well in Chrome too
Added after 7 minutes
In general, it seems that the name of the keyframes is written in front, and yours at the end, perhaps that’s why it doesn’t work in IE, but I’m not sure for sure
| CSS code | ||
|
||
Question: Determine the angle using the canvas lines
Look at the screenshot, you need to find the angle “C”. Where def.X/defY is the current position of the gun muzzle (well, the black shoot is up) and nowX/nowY is the current position of the mouse cursor. There is no need to write that I have a 2 in geometry, I have a 5 in geometry. The problem is different, how can I write this correctly in JS?
Answer: Do you have mouse coordinates (these are the sides of a right triangle)
All that remains is to find out how to find an angle knowing the length of two legs
and what is tangent used for in trigonometry?
| Message from Vopub |
| No need to write that I have a 2 in geometry, |
There is an opinion that you are stupid and incorrectly solving the problem facing you. they already told you about the vector
Question: Rounded corners on the parent block and positioning of child elements
Good day
There are two problems.
1. Rounding corners does not work on the green block. Although the exact same code works on the menu block
| CSS | ||
|
||
Why might this be?
2. The beige block is on the green block, and they must be next to each other and there must be a border between them. Here's the code:
| CSS | ||
|
||
Answer: Thank you. Figured out my mistakes
Added after 25 minutes
Indeed, the mistake was that I set the corners to the parent element. But in the end I decided to give them up.
I didn’t separate the blocks, I added a new class.right for the entire right side with the content and highlighted it in white. Therefore, visually it seems that there are 2 blocks and that they are separate
| CSS | ||
|
||
Question: Image slider on pure JavaScript
Guys, I really need your help. Please explain to me in your fingers the logic of the slider in pure JS. The Internet is full of sliders, but they are all in JQuery, or very complex. I need a simple slider, an arrow to the left - the previous image appears, to the right - the next one, without any bells and whistles. I’ve only recently been learning JS, so I don’t quite understand how this can be implemented, and I can’t understand the code of complex sliders due to lack of experience. I would be very grateful for your help.
Answer: Deimon26, look here, everything is in pure js, with comments
In this article, as in the previous one, the effect is built using a pseudo-element :after. To understand the essence, you can read that article, there I schematically explained how it works, I won’t repeat it here. In general, everything is done very simply and can be configured different types effects. In the example below, you can see how I organized 3 different bends with minimal changes to the code.
Let's start in order with the first one, it is the most basic, and all the rest are done based on it. To get started, you need to decide which block the effect will be assigned to, unusual shadow. In our case, this will be a block - block_shadow.
Block_shadow( position:relative; width:400px; height:150px; background:#f7f7f7; ) .block_shadow:after( content:""; position:absolute; z-index:-1; top:0; bottom:0; left :50px; right:50px; -webkit-box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-box-shadow:0 0 25px rgba(0,0,0,0.3); box -shadow:0 0 25px rgba(0,0,0,0.3); -moz-border-radius:200px / 50px; border-radius:200px / 50px; )
I will now describe what exactly creates this look. First, the block was assigned a positioning relative, then the width, height, and always the background, even if it’s white. Then we assign the pseudo element :after. For it, the following parameters are set:
- position- assign positioning - absolute.
- z-index- set it to minus -1 to hide it behind the block.
- top:0;bottom:0;- the distance from the top and bottom is 0 pixels, that is, the shadow is visible. If you set the value to - top-50%, then the upper shadow will hide behind the block and you will get a look like in the third block of the example. If for - bottom set to 50%, the lower shadow will disappear. 50% is just an example, you can install something of your own and not completely hide the shadow if necessary.
- left:50px;right:50px;- this is the indentation from the edges. We stepped back 50 pixels to hide the shadow on the sides. Let's go to the front to make the second version of the effect, when the shadow is on the sides, you just need to change the values. Set the sides to 0, and the top and bottom to 50 pixels. The value is 50, you can of course change it, so you change the size of the shadow.
- box-shadow- this is a shadow, everything is clear here. Set the color, transparency and blur size of the shadow, now 25 pixels.
- border-radius- this is the rounding of the shadow to create that same bending effect. the first value is 200 pixels, the horizontal radius is half of our main block width - 400 pixels. 50 is the vertical radius. To implement the second example - shadow on the sides, you need to make sure that the second value is more than the first. It all depends on the size of the block. In our case, the second example has a ratio of 10px / 50px.
You can customize all the parameters for yourself, you can change them as you like, the main thing is not to overdo it, so as not to lose the realistic look.
In the first explanation, I basically described everything, so for the second block in the example, I’ll just present ready-made styles, so that you can see and make it clearer.
Block_shadow:after( content:""; position:absolute; z-index:-1; top:25px; bottom:25px; left:0; right:0; -webkit-box-shadow:0 0 25px rgba(0, 0,0,0.3); -moz-box-shadow:0 0 25px rgba(0,0,0,0.3); box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-border -radius:10px / 50px; border-radius:10px / 50px; )
For the block in the third example, I also described what needs to be done and will also simply provide the finished code.
Block_shadow:after( content:""; position:absolute; z-index:-1; top:50%; bottom:0; left:50px; right:50px; -webkit-box-shadow:0 0 25px rgba(0 ,0,0,0.3); -moz-box-shadow:0 0 25px rgba(0,0,0,0.3); box-shadow:0 0 25px rgba(0,0,0,0.3); -moz- border-radius:200px / 50px; border-radius:200px / 50px; )
By changing the styles, customizing them to suit you, you can achieve different results and completely new effects, not only those that I showed in the example. By specifying percentage values, you can automatically stretch the shadow to the entire height or width of the block if the block does not have a constant size. Try and improve and your site will have an unusual look.
That's all, thanks for your attention. 🙂