How to Create a Squeezed Box Using Only CSS

How to create a squeezed box using only css

I would do it like below, using gradient coloration and an SVG filter:

.box {
   width:200px;
   height:250px;
   background:
     /*                   v-- adjust the 15% here */
     radial-gradient(50% 15% at top,   transparent 98.5%,lightblue) top,
     radial-gradient(50% 15% at bottom,transparent 98.5%,lightblue) bottom;
   background-size:100% 51%;
   background-repeat:no-repeat;
   filter: url('#goo');
}

<div class="box"></div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>                                  <!-- adjust the the 13 here --v         -->
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="13" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

How to make a snowboard (or squeezed rectangle) shaped div in css?

I like stuff like this as I always mess around to create things like this. So here is how I would do it. Using :before and :after we can create this shape, we use them to create a shape to sit on top of the div with the same colour as the background. This will make it look like the shape you want.

Make the :before and :after big and smaller to get the size you want (change the width and height).

div {  display: inline-block;  padding-top: 10px;  padding-bottom: 10px;  padding-left: 10px;  min-width: 200px;  border-radius: 20px;  background-color: red;  position: relative;}div:before,div:after {  content: "";  display: block;  width: 96%;  height: 20px;  border-radius: 50%;  background: #fff;  position: absolute;  margin: auto;}div:before {  top: -17px;  left: 0;  right: 0;}div:after {  bottom: -17px;  left: 0;  right: 0;}

<div>Board</div>

FlexBox Squeeze Elements Together

Add to your container align-content: flex-start;

.container {
  display: block;
  height: 300px;
  width: 500px;
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  border: solid;
  flex-wrap: wrap;
  overflow-y: auto;
}
.flex-1 {
  height: 100px;
  width: 100px;
  background-color: blue;
  border: solid;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
</div>
<br>
When there's a whole bunch it works correctly
<div class="container">
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
</div>

How to make height squeeze with css

the use of display: inline-block; on the ul.base is the cause.

when you use that it formats an element like it were inline (it only formats the actual content of the element like a block), so ul.base will have the usual 2-3px top and bottom "padding" that a normal inline element has. It's not really padding it's the leading vertical spacing i.e. it's what gives lines enough space to provide for the ascenders and descenders of letters like g, h, p, etc.

the use of it here is to make it seem like your ul is containing the floated child list elements. To make an element contain it's floated children there are other ways to do this, one way is, on ul.base

remove: display: inline-block
add: overflow: hidden;

[UPDATED] re the tabs.. sorry I didn't see them before I started

Here's the "float everything" solution to containing child floats as it applies to your code, with some other suggestions too

1. .menuContainer all it needs is position:relative; and the border-right rule
2. .navigationSecondary float it left with a width of 100%; (you can remove z-index it's not doing anything)
3. .wrapper float it left with a width of 100%, remove the height
4. ul.base doesn't actually need anything but remove the display-inline-block.. it's not containing the child lists but there's no effect involved, if you want to you can float it left with a 100% width too

[UPDATE 2]
I just copied this to a plain HTML document and I think that just changing the DOCTYPE to an HTML4 transitional one solves the problems with no changes to the code ?? (why that should change the display be I don't quite know! - but the use of "target=_parent" is "not allowed" in Strict Doctypes so that'll be why it's not validating)

I'll put it in JSBIN so others can try it out on various browsers

I changed it to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

jsbin (with original HTML5 doctype) is here http://jsbin.comhttp://jsbin.com/agihe5/2/ - shows gap

jsbin with changed Doctype - but no changes to CSS code - with flash video to show dropdowns are working is here : http://jsbin.com/inare6/2 - no gap!

jsbin with no changes to Doctype, suggested changes to code and the flash insert to show z-index working is here: http://jsbin.com/iriya4

with the latter, code changes are detailed in the source, they have moved to the bottom of the snapshot CSS

I've tested the changed Doctype version as working in IE7, IE8, FF3.6.15, Safari4 (Win) and Chrome

How to control the size of a box within a container without having it squeezed?

This is because your container div is using display: flex, so your components 'flex' depending on their contents and the other elements in the container.

You can fix it by either setting the min-width instead of width of the center div to 100px, or setting flex-shrink: 0; on the center class.

This:

.center {
  min-width: 100px;
  height: 100%;
}

or this:

.center {
  width: 100px;
  height: 100%;
  flex-shrink: 0;
}

More information on flex box: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

How to make HTML button look pressed in using css?

By creatively styling the :active or :focus pseudo classes using a box-shadow: inset ...;

Using the :active pseudo class:

button {  background: #ededed;  border: 1px solid #ccc;  padding: 10px 30px;  border-radius: 3px;  cursor: pointer;}
button:active {  background: #e5e5e5;  -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;     -moz-box-shadow: inset 0px 0px 5px #c1c1c1;          box-shadow: inset 0px 0px 5px #c1c1c1;   outline: none;}

<button>  Click me</button>

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex p-4">
  <img class="w-8 h-8 border flex-shrink-0 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
  <div class="flex-col">
    <div class="font-medium cursor-pointer hover:underline">Duncan Smith</div>
    <p class="flex-shrink-0 border-gray-300">apwijd pawid jpawid jpwai jdpwai jdpawi jdpaw idjpwa idjapwi jdpawi jdpiaw jdpawi jdpawi jdpawi jdpawi jdpawi jdpaiw jdpaiw jdpiawj dpiawj dpia wjdpiaw jdpia wjpdij awdpi</p>
  </div>
</div>