Most voted "css3" questions
The term CSS3 is used to refer to CSS properties and selectors added after level 2.1 of the specification. Use this tag for questions about new CSS modules.
Learn more…1,944 questions
Sort by count of
-
79
votes4
answers6695
viewsIs it possible to make a tooltip with pure CSS?
Is it possible to make a tooltip with pure CSS? That is, without jQuery, without Javascript, but only with CSS. For example, I want to do this based on the following element: <a href="#"…
-
73
votes18
answers139957
viewsWhat is the best way to center an element vertically and horizontally?
What’s the best way (by "better" I mean: with the greatest possible compatibility between browsers and the simplest possible) to position an element in the center of the page, vertically and…
-
37
votes1
answer3274
viewsWhich CSS selector has priority?
I have the following code HTML and CSS: #element p{color:blue;} .element p{color:red;} div p{color:pink;} div.element p{color:yellow;} div[name="element"] p{color:purple;} div…
-
37
votes3
answers10654
viewsHow to make a progress bar ranging from 0 to 100% with CSS only?
I am developing a page where there is a progress bar and I need to make it start from 0 and go to 100%. But I only need to do it with CSS and, in addition, I need that when it reaches 100%, start…
-
30
votes4
answers1879
viewsIs it necessary to add prefixes to some CSS properties?
In many codes the browser compatibility prefixes are added in CSS attributes. Example: .exemplo { -webkit-background-size: 50% 50%; -moz-background-size: 50% 50%; -o-background-size: 50% 50%;…
-
28
votes10
answers68840
viewsHow to make a <div> occupy the entire page width but leave a gap of a few pixels on each side in CSS?
I’m trying to make a header that should fill the entire page width, but leaving a 5px gap on each side. For example: | ::::::::::::::: | | ::::::::::::::: | In this case the Pipes are the maximum…
-
28
votes4
answers62720
viewsHow to style a "file" input?
I have this structure: <section id="cadastro" class="cadastroVersao pg-i"> <div class="titulo"> <h1><i class="icon-clientes"></i>Cadastro de versão</h1> <a…
-
27
votes5
answers4828
viewsWith CSS is it possible to put 2 colors in 1 letter? Or half the text with a different color?
I wonder if with CSS you can leave only half a letter, or half a word, with another color and the other half with another? It would be possible to get this result from the image below only with CSS?…
-
26
votes2
answers14336
viewsSome way to style "parent" element with CSS
Hello, is there any way to select the parent element of another element with CSS? To be more specific, I’m studying on localhost using the phpBB3 forum platform, when a message is thankful it wins…
-
25
votes1
answer55331
viewsHow to style the scroll bar?
Good, I’ve been spending some time looking for solutions to this but I can’t find it, I have a scrollbar And I’d like to take your size down. Can someone point me to a website or tell me what it…
-
25
votes2
answers1936
viewsWhat do "n" means, numbers and signals on the "Nth-Child" or "Nth-last-Child" selectors?
I’ve always used the n combined with the selector nth-child or nth-last-child in CSS, but I still can’t quite understand its meaning. For example: p:nth-child(3n+0) { background: red; }…
css3asked 7 years, 8 months ago Wallace Maxters 102,340 -
21
votes6
answers8730
viewsHow to create geometric shapes using CSS?
How can I make the geometric shapes below using preferably CSS? If not possible using CSS only I also accept answers with other methods.…
-
20
votes2
answers791
viewsHow to do Tilt button?
I am using img but it is not a good practice, so I would like to use a button with some css attribute. It is possible?…
-
18
votes1
answer4514
viewsHow does "position: Sticky" work?
The sticky is a new property value position and I read a little bit and understood that with it it is possible to create HTML elements that behave at a time like position: fixed and in another as…
-
17
votes3
answers4757
viewsHow do I make a Marquee without the <Marquee> tag?
I need to wear one Marquee, but as everyone is saying Marquee is a prehistoric thing and should not be used anymore, I am in doubt as to what to use in his place. On the site of MDN says this: This…
-
17
votes2
answers738
viewsWhy use/not use * box-Sizing?
I’ve read a lot about debates between using or not using the property box-sizing: border-box; as follows: * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } I…
-
17
votes1
answer3079
viewsHow does Cubic-Bezier work in CSS Animations?
When we make an animation with CSS we have several parameters that we can use. Ex: animation-name: none animation-duration: 0s animation-timing-function: ease animation-delay: 0s…
-
16
votes1
answer7765
viewsShow image under another with css Hover
How do I make when I hover under an image, another image appears on top with opacity... For example: I have a div with the cover image of a movie, when I move the mouse under the div, I would like…
-
16
votes3
answers4406
viewsUse @media, @media screen and or @media only screen and Have a difference?
I was wondering if there is any difference in css when using one of these media queries, Example A: @media(max-width:770px) { .texto{ color:red } } Example B: @media screen and (max-width: 770px) {…
-
16
votes2
answers319
viewsHow do CSS ignore if the attribute is capitalized or lowercase?
Imagine I have a situation where I need to style multiple links from my page, but only the links that end in .html, but I noticed that when trying to get the attribute href, I can only catch the…
-
15
votes3
answers973
views -
15
votes1
answer214
viewsIs it possible to make a text box with negative border Radius?
I would like to do this negative curve using CSS or Jquery, it is possible?
-
15
votes1
answer433
viewsWhat are logical properties in CSS?
Recently I found the concept of "logical properties in CSS". It seems to me, is a new system to create CSS in a logical way, not physical (direction and fixed positions, let’s say so). However, this…
-
15
votes2
answers243
viewsWhat 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…
-
14
votes3
answers1336
viewsWhy can’t I center image using text-align:center?
Follow the code below: HTML <div class="panel panel-default" style="height:400px"> <div class="panel-body"> <div class="form-group"> <div class="col-xs-6"> </div>…
-
14
votes3
answers919
viewsHow to make a pure css spinner?
It is possible to make a spinner with pure CSS, without Javascript ? <div class="main spinner"> O que é Lorem Ipsum? Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica…
-
14
votes2
answers1129
viewsWhat is the purpose and how to use the "display: Contents" of the CSS?
I recently saw that there is a new kind of display in the CSS the display: contents, but I didn’t quite understand the intention of using it? https://developer.mozilla.org/en-US/docs/Web/CSS/display…
-
13
votes2
answers36925
viewsChange the "placeholder" color without affecting the "value" color
In HTML5, we can make use of the attribute placeholder (English) in order to give the user a hint about the type of data that a given field accepts. To avoid confusion between data actually written…
-
13
votes3
answers13657
viewsHow to make a column occupy the rest of the available space?
I would like to put two blocks inside a div of parallel size, one with fixed size, and the other that fits exactly in the remaining space. For example : div#container { width: 50%; /* este tamanho…
-
13
votes1
answer9507
viewsWhat is -Webkit-Transform? What is it for?
So, direct I find in Csss this -Webkit-Transform, but I have no idea what it is or what it’s for and God also does not know answer me: I would be eternally grateful if someone could explain me or…
-
13
votes1
answer1431
viewsDifference between pseudo-class (colon :) and pseudo-element (double colon :: ) in CSS
I would like to know the differences between these two concepts of CSS in order to understand and point out what one is, and what may be the other. For example: :hover, ::before. What I’ve…
-
13
votes2
answers640
viewsWhat’s the clip property for?
I was taking a look at a code where I taught some techniques to create a responsive table. I came across the use of property clip, followed by the value rect(0 0 0 0);. Then I had this doubt: What…
-
13
votes3
answers849
viewsHow to make a flex container have the width of internal Ivs?
Good afternoon, I’m creating a layout with height:100% where I have 2 groups, and within each group I line up the DIVs vertically and if any DIV did not fit in the height maximum or there is resize…
-
13
votes2
answers431
viewsWhat is the difference between "Css Resolution" and "Pixel Resolution"
I wonder why a @media(max-width: 400px) is applied on a cell phone that has 1440px/2960px? How it really works ? I found a website with this information, that the mobile has 1440x2960 but the…
-
13
votes2
answers457
viewsUse "left: -9999px" instead of "display: None"? But why?
I started to wonder about that a little while ago. I read in some article, which I don’t remember what it is, that for "visibility" sake instead of using display: none or visibility: hidden should…
-
12
votes5
answers20277
viewsHow do I use @import in a CSS file?
Inside a.css style file I am using the option @import url() to call another file CSS. For example: @import url("/css/fonts.css") Both the file and the path are correct and still I can’t import that…
-
12
votes2
answers4037
viewsArrows using CSS only
I would like to know if it is possible to do the following arrow using CSS only: I usually do other types of arrows, using CSS, but whenever I struggle with cases like this, where the arrow has a…
-
12
votes2
answers1331
viewsWhat is the difference between Animation and Transition CSS
What is the difference between the properties animation: and transition: of the CSS?
-
12
votes2
answers143
viewsWhy does CSS have so many units of measurement?
After the window appeared auto-complete, I came across the following: and then I wondered: why the CSS has so many different units of measures?…
-
12
votes1
answer3245
viewsPseudo elements ::after and ::before work on which input types
I wonder if there is any documentation or article that says where exactly we can use ::after and ::before I’ve seen that tag <img> for example does not work. I believe it does not work because…
-
11
votes1
answer2651
viewsWhat does the CSS selector :first-Child and :last-Child mean?
I have a code using jQuery that was based on CSS selectors :first-child and :last-child (and that worked for a long time), to get the first input and the last input within a group containing input +…
-
11
votes3
answers2648
viewsAutomatic calculation in text box
Good morning. Is there any way when the user type this in a text box: A script runs the account automatically and results, in this case=1 ? It is also important that it does this with all operations…
-
11
votes3
answers432
viewsCSS operators with @
As I had asked about the operator @media, I was curious, because I saw other operators that started with @and I would like to understand what they serve operators like this, and which ones exist.…
-
11
votes1
answer1643
viewsWhat does the "--" specified in the Bootstrap CSS :root mean?
It’s just a question that came up when I was snooping the CSS of Bootstrap, this is something I don’t know and I didn’t find any answer in Google about it... There’s an excerpt from the code: :root…
-
11
votes1
answer293
viewsWhat is and how does CSS Post-processing work?
What would be a CSS post-processing? I’ve heard of pre-processed CSS, like Gulp does when it compiles a SASS in CSS. But recently I heard the term post-processed CSS and I didn’t really understand…
-
11
votes3
answers572
viewsIs it possible to animate text-Decoration with CSS?
I recently saw this animation made with SVG, But I was wondering, is it possible to animate the text-decoration-style: wavy in the :hover in order to achieve the same result? body { font-family:…
-
10
votes5
answers16498
viewsHow can we not apply opacity to a child element?
I have a div with applied opacity, but this div has child element. I don’t want to apply opacity to those child elements, I would have some way of solving that? Example: http://jsfiddle.net/qSsC3/1/…
-
10
votes4
answers1502
viewsHow to make a layout ready for all resolutions
I know it sounds confusing, there is some way for a layout to be "prepared" to be responsively visible when the customer resizes the browser and to any device?
css3asked 9 years, 7 months ago adventistapr 5,498 -
10
votes2
answers1616
viewsWhat is the use of the pseudo class :root?
I’m learning about pseudo structural classes, but I haven’t found an article about this pseudo class yet, and I only find it in English.
-
10
votes2
answers339
viewsHow does the display property work?
I’ve been researching the functionality better (values) display and its features. I noticed that it has many possibilities. Some very obvious and others somewhat complex for the beginner developer.…