Posts by hugocsl • 65,517 points
1,996 posts
-
3
votes1
answer110
viewsA: What part of my zoom div is possible?
Yes it is possible, you can use background-size or transform:scale() to increase the background or the div along with your background. With the background-size the size of div always remains the…
-
2
votes2
answers558
viewsA: Hover effect on child element with CSS
Yes friend is just you put to "activate" the effect when pass on your <a> with class .login .login:hover .un:after { width: 100%; } See the code. Show it in full screen as it is with Bootstrap…
-
2
votes1
answer825
viewsQ: What are max-content and min-content width values and how do they work?
I recently came across these two values for the width of an element, however I did not understand how to use them and what they serve... That’s what the Mozilla documentation says, but I don’t get…
-
3
votes2
answers147
viewsA: Change the style/theme of the site and store it in Localstorage
Your problem is simpler than it looks.. Basically where you put .elemento:after[theme="claro"] Should be .elemento[theme="claro"]:after 'Cause you want to hit the :after of .elemento when that…
-
5
votes1
answer358
viewsA: By Divs next to bootstrap
You can pick up the .row middle and put a class .centro in it. Then you composition:absolute you put her "floating" on top of the others, and align her vertically with top and transform:translateY()…
-
3
votes1
answer72
viewsA: Accordion menu with option open by default
You don’t even need to touch the JS to fix it. Just leave one of the options in your menu already selected with the class .active setada. Like this, I’ve left the first <a href="#"…
-
5
votes1
answer76
viewsQ: Is there any way to test a CSS animation by Devtools?
I have this simple animation done in CSS, but I’m having difficulties to "debug" your behavior. Every time I have to go in the code, save, and update in the browser. Is there any way to test a…
-
1
votes1
answer45
viewsA: Make the <p> fit the image size
Just in CSS you put in the styles of P one overflow:auto, this way even using float in some element within the P he won’t miss the reference of height of that element "floated" .retrato { float:…
-
2
votes2
answers121
viewsA: Collapse bootstrap 4 does not work mobile
Your problem is simple, your btn of "menu" is with position:Absolute, so it is "hidden" by the contents of opens when you click. Just add a z-index in that btn from the menu you solve the problem…
-
8
votes2
answers174
viewsQ: How to do with CSS Downloader bar with animated background?
I saw this element that actually works as a "Loader" while the image is loading etc. And I tried to replicate it. Not the dynamics to function as a Loader, but yes this effect of the passing lines…
-
5
votes1
answer183
viewsA: How to make animation with SVG or CSS of a Text walking the way?
I found a solution and I will try to explain it in parts to facilitate. My first mistake is with the SVG structure, for this kind of animation I don’t need to put the <path> within the…
-
6
votes1
answer5311
viewsA: In Visual Studio Code how to set up to indent code automatically?
You can do it in two ways by indenting the document as a whole, or just a selected block of code. The shortcuts below work in VS Code for Windows, for the other OS consult the links List of…
visual-studio-codeanswered hugocsl 65,517 -
17
votes1
answer3079
viewsQ: How does Cubic-Bezier work in CSS Animations?
When we make an animation with CSS we have several parameters that we can use. Ex: animation-name: none animation-duration: 0s animation-timing-function: ease animation-delay: 0s…
-
1
votes1
answer918
viewsA: Flexbox Align-items does not work
Dude is all working right. The "problem" is that your container Dad has no height, so don’t line up... Look at your code, just putting height on the father container and an edge for you to visualize…
-
1
votes2
answers481
viewsA: Background with Blur and div of the middle without
When you put some effect on the "father" you cannot remove it from the son. So if the father has blur, or opacity, or some other effect of that kind you can not remove it from the child, the effect…
-
0
votes1
answer54
viewsA: Tips on how to make two Excerpts within each wordpress article
Here is a simple template that can help you. If your text has less than 6 lines just vc remove the "Read more" The technique is to use a Label with a for to the checkbox that is hidden outside the…
-
6
votes1
answer183
viewsQ: How to make animation with SVG or CSS of a Text walking the way?
I have an SVG that is a Text aligned on a Path. But my intention is to do the text "running" by Path, as a Marqueer. The idea would be something like this image. But what I got was to animate the…
-
2
votes2
answers251
viewsA: How to hide fixed div in mobile?
I’ll give you a solution, but you have to test in your project because it’s really something I did the first time and I don’t know how the behavior will be there. But basically I used the structure…
twitter-bootstrapanswered hugocsl 65,517 -
1
votes1
answer25
viewsA: Open dropdown without it being a daughter tag
You can do the :hover on a brother and stylize the brother down using the dial + so you do the hover in the .menu and with the + you say the brother should stay with display:block Then you need to…
-
4
votes1
answer73
viewsA: Resize submenu when overflowing page
Just put a rule @media and play the sub-menu inside when the screen is narrower. OBS: In the same way that you made this first rule you have to go making others as the screen gets closer and…
-
2
votes1
answer71
viewsQ: In CSS what are Implicit or Explicit properties or attributes? What is the difference between an "Implicit Grid" and a "Explicit Grid"?
I’ve been hearing a lot about CSS Grid Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout The Grid Layout is built from the display:grid, and I have often heard the term…
-
2
votes2
answers666
viewsA: Only with CSS is there any way to make a "Toast"? An element that goes up and then click to close it?
For those who want a version that only closes when clicking a button an option is using :target So you can make one link with a href calling the ID of Toast, and within the Toast there’s another…
-
2
votes1
answer73
viewsA: How to make CSS a Linear-Gradient that has PX values and % at the same time?
As I did not have an answer, I will post the solution I arrived to solve the problem. I used a calc(), in the middle color of the gradient to determine which size it would be 100% - 50px, where 50px…
-
0
votes2
answers190
viewsA: How to use a border image (or character) via CSS?
I made a model using pseudo-element even, because this way I can better control the contour and curvatures. I know it wasn’t exactly the same, but sometimes it suits you... I didn’t need to touch…
-
1
votes1
answer73
viewsQ: How to make CSS a Linear-Gradient that has PX values and % at the same time?
I have a situation which is this, I have a linear-gradiente in one element, but I want the first and last part of that gradient to have 100px of one color, and the middle of it to always be 100%…
-
2
votes1
answer365
viewsA: Why use a packer like Webpack?
First let me tell you that my view of Webpack and other packers is a little different from your view. And there may be other users who will disagree with this bridge that I’m giving you. Perhaps the…
-
10
votes2
answers3362
viewsA: CSS: hexadecimal color opacity?
This format is also known as #rrggbbaa where aa corresponds to the channel alpha According to the kennel is currently a well accepted format. However, it is in the CSS Module 4 specification:…
-
3
votes1
answer69
viewsQ: Prevent the Element Edge from growing when using Transform:Scale
It’s a very simple question, but I couldn’t find an answer... I have an element that has a borda of 1px. But when I make one :hover on it I apply a transform:scale() but the width of borda him tb…
-
0
votes1
answer117
viewsA: Difficulty Making a Different Shape
Clip-path has limited support yet and does not work in IE or Edge for example https://caniuse.com/#feat=css-clip-path. So what I would point out to you is to use a sequence of Transforms to…
-
1
votes1
answer136
viewsA: <hr> at the end of the text
Here is an example You need to put the P and the HR as an inline element, so one can "align" after the other and not fall to the bottom line. Then you need to put a defined width in the HR because…
-
1
votes1
answer1013
viewsA: How to make a CSS animation starting from one side in Hover and ending from the other when Hover comes out?
I came up with two solutions. A simpler one that would be ideal if the element occupies 100% of the width of the .box. The other is a little more "sophisticated", and the element can have any size,…
-
2
votes3
answers362
viewsA: Charset statement in file . css
Words of the W3C You should Always use UTF-8 as the Character encoding of your style Sheets and your HTML pages, and declare that encoding in your HTML. If you do that, there is no need to declare…
-
8
votes2
answers666
viewsQ: Only with CSS is there any way to make a "Toast"? An element that goes up and then click to close it?
In mobile there is a very common component that is known as "Toast", but I kept thinking about how to adapt it only with HTML and CSS Is there any way to do something like this "component" above…
-
2
votes2
answers50
viewsA: What is the Google Mobile First Index?
Before you despair, bear in mind some things. First, for now this is a practice of Google, it is not a general rule, even Google representing 90% or more of the search market in Brazil this is a…
-
2
votes0
answers89
viewsQ: What is Mixed Content? And what are the "Optionally Lockable Content" and "Lockable Content"?
Although I understand almost nothing about this subject I was reading about the Protocols and Safety Certificates, because I saw this alert Mixed Content on a website Reading about it I came across…
-
1
votes1
answer43
viewsA: How to put a scribble on the page
You can use as a backgroun-image for the text. type in this example h1 { background-image: url(https://ubisafe.org/images/svg-stroke-brush-2.png); background-size: 100% 100%; color: aliceblue;…
-
0
votes1
answer155
viewsA: How to disable a datatables at print time
Face the footer and the link I think you can not delete, because it is the printer configuration I think that you can’t change that with CSS Settings the user makes But you can make one gambiarra…
-
2
votes1
answer66
viewsA: Position one element over the other
Guy your code has some problems with these Csss that you put inline in the style of tags. Basically it had some unnecessary properties, as well as some properties of the Materialize grid used in a…
-
4
votes1
answer159
viewsQ: How to fix CSS problem with Letter-Spacing and right-aligned text?
I and have a situation in which I have a container with two lines of text inside aligned to the right. Only that one of the lines is with the property letter-spacing: 15px; Increase the spacing…
-
3
votes2
answers671
viewsA: What should I use to make one grid system within another?
To the Boostrap 4 I DO NOT recommend that you use a container within each other. Until pq does not need this to make this "nesting" with the Grid, as you can see directly in the official…
-
1
votes1
answer54
viewsA: Align a logo in the center of the Form
I found a little strange the structure made in HTML with Bootstrap Grid. But roughly speaking what you need to align the image is to create a new column, which occupies 100% of the width, which in…
-
3
votes2
answers89
viewsA: Hover mouse does not work in the circular calendar cells in SVG
I took a look at your SVG code and one of the reasons it’s GIANT is that you’re using CSS inline, direct on each of the type vectors style="propriedades" the correct would be to create a class and…
-
1
votes1
answer169
viewsA: How to have two checkbox components inside a Row with a title
Your image template looks like it has more CSS styles than the normal Bootstrap pattern, but anyway I made this template that can help you. The trick here is to separate the chackbox and the label…
-
1
votes2
answers434
viewsA: Make a screen responsive to monitor resolution
If your problem is just like the background of a login page you can use the direct background on body, and uses the properties background-size and background-position to adjust the image, in the…
-
2
votes1
answer690
viewsA: Remove Bootstrap button shadow in :Focus state
You have two classes that keep applying the shadow in btn, you have to reset the calories in these classes to work as you expect. .btn-outline-light-pink:focus, .btn-outline-light-pink.focus {…
-
1
votes1
answer20
viewsA: Navbar centering
You put the class col-md-4 on the button, then the grid breaks the element to the bottom row, just remove that class Behold <link rel="stylesheet" type="text/css" media="screen"…
-
1
votes2
answers401
viewsA: Sorted lists under another Bootstrap
First this answer is a GAMBIARRA!(and is not 100% the animation of Collapse). The way you rode that Nav is totally wrong if you check the official Bootstrap 4 documentation.…
-
1
votes1
answer44
viewsA: Odd and Even don’t work
It doesn’t work because every line is always odd in your case, for each label is the only daughter of a Lines To adjust this you have to reach Lines, because they are sisters to each other. So your…
-
4
votes1
answer1013
viewsQ: How to make a CSS animation starting from one side in Hover and ending from the other when Hover comes out?
I have an animation where an element appears entering from left to right when I do the :hover in the .box, but I would like that when I took the mouse from the .box the element now exits from the…
-
1
votes1
answer62
viewsA: Box does not float left(float:left does not work)
Dude the main problem is that you just put the float in the wrong element, you have put the float in the first element, so the second element "floats" next to the first one understands. The problem…