Posts by hugocsl • 65,517 points
1,996 posts
-
1
votes1
answer93
viewsA: Transparent lines with CSS
Yes friend there are some ways to do, I particularly prefer using a pseudo-element ::after as a radial-gradient .sombra { width: 200px; height: 50px; position: relative; overflow: hidden; }…
-
1
votes1
answer2095
viewsA: How to decrease bootstrap Ivs spacing
In Bootstrap 3 all columns have a padding on the sides of 15px for each side. .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7,…
-
1
votes1
answer226
viewsA: Background problem with Iphone 6, 7 and 8
Your problem really is with background-attachment: fixed According to several reports this type of "effect" is very expensive for the browser, because it has to "reprint" the image on each scroll,…
-
1
votes1
answer42
viewsA: Image rising with Html5 in crossfade
The images start from the bottom up, ie the nth-5 is on top of the nth-4 etc then the delay has to be done in reverse as you will see in the code. No more I used transform:translateY() to make the…
-
2
votes0
answers41
viewsQ: How to load file. JS depending on the width of the screen
I have a file .js who would like to upload only to Desktop version, when it is on more narrow screens would like the request for that .js were not done, or even another was carried .js. Like, for…
-
1
votes1
answer63
viewsA: Layout: Onepage only with HTML and CSS (with Transition)
You can only do it with HTML and CSS, you can use scroll-behavior: smooth; in the css of html {} See the example below to better understand. html { overflow-y: scroll; scroll-behavior: smooth; }…
-
2
votes2
answers375
viewsA: Show content according to Select
Here is an option that uses the ID with the same name as the value of option, thus facilitates and saves some lines of code. Note that the value value is the same as the ID, so you get a rule that…
-
4
votes1
answer170
viewsA: Is there a tag that makes internet explorer work like other browsers?
A specific tag doesn’t exist as far as I know. But there are ways for you to get around it. An example is the use of the tag @supports, with it vc can make a fallback if the browser does not support…
-
5
votes3
answers759
viewsA: Center menu on page
This solved the problem here in Chrome. With float:left you wouldn’t be able to line up in the center... #topNav ul.nav>li { color: #666; border-left: #eee 1px solid; text-align: center;…
-
1
votes1
answer63
viewsA: Edit an image through a content:url ( )' attribute of the ::after tag
Young man, in this case an option is not to use the image in content. Use her as background, Then you can use the background-size to control the size you want. In this example I left ::after with…
-
3
votes1
answer169
viewsA: Questions with anchor link
Dude your problem is that you are using the same link ID you’re using in the content you want to go to. Note that your content does not have a ID equal, repeated, with the same name as ID of the…
-
1
votes1
answer38
viewsA: Clip property
According to your account you can use the property object-fit:cover to get around the problem of flattening the image. As stated in the comment it prevents the image from flattening, as it will…
-
1
votes2
answers25
viewsA: Specify element not to receive properties from other main elements
First never use Ids with the same name. Each ID is unique and can only be applied to ONE element. But if you just want to make a variation on the ID name you can make the selection of the attribute…
-
5
votes1
answer1830
viewsA: Site icon in Shortcut when adding site to mobile screen on Chrome has Android option
What happens is that each operating system works with the Icon in one way. Usually what you see is Favicon being turned into the shortcut icon on mobile devices. What I tell you is to use a Favicon…
-
3
votes1
answer31
viewsA: Screen fit is not doing its function "@media screen and() { }"
Dude your problem is with this and( the word cannot be stuck in the ( It has to be like this with space @media screen and (max-width:400px)…
-
1
votes1
answer57
viewsA: Resize images with Print.Window
Igor in the CSS of your page you can make a style to change the orientation of the sheet only at the time of printing this way. @page { size: A4 landscape; } You may have to adapt your JS to call…
javascriptanswered hugocsl 65,517 -
1
votes1
answer122
viewsA: Obfuscate part of the background-image, and make other parts clear
Option 1 You can use mix-blend-mode:overlay in the element above the image. Here it is important that this element is in the white color for the overlay be good, you can control his intensity with…
-
2
votes2
answers276
viewsA: Line break control does not work "white-space: nowrap:"
Replace the float:left for display:inline-block on internal Ivs body{ background-color:#6C9; } .menu { overflow:auto; white-space: nowrap; width:500px; height:300px; } .menu > div { display:…
-
1
votes1
answer31
viewsA: Div does not fit the screen
Your problem is you’re wearing one line-height in the Mobile version which is very large. in your @media makes a rule to remove this line-height. See below in the image to see how I fixed the bug.…
-
1
votes1
answer473
viewsA: How to change the input cursor?
Just use the text-align styles to set, right, left or center. You can also use the padding to make room within the input, in this example I put 5px below and above, and 15px on the right/left. Take…
-
0
votes3
answers725
viewsA: My Bootstrap does not exchange images
Dude you may have two problems. I noticed that you are using the class img-fluid this class is wrong, you should use w-100 to make images 100% wide. Then you have to check if you are calling jQuery…
twitter-bootstrapanswered hugocsl 65,517 -
2
votes1
answer394
viewsA: What’s the difference in using Transition: all and Transition: [specific property]?
Face the big problem there is the performance. Use the transition:all consumes too much feature of the browser, because it will "try" animate all styles of the class, even if they do not have…
-
2
votes2
answers157
viewsA: Paint input by clicking the checkbox
Kevin made a solution only with CSS she does not use the "design" of input default browser, but sometimes it suits you. If you have any questions tell me that I can give you more explanations of how…
-
2
votes3
answers56
viewsA: Cut word with CSS
Guy like you put CSS in the question tag I’ll answer you with CSS only. Notice that the main point here is to use the width with the size in CH (Character). Then a width:2ch would be the width of 2…
-
0
votes1
answer250
viewsA: How to change page footer size with @media print
Man I needed to change little thing on @page for the footer to tidy up. Note that I have set a marked value just for you to view better. @page { size: A4; margin: 70pt 60pt 170pt; counter-increment:…
-
1
votes1
answer66
viewsA: Smooth transition checkbox menu, without using "visibility:;" or "display:None;"
The option I found is to invert the order of inputs in HTML to get it right. Because the 3 level would only make sense to be open if the 2 is already open. To better understand see the example as it…
-
1
votes3
answers888
viewsA: How to make an image with link appear a text
Friend if I understand well this is the effect you need. I did it in the simplest way to be more didactic. Basically you have a text with poition:absolute and z-index:-1 when you do the :hover in…
-
2
votes2
answers91
viewsA: Remove click with Jquery after clicking another element
You can use jQuery siblings for this. When vc adds a css in a vc it removes the siblings' css. $('.bandeiras label').click(function() { $(this).css('background-color',…
-
1
votes3
answers682
viewsA: How to change the properties of a directly imported image in CSS?
Guy just put everything in the pseudo element ::after of div for example, the image may be like BG does not need to be a <img> within the div h1 { color: red; } div{ width: 200px; height:…
-
0
votes1
answer1421
viewsA: Uncaught Referenceerror: Materialize is not defined
Victor, you’re certainly consulting the wrong version of the documentation. In fact you are again using a version of Materialize and calling the Scripts of the old version! Note that this is the old…
-
2
votes3
answers1052
viewsA: Image with scroll vertically and height 100%
Man I didn’t get what you want right. But I believe it’s something like this. But if it’s not exactly that, it’s just a touch. OBS: Here I used small values to simulate that you are on a cell phone…
-
2
votes1
answer730
viewsA: Select not appearing in materialize
Dude your problem is that you are using a version of Materialize, but are using the script another version. Recently Mateiralize underwent a version update passing the 0.100.2 for 1.0.0-rc-1…
-
3
votes1
answer814
viewsA: Content overwrites fixed menu when scrolling page
William’s content is already behind the header, the problem is that the header no background color, so it looks like one is on top of the other, but is not! Look at the example, I just put a color…
-
1
votes1
answer141
viewsA: Set shadow to create gradient effect
If I understand well with linear-gradient you can do this effect. I made the degrade effect with 10px width, but you can control this size at the start and end values of the gradient, leave a…
-
2
votes2
answers56
viewsA: Make a DIV element stand as a footer
Follow an answer using flex. Now the top always gets nailed to the top, the footer always gets nailed to the bottom regardless of content size. * { margin: 0; padding: 0; } html, body { height:…
-
1
votes1
answer197
viewsA: Position Fixed for desktop version and position relative for mobile version, how to do in CSS?
EDIT: By the code you posted in the question you can see that the rules of the Media Query are coming before what would be the css default. With this there is an overlapping of classes. The CSS is…
-
4
votes3
answers2563
viewsA: Is it possible to apply sound effects to Hover or click css?
Another option only that without jQuery. Vc can declare an audio variable and set a src with the audio file chosen. Then in btn vc declares the js function in mouseover to play the beep like this:…
-
1
votes1
answer947
viewsA: Post in a div
As you put in the question tag Bootstrao 3 I will consider that you are using it. Boostrap 3 has this component natively. You don’t need to add anything else to make it work. Here’s the…
-
2
votes1
answer83
viewsA: Div leaving the right side of the page in animation
I believe that putting a overflow on the axis X in the HTML and in the body should solve your problem. html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; }…
-
1
votes2
answers52
viewsA: Leave the CSS centralized
Like you’re wearing it position:absolute in everything to my mind the best way to make this alignment is using margin:auto and left, top, right and bottom 0 See in the example below how it looked.…
-
1
votes1
answer112
viewsA: How to know the Jquery library version just by viewing the codes made by other users?
I don’t know if this is the ideal answer, but my tip will always use the most current version! Because theoretically it always corrects and improves the previous versions. Then after you put the…
-
1
votes1
answer932
viewsA: Force Divs with text to remain in the same line?
Leo with flex I think you get something very close to what you want. With it the divs are with dynamic width and occupy only the available space, when no longer fits does the ellipsis. The flex for…
-
1
votes1
answer1231
viewsA: 2 simple speakers with bootstrap
In Bootstrap 4 and 3 too, you can use the offset to adjust the div in the center of the cointainer. Bootstrap 4 Notice that just put offset-2 in the first div and it worked. (see that with this I…
-
1
votes2
answers128
viewsA: Problems with list and grid thumbnails with bootstrap
EDIT Let’s keep it simple :) I remade the example using my other answer and putting the Card inside. Note that the only thing I needed to do was to adjust the column width with the default class…
-
2
votes3
answers426
viewsA: How to Take "resize" from a textarea?
I actually believe your problem is because of Tinymce See what the documentation says about the resize https://www.tinymce.com/docs/configure/editor-appearance/#resize Component script to remove the…
-
1
votes3
answers835
viewsA: Centralize Ubmit in form
This occurs because the input is an element of the inline, he does not recognize the values of margim. But if you put him with display:block it will take the value of margens and is centralized. See…
-
1
votes2
answers77
viewsA: How to call class by class, just picking the one the mouse is on top of, without picking up the others simultaneously?
Dude I don’t know if I understood what you wanted right, but as you put the CSS tag, I’ll give you a solution with nth-child(n) (n is the number of the order in which the div appears, as you have…
-
0
votes1
answer23
viewsA: How do I specify a distant address within several others using an input type="checkbox"
Dude you can "shorten" this path by simply putting a class on <li> that you want to show. So your CSS rule would look like this: .rd2:checked ~ li.teste ul#sm2{ }. Notice with the class . test…
-
1
votes1
answer541
viewsA: List grid and list view with bootstrap 4
Bootstrap 4’s default grid is in Flex, then you can switch between row and column using BS4 native classes and a few more CSS lines. Since jQuery tb is BS4’s default I used it myself to make a…
-
1
votes2
answers686
views