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
-
10
votes3
answers645
viewsWith CSS to cut text? Type a cut text effect or broken font?
I was wanting to create a text to use as a tag <h2> on the site. The idea is that the element continues as a text, I don’t want an image, because I want to keep the text semantic and…
-
10
votes1
answer194
viewsWhat is the difference between Media Query Pointer and Any-Pointer?
I was seeing a way to determine if the user access is done by a Desktop, usually having a mouse as an interaction device. Or if the user is accessing via a mobile device, usually without the mouse…
-
9
votes1
answer84
viewsHow to use "and" on CSS3 selectors?
I am trying to select only inputs whose class starts with "btn_" and which also have type="button". Example: input[type="button"] **&&** [class^="btn_"] It is possible to do this?…
-
9
votes1
answer619
viewsCalculate the number of elements with CSS
I’m making a numbered list of regressive counters using the counter-reset. Currently I put the number of items in the list manually: .faq { counter-reset:my-counter 2; } .faq dt { counter-increment:…
-
9
votes3
answers1750
viewsSmooth element animation swing via CSS Transform
The concept being sought is the continuous motion on the X axis between a value and its negative representation: So far, this concept has a flaw, the animation is performed from 0 degrees to the…
-
9
votes1
answer5066
viewshow to use last-Child for the penultimate as well?
I want to make a selection with css for last and penultimate item. I know I can use the dial last-child to the last, but the penultimate? how do I?
-
9
votes2
answers211
views -
9
votes3
answers2563
viewsIs it possible to apply sound effects to Hover or click css?
Can you transmit a sound effect by touching the mouse to an object, text, etc.? wanted that when you hover over some object with effect 'Hover' that a sound effect, being any type of sound that…
-
9
votes1
answer205
viewsHow 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:…
-
9
votes2
answers687
viewsHow 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…
-
9
votes1
answer390
viewsHow does CSS media query prefers-color-Scheme work?
From what I understand, it can be used to apply different styles according to user preferences. .light, .dark { display: none; } @media (prefers-color-scheme: dark) { .dark { display: block; } }…
-
9
votes1
answer181
viewsCSS writing methodology using : in class name ( Tailwind CSS )
I know there are a multitude of CSS frameworks (Bootstrap, Materialize, Skeleton, Bulma, Foundation), as well as a multitude of methodologies for writing CSS (BEM, DRY, ITCSS, OOCSS) But I was doing…
-
8
votes2
answers570
viewsHandle 1-pixel edge to avoid double edge (1+1 pixels) with side-by-side elements
I have a grid created with a list ul whose internal elements to li contains a border. The idea is that when the elements are side by side the edges are manipulated so that only a single stroke with…
-
8
votes4
answers3248
viewsHow to implement a textarea responsibly?
I want to use a <textarea>, but instead of using rows="4" cols="100", wanted to wear something like this: style="width: 80%" so that the layout is responsive. But since this does not work, IE,…
-
8
votes4
answers178
viewsWhy do my webfonts only work with Chrome?
I’m creating a website through a Child Theme Bootstrap-based Shoestrap. When I use webfonts they only work in Chrome. What I’m doing wrong? This is my CSS @font-face { font-family:…
-
8
votes2
answers278
viewsHow to remove bug from antialising lines generated in Firefox and IE?
I’m creating a border on my website, with background image. Everything works perfectly in Chrome, but in Firefox and IE appear some unwanted lines. I have noticed that they are present in the CSS3…
-
8
votes4
answers47612
viewsPin the footer of an html page and follow the page content
I need to pin the tag footer at the end of the html page, but when the content exceeds the page by tag footer should follow the content and not be fixed. See the CSS code is the HTML code I’m using…
-
8
votes2
answers18126
viewsOpen DIV after clicking a Link Button
I would like to know how to create, whether in CSS3, Javascript or Jquery, a button that, when clicking it, is revealed a DIV on it, and opens a new page with target _Blank. I’ve done a lot of…
-
8
votes1
answer291
viewsHow to apply ! Important to a property with multiple values
I’m having some difficulties with the precedence of CSS selectors to create a dynamic background (image transition.) in the first/div section presented on the site. I currently have the following…
-
8
votes2
answers1988
viewsCSS Reset or Normalize?
I heard about the CSS reset and I am also aware of the Normalize CSS which is a kind of reset for browsers to render basic CSS in a standardized way. Looking for the best solution in CSS, I…
-
8
votes0
answers263
viewsDevelopment that shows different types of calculations
I need help to assemble a page, program or application that does the following topics of mathematical fundamentals and shows the calculations that the program did. Transposition of Object Rotation…
-
8
votes1
answer400
viewsIn Sass what is the difference between a mixin and a placeholder?
The two have the same end result, but do not know which is the correct or which has better performance example: %borda($circunferencia: 10px) { -webkit-border-radius: $circunferencia; border-radius:…
-
8
votes2
answers314
viewsIs there any difference between clip and overflow property?
Studying on the property clip I came across the following statement: The estate clip works in a similar way to overflow with some differences. It gave me some doubts: This statement is true? What…
-
8
votes2
answers5104
viewsGood CSS practices for responsive Height. Is it armengue or not?
I made this code that leaves the height responsive, it adjusts according to the size of the viewport. (Rotate the snippet and resize the screen). whereas the html and the body have a height: 100%, I…
-
8
votes3
answers324
viewsWhy the two points twice?
p::after What’s the 2 points twice (::)?
-
8
votes1
answer720
viewsHow to customize emojis (Unicode) of a page?
On Windows operating system while using emojis the source used by browsers usually is the Segoe UI Emoji Note: in Firefox it has its own "emoji system", I believe it uses the Twemoji Mozilla: -…
-
8
votes1
answer162
viewsAnimations in high quality
We all know that animations on the web are a little bit eye friendly, when opening a side menu, whether in mobile or in desktop, you can only see part of your drive, giving the impression of a…
-
8
votes4
answers1814
views -
8
votes3
answers1297
viewsHow 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…
-
8
votes5
answers2803
viewsHow to make CSS a paragraph with Capitular letter (Drop Caps)
I would like to style only the first letter of each paragraph of my text, but I don’t want to have to separate that letter with a <span>, because I want to keep the correct semantics of the…
-
8
votes2
answers666
viewsOnly with CSS is there any way to make a "Toast"? An element that goes up and then click to close it?
In mobile there is a very common component that is known as "Toast", but I kept thinking about how to adapt it only with HTML and CSS Is there any way to do something like this "component" above…
-
8
votes2
answers174
viewsHow to do with CSS Downloader bar with animated background?
I saw this element that actually works as a "Loader" while the image is loading etc. And I tried to replicate it. Not the dynamics to function as a Loader, but yes this effect of the passing lines…
-
7
votes2
answers664
viewsHow to effect "cascade" with Javascript / jQuery?
Imagine I have a list of 20 blocks <li>, and that when the page loads, each of them should be shown within milliseconds of each other (this would be done with CSS3, so the code would only have…
-
7
votes1
answer642
viewsRelative sidebar in responsive layout
Solved, look at my answer * I asked this question in the gringas, but I don’t think I could express myself well there. Ask there: https://stackoverflow.com/questions/25481613/side-menu-align I have…
-
7
votes5
answers5323
viewsHow to center a div with position:Fixed?
I wonder if it is possible to centralize a div with the position:fixed ? Currently I tried to centralize using the margin:0 auto but it didn’t work... unfortunately as the width of my div Fixed will…
-
7
votes4
answers1357
viewsMargin in percentage is relative to what?
I’m currently seeing a youtube video on how to create a responsive website. It, at a certain moment (minute 24.55), establishes the margin of an image in percentage, instead of using normal pixels.…
-
7
votes1
answer3635
viewsHas Marquee been discontinued in HTML5?
If yes, what the tag that I can use to enjoy its functions? How can I limit the beginning and its end, for example: When using the tag Marquee, in the transition of images or texts there is always a…
-
7
votes1
answer2355
viewsFloating banner sidebar with Jquery accompanies scroll
is the following.. i have a floating banner on my blog using the following JS $(function(){ var jElement = $('.element'); $(window).scroll(function(){ if ( $(this).scrollTop() > 2000 ){…
-
7
votes2
answers2249
viewsWhat is the purpose of the pseudo-elements "::before" and "::after"?
I find many codes that use these pseudo-elements and I "fly" when I see them. The few tutorials I found on the Internet did not explain clearly and I was left with more doubts. After all, what is…
-
7
votes1
answer234
viewsMy CSS file is very large and it is difficult to maintain readability
My CSS File is close to 10,000 lines. It’s getting too complicated to maintain this file. in its Development version the file "weighs" 170kb and in its minified version, "only" 128kb Some points to…
-
7
votes3
answers212
viewsWhat Does This CSS Code Do ?
This is looking at some snippets of code on the Internet for a deeper learning of CSS, and I saw this code contained in a menu and I would like to know its functionality. .nav:before, .nav:after {…
-
7
votes3
answers1368
viewsHow to make a burger menu open from right to left?
I have a menu hamburguer which opens from left to right however, I would like it to open backwards, from right to left, as I do this? Next down my code: /* * Open the drawer when the menu ison is…
-
7
votes2
answers1311
viewsWhat is the "Pointer-Events" property for?
I was researching a way to style the little arrow <select /> and came across a solution that used a <label> with the value pointer-events: none. I wonder what that’s for pointer-events…
css3asked 7 years, 3 months ago Wallace Maxters 102,340 -
7
votes2
answers936
viewsWhat is the @media selector in CSS for?
I’d like to understand what the dial is for @media in CSS, as I have found in several codes and wanted to know if you have a specialty.
-
7
votes1
answer132
viewsHow to prevent pseudo-element (:before or ::after) within a <a> tag from being clickable?
Is there any way to prevent pseudo-element ::after or ::before one-link <a> become part of the link itself? My idea was to use one ::after in a link tag <a>, that ::after would be used…
-
7
votes1
answer570
viewsHow to prevent an Input Required from starting with the CSS style :invalid
When I have a input required that has some CSS style when it is :invalid, even before the user interacts with the input it is already stylized as invalid. How can I avoid this? Take the example:…
-
7
votes1
answer1825
viewsIs there any way to bend a text with CSS or leave the text curved in a row?
Is there any way to put a text in this format without using an image? Or I’d like to do a kind of curved text, but I couldn’t do it. The idea would be to do something close to this image, but only…
-
7
votes1
answer399
viewsHow do you make Scroll center on the elements inside the container?
Imagine that I have an image gallery that is inside a container. But each image in the gallery has a size according to the image: What I’d like to do is a snap, so that at the time of scroll at a…
-
7
votes2
answers672
viewsHow to make a reflected text with CSS ? (like a mirrored text)
I would like to make a reflected text effect or mirrored text effect with CSS only Like this picture: Does anyone have any hints, or knows if it is possible to make this effect mirrored only with…
-
7
votes1
answer481
viewsIn 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…