Posts by hugocsl • 65,517 points
1,996 posts
-
1
votes2
answers1418
viewsA: How to move html input
Young man, first see you wear one table the way you used inside the form doesn’t make any sense, you can withdraw that tag... Then just put text-align:center on the tag form that the entire content…
-
4
votes1
answer3207
viewsQ: Back to top button only with CSS. Smooth scroll only with CSS is possible?
I know that here on the site there are numerous questions of Smooth Scroll and Button to "return to top" (back to top), but they all involve Javascript or jQuery, but this não is my goal. I would…
-
2
votes1
answer63
viewsA: Use two titles (Abels) in a bootstrap input group
Option 1 Using one’s own grid of Bootstrap you put the btn-group in a row and the labels in a row above, each label you leave a side of the row using the classes flex bootstrap This option has no…
-
1
votes0
answers67
viewsQ: Does the CSS Box-Shadow property affect page performance and element rendering?
I know the property box-shadow is relatively old, and widely used. But when using it in excess, I say when applying box-shadow in 100 elements on the same page I have lost performance? I did this…
-
0
votes1
answer98
viewsA: What would be the structure of CSS. How to build this gallery template?
Option 1 replicating gallery with css only I made this model based on the example gallery, it is in flex, and the "trick" is that all items have flex:1, but when does the :hover passes to flex:2, as…
-
0
votes2
answers855
viewsA: How to change Popover size in Bootstrap 3?
A class .popover of Bootstrap 3 has a max-width default of 270px, just you replace this value in .popover which is followed by the buttom who has a id for example... #teste + .popover { max-width:…
-
5
votes1
answer1526
viewsA: Effect of increasing and decreasing edge size
I’m not sure I understand what you want, but instead of using border you can use the box-shadow with values such as spread-radius and inset to make these effects. Pro .btn just use a transition…
-
9
votes2
answers687
viewsQ: How to make an Animation in CSS with drag effect. Place Blur in motion
I’m willing to put one loader animated in CSS with @keyframes on a page, but I would like to put a "drag effect" on it as if it gave a "blur" with a trace of Blur following the element when it…
-
1
votes1
answer258
viewsA: How to Add My Slide Button
By the Javascript CDN link you posted in the question it seems that you are using the slider plugin Slick-Carousel http://kenwheeler.github.io/slick/ In the documentation for you to activate the…
-
4
votes1
answer525
viewsA: How to place a Video inside a CSS Text? Is it possible to place a Video as a text background?
As I did not get an answer I will post a result that I got using mix-blend-mode https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode The estate mix-blend-mode describes how a content…
-
15
votes2
answers243
viewsQ: What are Variable Fonts? How do I work with them in CSS?
I’ve heard enough of the term Variable Fonts, and that this would be a new standard that the Web should adopt as a whole soon... I do not know if this really proceeds, but it seems that this new…
-
1
votes1
answer903
viewsA: Align a column element at the top-right
Apparently you are putting the class in the wrong element... Actually I think your Grid structure of MD Bootstrap is a little strange... I made simple changes in the Grid organization and used…
-
2
votes1
answer52
viewsA: HTML5/CSS3: How to fix an unordered list item at the end of all items
If I understand correctly there is a way to change the order yes only with CSS, first you have to define the UL as display:flex and direction in column, after that you define a class for that item…
-
1
votes1
answer478
viewsA: Align radio Buttons to the right of a select
Or know layout is breaking simply because it does not fit all elements within the col-3 My tip is to put everything into one col instead of splitting in two. However in very narrow screens you need…
-
6
votes1
answer525
viewsQ: How to place a Video inside a CSS Text? Is it possible to place a Video as a text background?
I saw this effect and I’m trying to put in a project, but I don’t know how to put a Video inside Text, I only got with images... Here I put an image as text background, but how do I put a video like…
-
2
votes1
answer32
viewsA: Div when passing mouse on field does not work
Your problem is that the dial + picks up the adjacent brother and you need to actually pick up a brother who is not the next brother but who is further down, so you need to change the + for ~ See…
-
2
votes2
answers1090
viewsA: border Radius color in 2 colors
Option 1 - closer to your code Your problem is that when rotating the container image you rotate everything inside too. My tip is you create these embroider in a pseudo element, so you can rotate it…
-
14
votes2
answers4064
viewsA: Change title style within a tag
What happens is that the title is a Global Attribute, he’s not a element, or a pseudo element, summarizing it doesn’t exist in DOM and you can’t "access it" to change the style. It is not possible…
-
4
votes2
answers673
viewsQ: With CSS is it possible to fill in the "eyes" of the Font? Is it possible to fill in the "holes" of the letters A, O, P, etc?
I was wanting to create a title to use in the sessions of my site, but wanted the source to have an effect similar to those images, With eyes filled giving the impression that the source has the…
-
1
votes1
answer171
viewsA: How to format all the Labels of a form with a style associated with an id?
You have to put the # in front of all the ids in CSS. For you to understand better pq your CSS didn’t work I write it differently by putting a ID on each line, as suggested by Google’s own manual…
-
7
votes1
answer676
views -
3
votes1
answer149
viewsA: Position Absolute does not occupy 100% of the father
One option to resolve this is alignment with flex, so you align the child element with margin:auto and not with top left, below I will explain the problem in more detail. .segura{ width: 200px;…
-
0
votes1
answer136
views -
1
votes2
answers160
viewsA: Decrease Field Size Edit
House vc can not change the structure of table for div as his friend Wallace suggested here is a model of table only with the classes default bootstrap. see that setting the size of col- of the…
-
1
votes1
answer398
viewsA: Flexbox leaving empty spacing
Boy your problem is that by default every element <ul> has a padding! You need to remove this padding of user-agent at hand, placing padding:0 in ul class .nav See how the result looks: .nav {…
-
2
votes2
answers3529
viewsA: How to make the text adapt to the size of the div?
What I’m going to comment on here is just the tip of iceberg To better understand I advise you to read these two articles! https://css-tricks.com/snippets/css/fluid-typography/ and…
-
1
votes1
answer42
viewsA: Responsive layout in an image
Dude your problem is that you are using the property in the wrong places. For example you are using padding on the link when you should actually use margin in class .post Another thing, if you want…
-
9
votes1
answer205
viewsQ: How to make the button outline follow the curvature of the elements?
I know that the outline is very important for usability and especially for the accessibility of the page, including here is a very interesting Webaim article about it:…
-
0
votes2
answers112
viewsA: Adjust Section [Position: Absolute]
I believe your intention in putting position:absolute is to maintain the header and the footer always stopped in the same lubar. So I made an example with the main occupying 100% of the available…
-
1
votes1
answer330
viewsA: Screen resolution (DPI) css
1º - So, I would like to know, if in CSS we have the possibility of set the site resolution, as it is done in images, at 300 pixels per inch. About the first part of the question I don’t know how to…
-
7
votes1
answer481
viewsQ: In CSS, how do I align Numbers with Text in Classic Fonts?
I’m wearing a Font-Face that has the old typographical style in the numerals is want to align them with the text. Note that the numbers of this source follow the old pattern, where the digit is…
-
3
votes3
answers290
viewsA: Change scrollbar positioning in a div
You can use flex-direction: row-reverse; to indicate that the order of the elements will start from brings forward, thus the scroll goes to the end of container. It’s enough you reorder the div to…
-
5
votes2
answers1015
viewsA: Why margin-top affects the father div
You’re having a problem known as Margin Collapse or Margin Collapsing. This "bug" has already been described and is well documented. You can find out more about this subject in this documentation by…
-
8
votes3
answers1297
viewsQ: How to have more than one Edge in an Element with CSS
I have one element, but I wanted it to have several edges. I didn’t want to have to use several divs for this... I wanted something around 10 to 8 edges. Is there any more practical way to put more…
-
1
votes2
answers634
viewsA: Hover the mouse over the image and change the color of the caption
Just you make a rule that when you do the :hover in the father you change the color of son. Ex: <pai> <filho></filho> </pai> pai:hover filho { css } In your case, when you do…
-
1
votes1
answer591
viewsA: Horizontal sliding menu
Follow an option based on this example I kept the most of your HTML code, to make it easier to understand things. However, in CSS it was necessary to adjust some things and use display flex to…
-
2
votes1
answer178
viewsA: I’d like to just use the bootstrap grid to make it responsive
You can only use the Bootstrap Grid quietly. Note that when you download the full version of Bootstrap directly to the official website within the .zip comes a file option .css that contains only…
-
0
votes1
answer33
viewsA: Grid Bootstrap working
Your answer is simpler than it looks. Vc is using the classes of one version of the grid in the other. What I mean is that you are using the grid classes of Bootstrap 4 in Bootstrap 3. Ai does not…
twitter-bootstrapanswered hugocsl 65,517 -
0
votes1
answer257
viewsA: CSS - Changing text distance and image of a list item
A pseudo element ::before or ::after is always a direct child of the very element that receives it. Image taken directly from Chrome Devtools Example: <li> ::before texto ::after </li>…
-
3
votes3
answers582
viewsA: Triangular div with CSS3
One of the solutions to solve this is using skewY(), the problem of doing as you are doing is that you won’t be able to do the background move from one element to the other maintaining continuity…
-
10
votes3
answers645
views -
15
votes2
answers686
viewsA: How are those thumbnail preview videos created in players?
First, Google must have an API that takes some frames from the video and generates a . WEBP, this is a format that just like . GIF tb accepts animations. See that on a system the size of Youtube…
-
3
votes1
answer169
viewsA: CSS defaults when printing
About your problem there is nothing in the official documentation, but apparently the columns col-* are all 100% wide, one way to fix this would be to create a unique CSS in at-rule @print to treat…
-
1
votes1
answer23
viewsA: Bug when using pseudo-element after on small screens
Its problem is that when the line breaks the pseudo element loses the reference. I found two ways to solve it, but I don’t know if it’s gonna be right for you. The first is clocando…
-
3
votes1
answer231
viewsA: Text accompany the div
Young I did this response based on your HTML, but it is not correct to use a block type element (a div in the case), within a table, because they have different scopes, one has display:table with…
-
0
votes1
answer48
views -
1
votes1
answer550
viewsA: Slide Owl carousel2 with background image
Dude I made this example trying to make the most of the standard Bootstrap components since you said you’re using it. I also made the merry-go-round with Owl Caroucel like you said you were using. I…
-
3
votes1
answer973
viewsQ: What is a "definition list" and how are these tags used <DL>, <DT> and <DD>?
As far as I knew in HTML there were only two types of lists. Sorted Lists <ol><li> and Unordered List <ul><li>. But apparently there is a third type of list, which is the…
-
4
votes2
answers423
viewsA: All property in CSS. What is it for and how does it work?
The estate all is a shorthand (shortcut) to get all CSS properties of the element defined by user-agent. For example the tag input has some CSS attributes that are declared by user-agent, if you…
-
2
votes2
answers2370
viewsA: Position menu over image with CSS
As in the order of your HTML the tag <img> come before the tag <nav> naturally the Nav is already above the image, no need to z-index. Already the menu vc can fix using position:fixed or…