Posts by hugocsl • 65,517 points
1,996 posts
-
7
votes2
answers80
viewsQ: Why does image transparency on the Firefox Button not work?
I have this code that is nothing more than an image with opacity inside a button. Chrome works normally, but Firefox is bugged, as you can see. Follow the code for the image above: button { padding:…
-
8
votes1
answer103
viewsA: How can I define line breaks between elements of a layout?
A hint I give you would be to read this question to understand well what is the <br> etc. <br> is obsolete? But in short <br> is to break lines of text, or separates into lines…
-
2
votes2
answers54
viewsA: Compensating for Select Option loss
You can use the cal function of CSS to compensate for this. So if you’re like this: width: 242px; + 6 do padding + 2 do border = 250 height: 22px; + 6 do padding + 2 do border = 30 Would look like…
-
4
votes2
answers1563
viewsQ: In HTML and CSS should I use Single Quotes or Double Quotes? Is there any recommendation?
I recently noticed that the text editor that I use gives me an "alert" if I use simple quotes ' ' in HTML. Below are two examples, one using Simple Quotes in the body of the document in…
-
1
votes1
answer602
viewsA: Unwanted white space bringing the horizontal scroll bar to life by decreasing the screen
What happens is that you are using a fixed value in the text, and as this text is not responsive it ends up extrapolating the limits of the Grid. See that putting a word-break: break-all; in the…
-
1
votes1
answer501
viewsA: Problem with an SVG code in HTML
Your question has loose ends. But I’ll give you some tips that might help you. First we need to make it clear that vc can for example have an SVG where vc will animate its vectors using CSS…
-
3
votes2
answers85
viewsA: Modal box centered on the screen, with dynamic and limited width and height
Guy a lot of your problem is more connected to transform:translate than to the left proper... As you can see in this link when you move elements with transform:translate it moves on its own axis:…
-
3
votes1
answer161
viewsA: Size of div with scrollbar in menu
Dude I made this model that can help you. But explaining your problem is that you’re trying to use scroll in a father who is with position:fixed. To better control this you will need to put some…
-
3
votes1
answer2387
viewsA: prevent image from crossing div
Face actually your "grid" is in a little trouble. As you want 3 lines the correct would be 1 row with 3 col-12, and the first and last with 10% height and the col middle with 80%. So I mounted the…
-
0
votes1
answer71
viewsA: Transition in mobile menu not working
Young I put it to work, but the way you set up the HTML did not please me very much, because you put the entire menu inside the other element that should be only the background... this messed things…
-
5
votes2
answers1558
viewsA: Media CSS queries not working and conflicting
Your problem is that the min-width override the max-width Here’s how your CSS is @media(min-width:768px){} /* aqui está "errado" */ @media(max-width:992px){... Whatever’s inside that one…
-
0
votes1
answer116
viewsA: Visual Studio - GIT - 5000 changes
Something similar happened to me, I accidentally gave a git add . of everything I had on my desktop and all the files off to list Changes of Commit. I’ll explain to you how I solved. First you have…
-
2
votes0
answers128
viewsQ: Can requesting CSS within Body speed up page loading and improve rendering performance?
First of all: We know that some requests made within the <head> document blocks page rendering. And we also know that hj on time is possible and allowed to use links de folhas de estilo within…
-
0
votes1
answer37
viewsA: by clicking the link closes the toggle menu
You have to put the toggleClass event when you click on the menu item as well... Basically the same script that you use in Btn Hamburger you have to use when you click on some menu link. Code…
-
2
votes2
answers1319
viewsA: Just take a commit from a github project?
I’ll give you a tip without using the command line :) Follow these steps: Go to the repository root and click on the Commits list Now see the date and Commit from where you want to follow and click…
-
0
votes1
answer254
viewsA: Change width icon dimensions
Unfortunately it is not possible to control the size of the image used in list-style-image My suggestion is that since you put one ::before in his li that you put the image in this same…
-
3
votes1
answer113
viewsQ: Does my Select custom with Fontawesome not open when you click the arrow?
I made that select customized using FontAwesome, but it doesn’t open when you click on the arrow. Follows code referring to image above: .x { width: 50%; background-color: #fefefe; border-radius:…
-
3
votes1
answer77
viewsA: Bootstrap 3 Pagination - Do not centralize
It’s because you put the class center-block in the father and son, just put in the col father The original display of pagination is display: inline-block;, but when you put in it center-block he…
twitter-bootstrapanswered hugocsl 65,517 -
0
votes1
answer744
viewsA: How do I create circular image with css mask and Hover effect?
This is just an example, you can have other answers with different solutions. Basically for this there is not a single answer... The technique I used was to put the image inside a div, because it is…
-
2
votes1
answer272
viewsA: I cannot decrease the size of components . form-control
As you are using Bootstrap 3 one of the options to fix this is putting float:left in the elements of form. But after that you will need to do the responsive treatment to adjust them when the screen…
-
6
votes1
answer332
viewsQ: How to make the border thickness responsive to this Brazilian Flag made with CSS?
I’m trying to make a flag of Brazil that is responsive. But I came across a problem with the white banner of the flag. OBS: I won’t put the text on the track! What happens is that the track is…
-
3
votes1
answer1030
viewsA: What is the difference between :first-Child and :first-of-type in CSS?
See what the official documentation of W3C https://www.w3.org/TR/selectors-3/ :first-Child (first child) Same as :nth-child(1). The :first-child pseudo-class represents an element that is first in a…
-
0
votes1
answer22
viewsA: Typing effect not only responsive with CSS
Your code is very confusing.... I made some changes in colors just to make it easier to see. In the animation of texto2 you put an event at 50% and with it his animation was faster than the…
-
1
votes1
answer199
viewsA: Insert elements in the left column, in Bootstrap, without affecting the height of the rows in the right column?
I think the problem is that you may not have got as well as the Bootstrap Grid works. Each div classy row represents a line, that is, you will never have a row next to each other, will always be a…
twitter-bootstrapanswered hugocsl 65,517 -
7
votes1
answer318
viewsQ: Is it possible to make CSS an infinity symbol with one circle passing through another?
I’m trying to make this way. Notice how one circle seems to pass inside the other... However I am not able to make an element "go through the other" with CSS, is it possible to arrive in this form…
-
0
votes1
answer110
viewsA: Mobile flip card version
Your problem is that you made your CSS the styles in :hover. But in JS you’re making a toggle with class .hover. You are confused the balls probably because you used a class with the same…
-
5
votes4
answers307
viewsA: Div hover change color in other elements
The selector > is only to select direct child elements from another element, not to select grandchildren or great-grandchildren. So in your case you basically need to remove this selector. See…
-
3
votes1
answer648
viewsQ: In Flexbox why does Justify-self not work on the children of a parent with display:flex?
I have a question about flexbox and individual child alignments. I wonder why the justify-self does not work when applied on the child of a parent with flex, however the align-self works normally...…
-
1
votes1
answer255
views -
3
votes5
answers2851
viewsA: How to put background-color on top of background-image
Look I’ll give you two options. The result will be this, although they are two different techniques the visual result is the same: Option 1 Like you said you couldn’t do with a div inside the other…
-
5
votes3
answers1706
viewsA: How do I pass the time from one div to another?
You can change the display:table for display:flex in the Parent element. And then just remove the heigth:100% of the children elements, for now they will be children of a flex father. See the code…
-
4
votes1
answer625
viewsA: CSS gradient background works horizontally but not vertically
Places your html and body at 100% height and background-repeat: no-repeat
-
2
votes1
answer95
views -
6
votes1
answer1040
views -
7
votes1
answer177
viewsA: What are the standardization phases of a CSS property?
I will try not to dwell on the answer. And I will cite all links with complementary and detailed information. Including about the overall status of CSS This list indicates the maturity of the code…
-
6
votes1
answer487
viewsA: With CSS is it possible to make a hollow circle in an image?
I got some interesting solutions, some "more" crossbrowser using background-attackment and others less crossbrowser with -webkit-mask-image and mix-bland-mode. It would also be possible to do with…
-
0
votes1
answer78
viewsA: Animation CSS Multiline Typing
If your code was a bit messy, I’d lose more trying to fix it than making an example from scratch. So I made this model to help you understand the concept. There may be people with other options to…
-
3
votes1
answer104
viewsA: How to make this effect ? Animation CSS?
Man what happens is that this property animation is a shorthand for several other attributes, it is the same as background-imagem, background-size, etc. but with the animation is something like…
-
7
votes1
answer487
viewsQ: With CSS is it possible to make a hollow circle in an image?
I wanted to put a "leaked" area on the image, so that the image has an empty area and I can see the background that is behind that image. Example. I managed to get here, but I can’t place the image…
-
3
votes2
answers429
viewsA: Problem with flexbox
It didn’t work because justify-content is a property for you to use in a flex container, is a property used in container parent and not directly in the child elements within the container like you…
-
0
votes1
answer788
viewsA: How to customize materialize css?
Matthew what happens is that you are using two color classes of Materialize in your tag <a> and those colour classes grey-text and text-darken-1 of Materialize have by default !important on…
-
3
votes2
answers35
viewsA: centering dynamically
It has a flex shape, but the last row of items will always be centered... See in the example how it looks, I left a borada and put the width of the container at 90% just to give a "white space" on…
-
3
votes1
answer65
viewsA: How do I access the brother element to open the side menu
Tatah first of all, I’m giving you a tip. It’s not ear-jerk, it’s constructive criticism okay. You need to understand what you’re doing before you change things. I say this because you need to…
-
2
votes2
answers258
viewsA: Problem when customizing search bar
Guy your code has some mistakes. First you have in CSS a pro class ID #search, but in HTML no element has this ID. You can use the native Bootstrap classes to align the way you want. First with…
-
2
votes1
answer55
viewsA: How to fill in "spare spaces"
Face the way you set up the layout could be better. The way I’m going to suggest you won’t need to mess with the structure of HTML and will replace the display:table for display:flex, and will use…
-
4
votes2
answers855
viewsQ: How to break line in Pseudo Content element ::after or ::before?
Is there any way to break the line of a text that is in content of a pseudo element type o ::after or the ::before ? Whereas something like this: content: "<br> não quebra?"; or this content:…
-
4
votes1
answer50
viewsQ: With CSS is it possible to change the cursor more than once when interacting with the element?
I have an element that will can be moved by the screen. So thinking about ux/ui I wish I could give two feedbacks for the user. In the first case it places the mouse over the element, and in the…
-
1
votes2
answers248
viewsA: How can I make the Blur effect on IE?
As you gave few details I will reply with a simple option. It may be that this option does not work for all cases, but it is an alternative since we do not have too many details. Option 1: Using…
-
3
votes1
answer66
views -
0
votes1
answer319
viewsA: Hover in Third Div Affect First - Previous Sibling Element - With Pure CSS
Look though some say it’s impossible, I say that in some cases like yours is possible yes! But for that you will need some evil with CSS, because you will need some kind of complex rules like:…