css3

Flexbox vertical alignment

.header { margin: 60px 0; } .header__form { display: flex; justify-content: flex-end; align-items: cente ... ;/form> </div> </div> </header> </div> Why doesn't vertical alignment work?

Upload images in advance so that you can't see the loading process?

There are n-th number of images. When you click on the button, one picture replaces another. But there is a time when it loads. a pause. Is it possible to immediately load images in some way so that the user does not see the image loading process?

Semi-transparent frame inside the image

Semi-transparent frame inside the picture, how to make it?

css cropping images

You need to crop and insert the normal, horizontal and vertical images in the div so that they completely fill the div withou ... v class="img_wrap"> <img src="https://image.ibb.co/hUgwvb/n.jpg" alt="normal" /> </div> </body>

Rotating the image in a circle in css

There is a round bitmap image. <img src="http://photoholic24.com/wp-content/uploads/2012/01/smile_b.jpg" width="100" ... ake it rotate in a circle in one place clockwise - in the 180-degree position, the smile becomes inverted) preferably on css?

Change the color of an SVG image

I make edits to the layout of the site on Laravel, the entire CSS the code is built from SCSS. The code for adding an SVG im ... preserve"> <g> <g> <path d="..."/> <path d="..."/> </g> </g> </svg>

css3 transition background image

Hello everyone. You need to make sure that when you hover the cursor, the image changes smoothly. You can change the image us ... then everything works fine-smoothly, as it should. Can you tell me how to implement the same effect for the background image?

Drop-down menu on jQuery

You need to implement a similar menu: 1. When you hover over the item --> the bar{[9] appears at the top]} 2. When you c ... li> </ul> </nav> <div class="drop_menu__img"></div> </div> </div>

CSS button style as in the demo

How to make a button style like on the demo of this site (click on the link and there is a yellow button to view the demo). ... uttons in the picture of the iceberg. One is blue and becomes transparent on hover, the other is transparent and becomes blue

How to make a smooth css gradient change on hover

How can I make a smooth background change (gradient to gradient) when hovering hover over an element. I made a button, gave i ... , rgb(173, 65, 169)); box-shadow: 0 2px 10px rgba(213, 80, 208, 0.9); } <a class="btn_default">Some link</a>

Background blur

How can I blur the background ? <body> <div></div> </body> I want the page backgrou ... r css) can only be applied to images. Ps. I didn't find the right question because they asked everywhere about the img tag.

CSS button with a gradient

How can I make a button with a gradient like this on CSS, and then when you hover over it, the gradient inverts (the colors change places)? Are there any online services for generating such buttons with a gradient?

Set svg fill in css

Good day to all! I decided to try using svg files in the layout, but I ran into a problem - the fill color is not set. I try ... lt, the icon is filled with black, although in theory it should be yellow. I ask for the help of experienced people. Thanks!

How are the string blocks arranged inside the string container?

A question about CSS. If you specify font-size > line-height, for example, font-size: 24px and line-height: 12px, then the ... block container element. I realized that each row lies in a row container, these containers lie one under the other closely.

How to draw a car using SVG commands

Below is a picture of the car in PNG format. I want to make an animation of the movement of the car along some trajectory. ... Using a vector editor, or manually using SVG formulas, or in some other way, for example, applying CSS3 transformations.

How do I make transition only for transform scale?

I have a popup that has the following properties transition: 0.2s ease transform; transform: scale(0.8) translate(-50%, -50% ... ansform. The question is, how do I make an animation only for transform scale, and not take into account transform translate?

Rounding blocks using css

How can I round the blocks using css to get something like this: I tried using border-radius: 0 0 50% 50%;, but nothing comes out, the rounding radius is too large. Do you have any ideas, maybe someone has encountered it?

Float vertical alignment

There is a parent block: .parent{ height:500px; } It has a child block: .children{ float:left; height: 50%; } Here i ... align it vertically for an adaptive site, so that at different screen formats you do not need to count margin-top:10px, etc.

Is there an analog of background-size: cover for img?

Is it possible to do the same positioning of the image in the img tag as it is done with background-size: cover? I've seen solutions using object-fit, and I've also looked at other options, but none of them work. Can I do it without object-fit?

Two nested tables of the same height

Layout problems. There is a container table. It has a single line that contains two cells. Each cell has another table. Quest ... e first, although ideally it is required that they are perceived as one common table. Is there any way to solve this problem?