Posts by hugocsl • 65,517 points
1,996 posts
-
1
votes1
answer253
viewsA: How to calculate the size of a div header to do the right space?
You can replace the position:fixed for position:sticky you can read more about here: https://css-tricks.com/position-sticky-2/ As Jorge said in the comment according to the site Can I Use this…
-
4
votes1
answer104
viewsA: How to organize photos in multiple frames
Guy like you said you don’t know the display:grid I’ll suggest this complete guide will help you even in other cases. Now look at this image, notice the grid lines I divided them using repeat(nomero…
-
1
votes2
answers169
viewsA: Animation with Javascript/jQuery
Dude I did this basic example. He wears jQuery, just like Materializa itself. But the way you set up the grid and those styles you put right in the tag made it a little difficult... So I made this…
-
1
votes1
answer81
viewsA: Transform into Submenu
1 - To make the link just involve the text inside the LI on a tag A. I only did it for the first menu option Dashboard 2 - To leave responsive just put the component with width of 100% 3 - To be…
-
2
votes1
answer1195
viewsA: Centralize elements of an SVG
I’ll give you a step by step that will help you. Detail your tag <g> is not closed properly it has to be </g> 1 - Align the <g> in the center of the SVG using…
-
2
votes0
answers115
viewsQ: Why use translateZ or translate3D in animations made with CSS? Hardware-accelerated animations in CSS?
Nowadays it is quite common to see even in the most simple animation effects websites made with CSS, both with transition as to @keyframes And one thing that has struck me is that several of these…
-
3
votes1
answer223
viewsA: CSS Border problem and list element placement
Dude I don’t know if I got you right, but using flex you can make a very responsive "component"... About the code the tips I’ll give you is to use the border-radius on the contour of container and…
-
0
votes1
answer118
viewsA: Adjusting Footer after migrating to Bootstrap 4
Your code is in some trouble. First to div copyright is not closed. Then your div class row is in the wrong place she should be before the first col-md-6, then you need to use the same line-height…
-
3
votes2
answers624
viewsA: Text and responsive image
There are several ways to do and one of them is by putting a span within the button as I did in this example. then with the rule @media You hide and show this span, at the same time that you remove…
-
6
votes1
answer197
viewsQ: With CSS, is there any way to change the style of Text-Overflow:Ellipsis?
Imagine I have a situation where the text is bigger than the container, then I’ll use text-overflow: ellipsis to place the 3 dots ... showing that the text continues and there inside the container…
-
2
votes2
answers120
viewsA: side by side accordion effect
Dude you can use column-count to do this, because then the browser "equalizes" the content distribution in two columns for example. Note that the browser will always try to equal the height of the…
-
2
votes1
answer367
views -
2
votes1
answer110
viewsA: Hover on SVG on my page does not answer
Guy like you didn’t put your entire SVG code I had to make one to use as an example here. The first thing you can do is put a fill:transparent in the vector, as without the fill (fill:none) he won’t…
-
1
votes1
answer311
viewsA: Header with Animated Dropdown
Dude I made this model that I think is pretty close to what you want, only he doesn’t use the @keyframes, because with this technique even making the animation "reverse" whenever you enter the page…
-
0
votes1
answer1219
viewsA: How to customize CSS (tr:Hover) in a thead table?
Roberto first see that you misspelled the element name in CSS... where it is thread should be thead First of all I found the structure of your table a little strange... here you can consult the…
-
2
votes1
answer391
viewsA: Menu that opens on clicking
Your menu is already working on click notice that it is .on('click') However your menu has some CSS problems that you still need to fix, as it is breaking the line before entering the css that…
-
3
votes3
answers198
viewsA: Change link text without id or class
See an option with CSS, but I make it clear that it is not very semantic, because even with 0 font a screen reader can have access to this text... The technique consists of "delete" the text inside…
-
1
votes2
answers164
viewsA: Search field with rounded edge
Like you said you didn’t want the input getting over the button made this simple model. The hint here is that the box-shadow of the btn is that it is below the input giving the impression that it is…
-
0
votes1
answer55
viewsA: How to take the value of a slidebar and show in an output?
Face you have to follow what is in the documentation. Although I found the documentation insufficient... See here the example working, notice that you have to import jQuery, Slider JS and his CSS.…
-
2
votes1
answer171
viewsA: What is the name of this bar? [HTML]
This bar was made with a <table>. In fact if you give a Ctrl+U on this page you will see that it was all done with table, which is a very outdated technique to assemble layouts and nothing…
-
6
votes1
answer185
viewsQ: In CSS what is the difference between Pixel Density and Pixel Ratio? How does DPI, DPCM and DPPX work
With the "popularization" of retinal screens, mainly on Apple devices, I have seen some people using media queries with measures like: @media (-webkit-min-device-pixel-ratio: 2) { ... } @media…
-
20
votes3
answers4406
viewsA: Use @media, @media screen and or @media only screen and Have a difference?
Yes there is difference, up to pq not all the @media is screen, can be print for example @media(max-width:770px) { .texto{ color:red } } In the example above it means that for any media that the…
-
5
votes2
answers259
viewsQ: The UL LI losing formatting after I put it on line... Why did the "balls" of my LI disappear?
I have an unordered list <ul><li> I wish it to stay horizontal, not vertical, but when I put it to stay in line with display: inline-block my indicative "balls" are gone! Note that the…
-
1
votes1
answer182
viewsA: Add a small margin in a div with text-align: right
Dude just give one margin-left icon and not text See how it looks: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Page Title</title>…
-
1
votes1
answer379
viewsA: Structuring HTML to PDF
There are several ways to make this layout, here is a simple option made with CSS Grid, here is a good didactic Full Guide: https://css-tricks.com/snippets/css/complete-guide-grid/ First put the…
-
3
votes2
answers81
viewsA: Boostrap Vertical Alignment
Guy doesn’t even need CSS beyond the native Bootstrap classes. You can use the classes Flex of framework to adjust this. See here https://getbootstrap.com/docs/4.1/utilities/flex/ Notice that first…
twitter-bootstrapanswered hugocsl 65,517 -
4
votes1
answer496
viewsQ: How to Inspect an element that only appears when I do Hover on another element?
I have an element that when making a hover in it will appear a pseudo-element elsewhere on the screen, however I would like to inspect this pseudo-element when it is visible on the screen. How do I…
-
7
votes2
answers193
viewsA: Column that fills the screen according to width
There are several ways to do it. Here is a simple example with Flexbox. This model works like this, using the media query @media when the screen is larger than 660px with the flex-basis I determine…
-
10
votes3
answers919
viewsA: How to make a pure css spinner?
Another technique to do this loaders or spinners charging is using SVG Animated. First we need to make it clear that vc can for example have an SVG where vc will animate their vectors using CSS…
-
3
votes1
answer48
viewsA: SASS - beginner (small doubt)
I believe that you should first create your @mixin, and then do @include as you can see in the tab: https://sass-lang.com/guide Thus: $purple: #9b0aa8; @mixin transform($property, $propertyx) {…
-
3
votes2
answers697
viewsQ: How to put ALT in a Background-Image? How to make a Background-Image more accessible and semantic?
It’s a simple but objective question. We know the importance of tag ALT for semantics, accessibility and even for SEO. But how can I set these tag properties ALT in an image that is defined as…
-
4
votes2
answers724
viewsA: Apply the Blur effect to the floating box background
Dude I made an adaptation of that code and I used Bootstrap only to take advantage of the Modal script. But the idea vc can easily adapt to your project if you use jQuery! The idea here is when the…
-
1
votes1
answer42
viewsA: Help with Header effects
I don’t know if this is exactly the way this example was done, but only with CSS is it perfectly possible to get the same result. There are other ways to do it, but the one I found easier was to put…
-
0
votes1
answer235
viewsA: Make div stay inside another
Young man is just you put overflow:hidden at first div that comes out of all the elements, tb needs to make an adjustment in the past width of 400px for 450px wide! See how it looks: html {…
-
11
votes3
answers572
viewsQ: Is it possible to animate text-Decoration with CSS?
I recently saw this animation made with SVG, But I was wondering, is it possible to animate the text-decoration-style: wavy in the :hover in order to achieve the same result? body { font-family:…
-
1
votes2
answers657
viewsA: How to focus on a specific DIV and blur the rest
I made this model only with CSS, using a little JS you can do the way you want, just adapt to your situation there. The idea and put in the element that encompasses all the content a filter:blur(),…
-
2
votes2
answers80
viewsA: Div is not aligning CSS
The best option for not having to resort to custom CSS would be to separate each group from 3 col-md-4 in a .row as an example below: [class^="col-"] { padding: 10px; border: 1px solid; } <link…
-
1
votes1
answer560
viewsA: How to remove attributes from some bootstrap class
Your problem is that in CSS it is this way .wizard .nav-tabs { position: relative; margin: -35px auto; margin-bottom: 0; border-bottom-color: transparent; width: 333px; } .nav-tabs { border-bottom:…
-
1
votes1
answer809
viewsA: Bootstrap 4 - change Carousel Indicators to text
I do not know if I understand well, but in case you want to "hide" the Arrow, and show only the text you need to change the element that will receive the class .sr-only since this class is to "hide"…
twitter-bootstrapanswered hugocsl 65,517 -
8
votes5
answers2803
views -
1
votes1
answer31
viewsA: Page indexing that can redirect
I’ll give you an answer that I think might clear up a few points for you. Although it may not be the exact answer to your problem, understanding can help you eliminate some hypotheses. First, in…
-
1
votes2
answers983
viewsA: Leave Input next to Label
I don’t have an environment that can test your code, but I can assure you that by label within a div like you did here: form += '<div><label…
-
1
votes1
answer56
viewsA: Pagination - icon of selected page always in the middle or visible
Dude I made this model, but I didn’t really like it no rss... I say this because it is not dynamic enough for my taste, but I found no other way... The trick here is to go "erasing" the nth-child as…
-
4
votes1
answer1146
viewsA: How to align 'N' Divs on the same line?
One of the ways to do it is by removing the class col- of divs within the row and in the row put the display as flex and distribute the content with justify-content: space-between; <html>…
-
5
votes2
answers2473
viewsA: How to align an image to the right with in CSS and HTML?
Lucas your code is very strange... actually is with CSS properties applied in a wrong way, for example your section is 600px wide, and each image of you is 700px wide... so there’s no way to stand…
-
1
votes2
answers265
viewsA: How to center an icon along with an LI added via CSS within a UL
You can basically put position: absolute and transform: translateX(-21px) in the pseudo-element ::before that you resolve the situation. O position:absolute will make the element "exit the flow" so…
-
20
votes1
answer891
viewsQ: What is a Triple-A or AAA level site? What do I need for my site to be considered a AAA in accessibility?
I consider accessibility to be very important, but I believe that I have neglected this good practice a lot and went to read the Web Content Accessibility Guidelines (WCAG) 2.0. So I noticed that…
-
2
votes1
answer190
viewsA: Hide a div by clicking the CSS button
One way to solve this only with HTML and CSS is to remove the element input from within the label, but after that you’ll have to use a id in the checkbox and put a for="" in label. To better…
-
2
votes1
answer84
viewsA: problem with a bootstrap footer 4
Gabriel everything will depend a lot on your project, but basically you need to position:absolute and bottom:0 in his div. There are other ways to do this, but you have to see what looks best for…
-
1
votes1
answer435
viewsA: Visual Studio Code - Empty CSS ruleset
About in the file . CSS you can not auto complete a class that only exites in HTML this is documented here: https://github.com/Microsoft/vscode/issues/28442 I think you must have got confused,…