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
-
4
votes1
answer224
viewsWhat does .container. 31 25 25 in CSS mean?
I am doing a self study on responsive site. In a tutorial I got, there are in the CSS file instructions like: .container.\31 25\25 { width: 100%; max-width: 1750px; min-width: 1400px; }…
css3asked 7 years, 8 months ago Jose Alfredo Rodrigues 41 -
4
votes2
answers3746
viewsHow to make a vertically zebrad table (switch column colors)?
I know how to make a table horizontally zebrad, ie, each row with alternating colors (the famous color yes and color no). I wanted to know now how I could by css switch the colors of the columns:…
-
4
votes1
answer269
viewsCSS - Selector "::"
In studies of CSS selectors, we have seen the selector :: in a few moments. However I did not find specific reference on this keyword :: isolated. That is, I only saw it being applied in selectors…
-
4
votes1
answer1206
viewsHow to create expandable banner with HTML5 and CSS3 only?
I need to create an HTML/CSS banner that uses only two JPG/GIF images. The first image will be 300x250px and the second image 600x250px. The first image will be displayed and the mouse will be…
-
4
votes2
answers3841
viewsHow do I leave the opacity of a dark image and display the figcaption text on Hover?
Hello, I am trying to leave the image dark and appear the text when I hover over. Can anyone help me? <div class="efeito"> <figure> <a href="#" target="_blank"><img…
-
4
votes1
answer151
viewsLinear-gradient does not appear in CSS3
I am trying to apply a linear-gradient to a DIV but it is not appearing in the browser. I have tested in Opera, Chrome, Safari and Firefox but it does not appear at all. My CSS looks like this:…
css3asked 7 years, 1 month ago Webster Moitinho 511 -
4
votes2
answers515
viewsStructuring with html/div and css
I am beginner/enthusiast and I’m having difficulty to drop the "table", I’m having problems to do this below without leaving a fixed pixel value. Well, it was solved and this was the result: *{…
-
4
votes2
answers417
viewsIs using HTML5 tags as CSS3 switches a good practice?
Use the names of tags HTML5 as most CSS selectors is a good practice? Be it because I’m not creative to give names to ids or classes, or by wanting to make HTML code as clean as possible, leaving…
-
4
votes2
answers791
viewsAlign HTML + CSS component
I need to line up two Uttons this way they should be exactly next to each other, but each at an end…
-
4
votes1
answer1384
viewsHow to change IMG(logo) from menu(header) when scrolling page?
I have this menu that has an image: logo.png, as the code below shows <header class="header"> <div class="container"> <a href="index.html" class="grid-4"> <img…
-
4
votes5
answers14273
viewsHow to put a colored layer over an image?
div { background: #000; width: 640px; height: 640px; opacity: 0.2; position: absolute; z-index: 99; } <span> <div></div> <img…
-
4
votes2
answers173
viewsTransform text to text on Hover!
Good, I have a paragraph and I want him to have it font-style: italic; when I pass the mouse over, which properties should I :hover?! I wish it was a 0.3-second transition…
-
4
votes1
answer607
viewsFormat @Html.Label - MVC
On my page I have one: @Html.ActionLink(linkText: "Bem Vindo(a) " + User.Identity.GetUserName() + "!", actionName: "Index", controllerName: "RelatorioTagModels1") Which generates, the "Welcome" page…
-
4
votes3
answers6724
viewsHow to use Ellipsis css3?
I’m trying and I’m doing the same explains at w3schools but it’s not working. .box { width: 250px; text-overflow: ellipsis; border: 1px solid #000000; } <div class="box"> Lorem ipsum dolor sit…
-
4
votes1
answer74
viewswidth in responsive slide show
I’m building the responsive of a study project, Codes below: var slideItem=0; window.onload =function() { setInterval(passarSlide, 2000); var slidewidth…
-
4
votes2
answers243
viewsHow to style the <p> tag differently?
But I can’t style it to look like the image below. How do I do it? It will be another tag? I tried so: p.acessorapido{ float: left; width: 100%; height: 38px; max-width: 885px; margin-top: 20px;…
-
4
votes3
answers2746
viewsHow to write HTML as text within a div?
For example I have the div: <div class="option" id="resposta-1" onclick="mudaConteudo()"></div> I would like to write without html recognizing as a tag but rather a text: <div…
-
4
votes3
answers3072
viewsHow do a div or span occupy only the size of its internal content?
How can I make the div or span occupy only the space of its internal content? When I create a div here, it always takes up 100% of the space. I tried this but it didn’t work: div{ padding: 10px;…
-
4
votes1
answer443
viewsHow does each value that can be used in the CSS "Transition" (Transition-timing-Function) attribute work?
Usually when I want to make one transition to animate a CSS element, I usually use the value linear right after I set the time I want in an animation. Example: .boing-boing{ height: 100px; width:…
-
4
votes1
answer44
viewsWhat is the correct way to use the "%" operator in Sass?
I’m making changes to a page that was made using Sass, and I’m still very beginner with the framework, and I came across the following code: %cf { &:after { content: ''; display: block; clear:…
-
4
votes1
answer63
viewsCan the use of many variables in the CSS affect page performance?
The use of many variables in CSS can end up greatly degrading the page’s performance? It is possible to say more or less the use of how many would be necessary to begin to bring a negative impact?…
-
4
votes5
answers1054
viewsHow to make each input stay on a separate line?
I have this HTML and would like each input stay in separate lines, in this case below I had 3 lines, one for each input. *{ margin: 0px; padding: 0px; background-color: #ccc; font-family: 'Arial';…
-
4
votes1
answer183
viewsDiv height is greater than image height. Why?
I have the following pure HTML, no CSS <div> <img src="_img/_banner/banner1.jpg" /> </div> The image banner1.jpg possesses 300px of height and to div no dimensions have been…
-
4
votes3
answers96
viewsHow to hide a text being bigger than my Div
The purpose of the exercise is focused on study , I’m creating a blog that has articles on dubbing and one of the objectives is to hide the text, which is much bigger than my Div, so when clicking…
-
4
votes1
answer118
viewsCSS must be Shorthand or Longhand
Fine tune which is the right practice, use CSS with Shorthand or Longhand? I looked, but I couldn’t find a definitive answer... When we declare the class with Shorthand we are saying that all other…
-
4
votes1
answer69
viewsoverflow Hidden with float left
Hello I’m learning now how to deal with css, and fall into a situation that I found nowhere the answer, I will be very grateful if someone can help me. .pai-com-overflow{ border: 1px solid red;…
-
4
votes3
answers797
viewsHow to remove "whitespace-only text Node" that appear in HTML from the DOM
It seems that the HTML by default puts a damn"whitespace-only text node" among the elements of inline level with this I gain a "margin" between the elements that I cannot remove from the DOM I know…
-
4
votes1
answer966
viewsAlign Ivs vertically to center (Middle)
I have the following code: @charset "utf-8"; /* CSS Document */ img { border: 0; max-width: 100%; } div.cabecalho { position:relative; width:100%; height:200px; border:.1px solid #000000; }…
-
4
votes2
answers375
views -
4
votes2
answers86
viewsProblem with @keyframes CSS
I’m making an animation with CSS but the effect is correct only in the first word of the text and the rest not. Would anyone know why this occurs? h3{ position: absolute; font-family: consolas;…
-
4
votes1
answer627
viewsHow to adjust Background to fit inside container without cutting anything?
I have a Pattern that is repeated in both X and Y that I want to use as background in a div, but I’d like it to fit within the div without cutting on the sides as in the image. (I want them to have…
-
4
votes2
answers873
viewsHow to Make 3D Text with CSS
Is there any way to get to this result with CSS only? Make a kind of 3D effect in text panes with CSS? Type the image below? body { background-color: #880000; } h1 { color: #fff; font-size: 100px;…
-
4
votes2
answers673
viewsWith 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…
-
4
votes1
answer3207
viewsBack 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…
-
4
votes1
answer1013
viewsHow to make a CSS animation starting from one side in Hover and ending from the other when Hover comes out?
I have an animation where an element appears entering from left to right when I do the :hover in the .box, but I would like that when I took the mouse from the .box the element now exits from the…
-
4
votes1
answer159
viewsHow to fix CSS problem with Letter-Spacing and right-aligned text?
I and have a situation in which I have a container with two lines of text inside aligned to the right. Only that one of the lines is with the property letter-spacing: 15px; Increase the spacing…
-
4
votes2
answers397
viewsHow 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…
-
4
votes1
answer50
viewsWith 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…
-
4
votes2
answers855
viewsHow 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
votes2
answers33
viewsUnwanted space on an edge with Hover event
I’m trying to replicate the menu effect of OW game modes selection and I came across the following problem: Apparently it is working right. However, when the border appears, it has an extra spacing…
-
4
votes2
answers54
viewsCompensating for Select Option loss
I have a style I use for the fields of form: .inputTextMedio { border: 1px solid rgb(0,0,0); border-radius: 10px; width: 250px; height: 30px; padding: 3px; display: inline-block; } The problem is…
-
4
votes2
answers1399
viewsIs there a difference between flex-Basis, flex-Grow and width? What is the recommendation for using them in a Flex container?
I have a technical question about using the property flex-basis, flex-grow and width. Note that in the image below I got the same result using the 3 properties. Then I was in doubt, if the 3…
-
4
votes1
answer113
viewscss responsive misaligned
Hello, everybody! I have an image gallery coming from a database that defaults some items when the screen resolution is reduced to 1150px. This is done when the title under the image is too large…
-
4
votes1
answer155
viewsWith CSS is it possible to control which element will activate the Focus-Within of a Form?
Is there any way to determine with CSS only which elemento focused on specific will activate the :focus-within of form? I want only one input specifically activate the class form:focus-within {} of…
-
4
votes2
answers476
viewsDiagonal edge at the corners of the page
I am studying about diagonal edges and intend to apply an effect like this on my page: Until now I found little material about it and the closest was this: html, body { height: 100%; } * {…
-
4
votes2
answers186
viewsHow to make a video start and restart automatically?
Good evening, I’m making a website and in the middle of it I put a video that I want to start and restart automatically without the user having to click the play button or the restart button, can…
-
4
votes1
answer214
viewsHow to document CSS?
I was documenting the typescript of my Angular project using Jsdoc basing myself in this question, and I was left with the following doubt. How can I document my CSS classes and components of my…
-
3
votes2
answers386
viewsRotation check in javascript
Is there any way to check the rotation of a div in javascript, for example the verification of style left is offsetLeft, someone could tell me what the rotation would look like?…
-
3
votes3
answers216
viewsCSS selector for tables
I’m doing a refactoring in a code and there’s a CSS rule that’s changing the display of all tables. A specific table is visually broken because of this change. Since I haven’t seen all the code, I’m…
-
3
votes1
answer425
viewsDivs with float right without its inverted position
I’d like to know how to ensure that two DIV, both with float:right, do not reverse the position of each other, for example: <div id="divMaster"> <div class="pull-right" id="Div1">…