Posts by hugocsl • 65,517 points
1,996 posts
-
2
votes2
answers24
viewsA: How to apply different effects at the same time?
Basically you have to concatear the CSS rule, maybe using the adjacent selector + for when do Hover on one brother tb activate the other. #icon1:hover + #icon2 See the example below #icon1:hover{…
-
4
votes3
answers117
viewsA: Limit HTML content in Divs and distribute in the following dynamically?
I am posting only as a reference. But it is possible to have a result very similar to what you want with CSS only using column-count. https://developer.mozilla.org/en-US/docs/Web/CSS/column-count…
javascriptanswered hugocsl 65,517 -
1
votes1
answer27
viewsA: How to increase the stroke size and the trough between them in a dashed line in css?
You can use a rect of svg 100% container height and width. In the attributes stroke-dasharray: 8; and stroke-dashoffset: 22; you control the dashed line that is actually in the svg :D. No rx="18"…
-
3
votes1
answer27
viewsA: Add extra spacing between dots with text-Decoration-style: dotted;
There is still no such dashOffset property natively in the CSS text-Decoration style. With SVG you can control this. But in this answer I will pass a workaround with pure CSS using a…
-
2
votes2
answers58
viewsA: HTML in Visual Studio Code
Just squeeze p + tab, this is standard VS Code, unless you have installed some extension that changed this default software behavior.…
-
2
votes1
answer45
viewsA: Remove background from text
To make the effect lacked basically vc repeat the background in the text itself, placing a background-image in the h1. and Tb missed doing the clip of the text, the property is used for this…
-
2
votes1
answer44
viewsA: How to align the next lines of a <span> to the first line?
Just put flex in div within the .row as I commented, and the result is as below. I didn’t touch your HTML that you posted in the question, I just put the CSS to look like you posted in the question…
-
0
votes1
answer50
viewsA: The background of my page mismatches with different browser window size
Basically it’s using the background-position: top center This will leave bg always centered horizontally, but vertically the top of the image always sits at the top of the page. See the image below,…
-
2
votes1
answer29
viewsA: Add a delay to the Buzz Out animation after each loop
Peter, it seems to me that you don’t quite understand the concept, wherever you read it, so I’ll explain that then you can adjust it however you want. Note that your animation is 1s and is divided…
-
-1
votes1
answer32
viewsA: How to center image group with flexbox
In class .paidocontainjsjl you put the justify-content: center; and in the images you put the margin the way you want, as it is 20px I suggest margin: 0 10px; * { margin: 0; padding: 0; } @import…
-
2
votes1
answer26
viewsA: Behavior of an inline-block list with floats
I think maybe your doubt is because you didn’t understand what the display: inline-block;... Inline-Block means that the element is inline in relation to the brethren, however, from within it…
-
1
votes2
answers23
viewsA: Event that doesn’t work for a particular tag without having to put id on the tags that has to have the event
Puts the class class="dia" on the TR, and then force the color only on the first daughter TD tr.dia:hover > td:first-of-type { background-color: #fff; } See the full example tr:hover{…
-
3
votes1
answer80
views -
1
votes3
answers56
viewsA: How do you put a div that’s inside a container under each other?
Puts the .container with width: 50%. Obviously you still need to treat the responsiveness for smaller screens.... html, body { width: 100%; height: 100%; /* margin-left: -50; */ padding: 0; margin:…
-
2
votes1
answer45
views -
2
votes1
answer20
views -
1
votes1
answer27
viewsA: How to apply style to an element from the value of the same using CSS
All I know is a way to do something similar, and yet I’d need to have the same tag text on one dataset, ai yes you could use a CSS selector by Attribute to pick up the text. Here is an example, note…
-
2
votes2
answers55
viewsA: Make a background photo opaque/darken. Should I use pseudo element ::after?
In that case you don’t necessarily need pseudo-element you can just add two backgrounds in the same element, one with the image, and above the image a linear-gradiente (the gradient in this case…
-
1
votes1
answer40
viewsA: By minimizing Bootstrap grid screen does not break to a new line
Man what happens is that the input needs to have a set size, or else it will take on some width of agent etc. So how do you want him not to break the grid just put the class w-100 in the input, so…
-
2
votes2
answers112
viewsA: Indentation in html paragraph
Put text-indent in the container father and not directly in the <p> div { border: 1px solid #000; width: 200px; } <div style="text-indent: 30px;"> <p>Lorem, ipsum dolor sit amet…
-
1
votes1
answer38
viewsA: Align Ivs side by side and center
Dry the model, just put display:inline-block in div.boxes, and text-alingn:center in the container, to the divs with text not being centered you declare them as text-align:left. Notice that I didn’t…
-
1
votes3
answers59
viewsA: How to change closed name and red color by open name and blue color when clicking on name?
A CSS-only option using label and an input checkbox. This will give much more semantics to your code and still do not need to import jQuery or even worry so the user’s browser JS is enabled or not.…
-
6
votes3
answers45
viewsA: Problems centering content when working with flexbox in CSS
It is centered vertically yes, what happens is that its Containe flex not tall enough for you to perceive content centered vertically on it If you declare a height for it you will see that it is in…
-
3
votes1
answer32
viewsA: How do I put this vertical div in the top left corner of the screen?
Use transform-origin to control the rotation point of the table in one of the vertices as I did below, in case I used transform-origin: top left;. The transform-origen default is center, so you…
-
7
votes3
answers85
views -
0
votes2
answers25
viewsA: Div losing size fixed when have another div with 100% width on its side
This is a feature of display:flex, one flex container tries to "equalize" the width of the child elements so that they all fit on the same line. There’s two ways you can fix this, one is by using…
-
3
votes2
answers48
viewsA: How to pass Corner Blob effect to right side of the screen?
Basically just include the line canvas.style.transform = "scaleX(-1)"; at the beginning of the code setting the height and width of the canvas. From what I saw the canvas is only in that position…
-
1
votes1
answer27
viewsA: Guys I have a for that every turn will show a video. I want the videos to be aligned 3 X 3 on the page. How can I do this?
Puts a parent container outside the loop of section class="mp4" and put in the Service {width: calc(100% / 3)} for example. The parent container would be in flex. html, body { width: 100%; height:…
-
0
votes1
answer22
viewsA: background-size: cover. Is there any way to add a percentage value?
Guy in the BG of the element itself you can not, but if you put this bg in a pseudo-element you can use transform: scale(1.15) to increase in 15% Here is a didactic example li { padding: 30px;…
-
1
votes1
answer106
viewsA: CSS - Align text to the center of the screen, exceeding the size of the div?
It is possible yes, basically you need to put a no-wrap in the <p> .pai { position: absolute; margin: auto; text-align: center; height: 100px; width: 100px; border: 1px solid #000; top: 0;…
-
1
votes1
answer106
viewsA: HTML/CSS - lists next to images
Man if you want something more sophisticated I recommend you use display:grid, but if you want something really fast and easy you could separate the 4 UL in a container and place the property in it…
-
1
votes1
answer39
viewsA: CSS Hover affecting other cards
Face it happens because you didn’t use an explicit vertical alignment class for the flex container .main In the class container .main you have to declare align-items: flex-start;, so you overwrite…
-
0
votes3
answers33
viewsA: Why image is not adjusted column in bootstrap
John you were on the right track, I saw you created a class called without-padding but basically lacked a !important to do this padding write the padding original of grid of BS3. It should stay as…
-
0
votes1
answer111
views -
2
votes1
answer17
viewsA: Type="datatime-local" does not take seconds
It seems that set the setp of input as 1, guy step="1" See here a list, it seems to me that you want the last example, notice that you are with the step="1". Keep in mind that this may have…
-
1
votes3
answers38
viewsA: How to apply style to a group of selectors
Here’s a workaround with CSS. The cat jump is the column-reverse allied to the brother selector ~, in the code below follows the example .container { display:flex; flex-direction: column-reverse; }…
-
1
votes1
answer28
viewsA: I cannot insert a linear gradient in the black color
The estate -webkit-mask-image actually creates a gradient of opacity as you can see in this question With CSS it is possible to merge two Images? So the white you’re seeing is actually the…
-
0
votes1
answer88
viewsA: How to increase border-bottom width?
Dude is not going to the end because you put one margin-right of 190px in the H3 The way the H3 occupies the entire line, minus the width of that margin Ai, just remove it to get 100%…
-
1
votes1
answer57
viewsA: Background-image and background:linear-gradient
Radial and linear-gradient are values of background-image, and when you used CSS as well as below, the background-image: {} ended up overwriting the gradient of background: {}, this happens because…
-
1
votes2
answers261
viewsA: bold the first word of the HTML paragraph
That answer is just one workaround with CSS for fun :) It has a well-placed gambit that you can only do with CSS, it’s even elegant, but it has a point against, if you select the text the first word…
-
2
votes1
answer53
viewsA: Why when I put float right the color of my background disappears?
Friend the problem is not the float, is the position, you put as absolute, then his point of reference is the body in this case... for the point to be the container Father needs his father to have…
-
2
votes1
answer98
viewsA: How to Pin a DIV to the Bottom of an Element?
As your container Father is flex, just put a margin-top: auto in the latter div which is your footnote Follow the image code above: (I added an edge just to make it easier to see that it was aligned…
-
1
votes1
answer47
viewsA: Override preloader div to a Section element
Face a solution is you put position:absolute in the preloader, so he runs away from the flow of content, then you put width discounting the width of the sidebar and in the heigh you put a height…
-
1
votes1
answer32
viewsA: How to change the layout of Radio Buttons in the responsive layout with Bootstrap or another tool?
Face is just change col-sm-2 by just col-2 so they’ll never get down from each other and stay in the same line. Since you are using Bootstrap, I strongly suggest you study the classes of Grid his…
-
0
votes2
answers75
viewsA: Button can not mark radio button nor do right in div
Guy doesn’t even need JS to do it, let alone jQuery, only with CSS vc solves everything. The text you exchange using the pseudo-element ::after, the button does not have the attribute for as you…
-
2
votes2
answers59
viewsA: With CSS is there any way to put opacity in the currentColor?
This is a response at user’s request @Cmtecardeal As stated in the commentary, I used the fourth property value box-shadow to find a way... This value is known as spread, and when using a negative…
-
1
votes1
answer28
viewsA: Remove the height of a footer from another height of a div above
Dude you’re wearing flex, then forget it position: absolute, use the attributes of a flex container as justify or align. So first remove this position of the latter div, then, in the div middle, you…
-
1
votes2
answers52
viewsA: Arrow through the css
Here’s a suggestion just with CSS, it can help you, but basically it’s a simple element with a pseudo-element which is a square with only 2 bordas and spun 45deg You can adjust the value in px to…
-
0
votes1
answer29
viewsA: Vertical limitation of the web page
Your face div classy margem has to be "merged" with the div class row, and the direct daughters of row has to be the col-X. Then just put one flex-wrap: nowrap in row and will no longer break the…
-
0
votes1
answer27
viewsA: Error using :Hover selector
It doesn’t work because you just imported the value 600 font Open Sans, for vc tb have what would be the Regular or Normal style, vc need to import the value 400 tb! <link…