css3

  1. L

    Move last <li> element to bottom of container with the rest centered

    I'm trying to get my menu centered using flexbox centering in the middle of the bar while the last element is pushed to the bottom of the container. Here is my JSfiddle. I've tried with align-self flex-end with no success and li:last-child { margin-top: auto; } That aligns my the last...
  2. I

    How to scale <div> text font size dependent on number of characters?

    I look to make a simple html + css (js if requires) with 2 div blocks of 1000px each with the parent container of 3000px. <div class="blocks"> <div class="block-a">text 1</div> <div class="block-b">text 2</div> </div> I need the div.blocks to be 3000px width and height 1000px; I need...
  3. M

    Extra space after grid cell, don't know where it is comming from

    I'm building a sample project, I have created a grid container but soon after first cell (header), it is adding twice gutter as for other rows. Here is css .container { background-color:#fff; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: [full-start] minmax(6rem, 1fr)...
  4. N

    Vertical Linear Gradient

    I am trying to get a vertical effect for a sidebar on a page. I have tried the deg option but it still shows a horizontal line .sidebar { position: relative; display: inline-block; padding: 15px 25px; background-image: linear-gradient(90deg, #1559EC, #1559EC); color: #fff...
  5. A

    Background-image with a text

    My goal is to get a result like this: For now, I would like the text to be in the background image. I think my problem is perhaps in my blocks HTML ? Here is an overview .background_grey { height: 70px; width: 100%; margin-top: 0px; position: relative; } .page_title {...
  6. K

    Loại bỏ outline trên :active & :focus nhưng chỉ hoạt động trên :focus

    Mình sử dụng datatable từ fluent kit và pagination, khi click ( :active ) được đánh dấu bằng: box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); Mình muốn nó biến mất, nhưng chỉ khi được click. Mình muốn hiệu ứng chỉ làm việc cho :focus thực hiện với bàn phím, một phím TAB. Việc này có thể được bằng...
Top