Posts by hugocsl • 65,517 points
1,996 posts
-
1
votes1
answer439
viewsA: How to take the first and last class Parent of a div contained within a TD via CSS/SASS?
You can, but for that you need to select the TR and not the div, this is due to the hierarchy of selectors. So first you need to select yours second TR, because the first is where the column titles…
-
3
votes2
answers544
viewsA: Is there any way to access a CSS value?
yes it is possible, but you will need to use calc() and custom variables --var to do this. I’ll do a basic example just so you understand how you can add values of different variables and put in…
-
2
votes2
answers151
viewsA: Animation with image in CSS
In fact as you said you wanted to touch the template a little is possible yes do as a div You get the effect using only one div and using the pseudo-class ::after in div See the example to better…
-
3
votes2
answers593
viewsA: Aligning a checkbox component vertically in the center of Row
You can line up with a padding-top. Show in "Whole page" to better see the result. And if you think it necessary use the rules of media query @media to treat the class and change that padding on…
-
0
votes1
answer127
viewsA: Use of Pseudo-Class :link
"To pseudo-class CSS :link allows you to select the links within an element. It selects all links, even those that have not been visited, including links already stylized in other classes or ids…
-
2
votes3
answers840
viewsA: How to set a limit of 4 images per line?
Another way to do it is by using display:grid you can determine the break to quad 4 this way repeat(4, 1fr). If you are going to use this example I suggest that one studied on the Grid to better…
-
1
votes4
answers355
viewsA: Edge at intersection between 2 elements - CSS
Another simple way to do it is with a radial-gradient going to transparent for the color you need. Vc can create a pseudo element ::after and in it put his radial-gradient. The way I did no matter…
-
1
votes2
answers63
viewsA: How do I make a text that recently adds to the code stand at the top of the page?
The correct way to do this is currently with display:flex and flex-direction: column-reverse; See the code below, note that the property flex-direction: column-reverse causes the order of divs in…
-
1
votes2
answers149
viewsA: How to get the Hover to overlap a div with overflow
Dude I only know one way to make an element "son" (is actually a pseudo-element) extrapolate the size of the element that is overflow:hidden. Even so I already say that I do not consider this a…
-
2
votes3
answers126
viewsA: creating note/observation field
An option using linear-gradiente to save another line of css :) div { padding: 1rem; background-image: linear-gradient(to right, #0f0 0px, #0f0 5px, #ff0 5px); } <div> <b>Nota:</b>…
-
6
votes1
answer105
viewsQ: What is currentColor and how do I use it in CSS?
What is the currentColor attribute in CSS? What is this attribute for and how best to use it? I would like some examples to better understand. If the element does not have a color or if the color is…
-
3
votes2
answers71
viewsQ: How to style links and images that are referenced in HTTP and not in HTTPS?
I have several pages with several images and several links. However I am migrating from the protocol HTTP to the HTTPS. I would like all images and links that are indexed or linked via HTTP to…
-
1
votes2
answers82
viewsA: Positioning text when using -Webkit-Transition
I made an option that adds one @keyframes which has a time close to the total of its animation. At the end of this @keyframs it adds a style in the text that makes strip the nowrap and lets the text…
-
0
votes1
answer764
viewsA: background-image does not work in Ction what to do?
In addition to the bug that Bacco spoke of its @media rule not being closed with the latter } and the way I suppose is right, I believe that the position: absolute in the <header> is also…
-
1
votes1
answer45
viewsA: Header does not get responsive in 320PX using Flexbox
Your CSS and HTML are having some problems. Your list for example does not have a UL from the outside, and the margins and paddins are somewhat redundant. Another thing is that the font is not…
-
6
votes3
answers1082
views -
1
votes1
answer71
viewsA: CSS selectors 3 :Nth-Child()
You need to make a rule on nth-child to catch 4 in 4. nth-child(4n + 1) You can read more about it in this excellent reply: What do "n" means, numbers and signals on "Nth-Child" or "Nth-last-Child"…
-
1
votes1
answer73
viewsA: background-image Animation with CSS
Guy in the case of his animation is a simple "slideshow", nor was it necessary to use animation-direction or animation-fill-mode, I think it might have bugged your slide. Another thing I noticed was…
-
2
votes3
answers10051
viewsA: How to change the background of a CSS-only checkbox?
As each colleague says user-agente of each browser has its "default style" for some HTML components, among them you can easily repair some inputs as radio, checkbox, select, etc in Firefox is…
-
2
votes2
answers175
viewsA: Input does not track col-Md-8 size
Vc can simply put 100% width on the inputs, so they occupy the entire column size. (I put css directly to all inputs, vc vc can create a more specific class for this, here was just an example) Or…
-
0
votes1
answer1905
viewsA: Change bootstrap default theme
Let’s go in pieces. This is the default CSS of Bootstrap 4 https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css But let’s assume that you want to change the primary color to purple for…
-
5
votes3
answers2323
viewsA: How to do with CSS a checkered checkerboard background for Body?
After testing the solution of colleagues I saw that there was a problem, which I believe is rendering, in Firefox, Edge and IE. As seen in the image My solution was to use a SVG inline, in place of…
-
2
votes2
answers201
viewsA: Estilizar Required
You can treat this with pseudo-classes :invalid, :focus, and :valid Note that the order should be this so that the styles do not overwrite incorrectly. First he gets invalided and red until you…
-
3
votes3
answers2323
viewsQ: How to do with CSS a checkered checkerboard background for Body?
I’d like to put in the <body> a checkered background, like a chessboard covering the whole body. I tried with repeating-linear-gradient(), but I couldn’t... html, body { width: 100%; height:…
-
2
votes1
answer187
viewsA: Align lists of different sizes in Bootstrap div
You can treat the . Row that the lists are in with display:flex and flex-wrap so you avoid that the lists get "encavaladas" and play content that does not fit to the "line" below To better…
-
31
votes2
answers710
viewsA: How could you make a Pacman by moving your mouth with pure CSS?
Here are examples with CSS only. Option 1: Made with border-Radius No need to use this option position relative or absolute, nor need to put the divs within a container There are only two Divs with…
-
7
votes4
answers1814
views -
1
votes1
answer1341
views -
8
votes4
answers1814
views -
5
votes1
answer117
viewsA: Cut image pixels without distorting it
Option 1 Yes it is possible you can use the image as a background of a div that has the size you want. With the style background-position vc sets the position of your background within the div in…
-
1
votes2
answers23
viewsA: Changing the Button Source
This purple color is due to the link being with status of :visited, because it has already been accessed by you. Even this color can vary from browser to browser, if I am not mistaken in Opera for…
-
2
votes1
answer122
views -
0
votes2
answers4843
viewsA: Align inputs and reduce spacing between Abels using CSS
Your HTML was in trouble, you write the name of the class outside the class=" " should look like this class="control-label" About the spacing between inputs you will need to touch the original value…
-
1
votes1
answer62
viewsA: How to improve the formatting of information within my Div?
Gabriel there are several ways to do this. It could be the oldest and not recommended way with floats and clearfix or even <tabel>. Or with Flexbox and Grid which is the most suitable hj on…
-
1
votes2
answers318
viewsA: "fixed" footer at the bottom of the page, but after the content
You get something very close to what you want with just flexbox I made two examples, this model has little content and the footer is aligned at the base. html, body { width: 100%; height: 100%;…
-
1
votes2
answers46
viewsA: How to break lines between links without them occupying the entire width of the parent element?
Da to do without the tag <p> using display:flex in the father and the guidance of the container-flex column and not row as in default Take the example: div{ width: 200px; background: yellow;…
-
1
votes2
answers403
viewsA: Responsive HTML without framework
Ronaldo as you put the tags HTML5 and CSS3 I’ll give you two different ways to do this, one with display-grid and another with display-flex. First I’ll leave some remarks. Avoid using float to build…
-
1
votes2
answers138
viewsA: Avoid Scale with :Hover link inside a <li>
Some CSS effects applied to the parent you cannot remove from the children. For example opacity and filters, blend-modes etc.. In the more specific case of transform, an option is to reverse what…
-
3
votes1
answer1255
viewsA: How to remove the row that separates the columns in an html table?
One of the ways to do it would be like this, I put the transparent color on the right edge of all the first ones td table { font-family: url('../fonts/Lato-Regular.ttf'); border-collapse: collapse;…
-
1
votes2
answers480
viewsA: Alignment of the radio button below the image
It is difficult to give you an answer that will work in all cases. But as the image has a fixed size of 300px, just you give a display:block in the input for it to pass down the image, after you…
radiobuttonanswered hugocsl 65,517 -
2
votes1
answer471
viewsA: Hover moving element
Increasing the font size to have this effect is not ideal. One of the solutions is using the transform:scale to increase the size of icons in the :hover. In this case I passed the normal size icon…
-
1
votes1
answer315
viewsA: Optimization in SVG image loading
There are some techniques, but the basis is to eliminate unnecessary codes from within the SVG and make the minification of the final file. This option is to treat the file . svg before it is…
-
2
votes1
answer354
viewsA: Problem with the basics of creating a sidenav using Materializecss
I believe it is because you are using the component of one version plus the CSS/JS of another version. See here the version documentation 1.0.0-rc.2 which is the one you’re indexing in <head>…
-
4
votes3
answers555
viewsA: Create an "opacity" on top of a <tr>
Option 1: In this option you put one box-shadow: inset well large on TR, and puts position:relative on TD to be able to put a z-index:-1 and throw behind the shadow of the TR. The intention of the…
-
3
votes5
answers38033
viewsA: How to outline text via CSS
Another way to do this is to place the text inside an SVG and use the property stroke-width in the text. The ideal is that you build the viewBox straight to your SVG to be able to apply without a…
-
0
votes1
answer64
viewsA: Execution of Hover for social network
Increasing the font size to have this effect is not ideal. One of the solutions is using the transform:scale to increase the size of icons in the :hover. In this case I passed the normal size icon…
-
14
votes3
answers1712
viewsA: Why is it considered wrong/bad to repeat an HTML ID?
In my view it also disturbs in HTML, if you use internal anchors in the page is usually used href="#link" and in the element that will be anchored the id="link". If you use the id="link" in various…
-
1
votes1
answer150
viewsA: How do I margin between an image and an HTML list?
Your problem is not exactly with the margin, but with the list-style-position: outside/inside; Here are some practical examples for you to see:…
-
0
votes2
answers304
viewsA: Start viewing the div at the end of the Scroll
As you said that the other answers did not meet you I will give you another option only with CSS using flexbox. The technique consists of reversing the direction of the contents of the div using…
-
3
votes3
answers7332
viewsA: How to put scroll at the end of the div?
If you want to do only with CSS you can use these techniques. Option 1: The technique with flexbox is to reverse the direction of the content of the div using flex-direction: column-reverse then the…