As page layout becomes more complex, developers need access to more units to bring designs to life. In addition to the usual percentages, em and rem, and pixels, there are newer units of measure vw and vh, and the related vmin and vmax, which provide more powerful ways of creating responsive design which can often help you avoid using @media transition points.
Going beyond using interest
Traditional CSS units pose the following challenges in web design:
- The unit of measure, percentage, does not always work as expected. Developers have to be mindful of padding when sizing elements. Do not use the unit of measure, percentage, to set the height of the body element. The font-size: 50% entry sets the text size to half its standard size, rather than establishing a relationship between the size of the text and the size of the containing element.
- It is almost impossible to create perfect shapes for different browser window sizes. It is very difficult to get an element to be perfectly square and responsive at the same time.
The vw and vh units solve all of these problems to a large extent.
Maintaining ideal proportions
With the vw and vh units, it is very easy to create perfect shapes on web pages. These units can be used to set dimension values for almost all CSS properties... Therefore, if you need to create an element that, at any size of the browser window, occupies 20% of its width and at the same time remains square, you need to set the same values the width and height properties using the vw unit:
Div.twentysquare (background: # 999 ; width: 20vw; height: 20vw; )
Check out a demo of this example below, follow the link and try resizing the view box to see the resizing of the shapes.
Using the same method, you can easily create a rectangle that is twice its height for any browser window size:
Div.onetworect (width: 20vw; height: 40vw;)
Setting the perfect aspect ratio for your banner is easy with the following CSS:
Div.goldenrect (width: 100vw; height: 61 .8vw; background: red;)
For optimal scaling of the text in the adaptive block, occupying the entire volume provided to it with a breakdown into lines, you just need to set the font size in vw units.
Translation - Duty
From the author: Rectangle within rectangles: This is how our web pages have always been built. We have long tried to break free of these limitations by using CSS to create geometric shapes, but these shapes have never affected the content inside the styled elements, or how other elements on the page are positioned relative to the styling.
The new CSS specification for shapes changes the current state of affairs. Introduced by Adobe in mid-2012, it aims to give web designers the ability to change the flow of content in and around relatively complex shapes - something we couldn't do before, even with JavaScript.
For example, notice how the text wraps around the circular images in the following design. Without Shapes, the text would be rectangular - throwing out a sophisticated trick that takes design to the next level.
Notice how the text takes on a rounded shape around the edges of the plate in this example. Using CSS Shapes, we can create a similar design for a web page..
Let's take a closer look at how Shapes work and how you can get started using them.
Browser support
CSS Shapes are currently only supported in Webkit Nightly and Chrome Canary, but their Level 1 Module has reached candidate recommendation status, so the properties and syntax defined in the specification are fairly stable. It won't be long before other browsers start supporting them. This layer focuses on those properties of Shapes that change the flow of content around the shape. In particular, it concentrates on the shape-outside property and related ones.
Combined with other latest features like Crop & Mask, CSS Filters and Collage & Merge, CSS Shapes will allow us to create more sophisticated and sophisticated designs without having to resort to graphics editors like Photoshop and InDesign.
Future levels of CSS Shapes will also focus on styling content within shapes. For example, as of today, it's easy enough to create a rhombic shape in CSS: just flip the element 45 degrees, then flip the content inside it to reverse direction to fit horizontally on the page. But the content inside the rhombus will not take the appropriate shape, and will always remain rectangular. By the time the shape-inside property is implemented, we will be able to make the content rhombic as well, creating markup similar to the picture below.
Soon, CSS Shapes will also allow text to be styled inside like these diamonds so that instead of clipping or using overflow, the text itself is positioned relative to the edges of the container..
To use CSS Shapes in Chrome Canary today, you need to enable the experimental checkbox.
Creating CSS Shapes
You can apply a shape to an element using the Shapes properties. You are passing the shape function as a value to the shape property. A shape function is where you pass parameters that define the shape you want to apply to an element.
Shapes can be created using one of the following functions:
Each shape is defined by a set of points. Some functions take points as parameters; others accept offset parameters, but they all end up drawing shapes on an element as a set of points. We will analyze the parameters for each of these functions with examples.
The shape can also be determined from the image using alpha extraction. When an image is passed to the shape property, the browser will extract the shape from the image based on the shape-image-threshold value. The shape is defined by pixels whose alpha value is higher than the specified threshold. The image must be CORS compliant. If the provided is not available for some reason (for example, it does not exist), then no shape will be applied.
The following shapes take the above functions as values:
shape-outside: Forces the content to wrap around the shape (outside)
shape-inside: the content takes the shape of the shape from the inside
You can use the shape-outside property in conjunction with the shape-margin to add an outside padding around the shape, which will move the content away from the shape, leaving space between them. Just like shape-outside gets a shape-margin property, shape-inside gets a shape-padding property, which adds padding.
Using shape properties or functions, declaring a shape element can be done with just one line of CSS:
Element (shape-outside: circle (); / * content will wrap around the circle given to the element * /)
Element (shape-outside: url (path / to / image-with-shape.png);)
Element (shape - outside: url (path / to / image - with - shape. Png);) |
But ... If you apply this line of CSS to an element, the shape will not be applied to it unless the following conditions are met:
The element must be floating. Future levels of CSS Shapes will allow us to define shapes for non-floated elements, but this is not yet possible.
The element must be dimensioned. The height and width given to the element will be used to establish the coordinate system.
As you saw in the functions above, shapes are defined by a set of points. Because points have coordinates, the browser needs a coordinate system in order to know exactly where each point should be placed on an element. Thus, the example above would work if it had the following:
Element (float: left; height: 10em; width: 15em; shape-outside: circle ();)
Element (float: left; height: 10em; width: 15em; shape - outside: circle ();) |
However, giving an element a certain size does not affect its responsiveness (we will talk about this later). Since each shape is defined as a set of points located using a pair of coordinates, changing the coordinates of a point will directly affect the created shape. For example, the following figure shows a hexagon that can be created using the polygon () function. The figure consists of six points. Changing the horizontal coordinate of the orange point will change the final shape and also affect the placement of content inside / outside of any element the shape is applied to.
If an element is floating and right-aligned, and a shape is applied to it, the content to its left will change position when one of the coordinates of the orange point inside the polygon () function is changed.
Shapes Reference Block
CSS Shapes are defined and created inside a reference box, where the shape is drawn. In addition to the height and width of an element, the constituent parts of an element's box model — the margin box, content box, padding box, and border box — are also reference references for defining the element's shape.
By default, the margin box is used as a reference, so if the element you are applying the shape to already has a bottom margin, the shape will end at the edge of the margin, not the border. If you want to use some other box model values, you can specify them along with the shape function that you pass to the shape property:
shape-outside: circle (250px at 50% 50%) padding-box;
shape - outside: circle (250px at 50% 50%) padding - box; |
The padding-box keyword in this rule defines the use of the shape and the padding box constraint. The circle () function determines the circle, its size and position relative to the element.
Defining Shapes with Functions
We'll start by wrapping the info text around a circular user's avatar, just like a user profile or review.
Using CSS Shapes, the text around the user's image wraps around the shape, instead of maintaining a rectangular shape..
We will use the circle () function to apply a circular shape to the profile image using the following markup:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?
Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.
< img src = "//api.randomuser.me/0.3.2/portraits/men/7.jpg" alt = "(! LANG: profile image" / > !}< p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?< / p > < p >Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.< / p > |
You may ask, "Why can't we use border-radius to round the picture?" Answer: The border-radius property has no effect on the positioning of content inside and outside the element to which it is applied. It only affects the element's borders or background. The background is clipped at the rounded corners, that's all. Content inside the element will remain rectangular, and content outside the element will behave as if the element remained rectangular.
We're going to use the border-radius property to make the image round - this is what we do to round off pictures or other elements on the page:
img (float: left; width: 150px; height: 150px; border - radius: 50%; margin - right: 15px;) |
Without CSS Shapes, text sees the image as square and wraps around a square shape instead of a round one..
In a browser that does not support CSS Shapes, content around a circular image will appear as if it were not circular. This is how it will look in older browsers. To change the flow of content around a specific shape, use the shape properties.
img (float: left; width: 150px; height: 150px; border-radius: 50%; shape-outside: circle (); shape-margin: 15px;)
img (float: left; width: 150px; height: 150px; border - radius: 50%; shape - outside: circle (); shape - margin: 15px;) |
With this code, the text will be able to "see" the circular shape applied to the image and flow around it, as shown in the first screenshot. (You can look at the result.) In browsers that don't support shapes, this will look like the second image.
You can use the circle () function in pure form or pass parameters to it. Its official syntax is:
circle () = circle ([
Question marks indicate that these parameters are optional and can be omitted. The parameters you skip will take on their default values. When you use circle () as is, instead of directly specifying the position, by default, the center of the circle will be at the center of the element you are applying it to.
You can set the radius of the circle using any length units (px, em, pt, etc.) You can also set the radius using parameters using closest-side or furthest-side, but closest-side is the default. which means that the browser will take the distance from the center of the element to the nearest side as the radius, farthest-side uses the distance from the center to the far side.
shape-outside: circle (farthest-side at 25% 25%); / * defines a circle whose radius is half the longest side, located at 25% 25% in the element's coordinate system * / shape-inside: circle (250px at 500px 300px); / * defines a circle whose center is 500px horizontally and 300px vertically, with a radius of 250px * /
The ellipse () function works just like circle (), with the same set of values, except that instead of a radius parameter, it takes two: one is the x-axis and the other is the y-axis.
ellipse () = ellipse ([
The inset () function is not directly related to a circle or an ellipse, it is used to create rectangular shapes within an element. Since the elements are already rectangular, we don't need it to create the rectangles. Instead, inset () can help us create rounded rectangles so that the content flows around the rounded corners.
The inset () function takes one to four offset parameters that specify an offset relative to the edges of the reference block, which locates the rectangle within the element. Rounded corners are denoted in exactly the same way as border-radius, using one of four values in conjunction with the round keyword.
inset () = inset (offset (1,4)?)
inset () = inset (offset (1, 4) [round< border - radius > ] ? ) |
The following code will create a rounded rectangle on a floating element.
Element (float: left; width: 250px; height: 150px; shape-outside: inset (0px round 100px) border-box;)
Element (float: left; width: 250px; height: 150px; shape - outside: inset (0px round 100px) border - box;) |
The final Shape function is polygon (), which defines more complex ambiguous shapes using any number of points. The function takes a set of pairs of coordinates, where each pair defines the position of the point.
In the following example, a floating image is positioned at the right edge, occupying the full height of the screen and using viewport units. We want the text on the left to flow around the hourglass inside the image, and we use the polygon () function to define a custom shape for the image.
The CSS for the image above looks like this:
img.right (float: right; height: 100vh; width: calc (100vh + 100vh / 4); shape-outside: polygon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60 %, 45% 40%);)
img. right (float: right; height: 100vh; width: calc (100vh + 100vh / 4); shape - outside: polygon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);) |
You can specify the coordinates of the points that define the shape in units of length or percentage, like mine. This code will give the desired result, but as you can see, the shape function does not affect the rest of the image outside of the given shape. The point is that applying a shape function to an element - be it an image or a container or something else - will not affect anything other than the content wrapping area. The background, borders and everything else will remain unchanged.
To visually represent the created polygon, we need to "crop" parts of the image outside the shape. The clip-path property from the CSS Masking Module specification will help us with this.
The clip-path property takes the same shape functions and values as the shape property. If we pass the same polygonal shape that we used for the shape-outside property to the clip-path property, it will clip the part of the image outside the shape.
img.right (float: right; height: 100vh; width: calc (100vh + 100vh / 4); shape-outside: polygon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60 %, 45% 40%); / * cropping the picture along the contour of the shape * / clip-path: polygon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40% );)
img. right (float: right; height: 100vh; width: calc (100vh + 100vh / 4); shape - outside: polygon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); / * cropping the picture along the contour of the figure * / clip - path: polygon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); ) |
The result looks like this:
The clip-path property is still supported along with prefixes, i.e. it will work in Chrome with the -webkit- prefix added. You can take a look at the demo.
The clip-path property is great companions to the shape property, as it helps you visually represent the shapes you create and clip the parts outside the shape, so you will probably use them together very often.
The polygon () function also accepts an optional keyword for padding, which can be either nonzero or evenodd. It determines how intersecting areas within the polygon will behave. Check out the SVG fill-rule property for details.
Defining a shape using an image
To define a shape using an image, the image must have an alpha channel from which the browser will retrieve the image.
A shape is defined by pixels whose alpha value is above a certain threshold. The default threshold value is o.o (fully transparent), or you can set it directly using the shape-image-threshold property. Thus, any opaque pixel can be used as part of the shape defined by the image.
A future CSS layer of Shapes may allow switching to use image luminance data instead of the alpha channel. If this happens, the shape-image-threshold will be expanded to include the threshold for either luma or alpha, depending on the state of the toggle.
We use the following image to define the shape of the element and make the text flow around it:
Of course, if you applied a background to an element, the background will need to be clipped outside of the given shape. The mask-image property (with appropriate prefixes) from the Masks Module can help with this, since the clip-path property does not accept an alpha channel value. The result looks like this:
If you are creating complex shapes, you may find it convenient to define the shape using a picture. This will allow you to use the alpha channel of the image in Photoshop, instead of manually specifying the points.
You will also find it convenient to use an image instead of a shape function when you have a lot of floats or if you have exceptions inside an element - because this moment there is no way to declare multiple shapes to one element. But if the image contains multiple regions, the browser will extract those regions and use them.
CSS Shapes in Responsive Design
Can CSS Shapes work for responsive designs? The current specification for shape-outside includes this point because it allows an element to be sized in either percentages or length units, and the points defining the shape (shape function parameters) can also be specified in percentages. This means that an element with a given shape-outside can be fully responsive, just like any floating element with a percentage size.
The shape-inside property is not yet responsive, but that's because it has been moved to a Level 2 Module. Many of his current limitations will go away at the next level.
Shape Tools
Creating complex shapes using functions can be tedious, especially if you are creating a shape with many points and coordinates using polygon (). Fortunately, the Adobe Web Platform team is working on producing interactive tools to make this process much easier. Bear Travis has created a collection of Shape Tools that allows us to visually create polygonal shapes. The tool generates a shape function. This can be useful, but it has its limitations if you want to create a shape based on a specific image, because the tool does not provide such an option.
A more advanced and interactive tool was developed by the Adobe web platform team. The tool was recently released as an extension to the free Brackets editor. It lets you render and edit shapes right in the browser, and has an online preview that updates the shape's values in the stylesheet when you change them on the page. It gives instant visual feedback your changes, allowing you to see how the shapes interact with other elements on the page.
Editing a polygonal shape right in the browser using Brackets' preview mode. Screen recording by Razvan Caliman.
This tool will become indispensable as it makes it easy to create, edit and debug shapes. Razvan Caliman, which explains how to invoke the Shape Editor in Brackets and start using it.
The Future: CSS Exceptions
The CSS Shapes spec was a spec about CSS Shapes and Exceptions, but it was split up. While CSS Shape defines shape-inside and shape-outside properties, CSS Exceptions define properties that cause content to wrap around non-floating elements, such as those that are positioned absolutely. They make it possible for content to wrap around the whole shape from different sides, as shown in the image below.
In the future, CSS Exceptions will allow content to wrap around a shape such as an inset, as shown in the magazine spread. The cut can also be circular, and the text will flow around it the same way..
New Level of Figures
The current CSS Shapes specification is just the first step. Soon, new features will give us more control over creation and flowing content, so it will be easier for us to turn layouts into living designs with just a few lines of code. As of today, spec editors are focused on completing the shape-outside, and you might see support for CSS Shapes. big amount browsers by the end of 2014.
You can use Shapes today as part of a progressive enhancement strategy, knowing they have an acceptable replacement in non-supporting browsers. I recently started using them on my site and the replacement looks quite acceptable. For more complex design, you can use a script to check for browser support, and provide any replacement if there is no support. You can also use Modernizr tests with this script to check if shape-outside is supported, or load your own assembly that includes this test.
CSS Shapes allow us to create yet another bridge between print and web design. The examples in this article are simple, but should give you a foundation to create a design as complex as a magazine or poster, without worrying about whether you can recreate it on screen. Whatever you learn - from non-rectangular layouts to animating Shapes - now is the time to experiment.
Vlad Merzhevich
On websites, triangles are used all the time as part of the design of elements, for example, they serve as a pointer to some object, directing the reader's attention to the right place. Also, triangles serve as decorative functions, making the blocks where they are applied more graceful and modern. In fig. 1 shows an example of using a triangle in design.
Rice. 1. Triangles in web design
Make a triangle directly by means of CSS impossible, so there are two methods available to add it - through border and transform.
Using border
Although borders created through the border property are not directly related to triangles, it is border that is used most often for this. If we set the element width and height to zero, and also set a sufficiently thick border, we will see a set of four triangles (Fig. 2). For clarity, the borders on all sides are set in different colors.
Rice. 2. Adding a border to an element
Leaving only the desired border, and making the rest transparent, we get a triangle of the desired color (Fig. 3).
Rice. 3. Element with transparent borders
Example 1 shows adding a triangle to a block via the :: after pseudo-element.
Example 1. Block with a triangle
For absolutely positioned elements, you do not need to specify zero width and height.
By combining borders, you can get four more types of triangles, which in combination with the ones already mentioned gives us eight options. Their type and required code are given in table. 1.
| View | Style |
|---|---|
| border: 20px solid transparent; border-top: 20px solid green; | |
| border: 20px solid transparent; border-right: 20px solid green; | |
| border: 20px solid transparent; border-bottom: 20px solid green; | |
| border: 20px solid transparent; border-left: 20px solid green; | |
| border: 20px solid transparent; border-top: 20px solid green; border-right: 20px solid green; | |
| border: 20px solid transparent; border-right: 20px solid green; border-bottom: 20px solid green; | |
| border: 20px solid transparent; border-bottom: 20px solid green; border-left: 20px solid green; | |
| border: 20px solid transparent; border-left: 20px solid green; border-top: 20px solid green; |
From the table you can see that invisible borders take up space, take this into account when positioning elements. The style also needs to be padded with zero width and height, or use the position property, as in example 1.
You can make a triangle of a different shape if you set a different thickness of the borders. So, the code for creating the block shown in Fig. 4 is shown in example 2.
Rice. 4. Acute triangle
Example 2. Acute triangle
With the help of border we get solid colored triangles to create the border shown in fig. 5 you have to go for the trick and put one element on top of the other with a slight offset. Again, the: before and: after pseudo-elements will help us here (example 3).
Rice. 5. Frame with corner
Example 3. Overlay triangles
Due to the fact that we are overlaying one solid color element on top of another, this method is only suitable for solid color fills and is not suitable for gradients or background images.
Using transformation
With the help of transformation we can rotate the square element by 45º and get a rhombus out of it. This is not a triangle as such, so we leave the protruding part we need in plain sight, and hide the rest behind another element (example 4).
Example 3. Transformation
The result of this example is shown in Fig. 6.
Rice. 6. Triangle with shadow
Online CSS3 generator for creating cool graphic effects and getting their CSS code. You can separately change styles for different states such as: hover,: active, etc. The interface for creating complex shadows, gradients, 3D effects, text effects and much more falls into your hands. The project has its own gallery of effects from which you can start your development. A distinctive feature of the project is that you can get styles for individual element, for example for a shadow or a gradient.
When you first visit the site, we suggest creating a template for an input field, button, block, or choosing a ready-made template from the project gallery. Let's start with something simple like a gallery of geometric shapes. Select the Yin-Yang sign from the gallery and click "Get The Code" in the upper right corner:
We will be shown the finished CSS for the current development, as well as HTML example code. There are over 20 more presets for various CSS shapes in the project gallery, and of course you can create your own.
Having rummaged through the sections of the gallery, we see buttons, text boxes, effects directly for text, the aforementioned shapes and gradient sets. Let's play with the text effects:
site - wow it "s 3D!
I must admit that the generated CSS is surprisingly very clean and readable, which is great. Let's take a look at some nice button:
cool button website
Additional features include saving your state in the browser's localStorage. If you accidentally closed the tab, then the next time you visit the site, all your changes will remain with you.
When using non-standard fonts with Google fonts EnjoyCSS automatically adds them to the HTML sample. In my case, for text and buttons, it looks like this:
The final CSS is quite voluminous, so I only include it at the end of the article:
Yin-yang (
float: left;
width: 96px;
height: 48px;
position: relative;
border: 2px solid # f81;
border-bottom-width: 50px;
-webkit-border-radius: 100%;
border-radius: 100%;
color: rgba (0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
-webkit-transform: rotateZ (-45deg) scaleX (1) scaleY (1) scaleZ (1);
transform: rotateZ (-45deg) scaleX (1) scaleY (1) scaleZ (1);
transform-origin: 50% 50% 0;
Yin-yang :: before (
width: 12px;
height: 12px;
position: absolute;
content: "";
top: 50%;
left: 0;
border: 18px solid # f81;
-webkit-border-radius: 100%;
border-radius: 100%;
font: normal normal normal 100% / normal Arial, Helvetica, sans-serif;
color: rgba (0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: rgba (255,255,255,1);
text-shadow: none;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}
Yin-yang :: after (
width: 12px;
height: 12px;
position: absolute;
content: "";
top: 50%;
left: 50%;
border: 18px solid rgba (255,255,255,1);
-webkit-border-radius: 100%;
border-radius: 100%;
font: normal normal normal 100% / normal Arial, Helvetica, sans-serif;
color: rgba (0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: # f81;
text-shadow: none;
-webkit-transform: scaleX (1) scaleY (1) scaleZ (1);
transform: scaleX (1) scaleY (1) scaleZ (1);
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}
Enjoy-css-3dtext (
cursor: pointer;
border: none;
font: normal normal normal 72px / normal "Passero One", Helvetica, sans-serif;
color: rgba (255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: 0 1px 0 rgb (204,204,204), 0 2px 0 rgb (201,201,201), 0 3px 0 rgb (187,187,187), 0 4px 0 rgb (185,185,185), 0 5px 0 rgb (170,170,170), 0 6px 1px rgba (0 , 0,0,0.0980392), 0 0 5px rgba (0,0,0,0.0980392), 0 1px 3px rgba (0,0,0,0.298039), 0 3px 5px rgba (0,0,0,0.2), 0 5px 10px rgba (0,0,0,0.247059), 0 10px 10px rgba (0,0,0,0.2), 0 20px 20px rgba (0,0,0,0.14902);
-webkit-transition: all 300ms cubic-bezier (0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier (0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier (0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier (0.42, 0, 0.58, 1);
-webkit-transform: scaleX (1) scaleY (1) scaleZ (1);
transform: scaleX (1) scaleY (1) scaleZ (1);
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}
Enjoy-css-3dtext: hover (
color: rgba (169,214,169,1);
text-shadow: 0 1px 0 rgba (255,255,255,1), 0 2px 0 rgba (255,255,255,1), 0 3px 0 rgba (255,255,255,1), 0 4px 0 rgba (255,255,255,1), 0 5px 0 rgba (255,255,255 , 1), 0 6px 1px rgba (0,0,0,0.0980392), 0 0 5px rgba (0,0,0,0.0980392), 0 1px 3px rgba (0,0,0,0.298039), 0 3px 5px rgba (0,0,0,0.2), 0 -5px 10px rgba (0,0,0,0.247059), 0 -7px 10px rgba (0,0,0,0.2), 0 -15px 20px rgba (0,0, 0.0.14902);
-webkit-transition: all 200ms cubic-bezier (0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier (0.42, 0, 0.58, 1) 10ms;
-o-transition: all 200ms cubic-bezier (0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier (0.42, 0, 0.58, 1) 10ms;
}
Feedback-button (
display: inline-block;
float: left;
position: relative;
cursor: pointer;
margin: 0 2% 0 0;
padding: 12px 22px;
overflow: hidden;
border: none;
font: normal normal bold 1.6em / normal "Syncopate", Helvetica, sans-serif;
color: # ecf0f1;
-o-text-overflow: clip;
text-overflow: clip;
-webkit-
background-origin: padding-box;
background-clip: border-box;
background-size: auto auto;
-webkit-box-shadow: 0 10px 0 0 rgba (178,49,49,1);
box-shadow: 0 10px 0 0 rgba (178,49,49,1);
text-shadow: 0 0 0 rgb (196,80,78), 1px 1px 0 rgb (196,80,78), 2px 2px 0 rgb (196,80,78), 3px 3px 0 rgb (196,80,78 ), 4px 4px 0 rgb (196,80,78), 5px 5px 0 rgb (196,80,78), 6px 6px 0 rgb (196,80,78), 7px 7px 0 rgb (196,80,78), 8px 8px 0 rgb (196,80,78), 9px 9px 0 rgb (196,80,78), 10px 10px 0 rgb (196,80,78), 11px 11px 0 rgb (196,80,78), 12px 12px 0 rgb (196,80,78), 13px 13px 0 rgb (196,80,78), 14px 14px 0 rgb (196,80,78), 15px 15px 0 rgb (196,80,78), 16px 16px 0 rgb (196,80,78), 17px 17px 0 rgb (196,80,78), 18px 18px 0 rgb (196,80,78), 19px 19px 0 rgb (196,80,78), 20px 20px 0 rgb (196 , 80,78), 21px 21px 0 rgb (196,80,78), 22px 22px 0 rgb (196,80,78), 23px 23px 0 rgb (196,80,78), 24px 24px 0 rgb (196,80 , 78), 25px 25px 0 rgb (196,80,78), 26px 26px 0 rgb (196,80,78), 27px 27px 0 rgb (196,80,78), 28px 28px 0 rgb (196,80,78 ), 29px 29px 0 rgb (196,80,78), 30px 30px 0 rgb (196,80,78), 31px 31px 0 rgb (196,80,78), 32px 32px 0 rgb (196,80,78), 33px 33px 0 rgb (196,80,78), 34px 34px 0 rgb (196,80,78 ), 35px 35px 0 rgb (196,80,78), 36px 36px 0 rgb (196,80,78), 37px 37px 0 rgb (196,80,78), 38px 38px 0 rgb (196,80,78), 39px 39px 0 rgb (196,80,78), 40px 40px 0 rgb (196,80,78), 41px 41px 0 rgb (196,80,78), 42px 42px 0 rgb (196,80,78), 43px 43px 0 rgb (196,80,78), 44px 44px 0 rgb (196,80,78), 45px 45px 0 rgb (196,80,78), 46px 46px 0 rgb (196,80,78), 47px 47px 0 rgb (196,80,78), 48px 48px 0 rgb (196,80,78), 1px 1px 0 rgba (196,80,78,0.980392), 2px 2px 0 rgba (196,80,78,0.960784), 3px 3px 0 rgba (196,80,78,0.941176), 4px 4px 0 rgba (196,80,78,0.921569), 5px 5px 0 rgba (196,80,78,0.901961), 6px 6px 0 rgba (196,80,78 , 0.882353), 7px 7px 0 rgba (196,80,78,0.862745), 8px 8px 0 rgba (196,80,78,0.843137), 9px 9px 0 rgba (196,80,78,0.819608), 10px 10px 0 rgba (196,80,78,0.8), 11px 11px 0 rgba (196,80,78,0.780392), 12px 12px 0 rgba (196,80,78,0.760784), 13px 13px 0 rgba (196,80,78,0.741176 ), 14px 14px 0 rgba (196,80,78,0.721569), 15px 15px 0 rgba (196,80,78,0.701961), 16px 16px 0 rgba (196,80,78,0 .682353), 17px 17px 0 rgba (196,80,78,0.658824), 18px 18px 0 rgba (196,80,78,0.639216), 19px 19px 0 rgba (196,80,78,0.619608), 20px 20px 0 rgba (196,80,78,0.6), 21px 21px 0 rgba (196,80,78,0.580392), 22px 22px 0 rgba (196,80,78,0.560784), 23px 23px 0 rgba (196,80,78,0.541176 ), 24px 24px 0 rgba (196,80,78,0.521569), 25px 25px 0 rgba (196,80,78,0.498039), 26px 26px 0 rgba (196,80,78,0.478431), 27px 27px 0 rgba (196 , 80,78,0.458824), 28px 28px 0 rgba (196,80,78,0.439216), 29px 29px 0 rgba (196,80,78,0. 419608), 30px 30px 0 rgba (196,80,78,0.4), 31px 31px 0 rgba (196,80,78,0.380392), 32px 32px 0 rgba (196,80,78,0.360784), 33px 33px 0 rgba ( 196,80,78,0.341176), 34px 34px 0 rgba (196,80,78,0.317647), 35px 35px 0 rgba (196,80,78,0.298039), 36px 36px 0 rgba (196,80,78,0.278431) , 37px 37px 0 rgba (196,80,78,0.258824), 38px 38px 0 rgba (196,80,78,0.239216), 39px 39px 0 rgba (196,80,78,0.219608), 40px 40px 0 rgba (196, 80,78,0.2), 41px 41px 0 rgba (196,80,78,0.180392), 42px 42px 0 rgba (196,80,78,0.156863), 43px 43px 0 rgba (196,80,78,0.137255), 44px 44px 0 rgba (196,80,78,0.117647), 45px 45px 0 rgba (196,80,78,0.0980392), 46px 46px 0 rgba (196,80,78,0.0784314), 47px 47px 0 rgba (196,80, 78,0.0588235), 48px 48px 0 rgba (196,80,78,0.0392157), 50px 50px 0 rgba (196,80,78,0);
-webkit-transform: scaleX (1) scaleY (1) scaleZ (1);
transform: scaleX (1) scaleY (1) scaleZ (1);
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}
Feedback-button: hover (
text-align: center;
background: -webkit-linear-gradient (-90deg, # ce6161 0, # ef6664 100%);
background: -moz-linear-gradient (180deg, # ce6161 0, # ef6664 100%);
background: linear-gradient (180deg, # ce6161 0, # ef6664 100%);
background-position: 50% 50%;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}
Feedback-button: active (
top: 5px;
background: -webkit-linear-gradient (-90deg, # ff8583 0, # ff5350 100%);
background: -moz-linear-gradient (180deg, # ff8583 0, # ff5350 100%);
background: linear-gradient (180deg, # ff8583 0, # ff5350 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
-webkit-box-shadow: 0 5px 0 0 rgba (178,49,49,1);
box-shadow: 0 5px 0 0 rgba (178,49,49,1);
