Posts by hugocsl • 65,517 points
1,996 posts
-
10
votes1
answer194
viewsQ: What is the difference between Media Query Pointer and Any-Pointer?
I was seeing a way to determine if the user access is done by a Desktop, usually having a mouse as an interaction device. Or if the user is accessing via a mobile device, usually without the mouse…
-
4
votes2
answers1118
viewsA: What are the differences between Lightbox and Modal box?
I’ll give a slightly more nostalgic view, and that addresses other points of UX and use. Have you ever heard of Gilette, Xerox, Chiclets? All are brands that have become synonymous with products…
-
1
votes4
answers800
viewsA: How to make 7 columns with Bootstrap?
Next, the Bootstrap grid is based on flex, so automatically it will already split the divs in equal sizes, but for this you cannot explicitly define the value of these divs, then the first thing to…
twitter-bootstrapanswered hugocsl 65,517 -
1
votes2
answers3028
viewsA: Navbar Vertical
Guy changes the standard behavior of the elements can always have side effects already gets the warning... but I made this model customizing some classes and I think that’s what you wanted. You may…
-
2
votes1
answer51
viewsA: Is it possible to detect scroll action with CSS animation only?
As I said, it’s an infinitely simpler example, but what matters is the concept. And the main idea is to use multiple Ivs with background-attachment: fixed; With this the div de move, but what is in…
-
2
votes3
answers61
viewsA: Order newly added entries dynamically
Follow a simple model, I have a container in flex, aligned as column, when you click on btn a ul which is mine container makes a toggleClass and of column mute to column-reverse thus reversing the…
-
6
votes1
answer250
viewsA: How to underline effect by controlling the underscore size
Option 1 Here is an example use a pseudo-elemento it is based on measures in EM and %, so when you change font size REM the element changes proportionally. Vc tb can change this value manually if…
-
1
votes3
answers13657
viewsA: How to make a column occupy the rest of the available space?
I’ll give you one more option using, using display:grid and how grid-template-columns: auto 50px; I leave the left column wide auto, 100% of the available space, and the right column has value fixo…
-
3
votes2
answers32
viewsA: Webmail CSS alignment
Do not use margin in the span use padding in td <table> <tr bgcolor="#fff"> <td style="text-align: left; margin-left: 20px; margin-right: 20px; padding: 0 20px;"> <span style="…
-
6
votes1
answer118
viewsQ: In Devtools is there any way to capture the entire screen of the site, even if it has scroll?
I’m not looking for Chorme extension or screenshot code etc. I just want to know if this developer tool has some native option of this type. I know if you open the DevTools chrome and press…
-
2
votes1
answer4177
viewsA: How to make a floating menu and change style as the scroll moves?
With a simple jQuery you do it. In this example when the person scrolls the 40px screen I will put a class .ativo in Navbar with id menu. When he rolls back I withdraw the class .ativo. Take the…
-
3
votes2
answers65
viewsA: How to change text type in a list with Jquery?
Just add this code to your css #nav ul li a:hover { text-decoration: underline; /* deixa o texto sublinhado */ background: rgba(250,180,74,0.5); /* deixa o laranja com uma opacidade*/ } If you want…
-
5
votes2
answers4144
viewsA: Difference between _Blank/_self and Blank/self
About underscore (underline) see that according to this W3C documentation it should precede special key words reserved. Without it the string is like a string normal and is interpreted differently…
-
4
votes4
answers47612
views -
2
votes1
answer81
viewsA: How to run a Javascript Hide from one side of the page to the other:
As discussed in the comment follows an example where the scroll is limited by clicks on Navbar. So the user would not use the scroll only the btns since each page is 100% high. Follow the code…
-
7
votes1
answer4890
viewsA: Is there any way to remove CSS and JS codes not used by the application?
As you said that a "small scale" solution also suits you, I’ll give you a tip using the Aba Coverage of DevTools from Chrome. Google link…
-
2
votes2
answers674
views -
3
votes2
answers397
viewsA: How to animate a Radial-Gradient or Linear Gradient with CSS?
I came up with a solution using background-size and background-position. The idea is that you have a background that is more than 100% the size of container. For that just you put values like…
-
6
votes4
answers1051
viewsQ: Is it possible to change Placeholder in Focus with CSS?
Imagine I have one input to the phone number, but that when the user focuses on it I want to change the text of the placeholder, for example of "telephone" for "only numbers". You can do this with…
-
4
votes1
answer70
viewsA: How to duplicate this function jQuery
I can’t say exactly if this is the best practice, but if you do a click event for each btn you can duplicate the good code See the example, test in your environment by clicking on the btn back that…
-
1
votes2
answers109
viewsA: How to set menu to direct the user to the exact point set in href="# "
Your problem is documented here officially: https://getbootstrap.com/docs/4.0/components/navbar/#placement Bootstrap’s own suggestion is that you put a padding in the body Fixed navbars use…
-
2
votes2
answers1101
viewsA: How to change size, color and add Bold to folders and their names in VS code
A "gambiarra" would be to give a few Ctrl++, this will make all sources much bigger. Then you see in Settings and change the font size only of the text editor to a size you find interesting.…
visual-studio-codeanswered hugocsl 65,517 -
3
votes3
answers3378
viewsA: How and how to best use CSS fonts?
One form that has not been cited is by indexing the fonte right in the <head> of the document as a stylesheet. The https://fonts.google.com has a variety of font-family that can be used this…
-
4
votes2
answers397
viewsQ: How to animate a Radial-Gradient or Linear Gradient with CSS?
I’m trying to make an animation with CSS that would be a "sun" passing through an image. The idea was to have something next of that result: But in my code the "sun" is jumping from one side to the…
-
0
votes1
answer76
views -
2
votes2
answers174
viewsA: How to do with CSS Downloader bar with animated background?
I came up with a solution using linear-gradient, the advantage of linear-gradient is that you don’t need to use an image and it would be easier to edit the colors and size for example. In case the…
-
2
votes1
answer2520
viewsA: css - Always define standard Rule 'keyframe' when Defining keyframe Error
Your problem is that you are declaring the animation only for the vendor prefix -webkit- that Chrome understands IE no more. Animation running on IE11 To fix it just add the same CSS but without the…
-
2
votes2
answers85
viewsA: Text-align right, table
Your problem is more with HTML and element order than with CSS, my tip is you put float:right both in the image and in the div with the text. Only for that you need in HTML to put the <div…
-
0
votes1
answer59
viewsA: inline display does not work!
There are several ways to solve this, I’ll give you the one I find simpler that is putting both div class .ro within a container with felx. The flex will make you both div side by side, and with…
-
2
votes1
answer531
viewsA: Problem in the responsive version of the site
Your problem is that maybe for some reason you removed that line from your <head> <meta name="viewport" content="width=device-width, initial-scale=1"> Here are more details about what it…
-
1
votes1
answer63
viewsA: move the container without appearing scrool
Your code guy got a little confused, I mean the effect you want to give... So I don’t know if I got it right, but one option is putting positio:relative in the body and include that line in your…
-
1
votes1
answer86
viewsA: Child elements receiving opacity even with use of rgba
Based on the author’s comment I made this template using RGBA. So I don’t use opacity, and yes I use the alpha of rgba() in the background Works on Chrome, Firefox etc body { background:…
-
0
votes3
answers572
viewsA: Is it possible to animate text-Decoration with CSS?
I will post a solution that I arrived here that I found interesting and solves some bugs. The main thing here was to make a small Hake to the underline cool rendering. For this I needed to use a…
-
8
votes2
answers1406
viewsA: Difference in font-Weight Bold/Bolder application
Bolder, or lighter is actually an inherited attribute. I’ll explain it better. If the father has font normal, and you put bolder in a child the browser understands that this child should have a…
-
7
votes1
answer1065
views -
15
votes3
answers1020
viewsA: Partially paint border in CSS
There are some different ways to do this, I’m going to propose 2, one with SVG which is by far the most suitable option. The other you will need to build each "edge" individually and make a slightly…
-
5
votes1
answer336
viewsA: What’s new between HTML5.2 and HTML5?
The list of HTML changes 5.1 stop the 5.2 is a bit extensive, but is documented, including showing the compatibility between browsers for each new implementation. You can see the full list here:…
-
1
votes2
answers54
viewsA: how to render Unicode correctly
Face actually you need to "escape" the hexadecimal unicode with a counter bar \ Then your Unicode escape would look like this: ▼ = \25Bc or \0025Bc (4 or 6 digits) Reference link of that…
-
3
votes1
answer419
viewsA: Slide content with HTML and CSS
Face this layout is not very complicated, but have to stay tuned in some details. First, you need to use overflow in some elements and values with VW and VH to occupy the correct width and height on…
-
1
votes1
answer519
viewsA: CSS Effect: Floating label in Form does not work without required attribute
There is a way to solve by adding this CSS rule .floating-labels .form-control:not(:-ms-input-placeholder)~label { } With this rule you make the validation based on whether the input has something…
-
0
votes1
answer818
viewsA: Boostrap overwriting CSS. How to avoid?
Two things, the first is that the classes you want to overwrite should come last, and not first, so it would be like this: <link rel="stylesheet" href="bootstrap.min.css" /> <link…
-
4
votes1
answer185
viewsA: overlay Ivs, but leaving a top without being overlaid
You can fix it by putting the first div Blue with 100% of the height less own height Nav, for that use height:calc(100% - 50px) 50px is the height of Nav. Do the same thing with height of div Red.…
-
3
votes2
answers1224
views -
4
votes2
answers599
viewsA: There is a css selector that I can select an Submit input only when it is triggered/clicked
I think I understood the question differently, I believe he wants to "shoot" some property in the click. And in that case would be with the :active Follows code referring to image above:…
-
4
votes1
answer256
viewsA: how to create a layout using float
Follow a flex model. Here’s a complete guide that can help you. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Display the code in full screen to see the responsiveness and how they behave.…
-
0
votes3
answers1175
viewsA: Background image problem in div
Dude your problem is that you put 100% height on div, but 100% of what? For code to render with a height in % it is necessary that the parent has a height. So in case your div is the direct daughter…
-
6
votes1
answer102
viewsA: Add a distant circle around a CSS image
Guy even right would be not wearing one span as container for the image and yes use a div which is already an element of the block, because it makes no sense to put display:block in a span Of any…
-
2
votes1
answer99
viewsA: Similar shadow effect on gmail login screen
My idea here is to use the pseudo-class :active to activate the animation of the element just click. According to Mozilla see that it is not just the tag <a> or <button> that can the…
-
1
votes1
answer51
viewsA: Keep clicked part of an SVG using CSS
As I mentioned in the comment, if you have an HTML element outside of SVG, you can use it to activate the color of path within the SVG. But by direct clicking on path I believe I have no way, except…
-
3
votes1
answer196
viewsA: How to make a Hover box
The name of this type of "component" is flipcard, it is widely used around and it is not difficult to work with it after you understand the way it works. But you can search for tutorials out there…