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
-
2
votes2
answers77
viewsOpacity only in li and not in span
I have the following code HTML: <li class="item produtoDesabilitado" id="1028" style="border: 2px solid rgb(255, 255, 255) !important; height: 346px; padding-bottom: 22px;"> <div…
-
2
votes2
answers681
viewsExchange contents of a div for an html file
I am making a simple portfolio that will not need any framework as angular or React, what I would like and do something so that I could create separate html files and a main just by swapping the…
-
2
votes1
answer131
viewsFooter does not follow site layout and is not responsive
Everybody, good afternoon, everybody. I’m having difficulty making the footer responsive, it does not follow the page. Can you help through this code I made? (I tried to implement some tips I found…
-
2
votes3
answers198
viewsCSS Color beyond element size
I’m building a layout using the framework Bulma.. So far it’s as follows. My question is: How to do with CSS all my div side get painted? As in the image above, I want to paint the white space that…
-
2
votes3
answers320
viewsRadio alignment with image
I’m trying to center a radio item - a selection "ball" with an image. But I’ve tried several resources using CSS and I’m not getting it. You know what feature I can use to achieve this alignment?…
-
2
votes1
answer26
viewsSynchronize the animation of the elements when inserting into the DOM
It is possible to insert an animated element in the DOM synchronized? i.e., when inserting the current state is maintained and not reset as in the example below... function add() { let ctn =…
-
2
votes1
answer532
viewsProblem with background-image accessing from google browser Chrome on mobile
I’m having problem with my background image on my page but only accessing from mobile by Chrome or mobile default browser, Mozilla Firefox phone works perfectly. body{ background-image:…
-
2
votes1
answer1062
viewsHow to put responsive menu to overwrite
Hello, how do I put this responsive menu to appear in front? <header class="box-header"> <div class="box-topo"> <a href="<?php echo base_url();…
-
2
votes1
answer85
viewsPadding reducing the image
I have an image with a background worked, in this image I’m giving padding equal 140px, but instead of the image increase the padding, and consequently, get a bigger box, the image is reducing,…
-
2
votes2
answers124
viewsli’s up and down one after one
So I have this ul HTML <div class="atividades"> <ul> <li">Agência Funerária</li> <li>Funerais</li> <li>Cremações</li>…
-
2
votes2
answers3109
viewsCenter text in header
Hello, everyone. I created a header with 100% screen size (independent of screen size) like this: header { background-image: url('img/background.jpg'); height: 100vh; width: 100%; } <header>…
-
2
votes1
answer122
viewsObfuscate part of the background-image, and make other parts clear
I’m trying to reproduce this "example" of Dribble, however I’m not getting it. My current progress is this (using SCSS), however as can be verified I duplicated the background to achieve this…
-
2
votes1
answer55
viewsCOLUMNS Distribution Problem in CSS3
I’m following the tutorial on w3school, he is inserting the items, one below the other and not on the side (inline) ! According to my code it should be on each other’s side: CSS * { box-sizing:…
-
2
votes1
answer1255
viewsHow to remove the row that separates the columns in an html table?
I would like to know how I can remove the row separating the columns from this table. table { font-family: url('../fonts/Lato-Regular.ttf'); border-collapse: collapse; border-radius: 4px; width:…
-
2
votes1
answer122
viewsSynchronization of 2 html/css animations
I need to make my burger menu that has an animation totally made by html and css is synchronized, IE, when I press on it both animations will happen... The code I’m using is this HTML <nav>…
-
2
votes1
answer925
viewsHow do I stop the video when I close Modal?
When I close the modal the video keeps playing, as I do for the video to stop when I close the modal? <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap…
-
2
votes1
answer137
viewsCss in all options except one
I am trying to apply a css to an option tag. In case I would like only the options that have value starting with 2 stay in blue, as the example below: $('.select-user option').each(function(){…
-
2
votes3
answers650
viewsChange the CSS Display property to ALL elements of a page and leave Block only for some?
I’m trying to make the impression of a bootstrap-modal which is called within a form with includebut I want to print ONLY the modal, can I do it using only CSS? See: Modal: <div class="modal…
-
2
votes1
answer19
viewsInformation exceeds the display location
I have 2 rectangles on the screen that serve for data to be displayed inside them. But when you have a lot of information, the data exceeds its size. I want to make sure that the data does not…
-
2
votes0
answers21
viewsClasses named with emoji characters
I was sailing in the web and suddenly I’m faced with it: Yes, it is a "named" class with emoji characters. I was curious and decided to perform some tests to see how it worked, after all, it’s not…
-
2
votes0
answers47
viewsPixel breaking creating false edge
I don’t know how to explain this situation. I created a tooltip using both CSS3 and HTML5 only. In normal size (100% zoom), on the left, the elements are blurred and it appears that there is an edge…
-
2
votes1
answer52
viewsHTML5/CSS3: How to fix an unordered list item at the end of all items
/* Nav retratil */ /*=================*/ #something, nav ul li, inputr, nav ul input:checked ~li label.abrir { display:none; } nav ul input:checked ~li, nav ul li.fixo, li.abrir { display: block; }…
-
2
votes3
answers54
viewsUse of property Nth:Child()
I would like to know whether it is possible to leave the colours consecutively BLUE, PINK and YELLOW, tried using Nth:Child but I did not quite understand how to do it, because it left in the…
-
2
votes1
answer221
viewsHow to apply a delay to the CSS display property in a change from None to flex without Javascript?
How do I get the CSS display property to switch from None to flex with a 1s delay without using Javascript for this? I have the following code: #botao-painel:checked ~ .painel { display: flex;…
-
2
votes0
answers115
viewsWhy use translateZ or translate3D in animations made with CSS? Hardware-accelerated animations in CSS?
Nowadays it is quite common to see even in the most simple animation effects websites made with CSS, both with transition as to @keyframes And one thing that has struck me is that several of these…
-
2
votes2
answers190
viewsHow to use a border image (or character) via CSS?
I have a tag <p> with text inside which I would like to use the key characters [ ] as an edge for this text. Code: .indicacoes { font-family: 'AmaticBold'; font-size: 40px; margin-top: 30px;…
-
2
votes1
answer71
viewsIn CSS what are Implicit or Explicit properties or attributes? What is the difference between an "Implicit Grid" and a "Explicit Grid"?
I’ve been hearing a lot about CSS Grid Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout The Grid Layout is built from the display:grid, and I have often heard the term…
-
2
votes1
answer825
viewsWhat are max-content and min-content width values and how do they work?
I recently came across these two values for the width of an element, however I did not understand how to use them and what they serve... That’s what the Mozilla documentation says, but I don’t get…
-
2
votes2
answers558
viewsHover effect on child element with CSS
I have the following code, which is the menu of my application: <div class="mainmenu-area" data-spy="affix" data-offset-top="100"> <div class="container"> <!--Logo--> <div…
-
2
votes2
answers674
viewsWith CSS is it possible to merge two Images?
I saw this and wondered if it would be possible to merge two images with CSS only. Is there any way to control this partial transparency of one image over the other, or of an image over a background…
-
2
votes1
answer28
viewsScale image and hide caption with jquery and css3
Talk personal, I have an image zoom problem and hide the caption itself, in the image’s Hover I increase its scale in css, already in jquery I hide the caption, but when scaling, the images next to…
-
2
votes1
answer3505
viewsHow to make a header with background image
I need to assemble a layout with the following structure. Where the blue part will be an image. <header class="header-bg"> <div class="logo"> <span>Logo</span> </div>…
-
2
votes2
answers957
viewsCards with smaller content breaking
I’m using Bootstrap 4 to assemble a page, and at the time of making cards they are getting bigger or smaller than the others, even if they use the same class col-sm-4. It’s breaking because their…
-
2
votes1
answer169
viewsLeave images together and responsive
I need to let the images meet one under the other, occupying half of the container and next to you the description of this image. She needs to stay that way. At the moment she’s like this But there…
-
2
votes1
answer433
views1 item on the left and two items on the right good bootstrap
I’m trying to get 1 item lined up on the left and 2 items lined up on the right with Bootstrap 4, tried to use flexbox but since there are 3 items in the middle and one at each end, I tried to make…
-
2
votes1
answer465
viewsAdjust span within link
I own a button and within it I own a tag i with an icon of font-awesome and within the i one span with the text (without the span the icon was above and the text below). What I need is a way to…
-
2
votes1
answer65
viewsHow do I access the brother element to open the side menu
When I was doing like this: * { margin: 0; padding: 0; } .fa-file-excel { color: green; background-color: #f9f9f9; } body { background-color: #f9f9f9; } header { height: 50px; width: 100%; position:…
-
2
votes1
answer625
viewsCSS gradient background works horizontally but not vertically
The replica of the code: https://codepen.io/utamo/pen/XoyzWN when applying on the body: background: linear-gradient(to right, #33ccff 0%, #ff99cc 100%); I have the following result but when…
-
2
votes1
answer351
viewsIs there a Javascript function to capture mouse click?
This is my first post and I have a question. I am working on a dropdown menu that acts based on user click. This way, when clicking on one of the menu items, it descends presenting more information,…
-
2
votes2
answers187
viewsCreate dynamic menu that adjusts the size of the div
Guys don’t know about css and would like to know how to create a menu that can have up to 5 options, so when I want to have only 4 options or 3 the menu width remains the same but div with the…
-
2
votes1
answer76
viewsLeave items next to the mobile with bootstrap 4
Need to leave the following items next to each other as is the desktop. As it is on the desktop Like this on mobile I need him to have the same behavior on mobile and desktop for these items.…
-
2
votes1
answer262
viewsHow to draw 3 CSS circles with 1 div
I would like to do 3 icones in CSS, but I don’t want to do with several div, div filhos, etc. I’d like something clean, like <div class="Status1"></div> <div…
-
2
votes1
answer88
viewsHow to remove fixed side banner from footer
Hello, I’m trying to make the side banner stop before standing over the footer as picture below, but I could not find a way to make this stay fixed on the side of the page and not stand over the…
-
2
votes1
answer196
viewsOverlay effect from bottom to top
how to make this effect stand out in this div by hiding as much as possible the bottom of the image, as if the div content_box had the background: #000 and was rising gently according to his height…
-
2
votes1
answer1259
viewsDIV side by side
How do I place the div gallery on the right side of the div description? HTML <!-- language: lang-html --> <div class="row"> <div class="col-md-10"> <div class="projeto">…
-
2
votes1
answer1761
viewsModify the style of a Checkbox by class [CSS]
I found in some blog a while ago a style for checkbox. It is an ethyl that was very satisfactory for some projects that I have done however, it modifies/stylizes all the checkboxes of the page. I…
-
2
votes3
answers140
viewsProblems with <Progress> tag stylization in CSS
I’m having trouble styling a tag <progress>. I can not change the internal color and the inner part comes out half "square", sometimes even exceeding the margin. How can I solve? On the left…
-
2
votes1
answer240
viewsSmooth animation of the lower div after removal of the upper div
Follows code below. Basically I wanted the div.div2 had a smoother 'climb': <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"…
-
2
votes1
answer125
viewsApply CSS using element class (JS)
[STUDY ONLY] When clicking a button, I need to make the function apply a width to the elements with the class "border_title_result". function spanSize(){ var div =…
-
2
votes1
answer36
viewsLoop that changes the Hue-Rotate
I was playing with a snippet I made just for fun and I came across a problem I can’t find a reason for your cause. Follow the snippet: var i = 0; setInterval(function() {…