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
-
1
votes1
answer284
viewsButton with loading animation - Bootstrap v4.1.1
Segue Jsfiddle: https://jsfiddle.net/x3w4861v/3/ Follows code: .sk-cube-grid { width: 30px; height: 30px; margin: 16px auto; } .sk-cube-grid .sk-cube { width: 33%; height: 33%; background-color:…
css3asked 6 years, 4 months ago Matheus Miranda 5,375 -
1
votes1
answer30
viewsSelector 'not' does not work
I have a gray box with a low opacity and inside it a word, when applying the 'not' selector to the main 'div' to cancel the opacity of the word that is in a "p" tag surrounded by that 'div' the…
-
1
votes1
answer142
viewsBackground image in diagonal div clip-path
I managed to do so with solid color background .slide { width: 100%; height: 101px; background-color: #fff; background-size: cover; clip-path: polygon(50% 100%, 100% 0%, 0% 0%); } .slide_bg{…
-
1
votes1
answer1102
viewsShow image inside div
I have a div an image. You would need to display part of the image (centered, for example) and decrease the size of the div. If I overflow Hidden with a width of 50% in some div above the image, it…
-
1
votes0
answers25
viewsheader, side menu and footer on all pages
How to use the same footer, side menu and header on all pages of my site? For header and footer, I tried the following: <html> <head> <script…
-
1
votes1
answer800
viewsHow to place a gradient in front of two images that are background?
I tried to place the gradient in the header that is being the "container" of the images, but it just gets behind the images. I’ve tried using the z-index but without success. <body> <div…
-
1
votes1
answer209
viewsAnimation of loading when sending form
I put the plugin Pace Master on my page that makes a bar click at the top while the page is loading, like the one on Youtube, however, I want to make that same bar click by sending the form that…
-
1
votes1
answer434
viewsFloat elements with CSS Grid
Good morning friends. I have the following problem: I need to make the elements float with CSS Grid without having a specific Row defined. For example, in the following image, there should not be…
-
1
votes0
answers239
viewsInsert google search script into the search bar I did
I use my search bar on my site and I will use the google search system, only I didn’t necessarily want to use the bar that google generates, I wanted to use mine, someone can help me? (function() {…
-
1
votes1
answer64
viewsExecution of Hover for social network
How to make so that when the execution of the Hover occurs in the partner networks it does not move all the partner networks, only the one with the mouse and the others stay fixed? They’re all…
-
1
votes2
answers318
views"fixed" footer at the bottom of the page, but after the content
I currently have the following code: html, body, .content{ height:100%; } nav { height: 15%; background-color: red; } footer { position: fixed; bottom: 0; width: 100%; background-color:…
-
1
votes2
answers82
viewsPositioning text when using -Webkit-Transition
I’m trying to make a bar with text and image appear when clicking a button (as if it were a notification), this bar will grow until it reaches maximum size and revealing the content, but while the…
-
1
votes1
answer119
viewsText larger than the button
I got a problem I can’t seem to solve. I made an accordion, as in the image below using bootstra 4, the desktop version of it looks like this: But the cell phone version the text gets bigger and…
-
1
votes1
answer439
viewsHow to take the first and last class Parent of a div contained within a TD via CSS/SASS?
I would like to know how to get the first and last Rent of a class set (.date) that is contained in a div within an element . Following is an example of a code tree: <table> <tr>…
-
1
votes1
answer69
viewsManipulating CSS Gradient
I have a gradient to make, with a 5-color split and in the range of each, it has to be exactly divided. Follow image of what I need to do: What I managed to do with CSS: .area{ width: 100%; padding:…
-
1
votes1
answer627
viewsHow do I center links from a navbar viewed on bootstrap 3 mobiles?
Next, I’m using the version of bootstrap 3.7.2 to make a navbar and I set it so that when "collapsed", that is, when we view on mobile devices, it gets the toggle button on the right and the logo is…
-
1
votes1
answer122
viewsThe target of CSS selectors with pseudo-element ::before
Hello, I’m studying CSS3 and, in a given tutorial, I analyzed it all, and did not understand the point where the ::before was used together with the checkbox, in which the property was added…
-
1
votes1
answer51
viewsStyling an element that is not a child of the element used in the selector
I have the code below where I want to, by clicking on the toogle (which is a input[type=checkbox]), another element, which is a class of another div, below, be stylized. In the following code, I…
-
1
votes1
answer169
viewsCSS defaults when printing
My page looks like this: <div class="container"> <div class="row"> <div class="col-sm-12 col-md-12" style="border-style:solid;"> <div style="text-align:center;" class="col-sm-12…
-
1
votes1
answer149
viewsPosition Absolute does not occupy 100% of the father
Why does a div with Absolute position not occupy 100% of the father’s width if it fits, why breaks the line before? See example below: .segura{ width: 200px; height: 200px; display: block; position:…
-
1
votes1
answer39
viewsPosition elements on the screen
How to position elements without breaking I have a screen with some inputs, am using bootstrap and defining the sizes of the fields, but still they are broken as in the image below. I need them to…
-
1
votes1
answer73
viewsHow to make CSS a Linear-Gradient that has PX values and % at the same time?
I have a situation which is this, I have a linear-gradiente in one element, but I want the first and last part of that gradient to have 100px of one color, and the middle of it to always be 100%…
-
1
votes1
answer519
viewsCSS Effect: Floating label in Form does not work without required attribute
I’m using the floating effect on a form to move the label when the user clicks input or select. The problem is that the resource only works if the attribute required is present. This is a problem…
-
1
votes1
answer86
viewsChild elements receiving opacity even with use of rgba
How can I apply a different opacity to a child element. In the example below is working correctly, but the same code does not work with: Chrome Version 71.0.3578.80 Firefox Quantum 63.0. body {…
-
1
votes1
answer70
viewsHow to take the white background when selecting logins saved on the login page
Good night, you guys! I’ve got a question I can’t solve on my own. On my login screen, when I type in the login, the input background continues the way I’ve styled it. But when I select a saved…
-
1
votes1
answer277
viewsCSS - Position: relative; VS Position: Absolute;
Good evening guys I’m having a problem in a matter of leaving my site Responsive. What happens is the following... I have my menu, which contains 2 LI "ADD VALUE" , "ROUTINE". And I want to make…
-
1
votes1
answer281
viewsPosition font-awesome next to text
I have some arrows that need to be positioned next to the text, but not next to it. Next to it like this. But I don’t know how to position them there, at the moment I’m putting them inside the p and…
-
1
votes3
answers64
viewsProblem with animation in the Menu
I’m trying to create a simple menu, with an animation that when clicking on the icon the menu options appears, if click on the icons again they disappear. I only got so far, that the options appear…
-
1
votes1
answer129
viewsMake the tooltip visible without being in the Hover
I want the tooltip appear as soon as you load the page, other than by the effect of hover. [class*="tooltip"]{ position:relative; text-decoration:none; }…
-
1
votes1
answer1786
viewsWhy does my border-image not respect the border-Radius?
I’m wearing a linear-gradient as border-imagem in an element, but thus the edge does not respect the border-radius that I placed and does not realize the curvature in the vertices. I’d like it to…
-
1
votes1
answer366
viewsStyling Slides from a slide
Talks personally I’m about to develop this screen with html and css and I needed to know if it is possible to create a slide with these Dots or to do otherwise the idea is to click on these links…
-
1
votes1
answer255
viewsDisplay Flex property does not work on Firefox
I am developing a website and using a lot of display: flex. The problem is that I went to open the site in the Firefox browser and realized that it does not apply this property. I even looked in…
-
1
votes1
answer46
viewsHow to fix a CSS animation error
I’m developing a website and created some pits. The problem is that when I roll the page up and it’s only half the box box appearing, if I hover over the first and last element, the animation Buga…
-
1
votes1
answer632
viewsJquery animation to change text of a div
I have a responsive layout and one of the elements of a ROW is a text/paragraph that I want you to exchange every 5 seconds for another paragraph, for example. I have the following function to move…
-
1
votes2
answers1289
viewsHow to change the color of an element?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PERGUNTA: 1</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet"…
-
1
votes2
answers51
viewsimages do not side by side with display-block, vertical align and float(CSS) just below each other
<!--Painel de produtos--> <div class="container paineis"> <section class="painel novidades"> <h2>Novidades</h2> <ol> <li> <a href="produto1.html">…
-
1
votes2
answers89
viewsLi s leaving UL
HTML and CSS: ul.ulVertical { border: .1px rgb(0, 0, 0) solid; list-style: none; height: 100px; } ul.ulVertical li { display: inline-block; border-top: .1px rgb(0, 0, 0) solid; transform:…
-
1
votes2
answers54
viewsVertical distance between LI’s
ul.ulVertical { border: .1px rgb(0, 0, 0) solid; list-style: none; width: 800px; height: 100px; } ul.ulVertical li { display: inline-block; width: 100px; height: 30px; text-align: center;…
-
1
votes2
answers104
viewsCenter span in div using flexbox
I’m using positions to use the top and the left but it still doesn’t look cool. CSS: span.vertical { writing-mode: vertical-lr; transform: rotate(180deg); height: 200px; } span.comum { width: 100%;…
-
1
votes3
answers812
viewsHow to style results made with Javascript?
I decided to make an easy program that involved html, css and javascript. This program multiplies and divides 2 random numbers. What I’m in doubt about is how to show the result with the same CSS.…
-
1
votes1
answer35
viewsHow to center content with dynamic CSS dimensions?
I am using Bootstrap 4, which is based on flexbox(dynamic properties/dimensions). I created a Datapicker, with an input and icon on the right side. <div class="col-md-3"> <div…
-
1
votes1
answer73
viewsfilter Blur affecting other div
how do pro filter only affect the div of the background, in case the wrapper and also how to remove that edge that he puts? the goal is to only obfuscate the image ta so #wrapper { position:…
-
1
votes2
answers40
viewsLogo is not positioned correctly on the mobile
I am developing a site and I came across an error in which the logo is not displayed correctly when the site is opened on mobile, even in Responsive Design Mode Firefox it is displayed the way I…
-
1
votes1
answer136
viewsHow to make a div be positioned as a block in the middle of another div?
At first, the question may sound strange, but my problem is this:: So far, I own the screen below: But what I want to do is create a block, like the one of the structure circled below, like a blog…
-
1
votes4
answers104
viewsHover does not work
.csgo-player { display: flex; align-items: center; justify-content: center; position: relative; } .csgo-player-link { width: 40%; position: relative; } .csgo-player-info { padding: 10px; height:…
-
1
votes2
answers2285
viewsHow to change the style of an "input" field of type "range" using only CSS (and maybe some webkits)?
I want to modify a field’s value indicator <input type="range"/>. I want to change the format and color of this indicator, as shown in the following images. This is the field I want to modify.…
-
1
votes1
answer34
viewsCollapse in Boostrap 4 is not opening
body { font: 400 20px Times New Roman, Arial, Arial Nova Light, sans-serif; line-height: 1.8; color: #818181; } h4 { font-size: 19px; line-height: 1.375em; color: #303030; font-weight: 400;…
-
1
votes1
answer54
viewsHow to redo this layout?
I’m studying for a booklet from Caelum and we have to redo this site of Mirror Fashion. But I did everything as recommended, I even copied the code, but I can’t do this part: When I try it comes out…
-
1
votes4
answers272
viewsLeave image next to text
I need to leave an image side by side with a text for a college job, I can only do using CSS, I’ll leave the image of how it has to be and the codes to help, I’ve tried everything but I can’t, in…
-
1
votes1
answer172
viewsDivs do not appear with display: block and rollover effect does not work
$(document).ready(function(){ $("img.menuAdmin").click(function(){ $(this).css("display","none"); $("div.menuAdmin div.dropdown").css("display","block"); $("div.menuAdmin div.dropdown…